/** Shopify CDN: Minification failed

Line 111:10 Unexpected "{"
Line 111:19 Expected ":"

**/

  /* top shelf */
.sss-lib__topshelf{
  margin-top:22px;
  padding:14px 14px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.sss-lib__topshelfHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:20px;
}
.sss-lib__topshelfKicker{
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);

  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;

  background: #0b0b0b; /* same as section background */
  padding: 4px 10px;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;

  color: rgba(255,255,255,.75);

  z-index: 4;
}
.sss-lib__topshelfRow{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.sss-lib__topshelfRow::-webkit-scrollbar{ height:8px; }
.sss-lib__topshelfRow::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.sss-lib__topshelfItem{
  flex:0 0 150px;
  scroll-snap-align:start;
}
.sss-lib__topshelfCoverWrap{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.sss-lib__topshelfCover{
  width:100%;
  aspect-ratio:2/3;
  object-fit: cover;
object-position: center top;
  display:block;
  filter:brightness(.95);
  transition:transform .22s ease, filter .22s ease;
}

.sss-lib__topshelfNote{ font-size:11px; line-height:1.4; }
.sss-lib__topshelfSpice{ font-size:12px; }

.sss-lib__topshelfUnder{ margin-top:8px; }
.sss-lib__topshelfName{ font-size:12px; line-height:1.3; }
.sss-lib__topshelfAuthor{ margin-top:3px; font-size:11px; color:rgba(246,246,246,.6); }

@media(max-width:640px){
  .sss-lib__topshelfItem{ flex-basis:140px; }
}

.sss-lib{
  background:#0b0b0b;
  color:#f6f6f6;
  padding:90px 16px 40px;
  margin-top:-30px;
  font-family:"Libre Baskerville", Georgia, serif;
  position:relative;
overflow:visible;
}
.sss-lib:before{
  content:"";
  position:absolute; inset:-40px; pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 90px, rgba(255,255,255,.08), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 26px);
  opacity:.55;
}
.sss-lib__wrap{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
#sss-lib-{{ section.id }} .sss-lib__wrap{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.sss-lib__kicker{
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c8c8c8;
}
.sss-lib__title{
  margin:4px 0 0;
  font-size:30px;
}
.sss-lib__sub{
  margin:10px 0 0;
  font-size:13px;
  color:rgba(246,246,246,.72);
  line-height:1.6;
  max-width:70ch;
}

.sss-lib__grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(auto-fill, 150px);
  gap:22px;
  justify-content:start;
}

/* book button */
.sss-lib__book{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  position:relative;
  overflow:visible;   /* THIS is key */
}
.sss-lib__book[disabled]{
  cursor:not-allowed;
  opacity:.65;
}

.sss-lib__coverWrap{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  display:flex;
align-items:center;
justify-content:center;
background:#0e0e0e;
}
.sss-lib__cover{
  width:100%;
  aspect-ratio:2/3;
  object-fit:contain;
  background:#111;
}
.sss-lib__cover--empty{
  aspect-ratio:2/3;
  background:rgba(255,255,255,.06);
}

/* hover overlay */
.sss-lib__hover{
  position:absolute;
  inset:0;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.4) 60%, transparent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  z-index:2;
  pointer-events:none;
}
.sss-lib__book:hover .sss-lib__hover{
  opacity:1;
  transform:translateY(0);
}
.sss-lib__book:hover .sss-lib__cover{
  transform:scale(1.04);
  filter:brightness(1);
}

.sss-lib__why{ font-size:12px; line-height:1.45; }
.sss-lib__spice{ font-size:12px; }
.sss-lib__tropes{ font-size:11px; color:rgba(246,246,246,.75); line-height:1.35; }

.sss-lib__under{ margin-top:10px; }
.sss-lib__name{ font-size:12px; line-height:1.35; }
.sss-lib__author{ margin-top:3px; font-size:11px; color:rgba(246,246,246,.6); }

.sss-lib__finder{
  margin:44px 0 52px;
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.03);
  box-shadow:0 22px 54px rgba(0,0,0,.22);
}

.sss-lib__finderHead{
  max-width:68rem;
}

.sss-lib__finderKicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(246,246,246,.58);
}

.sss-lib__finderTitle{
  margin:10px 0 0;
  font-size:28px;
  text-transform:lowercase;
}

.sss-lib__finderSub{
  margin-top:10px;
  font-size:14px;
  line-height:1.7;
  color:rgba(246,246,246,.72);
}

.sss-lib__finderGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:24px;
}

.sss-lib__finderField{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12px;
  line-height:1.5;
  color:rgba(246,246,246,.84);
  transition:opacity .25s ease, filter .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease;
}

.sss-lib__finderField span{
  display:block;
}

.sss-lib__finderField.is-locked{
  opacity:.38;
  filter:blur(3px);
  pointer-events:none;
}

.sss-lib__finderField.is-hidden{
  opacity:0;
  max-height:0;
  margin:0;
  overflow:hidden;
  transform:translateY(6px);
  pointer-events:none;
}

.sss-lib__finderField select{
  width:100%;
  min-height:4.8rem;
  padding:0 1.4rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:#111;
  color:#f6f6f6;
  font:inherit;
  appearance:none;
}

.sss-lib__finderField select:focus{
  outline:none;
  border-color:#ff8ac7;
  box-shadow:0 0 0 3px rgba(255,138,199,.14);
}

.sss-lib__finderActions{
  margin-top:18px;
}

.sss-lib__finderBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:4.6rem;
  padding:0 1.8rem;
  border-radius:999px;
  border:1px solid #ff8ac7;
  background:#ff8ac7;
  color:#111;
  cursor:pointer;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.sss-lib__finderBtn:disabled{
  background:transparent;
  color:rgba(246,246,246,.56);
  border-color:rgba(255,255,255,.2);
  box-shadow:none;
  cursor:not-allowed;
}

.sss-lib__finderBtn.is-ready{
  background:#ff8ac7;
  color:#111;
  border-color:#ff8ac7;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.sss-lib__finderBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(0,0,0,.28);
}

.sss-lib__finderBtn:disabled:hover{
  transform:none;
  box-shadow:none;
}

.sss-lib__finderBtn--ghost{
  background:transparent;
  color:#f6f6f6;
  border-color:rgba(255,255,255,.22);
  box-shadow:none;
}

.sss-lib__finderBtn--ghost:hover{
  border-color:#ff8ac7;
  color:#ff8ac7;
  box-shadow:none;
}

.sss-lib__finderResult{
  margin-top:18px;
}

.sss-lib__finderResultCard{
  display:grid;
  grid-template-columns:140px minmax(0, 1fr);
  gap:18px;
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.22);
}

.sss-lib__finderCoverBtn{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.sss-lib__finderCover{
  width:100%;
  aspect-ratio:2/3;
  display:block;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
  object-fit:cover;
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}

.sss-lib__finderCoverBtn:hover .sss-lib__finderCover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(0,0,0,.34);
}

