/* [2026-10-13, counterintel] `/counterintel`: the CounterIntel collaboration page. Its dark palette is the product's own (from the mockup and kiosk slides), so it is declared here as page-scoped
   custom properties rather than borrowed from the house tokens; everything else (type scale of the site's own header, footer, nav) stays the house's. Goals/2026-10-13_counterintel/. */
.ci-page {
	--ci-ground: #0b0910;
	--ci-ground-alt: #110c18;
	--ci-card: #15121d;
	--ci-line: rgba(255, 255, 255, 0.12);
	--ci-text: #f4f1fa;
	--ci-muted: #a9a3b8;
	--ci-pink: #ff3d9a;
	--ci-pink-deep: #e91e7e;
	--ci-gold: #ffb743;
	--ci-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	background: var(--ci-ground);
	color: var(--ci-text);
	font-family: var(--iwe-font-body, system-ui, sans-serif);
	line-height: 1.55;
}
.ci-page * { box-sizing: border-box; }
.ci-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

.ci-eyebrow { font-family: var(--iwe-font-mono, ui-monospace, monospace); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ci-gold); margin: 0 0 14px; display: block; }
.ci-eyebrow--pink { color: var(--ci-pink); }
.ci-h1, .ci-h2, .ci-h3, .ci-band-h { font-family: var(--ci-serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ci-text); margin: 0 0 16px; line-height: 1.12; }
.ci-h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.ci-h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.ci-h3 { font-size: 1.6rem; margin-bottom: 6px; }
.ci-page em { font-style: italic; color: var(--ci-pink); }
.ci-lead { font-size: 1.1rem; color: var(--ci-muted); max-width: 34em; margin: 0 0 24px; }
.ci-lead strong { color: var(--ci-text); }
.ci-fine { font-family: var(--iwe-font-mono, ui-monospace, monospace); font-size: 0.8rem; color: var(--ci-muted); margin: 4px 0 0; }

.ci-cta { display: inline-block; background: var(--ci-pink-deep); color: #fff; font-weight: 700; padding: 14px 28px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 28px rgba(233, 30, 126, 0.35); }
.ci-cta:hover, .ci-cta:focus-visible { background: var(--ci-pink); color: #fff; }
.ci-cta:focus-visible { outline: 3px solid var(--ci-text); outline-offset: 3px; }
.ci-cta--gold { background: var(--ci-gold); color: #1a1208; box-shadow: 0 8px 28px rgba(255, 183, 67, 0.3); }
.ci-cta--gold:hover, .ci-cta--gold:focus-visible { background: #ffc766; color: #1a1208; }
.ci-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.ci-note-member { display: inline-block; margin: 0; padding: 12px 18px; border: 1px solid var(--ci-gold); border-radius: 12px; color: var(--ci-text); }

.ci-hero { overflow: hidden; background: radial-gradient(900px 480px at 85% 30%, rgba(233, 30, 126, 0.16), transparent 70%), var(--ci-ground); }
.ci-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 24px; min-height: 520px; padding-top: 56px; }
.ci-hero-copy { padding-bottom: 56px; align-self: center; }
.ci-hero-img { width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: bottom right; /* feathered on all four sides so the photo's black ground melts into the page's */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 22%, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
	-webkit-mask-composite: source-in; mask-composite: intersect; }

.ci-band { background: linear-gradient(90deg, #2a0f24, #2b2010); border-block: 1px solid var(--ci-line); }
.ci-band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.ci-band-h { font-size: 1.5rem; margin-bottom: 4px; }

.ci-section { padding: 72px 0; background: var(--ci-ground); }
.ci-section--alt { background: var(--ci-ground-alt); }
.ci-cards { list-style: none; margin: 32px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ci-card { display: block; padding: 22px; border: 1px solid var(--ci-line); border-radius: 16px; background: var(--ci-card); }
.ci-card > span { display: block; }
.ci-card-h { font-family: var(--ci-serif); font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; }
.ci-card-p { color: var(--ci-muted); font-size: 0.95rem; }
.ci-coming { color: var(--ci-muted); margin: 0; }
.ci-pill { display: inline-block; background: var(--ci-gold); color: #1a1208; font-family: var(--iwe-font-mono, ui-monospace, monospace); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-right: 8px; }

.ci-collab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 28px; }
.ci-times { color: var(--ci-pink); font-size: 1.8rem; }

.ci-people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.ci-person { display: grid; grid-template-columns: 38% 1fr; gap: 20px; border: 1px solid var(--ci-line); border-radius: 16px; background: var(--ci-card); overflow: hidden; }
.ci-person img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-person > div { padding: 22px 22px 22px 0; color: var(--ci-muted); font-size: 0.95rem; }
.ci-person p { margin: 0 0 10px; }
.ci-person .ci-eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; }

.ci-close { padding: 80px 0; text-align: center; background: radial-gradient(700px 320px at 50% 0%, rgba(233, 30, 126, 0.2), transparent 70%), var(--ci-ground); }
.ci-close-box .ci-lead { margin-inline: auto; }
.ci-close-box .ci-actions { justify-content: center; }

@media (max-width: 820px) {
	.ci-hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; }
	.ci-hero-copy { padding-bottom: 8px; }
	.ci-hero-img { max-height: 380px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 90%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 90%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
	.ci-cards, .ci-people { grid-template-columns: 1fr; }
	.ci-collab { grid-template-columns: 1fr; }
	.ci-times { text-align: center; }
	.ci-section { padding: 48px 0; }
}
@media (max-width: 480px) {
	.ci-person { grid-template-columns: 1fr; }
	.ci-person img { height: 320px; object-position: top; }
	.ci-person > div { padding: 0 20px 20px; }
}