/* ==========================================================================
   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
     2a. Browse by topic: the button, and the panel over the shelf
     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)}
/* On a big screen the covers and the space around them grow with the page, so the box fills its width. */
@media(min-width:1280px){.spot-in{grid-template-columns:clamp(240px,17vw,320px) minmax(0,1fr) clamp(210px,13vw,260px);gap:clamp(52px,4vw,80px);padding:clamp(44px,3.2vw,60px) clamp(48px,3.6vw,72px)}.spot-cover img{width:100%}}
.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}
}
/* With no next booklet shown, the spotlight is the cover and its words,
   kept to a width the words fill. */
@media(min-width:861px){.spot-in.solo{grid-template-columns:240px minmax(0,1fr);max-width:940px;margin:0 auto}}
@media(min-width:1280px){.spot-in.solo{grid-template-columns:clamp(240px,17vw,300px) minmax(0,1fr);max-width:1040px}}
/* A booklet that is coming soon: its cover in colour, clean and not a link,
   and in place of "start reading" the same button greyed: plain words in a
   paragraph, so it cannot be clicked, tabbed to or mistaken for a link.
   Its grey words are 5.1 to 1 on its grey, 6.2 to 1 in dark. A coral rule
   with "Coming soon" was tried first. */
.spot-cover.is-soon{display:block}
.spot-cover.is-soon:hover img{transform:none}
.spot-go.is-soon{background:#e8edf3;color:var(--muted);cursor:default}
.spot-go.is-soon:hover{filter:none;transform:none}
html[data-theme="dark"] .spot-go.is-soon{background:var(--raised)}
@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}
}

/* ---- 2a. browse by topic ---- */
/* The panel hangs from the toolbar over the shelf, so opening it moves
   nothing. Its cards add no colour of their own: each glows with its first
   booklet's cover, blurred under a dark veil, so the series colours stay the
   only colours on the page. See "Browse by topic" in the README. */
.toolbar{--tpad:clamp(16px,2.4vw,22px)}
.topic-pick{display:flex;align-items:center;gap:6px}
.topic-btn{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--head);font:600 .9rem var(--f-body)}
.topic-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.topic-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.topic-btn.chosen{border-color:var(--accent);color:var(--accent)}
.topic-clear{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--sunken);color:var(--head)}
.topic-clear[hidden]{display:none}
.topic-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.topic-panel{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:20}
.topic-panel[hidden]{display:none}
.topic-box{max-height:calc(100dvh - var(--toolbar,120px) - 16px);overflow:auto;overscroll-behavior:contain;padding:var(--tpad);border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 22px 50px rgba(18,33,58,.22)}
html[data-theme="dark"] .topic-box{background:var(--raised);box-shadow:0 22px 50px rgba(0,0,0,.55)}
.topic-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topic-top h2{min-width:0;margin:0;font:600 clamp(1.35rem,2.2vw,1.7rem)/1.1 var(--f-display);color:var(--head)}
.topic-tools{display:flex;align-items:center;gap:6px}
.topic-tools button{display:grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--head)}
.topic-tools svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topic-step[data-topic-step="-1"] svg{transform:rotate(180deg)}
.topic-tools .topic-all{display:flex;gap:.3em;padding:0 12px;white-space:nowrap;border-color:transparent;background:none;color:var(--accent);font:600 .85rem var(--f-body)}
.topic-hint{margin:4px 0 12px;font-size:.85rem;color:var(--muted)}
.topic-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:4px;padding:6px 4px 18px;scrollbar-width:thin}
/* one topic: its covers fanned on the glow of the first */
.topic-card,.topic-detail{position:relative;color:#fff;border-radius:18px;isolation:isolate}
.topic-card{flex:0 0 212px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;padding:14px 14px 16px;border:0;background:#1d2a3d;text-align:left;font:inherit;cursor:pointer}
.topic-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.topic-bg img{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(16px) saturate(1.1)}
.topic-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,40,.45),rgba(14,24,40,.84))}
.topic-fan{position:relative;display:block;width:142px;height:96px;margin:2px 0 12px}
.topic-fan img{position:absolute;bottom:0;left:36px;height:92px;width:auto;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.4);z-index:2}
.topic-fan img:nth-child(2){left:0;height:84px;transform:rotate(-7deg);z-index:1}
.topic-fan img:nth-child(3){left:72px;height:84px;transform:rotate(7deg);z-index:1}
.topic-name{font:600 1.25rem/1.15 var(--f-display)}
.topic-q{margin-top:5px;font:italic 400 .92rem/1.4 "Libre Caslon Text",Georgia,serif;color:rgba(255,255,255,.9)}
.topic-n{margin-top:auto;padding-top:9px;font:600 .75rem var(--f-body);color:rgba(255,255,255,.8)}
.topic-card[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--accent)}
html[data-theme="dark"] .topic-card[aria-pressed="true"]{box-shadow:0 0 0 3px var(--raised),0 0 0 6px var(--accent)}
.topic-card[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-14px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--accent)}
.topic-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
/* the chosen topic, large, with every booklet in it */
.topic-detail{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:20px;align-items:start;padding:20px;background:#1d2a3d}
.topic-detail[hidden]{display:none}
.topic-say h3{margin:0;font:600 clamp(1.5rem,2.6vw,2rem)/1.1 var(--f-display)}
.topic-say .topic-q{margin:6px 0 16px;font-size:1.02rem}
.topic-go{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:#fff;color:#1d3a5f;font:700 .88rem var(--f-body)}
.topic-covers{display:flex;gap:14px;margin:0;padding:2px 2px 8px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.topic-covers li{flex:0 0 100px;scroll-snap-align:start}
.topic-covers :is(a,.is-soon){display:block;color:#fff;text-decoration:none}
.topic-covers img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.topic-covers span{display:block;margin-top:6px;font:italic 400 .82rem/1.3 "Libre Caslon Text",Georgia,serif}
.topic-covers a:focus-visible,.topic-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(hover:hover){.topic-covers a:hover span{text-decoration:underline}}
@media(max-width:860px){
  .toolbar{position:relative}
  .topic-pick{flex:1 1 100%}
  .topic-btn{flex:1;justify-content:space-between}
  .topic-step{display:none!important}
  .topic-card{flex-basis:min(64%,236px)}
  .topic-detail{grid-template-columns:1fr;padding:16px}
  .topic-box{max-height:none}
}
@media(max-width:480px){
  .topic-top h2{font-size:1.18rem}
  .topic-tools .topic-all{padding:0 6px}
}
@media(prefers-reduced-motion:reduce){.topic-btn svg{transition:none}}

/* ---- 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 .hrm{height:46px}
.soon[hidden],.next-card[hidden]{display:none}
/* the next booklet on the shelf too: its cover greyed, not a link yet. A
   booklet that is coming soon keeps its colour, with its day under its
   label in the "coming next" words' style. */
.next-card{margin:0}
.next-card .cover,html[data-theme="dark"] .next-card .cover{filter:grayscale(1);opacity:.6}
.card-cover{display:block}
.card-soon{margin-top:12px;font:700 .66rem/1.3 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.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 :is(a,.is-soon){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}}