/**
 * Kawah Buku Press — the book archive.
 *
 * hup.harvard.edu/new-releases in this site's palette: a centred title, a row
 * of text controls under it, then covers with a great deal of air around them.
 * There is no sidebar, no card, no border and no box. Harvard's page works
 * because the only heavy things on it are the books, and every control is a
 * word with a chevron after it.
 *
 * Loaded on the archive and the taxonomy archives only. Colours resolve
 * through the tokens in style.css; nothing here introduces one.
 */

/* The box is in style.css. What is here is this page's vertical rhythm, and
   the doubled class is deliberate: theme.json's blockGap puts
   margin-block-start on every child of .wp-site-blocks, and a single class
   ties with it on specificity. */
.kb-archive.kb-shell {
	margin-block-start: 0;
	padding-block: 72px 96px;
}

/* Zeroed, then handed back one piece at a time.

   The doubled class is here to beat core's flow rule — `.is-layout-flow >
   :where(:not(:first-child))` ties with a single class and is then settled by
   whichever stylesheet printed last. But it also beats a plain margin on
   .kb-grid, which is how the first build ended up with every gap on this page
   collapsed to the blockGap default. So the vertical rhythm is set here,
   scoped to the page, rather than on the components themselves.

   Harvard's proportions: the title, the controls, the grid and the pager are
   four separate things, and each gap between them is larger than any gap
   inside them.

   The space at the foot of the page is the shell's padding, not the pager's.
   A filtered view often fits on one page and has no pager at all, and hanging
   the last of the page's air off a component that may not render leaves the
   bottom row of covers sitting on the footer. */
.kb-archive.kb-archive > * { margin-block: 0; }
.kb-archive__head.kb-archive__head > * { margin-block: 0; }

.kb-archive.kb-archive > .kb-archive__controls { margin-block-start: 56px; }
.kb-archive.kb-archive > .kb-grid { margin-block-start: 104px; }
.kb-archive.kb-archive > .kb-pagination { margin-block-start: 96px; }
.kb-archive.kb-archive > .kb-empty { margin-block-start: 80px; }

/* An author page is several grids with a heading over each. The heading takes
   the gap the grid would have had, and the grid beneath it closes up — a
   label 104px above its own list belongs to nothing. */
.kb-archive.kb-archive > .kb-archive__role { margin-block-start: 96px; }
.kb-archive.kb-archive > .kb-archive__role + .kb-grid { margin-block-start: 26px; }

/* Same trap one level down: the reset above zeroes the masthead's children,
   so their spacing has to be written at the same weight to survive it. */
.kb-archive__head.kb-archive__head > .kb-archive__eyebrow + .kb-archive__title { margin-block-start: 14px; }
.kb-archive__head.kb-archive__head > .kb-archive__intro { margin-block-start: 30px; }
.kb-archive__head.kb-archive__head > .kb-archive__children { margin-block-start: 26px; }


/* ==========================================================================
   Title
   ========================================================================== */

.kb-archive__head { text-align: center; }

/* clamp rather than a preset: the presets step in ratios tuned for a book
   page, and this is the largest word on a page with nothing else at the top
   of it. Overpass, not the serif — Lora is reserved for describing a book,
   and a page title is chrome. */
.kb-archive__title {
	margin: 0;
	font-family: var(--kb-font-heading);
	font-size: clamp( 2.25rem, 1.5rem + 3vw, 3.5rem );
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--kb-ink);
}

/* What kind of page this is, or the shelf a subject sits on. The same label
   the mobile drawer puts over its subject groups, so the two surfaces that
   name a taxonomy name it alike. */
.kb-archive__eyebrow {
	margin: 0;
	font-family: var(--kb-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--kb-primary-deep);
}

.kb-archive__eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kb-archive__eyebrow a:hover,
.kb-archive__eyebrow a:focus-visible {
	border-color: currentColor;
	text-decoration: none;
}

/* A term Description, where one has been written. The only prose on the page,
   so it is given a measure rather than the full 1140.

   Set left by default. A centred paragraph gives the eye a different left
   edge on every line, and a biography is a paragraph. */
.kb-archive__intro {
	max-width: 62ch;
	margin-inline: auto;
	font-family: var(--kb-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--kb-body);
	text-align: left;
}

/* Short enough to be a standfirst rather than an account: centred under the
   name, slightly larger, narrower measure. PHP decides which of the two this
   is, on the length of the text the editor actually typed. */
.kb-archive__intro.is-lead {
	max-width: 48ch;
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
}

.kb-archive__intro > *:first-child { margin-top: 0; }
.kb-archive__intro > *:last-child { margin-bottom: 0; }