.sss-lib__finderResultBody{
  min-width:0;
}

.sss-lib__finderResultLabel{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
}

.sss-lib__finderResultTitle{
  margin-top:10px;
  font-size:26px;
  line-height:1.2;
  text-transform:lowercase;
}

.sss-lib__finderResultAuthor{
  margin-top:6px;
  font-size:14px;
  color:rgba(246,246,246,.72);
}

.sss-lib__finderResultMeta{
  margin-top:14px;
  font-size:12px;
  line-height:1.6;
  color:#ffb9da;
}

.sss-lib__finderResultWhy{
  margin-top:12px;
  font-size:14px;
  line-height:1.7;
  color:rgba(246,246,246,.82);
  max-width:64rem;
}

.sss-lib__finderResultActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.sss-lib__finderResultNote{
  margin-top:12px;
  font-size:12px;
  color:rgba(246,246,246,.64);
}

.sss-lib__book.is-mobile-hidden{
  display:none !important;
}

.sss-lib__showMoreWrap{
  display:none;
}

@media(max-width:749px){
  .sss-lib__showMoreWrap{
    display:flex;
    justify-content:center;
    margin-top:16px;
  }

  .sss-lib__showMoreBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:4.4rem;
    padding:0 1.8rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    color:#f6f6f6;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, background .2s ease;
  }

  .sss-lib__showMoreBtn:hover{
    transform:translateY(-1px);
    border-color:#ff8ac7;
    background:rgba(255,138,199,.08);
  }
}

/* modal */
.sss-lib__modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.sss-lib__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
}
.sss-lib__dialog{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:min(720px, calc(100% - 28px));
  border-radius:18px;
  border:1px solid rgba(246,246,246,.14);
  background:rgba(11,11,11,.96);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  padding:16px;
}
.sss-lib__x{
  position:absolute;
  top:10px; right:12px;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(246,246,246,.18);
  background:rgba(246,246,246,.06);
  color:#f6f6f6;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.sss-lib__mshare{
  position:absolute;
  top:10px;
  right:54px;
  width:34px;
  height:34px;
  padding:0;
  border-radius:999px;
  border:1px solid #e85a9b;
  background:#e85a9b;
  color:#f6f6f6;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:1.6rem;
  transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.sss-lib__mshare:hover{
  transform:translateY(-1px);
  border-color:#ff8ac7;
  background:#ff8ac7;
  color:#fff;
}

.sss-lib__mshareLabel{
  display:none;
}

.sss-lib__mhead{ padding-right:9.2rem; }
.sss-lib__mkicker{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.68);
}
.sss-lib__mtitle{
  margin-top:8px;
  font-size:18px;
  text-transform:lowercase;
}
.sss-lib__mauthor{
  margin-top:6px;
  font-size:12px;
  color:rgba(246,246,246,.65);
}

.sss-lib__mbody{
  margin-top:14px;
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:14px;
  align-items:start;
}
.sss-lib__mcoverWrap{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.sss-lib__mcover{
  width:100%;
  aspect-ratio:2/3;
  object-fit: cover;
object-position: center top;
  display:block;
}

.sss-lib__mcta{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sss-lib__mbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  background:#f6f6f6;
  color:#0b0b0b;
  border:1px solid #f6f6f6;
}
.sss-lib__mbtn--ghost{
  background:transparent;
  color:#f6f6f6;
  border:1px solid rgba(246,246,246,.28);
}
.sss-lib__mnote{
  margin-top:2px;
  font-size:12px;
  color:rgba(246,246,246,.72);
}

@media(max-width:640px){
  .sss-lib__grid{
    grid-template-columns:repeat(2, 150px);
    justify-content:center;
    gap:16px;
  }

  .sss-lib__finder{
    margin:32px 0 40px;
    padding:20px 16px;
    border-radius:18px;
  }

  .sss-lib__finderTitle{
    font-size:24px;
  }

  .sss-lib__finderGrid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .sss-lib__finderResultCard{
    grid-template-columns:1fr;
    padding:18px 16px;
  }

  .sss-lib__finderCoverBtn{
    max-width:160px;
  }

  .sss-lib__finderResultTitle{
    font-size:22px;
  }

  .sss-lib__mshare{
    right:54px;
  }

  .sss-lib__mbody{
    grid-template-columns:110px 1fr;
  }
}
/* mood shelves */

.sss-lib__moods{
  margin-top:70px;
}

.sss-lib__moodHead{
  margin-bottom:36px;
}

.sss-lib__moodKicker{
  margin-top:25px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.65);
}

.sss-lib__moodTitle{
  margin:10px 0 0;
  font-size:26px;
  font-weight:400;
  text-transform:lowercase;
}

.sss-lib__moodSub{
  margin-top:8px;
  font-size:13px;
  color:rgba(246,246,246,.6);
}

.sss-lib__shelf{
  margin-bottom:48px;
}

.sss-lib__shelfHead{
  margin-bottom:14px;
}

.sss-lib__shelfTitle{
  font-size:22px;
  text-transform:lowercase;
}

.sss-lib__shelfDesc{
  margin-top:8px;
  font-size:14px;
  color:rgba(246,246,246,.55);
}

.sss-lib__shelfRow{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}

.sss-lib__shelfRow::-webkit-scrollbar{
  height:8px;
}
.sss-lib__shelfRow::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

.sss-lib__book--mini{
  flex:0 0 150px;
  width:150px;
}

.sss-lib__book--mini .sss-lib__coverWrap{
  width:150px;
  height:225px; /* exact 2:3 ratio */
  display:flex;
  align-items:center;
  justify-content:center;
}

.sss-lib__book--mini .sss-lib__cover{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* full library intro */

.sss-lib__archiveHead{
  margin:70px 0 30px;
}

.sss-lib__archiveKicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.65);
}

.sss-lib__archiveTitle{
  margin:10px 0 0;
  font-size:26px;
  font-weight:400;
  text-transform:lowercase;
}

