/* Press — the manifesto's page grammar carries the page (title page,
   text pages, labels, headlines); this sheet only adds the three lists
   the press kit needs: a fact sheet, the founder pair, the assets, and
   the coverage list. */

/* The title page, on ink: the manifesto's full-screen title page with
   the site's green behind it and the name in cream, set upright.
   data-dark on the section tints the nav to match. */
.title-page.press__band {
	background: var(--ink);
}

.press__band .title-page__title {
	font-style: normal;
	color: var(--bg);
}

/* Coverage is a short list, not a screen's worth: it takes only the
   height it needs, with the same padding as a text page. */
.text-page.press__short {
	min-height: 0;
	padding-top: clamp(4rem, 10vh, 6rem);
	padding-bottom: clamp(5rem, 12vh, 7rem);
}

/* Wider column for the lists; the prose pages keep the manifesto's 580. */
.text-page__inner.press__inner--wide {
	max-width: 960px;
	width: 100%;
}

.press__boilerplate {
	text-align: left;
}

/* ── Fact sheet: term and definition as one ruled row each ──────── */
.press__facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

.press__facts dt,
.press__facts dd {
	padding: 0.85rem 0;
	border-top: 1px solid var(--border-light);
	font-family: var(--serif);
	line-height: 1.6;
}

.press__facts dt {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--secondary);
}

.press__facts dd {
	margin: 0;
	font-size: 1.1rem;
	color: var(--ink);
	opacity: 0.8;
}

.press__facts a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--divider);
	transition: border-color 0.2s ease;
}

.press__facts a:hover {
	border-color: var(--ink);
}

/* The page's two links out — to the founders' stories and to the
   contact form — wear the contact page's reason chip: an outlined
   capsule in the serif, ink on hover. */
.press__more {
	display: inline-block;
	font-family: var(--serif);
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--ink);
	text-decoration: none;
	background: transparent;
	border: 1px solid rgba(45, 74, 62, 0.18);
	border-radius: 100px;
	padding: 10px 22px;
	margin-top: var(--space-lg);
	transition: all 0.25s ease;
}

/* Hover fills to ink, the way a chosen reason chip does on the
   contact page — the fill and the text's turn to cream both ride the
   chip's own transition. */
.press__more:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

/* ── Founders: the about page's pair, short ─────────────────────── */
.press__founders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 6vw, 5rem);
	margin: 0 auto var(--space-xl);
	text-align: center;
}

.press__portrait {
	width: 160px;
	height: 160px;
	border-radius: 25px;
	object-fit: cover;
	display: block;
	margin: 0 auto var(--space-md);
}

.press__name {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0 0 var(--space-xs);
}

.press__role {
	font-family: var(--serif);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--amber);
	opacity: 0.7;
	margin: 0 0 var(--space-lg);
}

.press__bio {
	font-family: var(--serif);
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--ink);
	opacity: 0.7;
	text-align: left;
	margin: 0;
}

/* ── Assets: a quiet grid of tiles, each one a download ─────────── */
.press__assets {
	list-style: none;
	padding: 0;
	margin: var(--space-2xl) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	text-align: center;
}

.press__assets a {
	display: grid;
	gap: 0.35rem;
	justify-items: center;
	text-decoration: none;
	color: var(--ink);
}

.press__assets span {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.3;
}

.press__assets small {
	font-family: var(--serif);
	font-size: 0.8rem;
	color: var(--secondary);
	letter-spacing: 0.02em;
}

/* Every thumbnail sits in the same square plate, so the row reads as a
   row whatever the file's own proportions. */