/* The subjects on a shelf. Fiction and Non-fiction are the only pages that
   have these, and they are the one place the hierarchy is visible — the URLs
   are flat by design. */
.kb-archive__children {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin-inline: 0;
	padding: 0;
}

.kb-archive__children li { margin: 0; }

.kb-archive__children a {
	font-family: var(--kb-font-body);
	font-size: 14px;
	color: var(--kb-body);
	text-decoration: none;
	border-bottom: 1px solid var(--kb-border);
	padding-bottom: 2px;
	transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.kb-archive__children a:hover,
.kb-archive__children a:focus-visible {
	color: var(--kb-ink);
	border-color: var(--kb-ink);
	text-decoration: none;
}


/* ==========================================================================
   Controls

   Centred under the title, and quiet enough that they read as a caption to it
   rather than as a toolbar. Harvard's whole filter interface is two words.
   ========================================================================== */

.kb-archive__controls { text-align: center; }

.kb-archive__drops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 34px;
}


.kb-archive__clear {
	font-family: var(--kb-font-body);
	font-size: 14px;
	color: var(--kb-primary-deep);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kb-archive__clear:hover,
.kb-archive__clear:focus-visible {
	border-color: var(--kb-primary-deep);
	text-decoration: none;
}


/* --- One dropdown --------------------------------------------------------

   <details> and <summary>, so the disclosure is the browser's. The script
   only closes one when another opens; with it gone the controls still work,
   which is the same bargain the facet rows make by being links.
   ------------------------------------------------------------------------ */

.kb-drop {
	position: relative;
	line-height: 1;
}

.kb-drop__trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0;
	font-family: var(--kb-font-body);
	font-size: 15px;
	color: var(--kb-body);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	transition: color 160ms ease-in-out;
}

/* Safari draws its own triangle unless both of these are said. */
.kb-drop__trigger::-webkit-details-marker { display: none; }
.kb-drop__trigger::marker { content: ""; }

.kb-drop__trigger:hover { color: var(--kb-ink); }

.kb-drop.is-on > .kb-drop__trigger { color: var(--kb-ink); font-weight: 500; }

.kb-drop__chev {
	flex: none;
	color: var(--kb-muted);
	transition: transform 180ms ease-out;
}

.kb-drop[open] > .kb-drop__trigger { color: var(--kb-ink); }
.kb-drop[open] .kb-drop__chev { transform: rotate( 180deg ); }


/* --- Its panel ------------------------------------------------------------

   The one place on this page with a border, because a floating list needs an
   edge to be a list rather than text lying on top of the covers.
   ------------------------------------------------------------------------ */

.kb-drop__panel {
	position: absolute;
	top: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	z-index: 30;
	min-width: 220px;
	max-width: 300px;
	padding: 8px 0;
	background: var(--kb-card);
	border: 1px solid var(--kb-border);
	box-shadow: 0 10px 28px rgba( 23, 20, 15, 0.12 );
	text-align: left;
}

.kb-drop__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}

.kb-drop__list li { margin: 0; }

.kb-drop__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	font-family: var(--kb-font-body);
	font-size: 14px;
	line-height: 1.3;
	color: var(--kb-body);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease-in-out, color 140ms ease-in-out;
}

.kb-drop__row:hover,
.kb-drop__row:focus-visible {
	background: var(--kb-surface);
	color: var(--kb-ink);
	text-decoration: none;
}

.kb-drop__name { flex: 1 1 auto; }

.kb-drop__count {
	flex: none;
	font-size: 12px;
	color: var(--kb-muted);
	font-variant-numeric: tabular-nums;
}

/* A square that fills when the filter is on. Drawn rather than checked with a
   glyph so it takes the ink colour and cannot pick up a font with no tick in
   it — the accessibility plugin swaps the family under this. */
.kb-drop__mark {
	position: relative;
	flex: none;
	width: 13px;
	height: 13px;
	border: 1px solid var(--kb-border-hover);
	background: var(--kb-card);
	transition: background-color 140ms ease-in-out, border-color 140ms ease-in-out;
}

.kb-drop__row:hover .kb-drop__mark { border-color: var(--kb-ink); }

.kb-drop__row.is-on { color: var(--kb-ink); font-weight: 500; }

.kb-drop__row.is-on .kb-drop__mark {
	background: var(--kb-ink);
	border-color: var(--kb-ink);
}

.kb-drop__row.is-on .kb-drop__mark::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate( 45deg );
}


/* ==========================================================================
   Grid

   Five across, as Harvard runs it. At 1140 that is a cover a little over
   180px — smaller than the front page's 280, which is right: the front page
   is pointing at six books and this page is showing everything.

   COVERS ARE BOTTOM-ALIGNED. Their heights differ — one book here is 16.5 by
   32cm — and a row of tops lined up with ragged bottoms puts the titles at
   five different heights. Aligning the bottoms puts every title on one line
   and lets the covers be whatever shape they are, which is Harvard's
   arrangement and the reason theirs reads as a shelf.
   ========================================================================== */