.sss-lib__archiveSub{
  margin-top:8px;
  font-size:13px;
  color:rgba(246,246,246,.6);
  max-width:60ch;
}
.sss-lib__mmeta{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sss-lib__mspice{
  font-size:13px;
}

.sss-lib__mtropes{
  font-size:12px;
  color:rgba(246,246,246,.75);
}


.sss-lib__mbtn--pink{
  background:#e85a9b; /* adjust if you have exact brand pink */
  border:1px solidrgb(255, 112, 176);
  color:#fff;
}

.sss-lib__mbtn--pink:hover{
  background:#d94c8e;
  border-color:#d94c8e;
}
.sss-lib__floatSpice{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.05em;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.sss-lib__mmini{
  font-size:13px;
  line-height:1.5;
  color:rgba(246,246,246,.85);
  margin-bottom:14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.sss-lib__topshelfCoverWrap .sss-lib__floatSpice{
  top:10px;
  right:10px;
  font-size:13px;
}
.sss-lib__topshelfItem:hover .sss-lib__topshelfCoverWrap{
  box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.sss-lib__topshelfTitle{
  position:absolute;
  top:-20px;
  left:24px;
}
.sss-lib__topshelf{
  position:relative;
  padding-top:25px;
}
.sss-lib__topshelfMonth{
  font-family:'Kaushan Script', cursive;
  font-size:38px;
  color:#ffffff;
  letter-spacing:.02em;
  line-height:1;
}
.sss-lib__topshelfHead{
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sss-lib__archiveGallery .sss-lib__floatSpice{
  background:rgba(0,0,0,.65);
  font-size:11px;
  padding:3px 7px;
}
/* series number badge */
.sss-lib__seriesBadge{
  position:absolute;
  top:8px;
  left:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#e85a9b;
  color:#fff;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  z-index:4;
}
/* series disclaimer */
/* series disclaimer under mood title */
.sss-lib__seriesDisclaimer{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  color:rgba(246,246,246,.75);
}

.sss-lib__seriesBadge--demo{
  position:static;
  width:30px;
  height:30px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.sss-lib__seriesText{
  line-height:1.4;
}
/* refined modal meta styling */

.sss-lib__mmeta{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.sss-lib__mtropes{
  font-style:italic;
  font-size:13px;
  color:rgba(246,246,246,.85);
  letter-spacing:.02em;
}

.sss-lib__mratings{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:rgba(246,246,246,.75);
}

.sss-lib__mratings div{
  font-weight:400; /* remove bold feel */
}

.sss-lib__mwhy{

  margin-top:18px;

  font-size:15px;
  line-height:1.65;

  font-style:italic;

  color:#ff8ac7;

  padding-left:16px;

  border-left:2px solid #ff8ac7;

  letter-spacing:.01em;

}

.sss-lib__mreread{
  font-style:italic;
  letter-spacing:.03em;
}
.sss-lib__classicBadge{
  position:absolute;
  bottom:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  z-index:4;
}
.sss-lib__shelf--classics{
  margin:30px 0 70px; /* reduced top spacing */
  padding:0;
  border:0;
  background:transparent;
}
.sss-lib__shelf--classics{
  text-align:center;
}

.sss-lib__shelf--classics .sss-lib__shelfRow{
  justify-content:center;
}
.sss-lib__shelf--classics .sss-lib__shelfTitle{
  font-size:34px;
  letter-spacing:.02em;
  margin-bottom:12px;
}

.sss-lib__shelf--classics .sss-lib__shelfDesc{
  font-size:14px;
  color:rgba(246,246,246,.6);
}
/* 👑 Bigger books in Society Canon */
.sss-lib__shelf--classics .sss-lib__book--mini{
  flex:0 0 180px;
  width:180px;
}

.sss-lib__shelf--classics .sss-lib__book--mini .sss-lib__coverWrap{
  width:180px;
  height:270px; /* 2:3 ratio */
}

.sss-lib__shelf--classics .sss-lib__book--mini .sss-lib__cover{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* 👑 Crown badge in archive */
.sss-lib__archiveClassic{
  position:absolute;
  bottom:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  z-index:5;
}
/* ======================================
   MONTHLY INTRO — LEFT ALIGNED
====================================== */

.sss-lib__monthlyIntro{
  margin:70px 0 40px;
  text-align:left;
}

.sss-lib__divider{
  width:100px;
  height:1px;
  margin:0 0 24px 0;
  background:rgba(255,255,255,.6);
}

.sss-lib__monthlyTitle{
  font-size:28px;
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:.02em;
}

.sss-lib__monthlySub{
  margin-top:6px;
  font-size:14px;
  color:rgba(246,246,246,.6);
}
/* ======================================
   BUILD YOUR OBSESSION RANKER
====================================== */

.sss-lib__ranker{
  margin:50px 0 30px;
}

.sss-lib__rankerTitle{
  font-size:20px;
  margin-bottom:24px;
  text-transform:lowercase;
}

.sss-lib__rankerControls{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}

.sss-lib__rankGroup{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:180px;
}

.sss-lib__rankGroup label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
}

.sss-lib__rankGroup input[type="range"]{
  width:100%;
}

.sss-lib__rankValue{
  font-size:13px;
  color:rgba(246,246,246,.8);
}
/* YEARNING TOGGLE */

.sss-lib__yearningToggle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.sss-lib__yearningToggle button{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#f6f6f6;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  text-transform:lowercase;
  cursor:pointer;
  transition:all .2s ease;
}

.sss-lib__yearningToggle button.active{
  background:#f6f6f6;
  color:#0b0b0b;
}
.sss-lib__yearningToggle button[data-yearning="1"].active{
  background:#c4e6ff;
  color:#0b0b0b;
}

.sss-lib__yearningToggle button[data-yearning="2"].active{
  background:#ffd4f0;
  color:#0b0b0b;
}

.sss-lib__yearningToggle button[data-yearning="3"].active{
  background:#ff6b81;
  color:#fff;
}
/* ======================================
   MODAL YEARNING COLOR TAG
====================================== */

.sss-lib__yearningLabel{
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  text-transform:lowercase;
  display:inline-block;
  margin-left:6px;
}

/* soft */
.sss-lib__yearningLabel--1{
  background:#c4e6ff;
  color:#0b0b0b;
}

/* intrigued */
.sss-lib__yearningLabel--2{
  background:#ffd4f0;
  color:#0b0b0b;
}

/* feral */
.sss-lib__yearningLabel--3{
  background:#ff6b81;
  color:#fff;
}
@media(max-width:640px){

  .sss-lib__shelfRow{
    margin-bottom:40px;
  }

}
.sss-lib__searchWrap--obsession{
  margin:50px 0 35px;
}
.sss-lib__searchInput{
  width:100%;
  height:52px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid #2a2a2a;
  background:#0e0e0e;
  color:#f6f6f6;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:15px;
  letter-spacing:.08em;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
}

.sss-lib__searchInput:focus{
  border-color:#ff8ac7;
  box-shadow:0 0 0 2px rgba(255,138,199,.15);
}
.sss-lib__coverWrap,
.sss-lib__topshelfCoverWrap{
  position:relative;
}

.sss-lib__heart{
  position:absolute;
  bottom:8px;
  left:8px;

  width:30px;
  height:30px;
  border-radius:50%;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  color:#fff;

  box-shadow:0 6px 16px rgba(0,0,0,.45);

  z-index:6;
  cursor:pointer;
  transition:all .18s ease;
}

.sss-lib__heart:hover{
  transform:translateY(-2px) scale(1.05);
}

.sss-lib__heart.is-saved{
  background:#e85a9b;
  border-color:#e85a9b;
}
.sss-lib__book{
  position:relative;
}
.sss-lib__heart.is-saved{
  background:#e85a9b;
  border-color:#e85a9b;
  color:#fff;
}
.sss-lib__myshelfActions{
  margin:24px 0 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.sss-lib__exportBtn{
  background:#e85a9b;
  border:1px solid #e85a9b;
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:lowercase;
  cursor:pointer;
  transition:all .2s ease;
}

.sss-lib__exportBtn:hover{
  background:#d94c8e;
  border-color:#d94c8e;
  transform:translateY(-2px);
}

.sss-lib__exportBtn--secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#f6f6f6;
}

.sss-lib__exportBtn--secondary:hover{
  background:#f6f6f6;
  color:#0b0b0b;
}

@media(max-width:640px){
  .sss-lib__exportBtn{
    width:100%;
  }
}
.sss-lib__notepad{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  justify-content:flex-end;
  z-index:9999;
}

.sss-lib__notepadInner{
  width:min(420px, 100%);
  height:100%;
  background:#fdfbf7;
  color:#111;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);
  animation:slideIn .3s ease;
  font-family:"Libre Baskerville", Georgia, serif;
}

@keyframes slideIn{
  from{ transform:translateX(100%); }
  to{ transform:translateX(0); }
}

.sss-lib__notepadHeader{
  font-size:20px;
  margin-bottom:20px;
}

.sss-lib__notepadBody{
  flex:1;
  overflow:auto;
  font-size:14px;
  line-height:1.7;
}

.sss-lib__notepadClose{
  position:absolute;
  top:14px;
  right:16px;
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
}

.sss-lib__notepadActions{
  margin-top:20px;
  display:flex;
  gap:12px;
}

.sss-lib__notepadBtn{
  flex:1;
  padding:10px;
  border-radius:999px;
  border:1px solid #111;
  background:transparent;
  cursor:pointer;
  font-size:12px;
  text-transform:lowercase;
}

.sss-lib__notepadBtn--pink{
  background:#e85a9b;
  border-color:#e85a9b;
  color:#fff;
}
/* NOTEPAD OVERLAY */
/* FLOATING NOTEPAD — DOES NOT LOCK SCREEN */
#sssNotepad{
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 320px;
  max-width: 90vw;
  z-index: 9999;
  pointer-events: none; /* allows clicking outside */
}

.sss-notepad__card{
  background: #f6f1e9;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
  font-family: "Libre Baskerville", Georgia, serif;
  pointer-events: auto; /* clickable */
  animation: floatIn .25s ease;
}

@keyframes floatIn{
  from{ transform:translateY(10px); opacity:0;}
  to{ transform:none; opacity:1;}
}

/* FLOATING CARD */
.sss-notepad__card{
  width: 340px;
  max-width: 90vw;
  background: #f6f1e9;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  font-family: "Libre Baskerville", Georgia, serif;
  animation: fadeUp .25s ease;
}

/* HEADER */
.sss-notepad__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  font-size:14px;
  letter-spacing:.05em;
  text-transform:lowercase;
}

.sss-notepad__header button{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

/* BODY */
.sss-notepad__body{
  font-size:13px;
  line-height:1.7;
}

/* ANIMATION */
@keyframes fadeUp{
  from{ transform:translateY(8px); opacity:0;}
  to{ transform:none; opacity:1;}
}
.sss-lib__kuToggle{
  display:flex;
  gap:8px;
}

.sss-lib__kuToggle button{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#f6f6f6;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  text-transform:lowercase;
  cursor:pointer;
  transition:all .2s ease;
}

.sss-lib__kuToggle button.active{
  background:#f6f6f6;
  color:#0b0b0b;
}
.sss-lib__societyTease{
  margin-top:20px;
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
}

.sss-lib__societyTeaseTitle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
  margin-bottom:8px;
}

.sss-lib__societyTeaseText{
  font-size:13px;
  line-height:1.5;
  color:rgba(246,246,246,.75);
}

.sss-lib__societyTeaseBtn{
  display:inline-block;
  margin-top:12px;
  padding:8px 18px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  background:#e85a9b;
  color:#fff;
}
.sss-lib__societyInvite{
  margin:40px 0 30px;
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

.sss-lib__societyInviteInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

.sss-lib__societyInviteKicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
  margin-bottom:6px;
}

.sss-lib__societyInviteTitle{
  font-size:20px;
  text-transform:lowercase;
  margin-bottom:6px;
}

.sss-lib__societyInviteSub{
  font-size:13px;
  color:rgba(246,246,246,.7);
  line-height:1.5;
  max-width:520px;
}

.sss-lib__societyInviteBtn{
  padding:12px 24px;
  border-radius:999px;
  background:#e85a9b;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid #e85a9b;
  transition:all .2s ease;
}

.sss-lib__societyInviteBtn:hover{
  background:#d94c8e;
  border-color:#d94c8e;
}

@media(max-width:640px){
  .sss-lib__societyInviteInner{
    flex-direction:column;
    align-items:flex-start;
  }

  .sss-lib__societyInviteBtn{
    width:100%;
    text-align:center;
  }
}
/* ======================================
   HEADER + SOCIETY CARD LAYOUT
====================================== */

.sss-lib__headWrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-bottom:28px;
}

.sss-lib__head{
  flex:1;
  max-width:600px;
}

.sss-lib__societyInviteCard{
  flex:0 0 340px;
    padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}

.sss-lib__societyInviteKicker{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
  margin-bottom:6px;
}

.sss-lib__societyInviteTitle{
  font-size:16px;
  text-transform:lowercase;
  margin-bottom:8px;
}

.sss-lib__societyInviteSub{
  font-size:12px;
  line-height:1.5;
  color:rgba(246,246,246,.7);
  margin-bottom:14px;
}

.sss-lib__societyInviteBtn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:#e85a9b;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid #e85a9b;
  transition:all .2s ease;
}

.sss-lib__societyInviteBtn:hover{
  background:#d94c8e;
  border-color:#d94c8e;
}

/* Mobile */
@media(max-width:768px){

  .sss-lib__headWrap{
    flex-direction:column;
    gap:30px;
  }

  .sss-lib__societyInviteCard{
    width:100%;
  }

}
.sss-lib__seriesBadge{
  cursor:pointer;
}
.sss-lib__book[data-series]:hover .sss-lib__seriesBadge{
  transform:scale(1.08);
}
.sss-lib__mseries{
  margin-top:6px;
  font-size:12px;
  color:rgba(246,246,246,.7);
}

.sss-lib__mseries a{
  color:#ff8ac7;
  text-decoration:none;
}
.sss-lib__mseriesOrder{
  font-size:12px;
  color:rgba(246,246,246,.65);
  margin-top:4px;
}
.sss-lib__shelf--starter{
  margin:50px 0 60px;
}
/* ======================================
   TOP SHELF PLACEHOLDER — SHIMMER
====================================== */

.sss-lib__topshelfPlaceholder{
  flex:0 0 150px;
  height:230px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  font-size:12px;
  color:rgba(255,255,255,.65);

  padding:14px;
  position:relative;
  overflow:hidden;

  background:linear-gradient(
    110deg,
    rgba(255,255,255,.04) 8%,
    rgba(255,255,255,.14) 18%,
    rgba(255,255,255,.04) 33%
  );
  background-size:200% 100%;
  animation:sssRevealShimmer 3.2s linear infinite;
}

/* shimmer animation */

@keyframes sssRevealShimmer{
  to{
    background-position:-200% 0;
  }
}

.sss-lib__placeholderIssue{
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:6px;
opacity:.6;
}

.sss-lib__topshelfCover{
  animation:sssBookReveal .45s ease;
}

@keyframes sssBookReveal{
  from{
    opacity:0;
    transform:translateY(10px) scale(.96);
  }
  to{
    opacity:1;
    transform:none;
  }
}
/* LIBRARY QUICK NAV */

.sss-lib__jumpNav{
  margin:30px auto 20px;
  padding:16px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);

  text-align:center;   /* centers title */
}

.sss-lib__jumpTitle{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:12px;
}

.sss-lib__jumpLinks{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centers the buttons */
  gap:10px;
}

.sss-lib__jumpLinks a{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  font-size:12px;
  color:#f6f6f6;
  transition:all .2s ease;
}

.sss-lib__jumpLinks a:hover{
  background:#f6f6f6;
  color:#0b0b0b;
}
html{
  scroll-behavior:smooth;
}

/* FLOATING SHARE BUTTON */

#sssFloatingShare{
  position:fixed;
  bottom:90px;
  right:28px;
  z-index:9999;
}

.sss-lib__floatingShareBtn{
  width:56px;
  height:56px;

  border-radius:50%;
  border:1px solid #e85a9b;

  background:#e85a9b;
  color:#fff;

  font-size:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:0 18px 40px rgba(0,0,0,.45);

  transition:transform .2s ease, box-shadow .2s ease;
}

.sss-lib__floatingShareBtn:hover{
  transform:scale(1.08);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}

@media(max-width:749px){
  #sssFloatingShare{
    right:16px;
    bottom:76px;
  }

  .sss-lib__floatingShareBtn{
    width:50px;
    height:50px;
    font-size:18px;
    box-shadow:0 14px 34px rgba(0,0,0,.38);
  }
}
#sssBackToTop{
  position:fixed;
  bottom:28px;
  right:34px;
  z-index:9998;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

