/* =====================================================================
   War-Documentary.info: the page "Selected books" built from its catalog (2026-10-29)
   template-parts/books-catalog.php, inc/wd-books.php, assets/js/wd-books.js.
   Loaded only on that page, once its catalog has books. Everything is inside
   html body div#page.site main#primary.site-main .wb, stronger than the older rules of style-en.css.
   The Topics button and panel of phones and tablets take their look from assets/css/wd-article-nav.css.
   ===================================================================== */
html body.wd-books-on{background:#182f4c}
html body.wd-books-on div#page.site{background:transparent}
html body div#page.site main#primary.site-main .wb{--y:#ffc107;--text:#d5dce6;--muted:#8d9cb0;--soft:#a9b8ca;--ink:#1a2334;--desk:#182f4c;
	color:var(--text);font-family:Transat,sans-serif;font-weight:300;font-size:16px;line-height:1.5;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html body div#page.site main#primary.site-main .wb *,html body div#page.site main#primary.site-main .wb *::before,html body div#page.site main#primary.site-main .wb *::after{box-sizing:border-box;letter-spacing:0;text-transform:none}
html body div#page.site main#primary.site-main .wb p,html body div#page.site main#primary.site-main .wb ul,html body div#page.site main#primary.site-main .wb ol,html body div#page.site main#primary.site-main .wb li,html body div#page.site main#primary.site-main .wb h1,html body div#page.site main#primary.site-main .wb h2,html body div#page.site main#primary.site-main .wb h3{margin:0;padding:0;list-style:none}
html body div#page.site main#primary.site-main .wb li::before,html body div#page.site main#primary.site-main .wb h1::before,html body div#page.site main#primary.site-main .wb h1::after,html body div#page.site main#primary.site-main .wb h2::before,html body div#page.site main#primary.site-main .wb h2::after,html body div#page.site main#primary.site-main .wb h3::before,html body div#page.site main#primary.site-main .wb h3::after{display:none}
html body div#page.site main#primary.site-main .wb a{text-decoration:none;color:inherit}
html body div#page.site main#primary.site-main .wb svg{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body div#page.site main#primary.site-main .wb button{font:inherit;color:inherit;margin:0;border:0;background:none;padding:0;cursor:pointer;text-align:inherit}
html body div#page.site main#primary.site-main .wb .wb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- the cover: the book as it is, with the fold of the spine on its left edge ---------- */
html body div#page.site main#primary.site-main .wb-cover{position:relative;display:block;aspect-ratio:340/520;overflow:hidden;border-radius:3px 6px 6px 3px;background:#22314d;
	box-shadow:0 1px 0 rgba(255,255,255,.05),0 14px 22px -14px rgba(0,0,0,.85)}
html body div#page.site main#primary.site-main .wb-cover img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover}
html body div#page.site main#primary.site-main .wb-cover::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;
	background:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(255,255,255,.22) 2px,rgba(255,255,255,0) 6px,rgba(0,0,0,.1) 8px,rgba(0,0,0,0) 13px),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* a book whose cover is not chosen yet: its title on a dark binding */
html body div#page.site main#primary.site-main .wb-cover--none{display:grid;place-items:center;padding:10px 8px 10px 14px;background:linear-gradient(160deg,#2b416a 0%,#1a2334 100%);color:#e6d29a;font-weight:700;font-size:12px;line-height:1.25;text-align:center}
html body div#page.site main#primary.site-main .wb-cover--none span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}

