/**
 * Récits archive: journal front page (à la une + two-column entries).
 *
 * Adapted from sliceofcactus-astro/src/pages/recits/index.astro and
 * sliceofcactus-astro/public/css/style.css. The shared magazine-hub chrome
 * (mag-runhead) lives in assets/styles/components/magazine-hub.css; this
 * file only overrides it for the paper (non-colored) Récits background.
 */

body.post-type-archive-recit,
body.single-recit {
	--accent: #8B663F;
	--accent-deep: #523a20;
	background: var(--paper);
	color: var(--ink);
}

/*
 * The header's typography is paper-toned to float over the dark hero of
 * every other template. Récits have no dark hero — the page is paper from
 * the first pixel — so instead of re-tinting that typography, the header
 * gets the same dark backing as the footer and keeps its original colors.
 * Only the .is-solid (scrolled) state needs a nudge: it has no color rule
 * of its own, so it normally just inherits the body text color, which is
 * now ink for récits and would vanish against this dark bar.
 */
body.post-type-archive-recit .nav,
body.single-recit .nav {
	background: var(--accent);
}

body.post-type-archive-recit .nav.is-solid .nav__logo,
body.post-type-archive-recit .nav.is-solid .custom-logo-link,
body.post-type-archive-recit .nav.is-solid .nav__links a,
body.single-recit .nav.is-solid .nav__logo,
body.single-recit .nav.is-solid .custom-logo-link,
body.single-recit .nav.is-solid .nav__links a {
	color: var(--paper);
}

body.post-type-archive-recit .nav.is-solid .nav__burger span,
body.single-recit .nav.is-solid .nav__burger span {
	background: var(--paper);
}

/*
 * The footer's typography is all paper-toned, meant to sit on the dark body
 * background every other template keeps. Récits switched that background to
 * paper, so the footer needs its own dark backing to stay legible — simpler
 * than re-tinting every footer color for one template.
 */
body.post-type-archive-recit .footer,
body.single-recit .footer {
	background: var(--accent);
}

body.post-type-archive-recit .mag-runhead,
body.single-recit .mag-runhead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-content: normal;
	border-bottom: 1px solid rgb(251 238 218 / 22%);
	background: var(--accent);
	color: rgb(251 238 218 / 75%);
}

body.post-type-archive-recit .mag-runhead b,
body.single-recit .mag-runhead b {
	color: var(--paper);
}

body.post-type-archive-recit .mag-runhead a,
body.single-recit .mag-runhead a {
	color: inherit;
	text-decoration: none;
}

body.post-type-archive-recit .mag-runhead a:hover,
body.single-recit .mag-runhead a:hover {
	color: var(--paper);
}

/* Grid instead of the shared flex/space-between: the middle label needs to
   sit on the true viewport center, matching the RÉCITS masthead centered
   below it — space-between only centers it when both side labels are the
   same width, which "Slice of Cactus — Récits" and "N récits" never are. */
body.post-type-archive-recit .mag-runhead > span:first-child,
body.single-recit .mag-runhead > span:first-child {
	justify-self: start;
}

body.post-type-archive-recit .mag-runhead > span:nth-child(2),
body.single-recit .mag-runhead > span:nth-child(2) {
	justify-self: center;
}

body.post-type-archive-recit .mag-runhead > span:last-child,
body.single-recit .mag-runhead > span:last-child {
	justify-self: end;
}

.journal-name {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 5.2rem var(--gutter) 1.2rem;
	border-bottom: 3px double var(--paper);
	background: var(--accent);
	color: var(--paper);
	text-align: center;
}

.journal-name h1 {
	font-family: var(--font-head);
	font-weight: 900;
	font-size: clamp(3rem, 10vw, 6.5rem);
	line-height: .9;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.journal-name .sub {
	margin-top: .35rem;
	color: rgb(251 238 218 / 80%);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.1rem;
}

.journal-folio {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.9rem;
	color: rgb(251 238 218 / 65%);
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.journal-lead {
	display: block;
	max-width: 720px;
	margin: 0 auto;
	padding: 4.2rem 0 4.8rem;
	border-bottom: 1px solid rgb(20 18 16 / 22%);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	cursor: none;
}

.journal-lead__title {
	margin: .5rem 0 .6rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.2rem, 5.4vw, 3.8rem);
	line-height: 1.02;
}

.journal-lead__ex {
	max-width: 56ch;
	margin: 0 auto;
	color: #3a352e;
	font-family: var(--font-display);
	font-size: 1.48rem;
	line-height: 1.2;
}

.journal-lead__more {
	display: inline-block;
	margin-top: 1.8rem;
	padding-bottom: .15rem;
	border-bottom: 2px solid var(--accent);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.journal-lead:hover .journal-lead__title {
	color: var(--accent);
}

.journal-cols {
	columns: 2;
	column-gap: clamp(2rem, 5vw, 4rem);
	column-rule: 1px solid rgb(20 18 16 / 22%);
	padding: 1.8rem 0 3.5rem;
}

.entry {
	display: block;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgb(20 18 16 / 14%);
	color: var(--ink);
	text-decoration: none;
	break-inside: avoid;
	cursor: none;
}

.entry__thumb {
	float: right;
	width: 60px;
	height: 60px;
	margin: .15rem 0 .5rem .9rem;
	border-radius: 2px;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	opacity: .85;
}

.entry__k {
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.entry__t {
	margin: .3rem 0 .35rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1;
}

.entry__ex {
	color: #4a443c;
	font-family: var(--font-display);
	font-size: 1.1rem;
    line-height: 1.2;
}

.entry:hover .entry__t {
	color: var(--accent);
}

@media (max-width: 720px) {
	.journal-cols {
		columns: 1;
	}
}

.journal-pagination {
	margin-top: 1.4rem;
	padding-top: 1.8rem;
	border-top: 1px solid rgb(20 18 16 / 22%);
}

.journal-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.journal-pagination a.page-numbers,
.journal-pagination span.page-numbers {
	display: inline-block;
	padding: .35rem .5rem;
	color: var(--grey);
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	text-decoration: none;
}

.journal-pagination a.page-numbers:hover,
.journal-pagination a.page-numbers:focus-visible {
	color: var(--accent);
}

.journal-pagination span.page-numbers.current {
	color: var(--ink);
	font-weight: 700;
	border-bottom: 2px solid var(--accent);
}

.journal-pagination .page-numbers.dots {
	color: rgb(20 18 16 / 35%);
}

.journal-pagination .page-numbers.prev,
.journal-pagination .page-numbers.next {
	text-transform: uppercase;
	letter-spacing: .1em;
}