/* The Library as stories (Carl's pick B, 10/29): an editorial contents page,
   and each book one long page with a sticky contents. inc/library.php. */
.nz-library {
	--nz-lib-ink: #2B2826;
	--nz-lib-soft: #6E6964;
	--nz-lib-serif: GoudyOldStyleMTStd, Garamond, "Big Caslon", "Times New Roman", serif;
	--nz-lib-futura: Futura, "Futura PT", Jost, sans-serif;
	--nz-lib-italic: "GoudyOldStyle-Italic", GoudyOldStyleMTStd, Garamond, serif;
	--nz-lib-engraved: SackersGothicStd-Heavy, Futura, sans-serif;
	/* The site's column decides the width: 760 px, or the screen with the
	   refresh's Full width (nz-width-full). The layout follows the column
	   (container queries below), not the window. */
	container-type: inline-size;
	color: var(--nz-lib-ink);
	box-sizing: border-box;
}
.nz-library *, .nz-library *::before, .nz-library *::after { box-sizing: border-box; }
.nz-library h1, .nz-library h2 { font-family: var(--nz-lib-serif); font-weight: 400; letter-spacing: .01em; margin: 0; text-transform: none; color: inherit; }
.nz-library img { display: block; max-width: 100%; height: auto; }
/* #main: the theme and the refresh colour every link orange (refresh-warm-text.css);
   an id outranks them, :visited included. Coloured links below carry #main too. */
#main.nz-library a { color: inherit; text-decoration: none; }