#sssBackToTop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.sss-lib__backTopBtn{
  width:44px;
  height:44px;

  border-radius:50%;
  border:1px solid #e85a9b;

  background:#e85a9b;
  color:#fff;

  font-size:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}

@media(max-width:749px){
  #sssBackToTop{
    right:20px;
    bottom:20px;
  }

  .sss-lib__backTopBtn{
    width:42px;
    height:42px;
    font-size:15px;
    box-shadow:0 14px 34px rgba(0,0,0,.38);
  }
}

.sss-lib__backTopBtn:hover{
  transform:scale(1.08);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
/* ======================
   TRENDING SHELF
====================== */

#sssTrendingShelf{
  margin:50px auto 40px;
  padding:28px 26px;

  border-radius:20px;

  background:
    radial-gradient(900px 400px at 50% -120px, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.12);

  max-width:1100px;
  text-align:center;

  position:relative;
  overflow:hidden;
}

/* subtle glow */

#sssTrendingShelf:before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(500px 200px at 50% -40px, rgba(255,255,255,.08), transparent 70%);

  opacity:.6;
  pointer-events:none;
}

/* center header */

#sssTrendingShelf .sss-lib__shelfHead{
  text-align:center;
  margin-bottom:18px;
}

#sssTrendingShelf .sss-lib__shelfTitle{
  font-size:24px;
}