/* ---------- the first screen: the title, Max's words, and the topics as book spines on a shelf ---------- */
html body div#page.site main#primary.site-main .wb-hero{position:relative;padding:112px 0 64px;
	background:radial-gradient(60% 520px at 78% 30%,rgba(143,184,255,.1) 0%,rgba(143,184,255,0) 70%),radial-gradient(50% 400px at 0% 100%,rgba(12,106,136,.18) 0%,rgba(12,106,136,0) 70%),linear-gradient(180deg,#0f1827 0%,#13223a 55%,#182f4c 100%)}
html body div#page.site main#primary.site-main .wb-hero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:56px;width:min(1260px,100% - 2 * clamp(16px,4vw,64px));margin:0 auto}
html body div#page.site main#primary.site-main .wb-hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:22px}
html body div#page.site main#primary.site-main .wb h1.wb-hero__title{margin:0;color:#fff;font-weight:700;font-size:clamp(36px,2.6vw + 16px,58px);line-height:1.06;letter-spacing:-.012em!important;text-align:left;text-wrap:balance;
	text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:4px;text-underline-offset:.2em}
html body div#page.site main#primary.site-main .wb p.wb-hero__lead{max-width:34em;color:#d5dce6;font-size:19px;line-height:1.6}
html body div#page.site main#primary.site-main .wb ul.wb-hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--soft);font-size:15px}
html body div#page.site main#primary.site-main .wb-hero__facts li{display:flex;align-items:center;gap:8px}
html body div#page.site main#primary.site-main .wb-hero__facts svg{color:var(--muted)}
html body div#page.site main#primary.site-main .wb-hero__facts b{color:#fff;font-weight:700}
html body div#page.site main#primary.site-main .wb a.wb-hero__by{display:inline-flex;align-items:center;gap:14px;margin-top:4px;border-radius:30px}
html body div#page.site main#primary.site-main .wb-hero__by img{width:52px;height:52px;max-width:none;margin:0;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
html body div#page.site main#primary.site-main .wb-hero__by span{display:flex;flex-direction:column;line-height:1.25}
html body div#page.site main#primary.site-main .wb-hero__by i{color:var(--soft);font-family:gotic,Transat,sans-serif;font-size:15px}
html body div#page.site main#primary.site-main .wb-hero__by b{color:#fff;font-weight:700;font-size:17px}
html body div#page.site main#primary.site-main .wb a.wb-hero__by:hover b{text-decoration:underline;text-decoration-color:var(--y);text-underline-offset:.2em}
html body div#page.site main#primary.site-main .wb a.wb-hero__by:focus-visible{outline:2px solid var(--y);outline-offset:4px}
/* the shelf of topics: up to 12 spines on a shelf, a second shelf for more */
html body div#page.site main#primary.site-main .wb-shelf{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:48px;padding:0 18px}
html body div#page.site main#primary.site-main .wb-shelf__row{position:relative;display:flex;align-items:flex-end;gap:6px;width:fit-content;max-width:620px;height:380px}
html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row{height:300px}
html body div#page.site main#primary.site-main .wb-shelf__row::after{content:"";position:absolute;left:-18px;right:-18px;bottom:-14px;height:14px;border-radius:2px;
	background:linear-gradient(180deg,#3a5178 0,#26395a 30%,#1b2b45 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 22px 30px -14px rgba(0,0,0,.8)}
html body div#page.site main#primary.site-main .wb a.wb-spine{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:0 1 56px;min-width:40px;width:56px;height:var(--h);padding:22px 0 16px;border-radius:4px 4px 2px 2px;
	background:linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.14) 22%,rgba(255,255,255,.05) 48%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.34) 100%),var(--c);
	box-shadow:0 18px 26px -18px rgba(0,0,0,.9);color:var(--t);transition:transform .25s ease}