.nz-lib-masthead { padding: clamp(24px, 6cqi, 80px) 0 clamp(20px, 4cqi, 44px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; border-bottom: 1px solid var(--nz-lib-ink); }
.nz-library .nz-lib-masthead h1 { font-size: clamp(44px, 9cqi, 96px); line-height: .95; }

.nz-lib-vol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4cqi, 56px); padding: clamp(28px, 5cqi, 64px) 0; border-bottom: 1px solid var(--nz-gray-2, #C7C3C0); }
.nz-lib-vol:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.nz-lib-vol:nth-of-type(even) .nz-lib-peek { order: -1; }
.nz-library .nz-lib-vol h2 { font-size: clamp(30px, 5cqi, 48px); line-height: 1.05; margin: 0 0 10px; }
/* Carl, 10/30: the line in Goudy italic, then READ <BOOK> as an orange link in the engraved caps. */
.nz-lib-blurb { font: 400 clamp(18px, 2.4cqi, 22px)/1.3 var(--nz-lib-italic); /* the face is the italic: no synthetic slant on top */ color: var(--nz-lib-soft); margin: 0 0 22px; }
#main.nz-library .nz-lib-read { font: 400 11px/1.4 var(--nz-lib-engraved); letter-spacing: .12em; text-transform: uppercase; color: var(--nz-orange-text, #C54718); }
#main.nz-library .nz-lib-vol:hover .nz-lib-read { color: var(--nz-orange, #E4541E); }
.nz-lib-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.nz-library .nz-lib-peek img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--nz-gray-4, #EEECEA); transition: opacity .2s; }
.nz-lib-peek.is-spreads { grid-template-columns: 2fr 3fr; }
.nz-library .nz-lib-peek.is-spreads img { aspect-ratio: auto; }
.nz-lib-peek.is-spreads img:first-child { grid-row: span 2; align-self: start; }
.nz-lib-vol:hover .nz-lib-peek img { opacity: .9; }
/* Carl's 11/5 text ("Put space above footer"): the last book sat flush on the footer.
   The plain value is for browsers without container units. */
.nz-lib-vol:last-child { margin-bottom: 80px; margin-bottom: clamp(64px, 12cqi, 120px); }

/* One book as a page */
.nz-lib-story { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4cqi, 64px); padding: 32px 0 120px; }
.nz-lib-side { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; }
#main.nz-library .nz-lib-back { font: 500 11px/1 var(--nz-lib-futura); letter-spacing: .16em; text-transform: uppercase; color: var(--nz-lib-soft); }
.nz-library .nz-lib-side h1 { font-size: 30px; line-height: 1.1; margin: 18px 0; }
.nz-lib-side ol { list-style: none; margin: 0; padding: 0; font: 400 14.5px/1.3 var(--nz-lib-serif); }
.nz-lib-side li { margin: 0; list-style: none; }
#main.nz-library .nz-lib-side ol a { display: block; padding: 6px 0 6px 12px; border-left: 1.5px solid var(--nz-gray-1, #DEDAD5); color: var(--nz-lib-soft); }
#main.nz-library .nz-lib-side ol a.is-on { border-left-color: var(--nz-orange, #E4541E); color: var(--nz-lib-ink); }
.nz-lib-pdf { display: inline-block; margin-top: 22px; font: 500 11px/1 var(--nz-lib-futura); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.nz-lib-pages { display: flex; flex-direction: column; gap: clamp(28px, 4cqi, 56px); }
.nz-lib-pages figure { margin: 0; scroll-margin-top: 24px; }
.nz-lib-pages figure img { width: 100%; box-shadow: 0 20px 40px -24px rgba(43, 40, 38, .45); background: var(--nz-gray-4, #EEECEA); }
.nz-lib-pages figure.is-single { max-width: 720px; }
.nz-lib-pages figure.is-single:nth-of-type(odd) { margin-left: auto; }
.nz-lib-pages figcaption { font: 500 10.5px/1 var(--nz-lib-futura); letter-spacing: .14em; text-transform: uppercase; color: var(--nz-lib-soft); margin-top: 10px; }
.nz-library .nz-lib-opener { font-size: clamp(30px, 5.5cqi, 52px); line-height: 1.05; padding-top: 24px; border-top: 1px solid var(--nz-lib-ink); scroll-margin-top: 24px; }

/* A narrow column (the 760 px one, or a phone): one column, the contents on top.
   The @media copy is for browsers without container queries (Safari before 16). */
@container (max-width: 820px) {
	.nz-lib-masthead { grid-template-columns: 1fr; }
	.nz-lib-vol, .nz-lib-vol:nth-of-type(even) { grid-template-columns: 1fr; }
	.nz-lib-vol:nth-of-type(even) .nz-lib-peek { order: 0; }
	.nz-lib-story { grid-template-columns: 1fr; padding-top: 24px; }
	.nz-lib-side { position: static; max-height: none; }
	.nz-lib-side ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
	#main.nz-library .nz-lib-side ol a { white-space: nowrap; border-left: 0; border-bottom: 1.5px solid var(--nz-gray-1, #DEDAD5); padding: 6px 2px; }
	#main.nz-library .nz-lib-side ol a.is-on { border-bottom-color: var(--nz-orange, #E4541E); }
	.nz-lib-pages figure.is-single, .nz-lib-pages figure.is-single:nth-of-type(odd) { max-width: none; margin: 0; }
}
@media (max-width: 800px) {
	.nz-lib-masthead { grid-template-columns: 1fr; }
	.nz-lib-vol, .nz-lib-vol:nth-of-type(even) { grid-template-columns: 1fr; }
	.nz-lib-vol:nth-of-type(even) .nz-lib-peek { order: 0; }
	.nz-lib-story { grid-template-columns: 1fr; padding-top: 24px; }
	.nz-lib-side { position: static; max-height: none; }
	.nz-lib-side ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
	#main.nz-library .nz-lib-side ol a { white-space: nowrap; border-left: 0; border-bottom: 1.5px solid var(--nz-gray-1, #DEDAD5); padding: 6px 2px; }
	#main.nz-library .nz-lib-side ol a.is-on { border-bottom-color: var(--nz-orange, #E4541E); }
	.nz-lib-pages figure.is-single, .nz-lib-pages figure.is-single:nth-of-type(odd) { max-width: none; margin: 0; }
}