.press__thumb {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 18%;
	border-radius: 18px;
	background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
	border: 1px solid var(--border-light);
	margin-bottom: 0.5rem;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.press__assets a:hover .press__thumb {
	transform: translateY(-3px);
}

/* Portraits, screens, the icon and the share card fill their plate. */
.press__thumb--icon,
.press__thumb--portrait {
	padding: 22%;
	object-fit: cover;
	border-radius: 18px;
}

.press__thumb--icon {
	padding: 24%;
	object-fit: contain;
}

.press__thumb--screen,
.press__thumb--wide {
	padding: 10%;
}

/* ── Coverage: one ruled row per story, the whole row a link out ── */
.press__coverage {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 760px;
	text-align: left;
}

.press__coverage li {
	border-top: 1px solid var(--border-light);
}

.press__coverage li:last-child {
	border-bottom: 1px solid var(--border-light);
}

.press__coverage a {
	display: grid;
	gap: 0.3rem;
	padding: 1.25rem 0;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--serif);
}

/* One line: the outlet in bold, then the piece's title. */
.press__headline {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: opacity 0.2s ease;
}

.press__outlet {
	font-weight: 600;
}

.press__coverage a:hover .press__headline {
	opacity: 0.7;
}

.press__meta {
	font-size: 0.95rem;
	color: var(--secondary);
}

@media (max-width: 768px) {
	.press__facts {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.press__facts dt {
		padding-bottom: 0;
	}
	.press__facts dd {
		border-top: 0;
		padding-top: 0.2rem;
	}
	.press__founders {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.press__assets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Contact: the contact page's form, in a quiet card ───────────
   The about page's seating, rule for rule: the mission photo's 25px
   radius, a hairline instead of a shadow, name and email sharing a
   row on desktop. */
.text-page--contact .text-page__inner {
	max-width: 960px;
	width: 100%;
}

.text-page--contact .text-page__lede {
	font-family: var(--serif);
	font-size: 1.65rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--ink);
	opacity: 0.65;
	letter-spacing: -0.01em;
}

.text-page--contact .contact__form {
	text-align: left;
	margin-top: var(--space-xl);
	background: #f7f8f4;
	border: 1px solid rgba(45, 74, 62, 0.1);
	border-radius: 25px;
	padding: 3rem 3.4rem 2.6rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.7rem 2.6rem;
}

.text-page--contact .field:has(textarea),
.text-page--contact .contact__error {
	grid-column: 1 / -1;
}

.text-page--contact .contact__submit {
	grid-column: 1 / -1;
	justify-self: center;
}

.text-page--contact .field label {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	opacity: 1;
}

@media (max-width: 700px) {
	.text-page--contact .contact__form {
		grid-template-columns: 1fr;
		padding: 2rem 1.4rem 1.8rem;
	}
}

/* On a phone the lede breaks at its comma, so "or anything else."
   holds one line instead of splitting across two. */
.press__lede-break {
	display: none;
}

@media (max-width: 700px) {
	.press__lede-break {
		display: inline;
	}
}

/* ── Page scaffolding ──
   The title band and full-height text pages. These used to come from
   manifesto.css; the manifesto is a plain written page now, so the press
   kit carries its own copy. */
.title-page {
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	position: relative;
	padding: var(--space-4xl) var(--space-xl);
}

.title-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: 0 var(--space-xl);
	position: relative;
	z-index: 2;
}

.title-page__title {
	font-family: var(--serif);
	font-size: 5.5rem;
	font-weight: 300;
	font-style: italic;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1;
}

.text-page {
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
	position: relative;
}

.text-page--alt {
	background: var(--white);
}

.text-page__inner {
	max-width: 580px;
	text-align: center;
}

.text-page__headline {
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-xl);
	color: var(--ink);
}

.text-page__body {
	font-size: 1.1rem;
	line-height: 2;
	color: var(--ink);
	opacity: 0.48;
}

.text-page__page-num {
	position: absolute;
	bottom: var(--space-lg);
	right: var(--space-xl);
	font-family: var(--serif);
	font-size: 0.7rem;
	font-style: italic;
	color: var(--ink);
	opacity: 0.15;
	letter-spacing: 0.05em;
}

@media (max-width: 768px) {
	.title-page {
		padding: 24px;
	}

	.title-page__title {
		font-size: 3.2rem;
	}

	.text-page {
		padding: var(--space-3xl) var(--space-lg);
	}

	.text-page__headline {
		font-size: 2.2rem;
	}

	.text-page__body {
		font-size: 1rem;
	}
}