/**
 * Speaker archive — the light directory surface.
 *
 * Every colour here comes from the --site-* recipe declared in ACSS Global
 * SCSS on .speaker-directory. Nothing reaches for an ACSS token directly:
 * website-color-scheme is `dark only`, so all 76 scheme-sensitive tokens
 * resolve to their dark half everywhere, .site-page included. A --site-* token
 * is the only safe source on this page. See IMPLEMENTATION-DECISIONS.md.
 */

/* The recipe is scoped to .speaker-directory, so the page root carries both
   classes rather than duplicating the token block. */
.site-page { display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	color: var(--site-ink); }

/* --- shared chrome ------------------------------------------------ */

.site-header { position: sticky;
	inset-block-start: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	block-size: 64px;
	padding-inline: 32px;
	background: rgba(255, 255, 255, 0.62);
	border-block-end: 1px solid var(--site-glass-edge);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur);

	@media (width <= 700px) { padding-inline: 20px; gap: 12px; } }

.site-header__mark { display: block; flex: none; }

.site-header__nav { display: flex; align-items: center; gap: 8px; }

.site-pill { display: inline-flex;
	align-items: center;
	gap: 7px;
	block-size: 36px;
	padding-inline: 14px;
	border: 1px solid var(--site-glass-edge);
	border-radius: 980px;
	background: var(--site-glass-fill-strong);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur);
	box-shadow: var(--site-glass-shadow);
	color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 12.8px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: var(--sb-transition, 0.22s ease); }

.site-pill:hover,
.site-pill:focus-visible { border-color: var(--site-glass-edge);
	color: var(--site-ink); }

/* The current page. aria-current carries the meaning; this carries the tint. */
.site-pill--on { background: var(--site-tint);
	border-color: var(--site-tint-edge);
	color: var(--site-tint-ink); }

.site-pill svg { inline-size: 15px; block-size: 15px; display: block; flex: none; }

.site-footer { margin-block-start: auto;
	border-block-start: 1px solid var(--site-glass-edge);
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur); }

.site-footer__inner { display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	inline-size: 100%;
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: 26px 32px; }

.site-footer__line,
.site-footer__nav a { color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none; }

.site-footer__nav { display: flex; gap: 20px; }
.site-footer__nav a:hover { color: var(--site-ink); }

/* --- page body ----------------------------------------------------- */

.site-main { inline-size: 100%;
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: 52px 32px 88px;

	@media (width <= 700px) { padding: 34px 20px 56px; } }

.sb-eyebrow { color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase; }

.sb-intro { display: flex; flex-direction: column; gap: 20px; margin-block-end: 40px; }

.sb-intro__title { margin: 0;
	max-inline-size: 26ch;
	color: var(--site-ink);
	font-family: var(--text-font-family);
	font-size: clamp(1.9rem, 3.8vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.14;
	text-wrap: balance; }

/* Ink-mid, not ink-soft: this sits directly on the field, and ink-soft is for
   supporting text on glass only -- 4.09:1 on the media background. */
.sb-intro__lede { margin: 0;
	max-inline-size: 62ch;
	color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	line-height: 1.6;
	text-wrap: pretty; }

.sb-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block-start: 4px; }

.sb-search__field { display: flex;
	align-items: center;
	gap: 11px;
	flex: 1 1 340px;
	block-size: 52px;
	padding-inline: 20px;
	border: 1px solid var(--site-glass-edge);
	border-radius: 980px;
	background: var(--site-glass-fill-strong);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur);
	box-shadow: var(--site-glass-shadow); }

.sb-search__input { flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	outline: none;
	color: var(--site-ink);
	font-family: var(--text-font-family);
	font-size: 15.5px; }

.sb-search__input::placeholder { color: var(--site-ink-mid); }

.sb-filters { display: flex; flex-direction: column; gap: 12px; margin-block-end: 36px; }

.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sb-chip { display: inline-flex;
	align-items: center;
	block-size: 34px;
	padding-inline: 15px;
	border: 1px solid var(--site-glass-edge);
	border-radius: 980px;
	background: var(--site-glass-fill);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur);
	color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 12.8px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease; }

.sb-chip--on { background: var(--site-tint);
	border-color: var(--site-tint-edge);
	color: var(--site-tint-ink); }

.sb-results { display: flex; flex-direction: column; gap: 18px; }

.sb-results__head { display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--site-glass-edge); }

.sb-results__title { margin: 0;
	color: var(--site-ink);
	font-family: var(--text-font-family);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2; }

.sb-results__count { color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 12.5px;
	font-weight: 500; }

/* --- empty state ---------------------------------------------------- */

.sb-empty { display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 40px 32px;
	border: 1px solid var(--site-glass-edge);
	border-radius: 18px;
	background: var(--site-glass-fill);
	backdrop-filter: var(--site-glass-blur);
	-webkit-backdrop-filter: var(--site-glass-blur);
	box-shadow: var(--site-glass-shadow); }

.sb-empty__line { color: var(--site-ink);
	font-family: var(--text-font-family);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	text-wrap: pretty; }

/* On glass, which is where ink-soft is allowed. */
.sb-empty__hint { max-inline-size: 52ch;
	color: var(--site-ink-mid);
	font-family: var(--text-font-family);
	font-size: 13.8px;
	line-height: 1.6;
	text-wrap: pretty; }

.sb-empty__clear { display: inline-flex;
	align-items: center;
	block-size: 40px;
	padding-inline: 18px;
	border: 1px solid var(--site-tint-edge);
	border-radius: 980px;
	background: var(--site-tint);
	color: var(--site-tint-ink);
	font-family: var(--text-font-family);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none; }

