/* ==========================================================================
   The library page: the opening under the header, the toolbar, a panel for
   each series, the list in reading order, and the closing line on the
   bookshelf. The header and footer are in css/site.css.

     1. The opening: "the library", the motto, the author's note button
     1a. The spotlight: the newest release, and the next one's cover
     2. The toolbar: search, by series or in order, cover size
     3. A series panel, its ribbon and its cards
     4. Cover sizes (shared with the reader's text size)
     5. Every booklet in order
     6. The closing line
   ========================================================================== */

/* the colour of each series' panel, and a deeper shade for its spine */
.k-library{--sb:#3477c2}
.k-bumper{--sb:#cf4537}
.k-strangers{--sb:#1e8462}
.k-daughters{--sb:#975cba}
.k-sons{--sb:#5c5c6a}
html[data-theme="dark"] .k-library{--sb:#2b64a8}
html[data-theme="dark"] .k-bumper{--sb:#b23a2e}
html[data-theme="dark"] .k-strangers{--sb:#1a7155}
html[data-theme="dark"] .k-daughters{--sb:#7f4c9f}
html[data-theme="dark"] .k-sons{--sb:#5a5a69}

/* ---- 1. the opening ---- */
.opening{padding:52px 0 150px;text-align:center;color:#fff}
.opening .wrap{display:flex;flex-direction:column;align-items:center}
.opening-eyebrow{margin-bottom:12px;font:600 .78rem var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(20,40,80,.5)}
.opening-motto{display:block;height:clamp(64px,6vw,86px);width:auto;filter:drop-shadow(0 2px 10px rgba(10,24,52,.5))}
.note-btn{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:8px 18px 8px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(43,90,146,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-shadow:0 1px 10px rgba(30,50,90,.35)}
.note-btn img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85)}
.note-btn span{font:600 1.15rem var(--f-display)}
.note-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.note-btn:hover svg{transform:translateX(4px)}
.note-btn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:14px}
html:not(.js) .note-btn{display:none}
@media(max-width:860px){
  .opening{padding:28px 0 76px}
  .opening-motto{height:auto;width:100%;max-width:420px}
  .note-btn{max-width:100%}
  .note-btn span{font-size:1rem;text-align:left}
}

/* ---- 1a. the spotlight ---- */
/* Plain words for "newest release", no badges; the next booklet is only its
   cover, greyed, until it is out. Set on the library page, under Spotlight.
   The white card rises into the bookshelf photo, so it is the first thing
   seen. */
.spot{position:relative;z-index:2;margin-top:-118px;padding-bottom:30px}
.spot-in{display:grid;grid-template-columns:240px minmax(0,1fr) 210px;gap:52px;align-items:center;padding:44px 48px;border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lift)}
.spot-cover img{display:block;width:240px;height:auto;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.1),0 24px 48px rgba(20,40,80,.28);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.spot-cover:hover img,.spot-cover:focus-visible img{transform:translateY(-5px)}
.spot-k{margin:0;font:700 .72rem/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-strong)}
.spot-t{margin:10px 0 0;font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--f-display);color:var(--head);text-transform:lowercase;text-wrap:balance}
.spot-by{margin:8px 0 0;font:italic 500 1.15rem var(--f-display);color:var(--text)}
.spot-blurb{margin:16px 0 0;max-width:34em;font:400 1.06rem/1.7 var(--f-body);color:var(--text)}
.spot-meta{margin:12px 0 0;font:600 .84rem var(--f-body);color:var(--muted)}
.spot-go{display:inline-flex;align-items:center;gap:9px;min-height:48px;margin-top:22px;padding:0 24px;border-radius:999px;background:var(--accent-strong);color:var(--bg);font:600 .98rem var(--f-body);transition:filter .2s,transform .2s}
.spot-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.spot-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spot-next{margin:0;padding-left:34px;border-left:1px solid var(--line-strong);text-align:center}
.spot-next img{display:block;width:100%;height:auto;border-radius:4px;filter:grayscale(1);opacity:.55}
.spot-next figcaption{margin-top:14px;font:700 .76rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){
  .spot{margin-top:-60px;padding-bottom:20px}
  .spot-in{grid-template-columns:1fr;gap:26px;padding:28px 20px;border-radius:22px;text-align:center;justify-items:center}
  .spot-cover img{width:200px}
  .spot-blurb{margin-left:auto;margin-right:auto}
  .spot-next{display:flex;align-items:center;gap:16px;padding:22px 0 0;border-left:0;border-top:1px solid var(--line-strong)}
  .spot-next img{flex:none;width:clamp(110px,22vw,160px)}
  .spot-next figcaption{margin:0}
}
@media(prefers-reduced-motion:reduce){.spot-cover img,.spot-go{transition:none}}

/* ---- 2. the toolbar ---- */
/* While the library is small the toolbar waits (it has nothing to search)
   and the shelf's panel hugs its covers, a little larger, in one row. */
.toolbar[hidden]{display:none}
.shelf.few{padding-top:40px}
.shelf.few .series-panel{width:fit-content;max-width:100%;margin:0 auto}
.shelf.few .series-main{padding:0 48px 48px}
html .shelf.few .cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:200px;gap:40px 34px;padding-top:30px}
/* the small size's hidden blurbs come back, as the size buttons wait too */
html .shelf.few .card:not(.open) .card-blurb{display:-webkit-box}
html .shelf.few .card-more{display:block}
html .shelf.few .card-label{margin-top:16px;padding:3px 10px;font-size:.64rem}
@media(max-width:860px){
  .shelf.few .series-main{padding:0 16px 28px}
  html .shelf.few .cards{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,1fr);gap:32px 16px}
}

.toolbar{position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.toolbar-in{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding-top:14px;padding-bottom:8px}
.search{position:relative;flex:1 1 260px;min-width:0}
.search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search input{width:100%;height:46px;padding:0 44px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--head);font:400 1rem var(--f-body)}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--sunken);color:var(--head)}
.search-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pills{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--sunken)}
.pills-label{padding:0 8px 0 10px;font:600 .66rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pills button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--accent);font:600 .8rem var(--f-body);transition:background-color .2s,color .2s}
.view-pills button{min-height:42px;padding:0 22px;font-size:.85rem}
.view-pills button[aria-pressed="true"]{background:var(--accent-strong);color:var(--bg)}
.size-pills button[aria-pressed="true"]{background:var(--surface);color:var(--head);box-shadow:0 2px 8px rgba(29,58,95,.14)}
html[data-theme="dark"] .size-pills button[aria-pressed="true"]{background:var(--raised)}
.status{margin:0 0 10px;font:500 .85rem var(--f-body);color:var(--muted)}
.status:empty{display:none}
html:not(.js) .toolbar{display:none}
@media(max-width:860px){
  .toolbar{position:static}
  .search{flex-basis:100%}
  .pills{flex:1 1 100%}
  .pills button{flex:1;padding:0 8px}
}