html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row a.wb-spine{height:calc(var(--h) * .78)}
/* two gilt bands at the head and at the foot of the spine */
html body div#page.site main#primary.site-main .wb a.wb-spine::before,html body div#page.site main#primary.site-main .wb a.wb-spine::after{content:"";display:block;position:absolute;left:6px;right:6px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.75}
html body div#page.site main#primary.site-main .wb a.wb-spine::before{top:9px}
html body div#page.site main#primary.site-main .wb a.wb-spine::after{bottom:44px}
html body div#page.site main#primary.site-main .wb-spine__name{overflow:hidden;max-height:calc(100% - 50px);writing-mode:vertical-rl;font-weight:700;font-size:15.5px;line-height:1;white-space:nowrap;text-overflow:ellipsis;padding-top:8px}
html body div#page.site main#primary.site-main .wb-spine__n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:700;font-size:12px}
html body div#page.site main#primary.site-main .wb a.wb-spine:hover,html body div#page.site main#primary.site-main .wb a.wb-spine:focus-visible{transform:translateY(-14px)}
html body div#page.site main#primary.site-main .wb a.wb-spine:focus-visible{outline:2px solid var(--y);outline-offset:3px}

/* ---------- the desk: the list of topics on the left, the white sheet with the books on the right ---------- */
html body div#page.site main#primary.site-main .wb-desk{background:var(--desk)}
html body div#page.site main#primary.site-main .wb-desk__in{display:grid;grid-template-columns:224px minmax(0,1fr);gap:40px;max-width:1500px;margin:0 auto;padding:40px 48px 96px 16px}
html body div#page.site main#primary.site-main .wb-index{position:sticky;top:96px;align-self:start;isolation:isolate;max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px 14px 14px 18px;border-radius:18px;
	background:radial-gradient(90% 50% at 0% 0%,rgba(143,184,255,.08) 0%,rgba(143,184,255,0) 60%),linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%);box-shadow:0 30px 60px -40px rgba(0,0,0,.9);color:var(--muted);font-size:14px;line-height:1.35}
html body div#page.site main#primary.site-main .wb-index::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
	background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 28%,rgba(255,255,255,0) 52%,rgba(143,184,255,.14));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
html body div#page.site main#primary.site-main .wb p.wb-index__title{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-bottom:14px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:17px}
html body div#page.site main#primary.site-main .wb-index__title svg{width:20px;height:20px;color:var(--y)}
html body div#page.site main#primary.site-main .wb-index__title svg circle{fill:currentColor}
html body div#page.site main#primary.site-main .wb .wb-index__list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 -8px;padding:7px 8px;border-radius:8px;transition:background-color .2s ease,color .2s ease}
html body div#page.site main#primary.site-main .wb .wb-index__list a:hover{background:rgba(255,255,255,.05);color:#fff}
html body div#page.site main#primary.site-main .wb .wb-index__list a:focus-visible{outline:2px solid var(--y);outline-offset:-2px}
html body div#page.site main#primary.site-main .wb-index__n{flex:none;color:#6f8097;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
html body div#page.site main#primary.site-main .wb .wb-index__list li.is-current a{background:rgba(255,193,7,.1);box-shadow:inset 3px 0 0 var(--y);color:#fff;font-weight:700}
html body div#page.site main#primary.site-main .wb .wb-index__list li.is-current .wb-index__n{color:var(--y)}
html body div#page.site main#primary.site-main .wb-main{min-width:0}
html body div#page.site main#primary.site-main .wb-topic{scroll-margin-top:96px}
html body div#page.site main#primary.site-main .wb-topic__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-bottom:28px}
html body div#page.site main#primary.site-main .wb h2.wb-topic__title{margin:0;color:#fff;font-weight:700;font-size:clamp(26px,1vw + 18px,34px);line-height:1.15;text-align:left;text-wrap:balance;
	text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:3px;text-underline-offset:.22em}
html body div#page.site main#primary.site-main .wb p.wb-topic__count{display:inline-flex;align-items:center;gap:8px;color:var(--soft);font-size:15px;white-space:nowrap}
html body div#page.site main#primary.site-main .wb-topic__count svg{color:#c9a24a}

/* ---------- the books on white paper, every book a card with its note ---------- */
html body div#page.site main#primary.site-main .wb--b .wb-paper{position:relative;z-index:2;padding:52px clamp(20px,3vw,48px) 60px;border-radius:6px;background:#fff;color:#424c55;
	box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 90px -40px rgba(1,6,16,.85),0 2px 6px rgba(1,6,16,.25)}
