/* =========================================================================
   THE ESSAY ARCHIVE

   The page is a grid and almost nothing else, so this sheet is small on
   purpose. It owns the shell, the heading block and the load-more row.
   Everything from the <ul> down is essay-card.css — the archive renders
   the same cards in the same list as the related rail and the shortcode,
   and a second grid definition here is exactly how the three would start
   to disagree.

   Nothing in this file restyles a card. If a card needs to change, it
   changes in essay-card.css and every listing follows.
   ========================================================================= */

.befello-essay-archive {
	/* Matches the single-Essay shell so a reader moving from the archive
	   into an essay does not see the page's left edge jump. */
	--bfa-gutter: clamp(20px, 3vw, 96px);

	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--bfa-gutter);
	padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px);
	background: var(--befello-canvas);
}

/* --- The heading block --------------------------------------------------
   Title, an optional term description, then the count. No eyebrow above
   the title: a mono stamp reading ESSAYS over a heading reading Essays is
   two labels for one thing. */

.essay-archive__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.essay-archive__title {
	margin: 0;
	color: var(--befello-ink);
	font-family: var(--befello-font);
	/* The display step, with the negative tracking that makes it read as
	   the brand's display face rather than as plain rounded sans. */
	font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

/* A term description is editorial prose, so it gets the reading face and a
   real measure rather than running the full width of a 1440px shell. */
.essay-archive__intro {
	max-width: 62ch;
	margin: 16px 0 0;
	color: var(--befello-ink);
	font-family: var(--befello-font-dek);
	font-size: 1.125rem;
	line-height: 1.6;
}

.essay-archive__intro p {
	margin: 0 0 12px;
}

.essay-archive__intro p:last-child {
	margin-bottom: 0;
}

/* The count is metadata, not a heading — muted, small, and below the
   description so the description stays attached to the title.

   Body font, not the mono stamp. A single essay states its own facts as
   "Awarded · 2025 · 222 words" in plain muted body text, and this is the
   same kind of line about the same kind of thing; setting it in uppercase
   mono made a count look like a section label. 5.49:1 on white. */
.essay-archive__count {
	margin: 12px 0 0;
	color: var(--befello-ink-muted);
	font-family: var(--befello-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* --- Load more ----------------------------------------------------------
   Centred and given real space above it, because it is the end of the
   grid and it should read as the end rather than as a seventeenth card.

   The control itself is .befello-btn--secondary — the theme's existing
   quiet button. Deliberately NOT the blue primary: the page's primary
   action is opening an essay, and sixteen cards already offer it. A blue
   button here would outrank all sixteen of them. */

.essay-archive__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 4vw, 48px);
}

/* Wide enough to read as a deliberate control rather than as a text link
   that happens to have a border, and capped so it never spans the grid. */
.essay-archive__more-btn {
	min-width: 240px;
}

/* aria-busy is set by the script while a fetch is in flight. Pointer
   events go with it, so a second click cannot queue a second page. */
.essay-archive__more-btn[aria-busy="true"] {
	pointer-events: none;
	opacity: 0.65;
}

/* --- Phone --------------------------------------------------------------
   The grid drops to one card per row on its own (essay-card.css). This
   only tightens the shell and lets the button span the width, which is
   the native shape for a full-width action at the end of a list. */

@media (max-width: 640px) {
	.befello-essay-archive {
		--bfa-gutter: 16px;
	}

	.essay-archive__more-btn {
		width: 100%;
		min-width: 0;
	}
}