#sssTrendingShelf .sss-lib__shelfDesc{
  margin-top:6px;
}
/* ======================
   TRENDING BOOKS
====================== */

#sssTrendingRow{
  display:flex;
  gap:20px;
  margin-top:28px;
  flex-wrap:nowrap;      /* change this */
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
}

/* make them behave like mini shelf books */

#sssTrendingRow .sss-lib__book{
  flex:0 0 150px;
  width:150px;
}

#sssTrendingRow .sss-lib__coverWrap{
  width:150px;
  height:225px;
}

#sssTrendingRow .sss-lib__cover{
  width:100%;
  height:100%;
  object-fit:contain;
}
#sssTrendingRow .sss-lib__under{
  text-align:center;
}
#sssTrendingRow .sss-lib__book{
  display:flex;
  flex-direction:column;
}
#sssTrendingRow .sss-lib__under{
  text-align:center;
  margin-top:10px;
}
.sss-lib__shelfMeta{
  margin-top:4px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(246,246,246,.55);
}
#sssTrendingRow .sss-lib__heart{
  position:absolute;
  bottom:8px;
  left:8px;
}
#sssTrendingRow .sss-lib__topshelfCoverWrap{
  position:relative;
}
/* force trending hearts onto the cover */

#sssTrendingRow .sss-lib__book{
  position:relative;
}

#sssTrendingRow .sss-lib__heart{
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:6;
}

/* remove space created by outside hearts */
#sssTrendingRow .sss-lib__under{
  margin-top:8px;
}
#sssTrendingRow .sss-lib__coverWrap,
#sssTrendingRow .sss-lib__topshelfCoverWrap{
  position:relative;
}
/* force trending cards to behave like mini shelf cards */

#sssTrendingRow .sss-lib__book{
  position:relative;
}

/* anchor heart visually to cover */
#sssTrendingRow .sss-lib__heart{
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:7;
}

/* make sure cover is positioning context */
#sssTrendingRow .sss-lib__coverWrap,
#sssTrendingRow .sss-lib__topshelfCoverWrap{
  position:relative;
}

/* remove space where hearts used to sit */
#sssTrendingRow .sss-lib__under{
  margin-top:10px;
}
.sss-lib__trendingBadge{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ff8ac7;
}
/* ======================
TRENDING — SHELF ROW
====================== */

#sssTrendingRow{
  display:flex;
  gap:16px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  padding-bottom:8px;
}

/* book cards behave like other shelf books */

#sssTrendingRow .sss-lib__book{
  flex:0 0 150px;
  width:150px;
  scroll-snap-align:start;
}
#sssTrendingRow::-webkit-scrollbar{
  height:8px;
}

#sssTrendingRow::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}
/* ======================
   MODAL CTA IMPROVEMENTS
====================== */

.sss-lib__mcta{
  display:flex;
  gap:12px;
  margin:16px 0 12px;
  flex-wrap:wrap;
}

/* main CTA buttons */

.sss-lib__mbtn{
  flex:1;
  min-width:150px;

  padding:12px 16px;

  border-radius:999px;

  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f6f6f6;
  color:#0b0b0b;

  border:1px solid #f6f6f6;

  transition:all .18s ease;
}

.sss-lib__mbtn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* bookshop secondary */

.sss-lib__mbtn--ghost{
  background:transparent;
  border:1px solid rgba(246,246,246,.35);
  color:#f6f6f6;
}

