/* Free ebooks: ebook pages ([jnr_ebook]) and the /ebooks/ shelf ([jnr_ebooks]).
   Site tokens from design.css. */

body:not(.home) .entry-content > .jbe.jbe { max-width: none; }
.jbe { display: grid; gap: 48px; color: var(--cream-100); }
.entry-content .jbe p { margin: 0; }
.entry-content .jbe ul, .entry-content .jbe ol { margin: 0; padding: 0; list-style: none; }
.entry-content .jbe li { margin: 0; }
.jbe a { color: inherit; text-decoration: none; }
.jbe a:focus-visible, .jbe button:focus-visible, .jbe summary:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }
.jbe-tag, .jbe-box-h { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.jbe-meta { font: 400 12.5px/1.4 'Space Mono', monospace; color: var(--cream-400); }

/* intro */
.jbe-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 40px; align-items: stretch; }
.jbe-top .jbe-dl { flex-direction: column; align-items: flex-start; }
.jbe-top .jbe-info { padding: 24px; background: var(--ink-900); border: 1px solid var(--glow-border); border-radius: var(--r-card); }
.jbe-chapters ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.jbe-chapters li + li { border-top: 0; }
.jbe-chapters li { border-bottom: 1px solid var(--hairline); }
.jbe-info { display: grid; gap: 18px; align-content: start; }
.jbe-info .jbe-tag { color: var(--glow-300); }
.entry-content .jbe .jbe-desc { max-width: 62ch; font-size: 19px; line-height: 1.6; color: var(--cream-100); }
.jbe-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.jbe-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 26px; font-weight: 600; font-size: 16px; color: var(--ink-950) !important; background: var(--glow-500); border-radius: var(--r-pill); }
.jbe-btn:hover { background: var(--glow-300); }
.jbe-read { justify-self: start; font-weight: 600; color: var(--glow-300) !important; }
.jbe-chapters { padding: 20px 24px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbe-chapters .jbe-box-h { margin-bottom: 8px; }
.jbe-chapters a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; font-size: 15px; line-height: 1.4; }
.jbe-chapters ol { counter-reset: ch; }
.jbe-chapters li { counter-increment: ch; }
.jbe-chapters a::before { content: counter(ch, decimal-leading-zero); font: 400 12px/1.9 'Space Mono', monospace; color: var(--glow-300); }
.jbe-chapters a:hover .jbe-ch-t { color: var(--glow-300); }
.jbe-ch-p { font: 400 12px/1.9 'Space Mono', monospace; color: var(--cream-400); }

/* reader: thumbnails + one large page */
.jbe-reader { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; scroll-margin-top: 16px; }
.jbe-thumbs { display: grid; gap: 10px; }
.jbe.is-reader .jbe-thumbs { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-width: thin; }
.jbe:not(.is-reader) .jbe-thumbs { display: none; }
.jbe-thumb { position: relative; display: block; border: 1px solid var(--ink-border); border-radius: 6px; overflow: hidden; background: #fff; }
.jbe-thumb img { display: block; width: 100%; height: auto; }
.jbe-thumb span { position: absolute; right: 4px; bottom: 4px; min-width: 22px; padding: 1px 5px; font: 400 11px/1.4 'Space Mono', monospace; text-align: center; color: var(--cream-100); background: var(--ink-950); border-radius: 4px; }
.jbe-thumb:hover { border-color: var(--glow-700); }
.jbe-thumb[aria-current="page"] { border-color: var(--glow-500); box-shadow: 0 0 0 2px var(--glow-500); }
.jbe-stage { display: grid; gap: 16px; min-width: 0; }
.jbe-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbe:not(.is-reader) .jbe-bar { display: none; }
.jbe .jbe-nav { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; font: inherit; font-size: 18px; color: var(--cream-100); background: transparent; border: 1px solid var(--hairline-strong); border-radius: 50%; box-shadow: none; cursor: pointer; }
.jbe .jbe-nav:hover:not(:disabled) { border-color: var(--glow-500); color: var(--glow-300); }
.jbe .jbe-nav:disabled { opacity: .4; cursor: default; }
.jbe-count { font: 400 13px/1.4 'Space Mono', monospace; color: var(--cream-100); min-width: 110px; text-align: center; }
.jbe-bar-dl { margin-left: auto; font-weight: 600; color: var(--glow-300) !important; }
.jbe-page { margin: 0; display: grid; gap: 10px; scroll-margin-top: 88px; }
.jbe-page[hidden] { display: none; }
.jbe-page img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.jbe-text { max-width: 1100px; width: 100%; margin: 0 auto; font-size: 15px; color: var(--cream-400); }
.jbe-text summary { cursor: pointer; padding: 6px 0; font-weight: 600; color: var(--cream-100); }
.jbe-text div { padding: 8px 0 0; max-width: 72ch; line-height: 1.65; }
.entry-content .jbe .jbe-text p { margin: 0 0 10px; }

/* related */
.jbe-related { display: grid; gap: 20px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.entry-content .jbe .jbe-rel-h { margin: 0; font: 400 28px/1.2 'Lora', serif; color: var(--cream-100); }
.jbe-rel-list, .jbe-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jbe-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 24px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbe-card:hover, .jbe-book:hover { border-color: var(--glow-500); }
.jbe-card-t { font: 400 20px/1.3 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.jbe-card-x { font-size: 14.5px; line-height: 1.55; color: var(--cream-400); }

/* /ebooks/ shelf: the real first page of each PDF as its cover */
.jbe-shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.jbe-book { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 14px 18px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbe-book img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; margin-bottom: 6px; }
.jbe-book .jbe-card-t { font-size: 18px; }
.jbe-shelf-wrap { gap: 28px; }

@media (max-width: 1100px) { .jbe-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.jbe { gap: 36px; }
	.jbe-top { grid-template-columns: minmax(0, 1fr); }
	.jbe-top .jbe-dl { flex-direction: row; align-items: center; }
	.jbe-reader { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.jbe.is-reader .jbe-thumbs { position: static; max-height: none; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; order: 2; }
	.jbe-thumb { flex: 0 0 64px; }
	.jbe-rel-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.jbe-chapters ol { grid-template-columns: minmax(0, 1fr); }
	.jbe-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.entry-content .jbe .jbe-desc { font-size: 17px; }
	.jbe-bar { gap: 8px; padding: 8px; }
	.jbe-count { min-width: 0; flex: 1; }
	.jbe-bar-dl { margin-left: 0; font-size: 14px; }
}