html body div#page.site main#primary.site-main .wb--b h2.wb-topic__title{color:#1a2334}
html body div#page.site main#primary.site-main .wb--b p.wb-topic__count{color:#6c757d}
html body div#page.site main#primary.site-main .wb--b .wb-topic__count svg{color:#a77a22}
html body div#page.site main#primary.site-main .wb--b p.wb-topic__intro{max-width:62ch;margin:-12px 0 26px;color:#5c6670;font-size:16.5px;line-height:1.6}
html body div#page.site main#primary.site-main .wb--b .wb-topic + .wb-topic{margin-top:64px;padding-top:52px;box-shadow:inset 0 1px 0 #e6e9ee}
html body div#page.site main#primary.site-main .wb--b .wb-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
html body div#page.site main#primary.site-main .wb--b .wb-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;align-items:start;padding:18px 20px 18px 18px;border-radius:14px;background:#f6f7f9;box-shadow:inset 0 0 0 1px #e6e9ee}
html body div#page.site main#primary.site-main .wb--b .wb-cover{box-shadow:0 10px 18px -10px rgba(20,30,50,.55)}
html body div#page.site main#primary.site-main .wb--b .wb-row__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
html body div#page.site main#primary.site-main .wb--b h3.wb-row__title{margin:0;color:#1a2334;font-weight:700;font-size:18px;line-height:1.28;text-align:left;text-wrap:pretty}
html body div#page.site main#primary.site-main .wb--b p.wb-row__author{margin-top:5px;color:#5c6670;font-size:15px}
html body div#page.site main#primary.site-main .wb--b p.wb-row__facts{margin-top:2px;color:#8a94a0;font-size:13.5px}
html body div#page.site main#primary.site-main .wb--b p.wb-row__note{margin-top:12px;color:#424c55;font-size:15.5px;line-height:1.6;overflow-wrap:break-word}
/* the first five lines of a note, once the script is there to open the rest (without it the whole note shows) */
html body div#page.site main#primary.site-main .wb--b.wb-js p.wb-row__note:not(.is-full){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
html body div#page.site main#primary.site-main .wb--b .wb-row__more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:2px 0;color:#2f5f78;font-weight:700;font-size:14px;border-radius:4px}
html body div#page.site main#primary.site-main .wb--b .wb-row__more[hidden]{display:none}
html body div#page.site main#primary.site-main .wb--b .wb-row__more svg{width:16px;height:16px;transition:transform .2s ease}
html body div#page.site main#primary.site-main .wb--b .wb-row__more[aria-expanded="true"] svg{transform:rotate(180deg)}
html body div#page.site main#primary.site-main .wb--b .wb-row__more:hover span{text-decoration:underline;text-underline-offset:.2em}
html body div#page.site main#primary.site-main .wb--b .wb-row__more:focus-visible{outline:2px solid #2f5f78;outline-offset:3px}