/* newsletter button */

.sss-lib__mbtn--pink{
  background:#e85a9b;
  border-color:#e85a9b;
  color:#fff;
}

.sss-lib__mbtn--pink:hover{
  background:#d94c8e;
  border-color:#d94c8e;
}

/* ======================
   SOCIETY TEASER REFINEMENT
====================== */

.sss-lib__societyTease{
  margin-top:18px;
  padding:14px 16px;

  border-radius:12px;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}

.sss-lib__societyTeaseTitle{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(246,246,246,.5);

  margin-bottom:6px;
}

.sss-lib__societyTeaseText{
  font-size:13px;
  line-height:1.5;
  color:rgba(246,246,246,.75);
}

.sss-lib__societyTeaseBtn{
  display:inline-block;

  margin-top:10px;

  padding:8px 16px;

  border-radius:999px;

  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;

  text-decoration:none;

  background:#e85a9b;
  color:#fff;

  border:1px solid #e85a9b;

  transition:all .2s ease;
}

.sss-lib__societyTeaseBtn:hover{
  background:#d94c8e;
  border-color:#d94c8e;
  transform:translateY(-1px);
}

/* ======================
   MODAL LINK STYLE CTAS
====================== */

.sss-lib__mcta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:12px 0 16px;
}

/* base link style */

.sss-lib__mbtn{
  background:none;
  border:none;
  padding:0;

  font-size:12px;
  letter-spacing:.06em;
  text-transform:lowercase;

  color:#ff8ac7;
  text-decoration:none;

  cursor:pointer;

  position:relative;

  transition:opacity .2s ease;
}

/* subtle underline */

.sss-lib__mbtn:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;

  width:100%;
  height:1px;

  background:rgba(255,138,199,.55);
}

/* hover */

.sss-lib__mbtn:hover{
  opacity:.7;
}

/* secondary link */

.sss-lib__mbtn--ghost{
  color:rgba(246,246,246,.75);
}

.sss-lib__mbtn--ghost:after{
  background:rgba(246,246,246,.35);
}

/* newsletter link */

.sss-lib__mbtn--pink{
  color:#e85a9b;
  font-weight:500;
}

.sss-lib__mbtn--pink:after{
  background:#e85a9b;
}
/* =================================
MODAL EDITORIAL LINKS
================================= */

.sss-lib__mcta{
  margin:12px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* base link */

.sss-lib__mbtn{
  background:none;
  border:none;
  padding:0;

  font-size:13px;
  letter-spacing:.02em;
  text-transform:lowercase;

  color:#ff8ac7;
  text-decoration:none;

  position:relative;
  cursor:pointer;

  transition:opacity .2s ease;
}

/* subtle underline */

.sss-lib__mbtn:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;

  width:100%;
  height:1px;

  background:rgba(255,138,199,.5);
}

/* hover */

.sss-lib__mbtn:hover{
  opacity:.7;
}

/* secondary link */

.sss-lib__mbtn--ghost{
  color:rgba(246,246,246,.7);
}

.sss-lib__mbtn--ghost:after{
  background:rgba(246,246,246,.35);
}

/* newsletter / breakdown */

.sss-lib__mbtn--pink{
  color:#e85a9b;
  font-weight:500;
}

.sss-lib__mbtn--pink:after{
  background:#e85a9b;
}
/* modal heart */

.sss-lib__heart--modal{
  bottom:10px;
  left:10px;
  z-index:10;
}
/* EDITORIAL SHELF BREAK */

.sss-lib__shelfBreak{
  margin:70px 0 28px;
  padding:22px 24px;

  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.06),
      rgba(255,255,255,.03)
    );

  text-align:center;
}

.sss-lib__shelfBreakTitle{
  font-size:30px;
  text-transform:lowercase;
  letter-spacing:.02em;
}

.sss-lib__shelfBreakSub{
  margin-top:6px;
  font-size:13px;
  color:rgba(246,246,246,.65);
}
/* =================================
   EDITORIAL SHELF BREAK
================================= */

.sss-lib__shelfBreak{

  margin:70px auto 22px;
  padding:22px 26px;

  border-radius:18px;

  background:
    radial-gradient(900px 400px at 50% -120px, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.12);

  text-align:center;

  max-width:1100px;

}

.sss-lib__shelfBreakTitle{

  font-size:26px;
  text-transform:lowercase;
  letter-spacing:.02em;

}

.sss-lib__shelfBreakSub{

  margin-top:6px;

  font-size:13px;

  color:rgba(246,246,246,.65);

}
/* ======================================
SOCiety LIBRARY BASE
====================================== */

.sss-lib{
  background:#0b0b0b;
  color:#f6f6f6;
  padding:90px 16px 40px;
  margin-top:-30px;
  font-family:"Libre Baskerville", Georgia, serif;
  position:relative;
  overflow:hidden;
}

.sss-lib:before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 50% 90px, rgba(255,255,255,.08), transparent 70%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 26px
    );

  opacity:.55;
}

/* ======================================
GRID
====================================== */

.sss-lib__grid{
  margin-top:26px;

  display:grid;
  grid-template-columns:repeat(auto-fill,150px);

  gap:22px;

  justify-content:start;
}

/* ======================================
BOOK CARD
====================================== */

.sss-lib__book{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;

  text-align:left;
  cursor:pointer;

  position:relative;
}

.sss-lib__coverWrap{
  position:relative;

  border-radius:10px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.04);
}

.sss-lib__cover{
  width:100%;

  aspect-ratio:2/3;

  object-fit:contain;

  background:#111;
}

/* ======================================
HOVER
====================================== */

.sss-lib__hover{
  position:absolute;
  inset:0;

  padding:12px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  gap:8px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.92),
    rgba(0,0,0,.4) 60%,
    transparent
  );

  opacity:0;
  transform:translateY(6px);

  transition:opacity .22s ease, transform .22s ease;

  z-index:2;
  pointer-events:none;
}

.sss-lib__book:hover .sss-lib__hover{
  opacity:1;
  transform:translateY(0);
}

.sss-lib__book:hover .sss-lib__cover{
  transform:scale(1.04);
}

/* ======================================
PRIVATE SHELF
====================================== */

.sss-lib__shelf--private{

  position:relative;

  margin:70px 0;

  padding:36px;

  border-radius:22px;

  border:1px solid rgba(232,90,155,.35);

  background:linear-gradient(
    to bottom,
    rgba(232,90,155,.06),
    rgba(0,0,0,.35)
  );

  box-shadow:
    0 0 0 1px rgba(232,90,155,.08),
    0 20px 60px rgba(0,0,0,.6),
    0 0 80px rgba(232,90,155,.15);
}

.sss-lib__shelf--private:before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      600px 200px at 50% -50px,
      rgba(232,90,155,.25),
      transparent
    );

  opacity:.5;

  pointer-events:none;
}

.sss-lib__privateKicker{

  font-size:10px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:rgba(255,255,255,.45);

  margin-bottom:8px;
}

