/* =========================================================================
   Single-post page + Publications/Blog archive.

   Single post hosts a Google Slides iframe as its main content. The
   archive at /publications/ + /fr/publications/ (whitelist filter) and
   /blog/ + /fr/blog/ (exclude filter) shares the same editorial-magazine
   layout: Lexend hero title, year-grouped card grid, ember accents
   against a paper surface. Two body modifiers exist for future
   divergence: .id30-archive--publications and .id30-archive--blog.
   ========================================================================= */
.id30-post {
	max-width: 1120px;
	margin: 0 auto;
	padding: 140px 24px 96px;
}
.id30-post__header { margin-bottom: 40px; }
.id30-post__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-ember);
	margin: 0 0 12px;
}
.id30-post__title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.1;
	color: var(--color-ink);
	margin: 0;
}
.id30-post__body {
	position: relative;
	margin-top: 24px;
	border-radius: 32px;
	overflow: hidden;
	background-color: #0b0f14;
	box-shadow: 0 30px 80px -40px rgba(2, 71, 104, 0.35);
}
.id30-post__body iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}
.id30-post__body > p,
.id30-post__body > div {
	padding: 24px 32px;
	background-color: #fff;
	color: var(--color-ink);
	font-size: 15px;
	line-height: 1.7;
}
.id30-post__footer { margin-top: 32px; }
.id30-post__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 9999px;
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: transform 150ms, background-color 200ms;
}
.id30-post__back:hover {
	background-color: var(--color-paper);
	transform: translateY(-1px);
}

/* =========================================================================
   Publications + Blog archive — /publications/, /fr/publications/,
   /blog/, /fr/blog/. Two body modifiers carry per-page tweaks if needed:
   .id30-archive--publications and .id30-archive--blog.
   ========================================================================= */
/* The manifest hero (stamp / title / subtitle / lead / SVG) is fully
   governed by the .id30-labs-page__* rules in labs-page.css — publications
   wraps its hero in the same .id30-labs-page__manifest > __inner >
   __manifest-grid structure as /labs/, /partners/, /team/, /about/ so all
   five heroes stay in lockstep from one source of truth. */
.id30-archive {
	position: relative;
	padding-bottom: clamp(72px, 10vw, 128px);
}
.id30-archive__content {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- Intro band (post-hero overflow paragraphs, full viewport width) --- */
.id30-archive__intro-band {
	margin: 0 0 clamp(48px, 6vw, 72px);
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	padding: clamp(28px, 3.5vw, 40px) 24px;
}
.id30-archive__intro-band-inner {
	max-width: 1180px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: clamp(0.98rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: var(--color-slate);
}
.id30-archive__intro-band-inner p { margin: 0 0 12px; }
.id30-archive__intro-band-inner p:last-child { margin-bottom: 0; }

/* --- Year sections ------------------------------------------------------- */
.id30-archive__year + .id30-archive__year { margin-top: 96px; }
.id30-archive__year-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
}
.id30-archive__year-label {
	font-family: var(--font-mono);
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	letter-spacing: 0.06em;
	color: var(--color-ember);
	line-height: 1;
}
.id30-archive__year-rule {
	height: 1px;
	background-color: var(--color-line);
}
.id30-archive__year-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-slate);
	white-space: nowrap;
}

/* --- Card grid ----------------------------------------------------------- */
.id30-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 640px)  { .id30-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .id30-archive__grid { grid-template-columns: repeat(3, 1fr); } }

.id30-archive__card {
	position: relative;
	border-radius: 28px;
	background-color: #fff;
	border: 1px solid rgba(2, 71, 104, 0.08);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 60px -40px rgba(2,71,104,0.22);
	overflow: hidden;
	transition: transform 260ms var(--ease-spring), box-shadow 260ms;
}
.id30-archive__card:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 44px 90px -30px rgba(2,71,104,0.32);
}
.id30-archive__card-link {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: 16px;
	padding: 28px 28px 24px;
	height: 100%;
	color: var(--color-ink);
	text-decoration: none;
}
.id30-archive__card-badge {
	justify-self: start;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--color-ember);
	padding: 5px 10px;
	border-radius: 9999px;
	border: 1px solid rgba(226, 39, 1, 0.25);
	background-color: rgba(226, 39, 1, 0.04);
}
.id30-archive__card-title {
	font-family: "Lexend", var(--font-display), sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.28;
	letter-spacing: -0.005em;
	color: var(--color-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.id30-archive__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-deep);
	padding-top: 8px;
	border-top: 1px solid var(--color-line);
	transition: gap 200ms var(--ease-spring), color 200ms;
}
.id30-archive__card:hover .id30-archive__card-cta {
	color: var(--color-ember);
	gap: 10px;
}
.id30-archive__empty {
	padding: 48px 0;
	color: var(--color-slate);
	font-size: 15px;
}