.kb-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 88px 56px;
	margin: 0;
	padding: 0;
}

.kb-card { margin: 0; }

.kb-card__link { display: block; text-decoration: none; }

/* position: relative for the forthcoming ribbon, which is pinned to this
   box's bottom-left corner. */
.kb-card__cover { position: relative; }

/* The box a cover falls to the bottom of. 2:3 is the shape of most of them,
   so a standard cover fills it exactly; anything taller is constrained by
   height and comes out a little narrower rather than overflowing into the
   row above. */
.kb-card__cover {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	aspect-ratio: 2 / 3;
	margin-bottom: 18px;
}

.kb-card__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transition: transform 240ms ease-out;
}

/* A cover the catalogue does not have yet still has to hold its space, or the
   row it sits in stops being a row. */
.kb-card__img--empty {
	width: 100%;
	height: 100%;
	background: var(--kb-surface);
	border: 1px solid var(--kb-border);
}

.kb-card__link:hover .kb-card__img,
.kb-card__link:focus-visible .kb-card__img { transform: translateY( -4px ); }

.kb-card__title {
	display: block;
	font-family: var(--kb-font-body);
	font-size: 15px;
	line-height: 1.35;
	color: var(--kb-ink);
}

.kb-card__link:hover .kb-card__title,
.kb-card__link:focus-visible .kb-card__title {
	color: var(--kb-primary-deep);
	text-decoration: underline;
}

.kb-card__byline {
	display: block;
	margin-top: 6px;
	font-family: var(--kb-font-body);
	font-size: 13px;
	line-height: 1.35;
	color: var(--kb-muted);
}


/* --- Forthcoming ---------------------------------------------------------

   A tab on the bottom-left corner of the jacket. That corner rather than the
   top one because covers are bottom- and left-aligned in the box, so it is
   the only corner guaranteed to be the image's corner whatever shape the
   jacket is.

   Gold with ink on it. This is what --kb-primary is for — a mark rather than
   text — and ink on gold is 7.4:1, where gold on white is 2.0:1 and fails.
   It is also the only saturated thing in the grid, which is the point: one
   book in twenty is wearing it.
   ------------------------------------------------------------------------ */

.kb-card__ribbon {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	padding: 5px 9px;
	background: var(--kb-primary);
	font-family: var(--kb-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--kb-ink);
	white-space: nowrap;
}

/* Tied to the ribbon by colour rather than repeating the word. The ribbon
   says that it is coming; this says roughly when. */
.kb-card__when {
	display: block;
	margin-top: 5px;
	font-family: var(--kb-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kb-primary-deep);
}


/* What a person did on the books beneath it. Only rendered where somebody has
   more than one role in the catalogue, so most author pages never show it. */
.kb-archive__role {
	margin: 0;
	font-family: var(--kb-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--kb-primary-deep);
	text-align: center;
}


/* ==========================================================================
   Empty

   The main site's .kb-collection-empty, measurement for measurement: a 110px
   drawn mark, 26px under it, a 24px title, a 15px paragraph and a 480px column
   to hold them. Colours and one shape do not carry across — see below.

   This belongs in a shared file the day 404.html and search.html want it, and
   they will. It is here for now because the archive is the only thing that
   renders it, and a component with one caller is not yet a component.
   ========================================================================== */

.kb-empty {
	max-width: 480px;
	margin-inline: auto;
	padding: 32px 20px 72px;
	text-align: center;
}

/* Quiet enough to be a mark rather than an illustration. border-hover is the
   lightest token that still reads at 110px against white. */
.kb-empty__art {
	margin-bottom: 26px;
	color: var(--kb-border-hover);
}

.kb-empty__svg {
	display: inline-block;
	width: 110px;
	height: 110px;
}

.kb-empty__title {
	margin: 0 0 12px;
	font-family: var(--kb-font-heading);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--kb-ink);
}

.kb-empty__body {
	margin: 0 0 26px;
	font-family: var(--kb-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--kb-body);
}

/* The shop draws this as a 40px pill. Square here: theme.json sets a 0 radius
   on every button, the Look Inside download and the form submits are both
   square, and one rounded control would be the only rounded thing on the
   press site. Same proportions, this site's shape. */
.kb-empty__cta {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	border: 1px solid var(--kb-border-hover);
	font-family: var(--kb-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-ink);
	text-decoration: none;
	transition: background-color 180ms ease-in-out, border-color 180ms ease-in-out, color 180ms ease-in-out;
}

