/* ===========================================================================
   Blog: the article list and the article page.

   Loaded only on those two screens (see inc/enqueue.php). Built from the parts
   the rest of the site already uses: the page head, an ink stage behind every
   photograph, the display serif for titles, and gold only as a hairline or a
   single italic word.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Article cards.
   --------------------------------------------------------------------------- */
.lb-post-grid {
	display: grid;
	gap: clamp(2.25rem, 3.5vw, 3.25rem) clamp(1.25rem, 2.5vw, 2.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.lb-post-card {
	display: flex;
	flex-direction: column;
}

/* The stage. Ink behind every photograph, as on the product pages: a picture
   shot on black floats, and one shot in a room reads as a framed print rather
   than a hole in the page. */
.lb-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: var(--lb-space-md);
	border-radius: var(--lb-radius);
	background-color: var(--lb-ink);
	background-image: none;
}

.lb-post-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lb-dur-slow) var(--lb-ease-out);
}

.lb-post-card:hover .lb-post-card__media img { transform: scale(1.03); }

/* No image yet: the wordmark in the display italic, quietly, so an article
   without a photograph still sits in the grid as a finished object. */
.lb-post-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--lb-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	font-style: italic;
	font-weight: 300;
	color: var(--lb-gold);
	opacity: 0.6;
}

.lb-post-meta {
	margin: 0 0 var(--lb-space-xs);
	font-size: var(--lb-size-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	color: var(--lb-on-surface-muted);
}

.lb-post-meta__sep {
	margin-inline: 0.55em;
	color: var(--lb-accent);
}

.lb-post-card__title {
	margin: 0 0 var(--lb-space-sm);
	font-family: var(--lb-font-display);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
}

.lb-post-card__title a { color: inherit; }
.lb-post-card__title a:hover { color: var(--lb-accent); }

.lb-post-card__excerpt {
	margin: 0 0 var(--lb-space-sm);
	line-height: 1.65;
	color: var(--lb-on-surface-muted);
}

.lb-post-card .lb-btn--quiet {
	align-self: flex-start;
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
   The list: empty state and page numbers.
   --------------------------------------------------------------------------- */
.lb-blog__empty {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
	font-style: italic;
	font-weight: 300;
	color: var(--lb-on-surface-muted);
}

.lb-pagination {
	margin-top: var(--lb-space-2xl);
	padding-top: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
}

.lb-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-pagination li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.8em;
	border: 1px solid transparent;
	border-radius: var(--lb-radius-sm);
	font-size: var(--lb-size-small);
	letter-spacing: 0.08em;
	color: var(--lb-on-surface);
	background-image: none;
}

.lb-pagination li > a.page-numbers:hover {
	border-color: var(--lb-rule);
	color: var(--lb-accent);
}

.lb-pagination li > .page-numbers.current {
	border-color: var(--lb-gold);
	color: var(--lb-accent);
}

/* ---------------------------------------------------------------------------
   The article.

   Text is held to a reading measure; the photograph gets a wider frame. Both
   keep the container's side padding, so they line up with the header on every
   screen size.
   --------------------------------------------------------------------------- */
.lb-article__measure {
	max-width: calc(var(--lb-container-text) + 2 * clamp(1.25rem, 4vw, 3.5rem));
}

.lb-article__wide {
	max-width: calc(64rem + 2 * clamp(1.25rem, 4vw, 3.5rem));
}

.lb-article__head {
	padding-bottom: var(--lb-space-md);
	border-bottom: 0;
}

/* Article titles are sentences, not taglines: the page head's 18ch cap broke
   them into a tall stack of three-word lines. */
.lb-article__head .lb-page-head__title {
	max-width: none;
	font-size: clamp(2rem, 1.35rem + 3vw, 3.5rem);
	line-height: 1.12;
}

.lb-article__head .lb-eyebrow a { color: inherit; }

.lb-article__media {
	display: grid;
	place-items: center;
	margin: var(--lb-space-md) 0 var(--lb-space-2xl);
	padding: clamp(1rem, 3vw, 2.5rem);
	border-radius: var(--lb-radius);
	background-color: var(--lb-ink);
}

.lb-article__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 36rem;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Article text.

   A size up from the site's body copy and generous leading: this is the one
   place on the site meant to be read from top to bottom.
   --------------------------------------------------------------------------- */
.lb-prose {
	padding-bottom: var(--lb-space-3xl);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.75;
}

.lb-prose > * { margin: 0 0 1.2em; }
.lb-prose > :last-child { margin-bottom: 0; }

/* The opening paragraph sets the tone, a step larger. */
.lb-prose > p:first-child {
	font-size: 1.12em;
	line-height: 1.65;
	color: var(--lb-on-surface);
}

.lb-prose h2 {
	margin: 2.2em 0 0.6em;
	font-family: var(--lb-font-display);
	font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
}

.lb-prose h3 {
	margin: 1.8em 0 0.5em;
	font-family: var(--lb-font-body);
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0;
}

.lb-prose ul,
.lb-prose ol { padding-left: 1.3em; }

.lb-prose li + li { margin-top: 0.45em; }
.lb-prose li::marker { color: var(--lb-accent); }

.lb-prose strong { font-weight: 600; }

.lb-prose a { color: var(--lb-accent); }

.lb-prose blockquote {
	margin: 2em 0;
	padding-left: var(--lb-space-md);
	border-left: 1px solid var(--lb-gold);
	font-family: var(--lb-font-display);
	font-size: 1.35em;
	font-style: italic;
	line-height: 1.45;
}

.lb-prose blockquote p { margin: 0; }

.lb-prose figure { margin-block: 2em; }

.lb-prose img {
	height: auto;
	border-radius: var(--lb-radius);
}

.lb-prose figcaption {
	margin-top: 0.6em;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

.lb-prose hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background: var(--lb-rule);
}