/* ---- 3. a series panel ---- */
.shelf{padding-top:28px}
.series+.series{padding-top:28px}
.series{--deep:color-mix(in srgb,var(--sb) 78%,#000)}
html[data-theme="dark"] .series{--deep:color-mix(in srgb,var(--sb) 72%,#000)}
.series-panel{display:grid;grid-template-columns:22px 1fr;border-radius:24px;overflow:clip;background:var(--sb);color:#fff}
.series-spine{background:var(--deep)}
.series-main{padding:0 40px 44px;min-width:0}
/* The series name hangs from the top of its panel like a ribbon, and stays
   pinned under the toolbar while its booklets scroll past. --toolbar is the
   toolbar's height, measured by js/pages/library.js. */
.series-ribbon{position:sticky;top:var(--toolbar,0px);z-index:3;width:max-content;max-width:100%;padding:20px 28px 22px;border-radius:0 0 18px 18px;background:var(--deep);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.series-ribbon h2{font:600 clamp(1.8rem,2.7vw,2.4rem)/1.08 var(--f-display);color:#fff}
.series-blurb{max-width:62ch;margin-top:22px;font-size:.98rem;line-height:1.65;color:#fff}
.series :focus-visible{outline-color:#fff}
.cards{display:grid;padding-top:30px}
.card{display:flex;flex-direction:column;min-width:0}
.card-link{display:block;position:relative;border-radius:3px}
.cover{display:block;width:100%;height:auto;aspect-ratio:1294/2000;object-fit:cover;background:rgba(255,255,255,.12);border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card-link::after{content:"";position:absolute;inset:0 auto 0 0;width:6%;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.08) 60%,transparent);pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card-link:hover .cover,.card-link:focus-visible .cover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(0,0,0,.38)}
.card-link:hover::after,.card-link:focus-visible::after{transform:translateY(-5px)}
html[data-theme="dark"] .cover{filter:brightness(.94)}
.card-label{align-self:flex-start;margin-top:16px;padding:3px 10px;border-radius:12px;background:#fff;color:var(--sb);font:600 .64rem/1.5 var(--f-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.card-blurb{margin-top:10px;font:italic 500 1.12rem/1.45 var(--f-display);color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.open .card-blurb{display:block}
.card-more{align-self:flex-start;min-height:36px;margin-top:4px;padding:0;border:0;background:none;color:#fff;font:600 .7rem var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.card-more:hover{text-decoration:underline;text-underline-offset:4px}
html:not(.js) .card-more{display:none}
html:not(.js) .card-blurb{display:block}
.none{padding:40px 0;font:500 1.3rem var(--f-display);color:var(--muted)}
/* "More to come", set on the library page, as a cover-shaped space on the shelf
   beside the booklets, until there are more to fill it. */
.soon{margin:0}
.soon-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1294/2000;padding:16px;border:1.5px dashed rgba(255,255,255,.6);border-radius:3px;background:rgba(10,30,60,.14);color:#fff;text-align:center;font:italic 500 1.12rem/1.3 var(--f-display);text-wrap:balance}
.soon-tile svg{width:38px;height:38px;fill:currentColor}
.soon[hidden],.next-card[hidden]{display:none}
/* the next booklet on the shelf too: its cover greyed, not a link yet */
.next-card{margin:0}
.next-card .cover,html[data-theme="dark"] .next-card .cover{filter:grayscale(1);opacity:.6}
.next-card figcaption{display:flex;flex-direction:column;gap:6px;margin-top:16px;color:#fff}
.next-k{font:700 .66rem var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.next-t{font:italic 500 1.12rem/1.3 var(--f-display)}
@media(max-width:860px){
  .series-panel{grid-template-columns:10px 1fr;border-radius:18px}
  .series-main{padding:0 16px 28px}
  .series-ribbon{top:0;padding:18px 16px}
  .card-blurb{font-size:1.02rem}
}

/* ---- 4. cover sizes: small, medium and large ---- */
.cards{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:40px 24px}
html[data-size="small"] .cards{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:26px 16px;padding-top:28px}
html[data-size="small"] :is(.card-blurb,.card-more){display:none}
html[data-size="small"] .card-label{margin-top:10px;padding:2px 8px;font-size:.58rem}
html[data-size="medium"] .card-blurb{font-size:1.02rem}
html[data-size="large"] .cards{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:60px 36px;padding-top:46px}
@media(max-width:860px){
  .cards{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  html[data-size="small"] .cards{grid-template-columns:repeat(3,1fr);gap:22px 12px}
  html[data-size="large"] .cards{grid-template-columns:1fr 1fr;gap:40px 18px}
}

/* ---- 5. every booklet, in reading order ---- */
.in-order{padding-top:34px}
.in-order ol{columns:3 300px;column-gap:40px}
.in-order li{break-inside:avoid}
.in-order a{display:flex;align-items:center;gap:12px;margin-bottom:6px;padding:8px;border-radius:12px;background:var(--sb);color:#fff;transition:transform .2s}
.in-order a:hover{transform:translateX(4px)}
.in-order a:focus-visible{outline-color:var(--focus)}
.in-order-n{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--sb);font:600 .8rem var(--f-body)}
.in-order img{flex:0 0 34px;width:34px;height:auto;aspect-ratio:1294/2000;object-fit:cover;border-radius:2px}
.in-order b{display:block;font:600 1.15rem/1.2 var(--f-display)}
.in-order small{display:block;font:500 .82rem var(--f-body);color:#fff}
@media(max-width:860px){.in-order ol{columns:1}}

/* ---- 6. the closing line, on the bookshelf ---- */
.closing{position:relative;isolation:isolate;margin-top:110px;padding:120px 0 112px;text-align:center;overflow:hidden}
.closing-photo{position:absolute;inset:0;z-index:-1;background:url("/images/library-card.jpg") center/cover no-repeat}
.closing-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(240,245,251,.85) 8%,rgba(110,140,190,.72) 26%,rgba(70,100,150,.8) 55%,rgba(50,76,120,.88) 100%)}
html[data-theme="dark"] .closing-photo::after{background:linear-gradient(to bottom,var(--bg) 0%,rgba(18,24,32,.9) 14%,rgba(20,34,56,.78) 45%,rgba(12,22,38,.88) 100%)}
.closing .hrm{height:70px;margin:0 auto 18px;filter:drop-shadow(0 2px 14px rgba(30,50,90,.35))}
.closing-line{max-width:14ch;margin:0 auto;font:600 clamp(2.6rem,5.6vw,4.6rem)/1.06 var(--f-display);color:#fff;text-wrap:balance;text-shadow:0 2px 22px rgba(30,50,90,.4)}
.closing-line em{font-style:italic;color:#dbe8f7}
@media(max-width:860px){
  .closing{margin:72px 10px 0;padding:80px 0 76px;border-radius:24px}
  .closing .hrm{height:54px}
}

@media(forced-colors:active){.cover{border:1px solid CanvasText}}