/* --- cards ---------------------------------------------------------- */

.sb-grid { display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 20px; }

.sb-card { position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--site-glass-edge);
	border-radius: 18px;
	background: oklch(0.3 0.05 269.6);
	box-shadow: var(--site-glass-shadow);
	cursor: pointer;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }

.sb-card:hover,
.sb-card:focus-visible { transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.42);
	box-shadow: 0 14px 42px oklch(0.227 0.056 269.6 / 0.28); }

.sb-card__photo { position: absolute;
	inset: 0;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform 0.4s ease; }

.sb-card__photo--empty { background-image: linear-gradient(165deg, oklch(0.38 0.05 269.6) 0%, oklch(0.27 0.05 269.6) 100%); }

.sb-card:hover .sb-card__photo,
.sb-card:focus-visible .sb-card__photo { transform: scale(1.04); }

/* FULL HEIGHT, with the gradient doing the work. Sizing this to the text band
   was the original bug: hover then has no upper photo to darken, so the card
   cannot deepen. Seven stops so the ramp has no visible edge. */
.sb-card__scrim { position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	block-size: 100%;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(5, 10, 25, 0.88) 0%,
		rgba(5, 10, 25, 0.84) 26%,
		rgba(5, 10, 25, 0.76) 36%,
		rgba(5, 10, 25, 0.52) 43%,
		rgba(5, 10, 25, 0.22) 49%,
		rgba(5, 10, 25, 0.06) 54%,
		rgba(5, 10, 25, 0) 58%);
	transition: background 0.28s ease; }

.sb-card:hover .sb-card__scrim,
.sb-card:focus-visible .sb-card__scrim { background: linear-gradient(to top,
		rgba(5, 10, 25, 0.94) 0%,
		rgba(5, 10, 25, 0.92) 26%,
		rgba(5, 10, 25, 0.86) 36%,
		rgba(5, 10, 25, 0.62) 43%,
		rgba(5, 10, 25, 0.28) 49%,
		rgba(5, 10, 25, 0.08) 54%,
		rgba(5, 10, 25, 0) 58%); }

.sb-card__body { position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 17px 17px; }

.sb-card__name { color: #fff;
	font-family: var(--text-font-family);
	font-size: 17.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(5, 10, 25, 0.6); }

/* Two lines in EVERY state. Hover deepens the scrim; it never reveals text. */
.sb-card__bio { display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: rgba(240, 244, 255, 0.88);
	font-family: var(--text-font-family);
	font-size: 13px;
	line-height: 1.5;
	text-shadow: 0 1px 3px rgba(5, 10, 25, 0.5);
	text-wrap: pretty; }

.sb-card__meta { margin-block-start: 1px;
	color: rgba(165, 212, 245, 0.85);
	font-family: var(--text-font-family);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(5, 10, 25, 0.5); }

/* --- modal ---------------------------------------------------------- */

.sb-modal { position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px; }

.sb-modal[hidden] { display: none; }

.sb-modal__scrim { position: absolute;
	inset: 0;
	background: rgba(5, 10, 25, 0.65);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); }

.sb-modal__panel { position: relative;
	inline-size: 100%;
	max-inline-size: 480px;
	max-block-size: 88vh;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 24px;
	background: rgba(18, 26, 54, 0.78);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
	animation: sb-modal-in 0.25s ease; }

@keyframes sb-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.sb-modal__media { position: relative;
	inline-size: 100%;
	aspect-ratio: 3 / 4;
	max-block-size: 46vh;
	overflow: hidden; }

.sb-modal__photo { position: absolute;
	inset: 0;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat; }

.sb-modal__photo--empty { background-image: linear-gradient(165deg, oklch(0.38 0.05 269.6) 0%, oklch(0.27 0.05 269.6) 100%); }

.sb-modal__mediascrim { position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(5, 10, 25, 0.95) 0%,
		rgba(5, 10, 25, 0.7) 30%,
		rgba(5, 10, 25, 0.15) 70%,
		transparent 100%); }

.sb-modal__close { position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 980px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: #e8f0ff;
	font-family: var(--text-font-family);
	font-size: 15px;
	cursor: pointer; }

.sb-modal__name { position: absolute;
	inset-inline: 20px;
	inset-block-end: 16px;
	color: #fff;
	font-family: var(--text-font-family);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-shadow: 0 1px 4px rgba(5, 10, 25, 0.6); }

.sb-modal__content { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 26px; }

.sb-modal__bio { margin: 0;
	color: rgba(240, 244, 255, 0.82);
	font-family: var(--text-font-family);
	font-size: 14.5px;
	line-height: 1.6;
	text-wrap: pretty; }

.sb-modal__tags { display: flex; flex-wrap: wrap; gap: 7px; }

.sb-modal__tags:empty { display: none; }

.sb-modal__meta { color: rgba(165, 212, 245, 0.75);
	font-family: var(--text-font-family);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase; }

.sb-modal__meta:empty { display: none; }

.sb-modal__actions { display: flex; margin-block-start: 2px; }

/* The page behind the dialog does not scroll while it is open. */
.sb-modal-open { overflow: hidden; }

/* --- reduced motion -------------------------------------------------- */

/* Suppresses the lift, the photo scale, the scrim transition and the modal's
   rise-and-scale. The modal still APPEARS -- it just does not animate in. */
@media (prefers-reduced-motion: reduce) {
	.sb-card,
	.sb-card__photo,
	.sb-card__scrim { transition: none; }

	.sb-card:hover,
	.sb-card:focus-visible { transform: none; }

	.sb-card:hover .sb-card__photo,
	.sb-card:focus-visible .sb-card__photo { transform: none; }

	.sb-modal__panel { animation: none; }
}