/* ---------- phones and tablets: the Topics panel (the rest of its look: wd-article-nav.css) ---------- */
html body .wd-toc__list a .wb-toc-n{flex:none;margin-left:auto;padding-left:12px;color:#6c757d;font-size:13px;line-height:1.6;white-space:nowrap}
html body .wd-toc__list a[aria-current] .wb-toc-n{color:#3b82ec;font-weight:700}

/* ---------- smaller screens ---------- */
@media (max-width: 1199.98px){
	html body div#page.site main#primary.site-main .wb-desk__in{grid-template-columns:minmax(0,1fr);padding:32px clamp(16px,4vw,40px) 80px}
	html body div#page.site main#primary.site-main .wb-index{display:none}
	html body div#page.site main#primary.site-main .wb--b .wb-rows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 991.98px){
	html body div#page.site main#primary.site-main .wb-hero__in{grid-template-columns:minmax(0,1fr);gap:40px}
	/* the shelf scrolls sideways; its right edge fades while there are more spines to see */
	html body div#page.site main#primary.site-main .wb-shelf{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,4vw,64px));padding:16px calc(clamp(16px,4vw,64px) + 18px) 18px;gap:40px}
	html body div#page.site main#primary.site-main .wb-shelf::-webkit-scrollbar{display:none}
	html body div#page.site main#primary.site-main .wb-shelf.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
	html body div#page.site main#primary.site-main .wb-shelf__row{width:max-content;max-width:none;height:300px}
	html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row{height:250px}
	html body div#page.site main#primary.site-main .wb a.wb-spine{flex:none;width:50px;height:calc(var(--h) * .8)}
	html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row a.wb-spine{height:calc(var(--h) * .64)}
}
@media (max-width: 767.98px){
	html body div#page.site main#primary.site-main .wb-hero{padding:96px 0 40px}
	html body div#page.site main#primary.site-main .wb-hero__in{gap:12px}
	html body div#page.site main#primary.site-main .wb-hero__text{padding-bottom:8px}
	html body div#page.site main#primary.site-main .wb p.wb-hero__lead{font-size:17px}
	html body div#page.site main#primary.site-main .wb ul.wb-hero__facts{gap:8px 18px;font-size:14px}
	html body div#page.site main#primary.site-main .wb-shelf__row{height:236px;gap:5px}
	html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row{height:200px}
	html body div#page.site main#primary.site-main .wb a.wb-spine{width:44px;height:calc(var(--h) * .64);padding:16px 0 12px}
	html body div#page.site main#primary.site-main .wb-shelf__row + .wb-shelf__row a.wb-spine{height:calc(var(--h) * .54)}
	html body div#page.site main#primary.site-main .wb-spine__name{font-size:14px;max-height:calc(100% - 44px)}
	html body div#page.site main#primary.site-main .wb a.wb-spine::after{bottom:38px}
	html body div#page.site main#primary.site-main .wb-spine__n{width:23px;height:23px;font-size:11px}
	html body div#page.site main#primary.site-main .wb--b .wb-paper{margin:0 calc(-1 * clamp(16px,4vw,40px));padding:36px 16px 44px;border-radius:20px 20px 0 0}
	html body div#page.site main#primary.site-main .wb--b .wb-topic + .wb-topic{margin-top:52px;padding-top:44px}
	html body div#page.site main#primary.site-main .wb--b .wb-row{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:14px}
	html body div#page.site main#primary.site-main .wb--b h3.wb-row__title{font-size:16.5px}
}
@media (prefers-reduced-motion: reduce){
	html body div#page.site main#primary.site-main .wb a.wb-spine,html body div#page.site main#primary.site-main .wb--b .wb-row__more svg{transition:none}
	html body div#page.site main#primary.site-main .wb a.wb-spine:hover,html body div#page.site main#primary.site-main .wb a.wb-spine:focus-visible{transform:none}
}
@media print{
	html body.wd-books-on{background:#fff}
	html body div#page.site main#primary.site-main .wb-shelf,html body div#page.site main#primary.site-main .wb-index{display:none}
	html body div#page.site main#primary.site-main .wb-hero{padding:24px 0;background:none}
	html body div#page.site main#primary.site-main .wb h1.wb-hero__title,html body div#page.site main#primary.site-main .wb-hero__facts b,html body div#page.site main#primary.site-main .wb-hero__by b{color:#000}
	html body div#page.site main#primary.site-main .wb-desk{background:none}
	html body div#page.site main#primary.site-main .wb--b .wb-paper{box-shadow:none;padding:0}
	html body div#page.site main#primary.site-main .wb--b p.wb-row__note{display:block!important}
	html body div#page.site main#primary.site-main .wb--b .wb-row__more{display:none!important}
	html body div#page.site main#primary.site-main .wb--b .wb-row{break-inside:avoid}
}