/* =========================================================================
   Social card — shared by the /card endpoint (social images) and the on-site
   hero (inline mode). Type/spacing in cqw so one template scales to any width.
   Depends on design-tokens.css (+ the three brand fonts).
   ========================================================================= */

.card { display: inline-block; }
.card-stage {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* ---- Canvas formats (fixed for social images) ------------------------- */
.fmt-square .card-stage { width: 1080px; aspect-ratio: 1 / 1; }
.fmt-og     .card-stage { width: 1200px; aspect-ratio: 1200 / 630; }
.fmt-story  .card-stage { width: 1080px; aspect-ratio: 1080 / 1920; }

/* Inline (on-site): fill the container, keep the format's aspect ratio. */
.card--inline { display: block; width: 100%; margin: 22px 0 24px; }
.card--inline .card-stage { width: 100%; }
.entry-meta--below { margin: 0 0 32px; }

/* ---- Background: image or honeycomb watermark ------------------------- */
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.55) 40%, rgba(8,8,10,.05) 72%); }
.card-hex { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); }
/* Gradient fade behind the title on text cards: the watermark dissolves into
   the base colour where the headline begins (works in light & dark via --bg). */
.card-fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 64%;
	z-index: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent) 0%, var(--bg) 74%);
}
.fmt-story .card-fade { height: 52%; }

/* ---- Inner frame ------------------------------------------------------ */
.card-inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 6cqw;
}

/* Top: brand + handle */
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-brand { display: inline-flex; align-items: center; gap: 1.4cqw; font-weight: 600; font-size: 2cqw; letter-spacing: -.01em; }
.card-brand .brand-mark { width: auto; height: 3cqw; }
.card-brand b { font-weight: 600; }
.card-handle { font-family: var(--font-mono); font-size: 1.5cqw; letter-spacing: .06em; opacity: .8; }

/* Middle/bottom: eyebrow + title (anchored low) */
.card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.2cqw; }
.card-eyebrow {
	font-family: var(--font-mono);
	font-size: 1.7cqw;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--accent);
	display: flex; flex-wrap: wrap;
}
.card-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 6.6cqw;
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0;
	text-wrap: balance;
	/* keep very long titles from overflowing the canvas */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}
.card-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }

/* Foot: tagline + url */
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4cqw; font-size: 2cqw; }
.card-foot em { font-family: var(--font-display); font-style: italic; color: var(--accent); }
.card-url { font-family: var(--font-mono); font-size: 1.5cqw; letter-spacing: .04em; opacity: .8; }

/* ---- Image cards: white text on scrim, yellow accent ------------------ */
.has-img .card-stage { color: #fff; }
.has-img .card-eyebrow { color: var(--accent-2); }
.has-img .card-title { color: #fff; }
.has-img .card-title em { color: var(--accent-2); }
.has-img .card-foot em { color: var(--accent-2); }

/* ---- Per-format tuning ------------------------------------------------ */
.fmt-og .card-inner { padding: 5cqw; }
.fmt-og .card-title { font-size: 5.4cqw; -webkit-line-clamp: 3; }
.fmt-og .card-body { gap: 1.6cqw; }
.fmt-story .card-title { font-size: 7.4cqw; }
.fmt-story .card-body { justify-content: center; }

/* ---- Inline mode: drop the decorative chrome already on the page ------ */
.card--inline .card-deco { display: none !important; }
.card--inline .card-inner { padding: 5cqw; }
/* On a light page (no image) the inline hero keeps ink text + paper bg. */