.kb-empty__cta:hover,
.kb-empty__cta:focus-visible {
	background: var(--kb-ink);
	border-color: var(--kb-ink);
	color: #fff;
	text-decoration: none;
}


/* ==========================================================================
   Pagination

   kawahbuku.com's .kb-pagination, measurement for measurement: 36px minimum,
   8px by 10px of padding, an 8px radius, 14px type, 2px between. The three
   colours it hard-codes are tokens here — #7a5c44 is --kb-primary-deep's
   role, #202124 is --kb-utility's, #F7F5F0 is --kb-surface's — so a change to
   the palette reaches this too.

   Bottom space is padding rather than margin, as it is there, so it cannot
   collapse away and the breathing room before the footer travels with the
   component. The 40px above it is the component's own; this page overrides it
   to 88 in the rhythm block near the top, because Harvard leaves far more room
   there than a search results page needs.
   ========================================================================== */

.kb-pagination {
	margin-top: 40px;
	padding-bottom: 72px;
	text-align: center;
}

/* Both of the component's own spacings are the page's business here: the top
   is set in the rhythm block near the start of this file, and the bottom is
   the shell's padding — which is there whether or not this nav is. */
.kb-archive .kb-pagination { padding-bottom: 0; }

.kb-pagination .page-numbers {
	display: inline-block;
	min-width: 36px;
	padding: 8px 10px;
	margin: 0 2px;
	border-radius: 8px;
	font-family: var(--kb-font-body);
	font-size: 14px;
	color: var(--kb-primary-deep);
	text-decoration: none;
	transition: background-color 150ms ease;
}

.kb-pagination .page-numbers.current {
	background: var(--kb-utility);
	color: #fff;
}

.kb-pagination .page-numbers.dots { color: var(--kb-muted); }

.kb-pagination .page-numbers:hover:not(.current):not(.dots) {
	background: var(--kb-surface);
	text-decoration: none;
}

/* paginate_links(type=plain) needs no list resets; kept from the main site's
   component so a ul variant would not fall through to theme list styling. */
.kb-pagination ul { list-style: none; margin: 0; padding: 0; display: inline; }
.kb-pagination li { display: inline; }


/* ==========================================================================
   Narrower
   ========================================================================== */

@media (max-width: 1000px) {
	.kb-archive.kb-archive > .kb-grid { margin-block-start: 88px; }

	.kb-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 72px 48px;
	}
}

@media (max-width: 781px) {
	.kb-archive.kb-shell { padding-block: 44px 56px; }

	/* The same proportions, scaled: still the largest gaps on the page, but a
	   104px band of nothing is a third of a phone screen. */
	.kb-archive.kb-archive > .kb-archive__controls { margin-block-start: 36px; }
	.kb-archive.kb-archive > .kb-grid { margin-block-start: 60px; }
	.kb-archive.kb-archive > .kb-pagination { margin-block-start: 56px; }
	.kb-archive.kb-archive > .kb-empty { margin-block-start: 48px; }
	.kb-archive.kb-archive > .kb-archive__role { margin-block-start: 56px; }
	.kb-archive.kb-archive > .kb-archive__role + .kb-grid { margin-block-start: 20px; }

	.kb-archive__head.kb-archive__head > .kb-archive__intro { margin-block-start: 24px; }
	.kb-archive__head.kb-archive__head > .kb-archive__children { margin-block-start: 20px; }

	.kb-archive__intro { font-size: 15px; }
	.kb-archive__intro.is-lead { font-size: 16px; }

	.kb-archive__drops { gap: 8px 24px; }
	.kb-drop__trigger { font-size: 14px; }

	.kb-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 52px 28px;
	}

	.kb-card__title { font-size: 14px; }
	.kb-card__byline { font-size: 12px; }
	.kb-card__ribbon { padding: 4px 7px; font-size: 9px; }
	.kb-card__when { font-size: 11px; }

	.kb-empty { padding: 20px 10px 52px; }
	.kb-empty__art { margin-bottom: 20px; }
	.kb-empty__svg { width: 92px; height: 92px; }
	.kb-empty__title { font-size: 21px; }
}

@media (max-width: 520px) {
	.kb-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
	}

	/* A panel centred on a control near the edge of a phone hangs off it.
	   Anchored to the near edge instead, and as wide as the screen allows. */
	.kb-drop__panel {
		left: 0;
		transform: none;
		min-width: 200px;
		max-width: 78vw;
	}

	.kb-drop:last-of-type .kb-drop__panel { left: auto; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kb-card__img,
	.kb-drop__chev,
	.kb-drop__mark,
	.kb-drop__row,
	.kb-pagination .page-numbers { transition: none; }

	.kb-card__link:hover .kb-card__img { transform: none; }
}