/* ======================================
HEART SAVE
====================================== */

.sss-lib__heart{

  position:absolute;

  bottom:8px;
  left:8px;

  width:30px;
  height:30px;

  border-radius:50%;

  background:rgba(0,0,0,.75);

  border:1px solid rgba(255,255,255,.25);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;

  color:#fff;

  box-shadow:0 6px 16px rgba(0,0,0,.45);

  z-index:6;

  cursor:pointer;

  transition:all .18s ease;
}

.sss-lib__heart:hover{
  transform:translateY(-2px) scale(1.05);
}

.sss-lib__heart.is-saved{
  background:#e85a9b;
  border-color:#e85a9b;
}

/* ======================================
MOBILE
====================================== */

@media(max-width:640px){

  .sss-lib__grid{
    grid-template-columns:repeat(2,150px);

    justify-content:center;

    gap:16px;
  }

}
/* ======================================
BOYFRIEND OF THE MONTH POLL
====================================== */

.sss-bom{
  margin-top:40px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

/* header */

.sss-bom__head{
  margin-bottom:18px;
}

.sss-bom__kicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.6);
}

.sss-bom__title{
  margin-top:6px;
  font-size:22px;
  text-transform:lowercase;
}

.sss-bom__sub{
  margin-top:6px;
  font-size:14px;
  color:rgba(246,246,246,.7);
}

/* input */

.sss-bom__inputWrap{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.sss-bom__inputWrap input{
  width:240px;
  height:38px;

  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);

  background:#111;
  color:#fff;

  padding:0 12px;
  font-size:14px;
}

.sss-bom__inputWrap button{
  height:38px;
  padding:0 16px;

  border-radius:8px;
  border:1px solid rgba(255,255,255,.3);

  background:#fff;
  color:#000;

  font-size:13px;
  cursor:pointer;
}

/* results */

.sss-bom__results{
  margin-top:12px;

  font-size:16px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

.sss-bom__winnerReveal{
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.sss-bom__eyebrow{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(246,246,246,.54);
}

.sss-bom__winner{
  margin-top:8px;
  font-size:28px;
  line-height:1.15;
  text-transform:lowercase;
}

.sss-bom__tagline{
  margin-top:8px;
  font-size:14px;
  color:#ffb9da;
}

.sss-bom__barWrap{
  margin-top:14px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.sss-bom__bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff8ac7 0%, #ffd2e8 100%);
  transition:width .55s ease;
}

.sss-bom__stats{
  margin-top:10px;
  font-size:12px;
  color:rgba(246,246,246,.68);
}

.sss-bom__trait{
  margin-top:12px;
  font-size:15px;
  line-height:1.6;
  color:rgba(246,246,246,.86);
}

.sss-bom__trait span{
  color:#ff8ac7;
}

.sss-bom__bookHint{
  margin-top:8px;
  font-size:12px;
  color:rgba(246,246,246,.62);
}

.sss-bom__topThree{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sss-bom__rank{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
}

.sss-bom__rankNum{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,246,.55);
}

.sss-bom__rankName{
  flex:1;
}

.sss-bom__rankPercent{
  font-size:12px;
  color:rgba(246,246,246,.65);
}
/* =================================
CENTER TRENDING SHELF (SOCIETY)
================================= */

#sssTrendingShelf{
  text-align:center;
}

#sssTrendingRow{
  display:flex;
  justify-content:center;   /* centers the books */

  gap:20px;

  overflow-x:auto;
  scroll-snap-type:x mandatory;

  padding-bottom:8px;
}
/* TROPE PAGE */

.sss-trope {
  max-width: 1200px;
  margin: 120px auto 60px;
  padding: 0 20px;
}

/* header */

.sss-trope__header {
  text-align: center;
  margin-bottom: 70px;
}

.sss-trope__eyebrow {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #8c8c8c;
  margin-bottom: 18px;
}

.sss-trope__title{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:.02em;
}

.sss-trope__desc {
  font-size: 16px;
  color: #b6b6b6;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* divider */

.sss-trope__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 50px auto;
  max-width: 600px;
}

/* book count */

.sss-trope__count {
  text-align: center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7d7d7d;

  margin-top: 40px;
  margin-bottom: 70px;
}
.sss-trope__count::before{
  content:"";
  display:block;
  width:120px;
  height:1px;
  background:rgba(255,255,255,.1);
  margin:0 auto 26px;
}
/* RELATED TROPES */

.sss-trope__related{
  margin-top:90px;
  text-align:center;
}

.sss-trope__relatedTitle{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:28px;
}

.sss-trope__relatedGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.sss-trope__relatedItem{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 16px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.25);

  text-decoration:none;

  font-size:13px;

  color:#f6f6f6;

  transition:all .2s ease;
}

.sss-trope__relatedItem:hover{
  background:#f6f6f6;
  color:#0b0b0b;
}
.sss-saveToast{

position:fixed;

top:90px;   /* pushes below header */
left:50%;

transform:translateX(-50%) translateY(-20px);

background:#111;
color:#fff;

padding:12px 20px;

border-radius:12px;

font-size:13px;

display:flex;
gap:12px;
align-items:center;

opacity:0;
pointer-events:none;

transition:all .35s ease;

z-index:9999;

box-shadow:0 10px 30px rgba(0,0,0,.45);

}

.sss-saveToast.is-visible{

opacity:1;
pointer-events:auto;

transform:translateX(-50%) translateY(0);

}

.sss-saveToast__link{

color:#ff8ac7;
text-decoration:none;
font-weight:500;

}

.sss-saveToast__link:hover{

text-decoration:underline;

}
/* RELATED TROPES */

.sss-trope__related{
  margin-top:80px;
  text-align:center;
}

.sss-trope__relatedTitle{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:26px;
}

.sss-trope__relatedGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.sss-trope__relatedItem{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  font-size:13px;
  color:#f6f6f6;
  transition:.2s;
}

.sss-trope__relatedItem:hover{
  background:#f6f6f6;
  color:#0b0b0b;
}

/* CTA */

.sss-trope__cta{
  text-align:center;
  margin-top:60px;
}

.sss-trope__ctaBtn{
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
}

/* QUIZ */

.sss-trope__quiz{
  text-align:center;
  margin-top:50px;
}

.sss-trope__quizTitle{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:12px;
  color:rgba(255,255,255,.6);
}

.sss-trope__quizBtn{
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
}
/* TROPE PAGE ACTION LINKS */

.sss-trope__actions{

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;

  margin-top:70px;

}

.sss-trope__actionLink{

  color:#ff4fa3; /* your pink */
  text-decoration:none;

  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;

  border-bottom:1px solid rgba(255,79,163,.4);

  transition:.2s ease;

}

.sss-trope__actionLink:hover{

  color:#ff79bb;
  border-color:#ff79bb;

}
/* FLOATING SHARE BUTTON */

.sss-lib__shareBtn{

  position:fixed;

  right:24px;
  bottom:24px;

  width:48px;
  height:48px;

  border-radius:50%;

  background:#ff4fa3;
  color:white;

  border:none;

  font-size:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:0 8px 20px rgba(0,0,0,.35);

  transition:.2s ease;

  z-index:999;

}

.sss-lib__shareBtn:hover{

  transform:scale(1.05);

}
/* TROPE PAGE NEWSLETTER */

.sss-tropeInvite{

max-width:320px;

padding:24px 26px;

border:1px solid rgba(255,255,255,.08);

border-radius:12px;

background:rgba(255,255,255,.02);

}

.sss-tropeInvite__kicker{

font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;

color:rgba(255,255,255,.5);

margin-bottom:10px;

}

.sss-tropeInvite__title{

font-size:18px;
line-height:1.4;

margin-bottom:10px;

}

.sss-tropeInvite__sub{

font-size:14px;
color:rgba(255,255,255,.7);

margin-bottom:16px;

}

.sss-tropeInvite__btn{

color:#ff4fa3;

text-decoration:none;

font-size:13px;
letter-spacing:.14em;
text-transform:uppercase;

border-bottom:1px solid rgba(255,79,163,.4);

transition:.2s;

}

.sss-tropeInvite__btn:hover{

color:#ff79bb;
border-color:#ff79bb;

}
/* TROPE HEADER LAYOUT */

.sss-tropeTop{

display:grid;
grid-template-columns:1fr 340px;

gap:60px;

align-items:start;

margin-bottom:40px;

}

/* LEFT SIDE */

.sss-tropeTop__left{

max-width:680px;

}

/* RIGHT SIDE CTA */

.sss-tropeTop__right{

display:flex;
justify-content:flex-end;

}

/* MOBILE */

@media(max-width:900px){

.sss-tropeTop{

grid-template-columns:1fr;
gap:30px;

}

.sss-tropeTop__right{

justify-content:flex-start;

}

}
/* =================================================
SOCIETY CTA — CONVERSION MICRO ANIMATIONS
Used on trope pages + library pages
================================================= */

.sss-tropeInvite{

position:relative;

max-width:320px;

padding:24px 26px;

border-radius:12px;

background:rgba(255,255,255,.02);

border:1px solid rgba(255,255,255,.08);

transition:all .25s ease;

/* entrance animation */

animation:societyEnter .7s cubic-bezier(.2,.8,.25,1) .2s both;

}

/* =================================================
ENTRANCE BOUNCE
================================================= */

@keyframes societyEnter{

0%{
transform:translateY(20px) scale(.96);
opacity:0;
}

60%{
transform:translateY(-6px) scale(1.02);
opacity:1;
}

100%{
transform:translateY(0) scale(1);
opacity:1;
}

}

/* =================================================
SOFT PINK GLOW
================================================= */

.sss-tropeInvite::after{

content:"";

position:absolute;

inset:-1px;

border-radius:12px;

pointer-events:none;

box-shadow:0 0 0 rgba(255,138,199,0);

animation:societyGlow 4s ease-in-out infinite;

}

@keyframes societyGlow{

0%{
box-shadow:0 0 0 rgba(255,138,199,0);
}

50%{
box-shadow:0 0 26px rgba(255,138,199,.18);
}

100%{
box-shadow:0 0 0 rgba(255,138,199,0);
}

}

/* =================================================
BUTTON MICRO PULSE
================================================= */

.sss-tropeInvite__btn{

display:inline-block;

margin-top:14px;

padding:10px 18px;

border-radius:999px;

background:#ff8ac7;

color:#111;

font-size:13px;

text-decoration:none;

font-weight:600;

animation:ctaPulse 3.5s ease-in-out infinite;

transition:all .2s ease;

}

@keyframes ctaPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}

/* =================================================
HOVER LIFT
================================================= */

.sss-tropeInvite:hover{

transform:translateY(-4px);

border-color:#ff8ac7;

box-shadow:0 18px 40px rgba(0,0,0,.55);

}

/* =================================================
CTA TEXT STYLING
================================================= */

.sss-tropeInvite__kicker{

font-size:10px;

letter-spacing:.18em;

text-transform:uppercase;

opacity:.6;

margin-bottom:6px;

}

.sss-tropeInvite__title{

font-size:18px;

line-height:1.4;

margin-bottom:6px;

}

.sss-tropeInvite__sub{

font-size:13px;

opacity:.75;

line-height:1.5;

}

/* =================================================
RESPONSIVE
================================================= */

@media(max-width:900px){

.sss-tropeInvite{

max-width:none;

}

}
/* =========================
TROPE POPUP
========================= */

.sss-tropePopup{

position:fixed;

top:28px;
right:28px;

width:280px;

background:#0b0b0b;

border:1px solid rgba(255,255,255,.15);
border-radius:14px;

padding:16px;

z-index:9999;

box-shadow:0 20px 50px rgba(0,0,0,.6);

font-size:13px;

animation:tropePopupIn .35s ease;

}

@keyframes tropePopupIn{

from{
opacity:0;
transform:translateY(-14px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.sss-tropePopup__title{

font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;

opacity:.6;

margin-bottom:12px;

}

.sss-tropePopup__list{

display:flex;
flex-direction:column;
gap:6px;

}

.sss-tropePopup__list a{

text-decoration:none;
color:#ff8ac7;

font-size:13px;

}

.sss-tropePopup__list a:hover{
text-decoration:underline;
}

.sss-tropePopup__close{

position:absolute;
top:6px;
right:8px;

background:none;
border:none;

color:#fff;

cursor:pointer;

font-size:16px;

opacity:.5;

}

.sss-tropePopup__close:hover{
opacity:1;
}
@media (max-width: 768px){

.sss-tropePopup{
top:16px;
right:16px;
left:auto;
bottom:auto;
width:min(220px, calc(100vw - 32px));
padding:12px 14px;
border-radius:12px;
font-size:12px;
transform:none;

}

.sss-tropePopup__title{
margin-bottom:8px;
font-size:10px;
}

.sss-tropePopup__close{
top:5px;
right:7px;
font-size:15px;
}

.sss-tropePopup__list{
gap:10px;
}

.sss-tropePopup__list a{
font-size:14px;
}
}

@media (max-width: 768px){
  body:has(.menu-drawer-container details[open]) #sssFloatingShare,
  body:has(.menu-drawer-container details[open]) #sssBackToTop,
  body:has(.menu-drawer-container details[open]) #sssTropePopup,
  body:has(.menu-drawer-container details[open]) .sss-saveToast,
  body:has(.menu-drawer-container details[open]) #sssNotepad{
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }
}
@media (max-width: 768px){

  .sss-trope__actions{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .sss-trope__actionLink{
    font-size:13px;
    letter-spacing:.06em;
  }

}
/* ---------- MOBILE CTA FIX ---------- */

@media (max-width: 768px){

  .sss-trope__actions{
    margin-top:42px;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
  }

  .sss-trope__actionLink{
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

}