/* Circles 2027 · house look · Speakers list (/speakers/). Pairs with speakers.js; loads after c27-house.css.
   .hx-index: the speakers grid becomes a giant name index with a projected portrait (Index) or a table of prints you
   drag around (Wall). Speaker photos are one tone: red duotone (grayscale photo under a red multiply layer).
   Without JS the framework grid shows, in B/W. */

/* the grid as rendered (no JS): B/W portraits */
body.c27-hp-speakers .hx-index .grid-flex img { filter: grayscale(1) contrast(1.08); }
body.c27-hp-speakers .hx-index .grid-flex .titles a { color: #fff !important; }
body.c27-hp-speakers .hx-index.hxi-on .grid-flex { display: none !important; }
body.c27-hp-speakers .hx-index .section_titles_width { position: relative; }
body.c27-hp-speakers .hx-index .section_titles_width .wysiwyg p { font: 500 13px/1.4 var(--hx-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mid-d) !important; }

/* ---------- bar: count, hint, view switch ---------- */
.hxi { position: relative; margin-top: clamp(48px, 6vw, 96px); }
.hxi-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 0 0 22px; border-bottom: 1px solid var(--hx-line-d); }
.hxi-count { margin: 0 !important; display: flex; align-items: baseline; gap: 14px; font: 500 13px/1 var(--hx-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-mid-d) !important; }
.hxi-count b { font: 200 clamp(56px, 6vw, 96px)/.8 var(--hx-display); letter-spacing: 0; color: var(--hx-red); }
.hxi-hint { margin: 0 !important; justify-self: center; font: 500 13px/1 var(--hx-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-mid-d) !important; }
.hxi-hint::after { content: "→"; margin-left: 10px; color: var(--hx-red-hi); }
.hxi-views { display: flex; gap: 4px; }
.hxi-views button { appearance: none; border: 0; border-radius: 0; margin: 0; padding: 12px 16px; background: none; color: var(--hx-mid-d); cursor: pointer;
	font: 500 13px/1 var(--hx-mono); letter-spacing: .14em; text-transform: uppercase; background-image: linear-gradient(var(--hx-red), var(--hx-red)); background-repeat: no-repeat;
	background-position: 0 100%; background-size: 0 2px; transition: color .3s, background-size .45s var(--hx-snap); }
.hxi-views button:hover { color: #fff; }
.hxi-views button.is-on { color: #fff; background-size: 100% 2px; }
.hxi-views button:focus-visible { background-color: rgba(255,255,255,.08) !important; }

/* ---------- index ---------- */
.hxi-stage { position: relative; }
.hxi-list { list-style: none; margin: 0 !important; padding: 0 0 clamp(80px, 10vw, 160px) !important; counter-reset: none; }
.hxi-row { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--hx-line-d); }
.hxi-row::before, .hxi-row::marker { content: none !important; display: none !important; }
.hxi-link { display: grid; grid-template-columns: clamp(56px, 6vw, 96px) minmax(0, 1fr) minmax(0, 30ch); align-items: center; gap: 0 clamp(16px, 2vw, 32px);
	padding: clamp(6px, .9vw, 14px) 0; color: #fff !important; text-decoration: none !important; }
.hxi-no { align-self: start; padding-top: .9em; font: 500 13px/1 var(--hx-mono); letter-spacing: .1em; color: var(--hx-mid-d); transition: color .3s; }
.hxi-name { display: block; font: 800 clamp(46px, 7vw, 132px)/.92 var(--hx-sans); font-stretch: 62%; letter-spacing: -.01em; text-transform: uppercase;
	color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.34); transition: color .35s var(--hx-ease), -webkit-text-stroke-color .35s, transform .6s var(--hx-ease); transform-origin: 0 50%; }
.hxi-role { justify-self: end; text-align: right; font: 500 12px/1.45 var(--hx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hx-mid-d); opacity: .55; transition: opacity .3s, color .3s; }
.hxi-row.is-on .hxi-name { color: #fff; -webkit-text-stroke-color: transparent; transform: translateX(.18em); }
.hxi-row.is-on .hxi-no { color: var(--hx-red-hi); }
.hxi-row.is-on .hxi-role { opacity: 1; color: #fff; }
.hxi-link:focus-visible { background: rgba(255,255,255,.06) !important; }

/* the projector: a red duotone portrait that trails the cursor (desktop) or docks right; sticky viewer on phones */
.hxi-proj { pointer-events: none; z-index: 60; }
.hxi-pf { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; background: #D13A1E; }
.hxi-pf img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.12) brightness(1.06); }
.hxi-pf::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #D13A1E; mix-blend-mode: multiply; pointer-events: none; }
.hxi-pf img.is-back { z-index: 0; }
.hxi-pf img.is-next { z-index: 1; clip-path: inset(100% 0 0 0); transition: none; }
.hxi-pf img.is-front { z-index: 1; clip-path: inset(0 0 0 0); transform: scale(1); transition: clip-path .55s var(--hx-snap), transform 1.2s var(--hx-ease); }
.hxi-pf img.is-next { transform: scale(1.12); }
.hxi-pno { position: absolute; left: 14px; bottom: 6px; z-index: 3; font: 200 clamp(48px, 4.6vw, 84px)/1 var(--hx-display); color: #fff; mix-blend-mode: normal; }
.hxi-pcap { margin: 14px 0 0 !important; font: 500 12px/1.45 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; }
.hxi-pcap b { display: block; margin-bottom: 4px; font: 800 20px/1 var(--hx-sans); font-stretch: 70%; letter-spacing: 0; }
.hxi-pcap span { color: var(--hx-mid-d); }
.hxi-proj.is-fixed { position: fixed; left: 0; top: 0; width: clamp(240px, 21vw, 380px); opacity: 0; transition: opacity .45s var(--hx-ease); will-change: transform; }
.hxi-proj.is-fixed.is-live.has-img { opacity: 1; }
.hxi-proj.is-fixed .hxi-pcap b { display: none; }

/* ---------- wall ---------- */
.hxi-wall { position: relative; height: min(84vh, 920px); margin: clamp(28px, 3vw, 44px) 0 clamp(80px, 10vw, 160px); overflow: auto; overscroll-behavior: contain;
	background-color: #151517; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.2px, transparent 1.6px); background-size: 22px 22px;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hxi-wall::-webkit-scrollbar { display: none; }
.hxi-wall[hidden], .hxi-stage[hidden] { display: none !important; }
.hxi-wall.is-drag { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hxi-wall.is-grab { cursor: grabbing; }
.hxi-table { position: relative; will-change: transform; }
.hxi-print { --lift: 0px; --rk: 1; --s: 1; position: absolute; left: 0; top: 0; width: var(--w, 260px); padding: 10px 10px 14px; background: #F3F1EC; color: var(--hx-ink) !important; text-decoration: none !important;
	box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 22px 44px rgba(0,0,0,.5);
	transform: translate3d(calc(var(--x) + var(--dx, 0px) * var(--z, 1)), calc(var(--y) + var(--dy, 0px) * var(--z, 1) + var(--lift)), 0) rotate(calc(var(--r) * var(--rk))) scale(var(--s));
	transition: transform .5s var(--hx-ease), box-shadow .4s; -webkit-user-drag: none; }
.hxi-print-f { position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: #D13A1E; }
.hxi-print-f img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(1.06); pointer-events: none; transition: transform .8s var(--hx-ease); }
.hxi-print-f::after { content: ""; position: absolute; inset: 0; background: #D13A1E; mix-blend-mode: multiply; }
.hxi-print-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 10px; }
.hxi-print-cap b { font: 800 clamp(14px, 1.1vw, 17px)/1.05 var(--hx-sans); font-stretch: 72%; text-transform: uppercase; }
.hxi-print-cap i { flex: none; font: 500 10px/1 var(--hx-mono); font-style: normal; letter-spacing: .1em; color: var(--hx-mid); }
.hxi-print:hover, .hxi-print:focus-visible { --rk: 0; --s: 1.07; --lift: -6px; z-index: 5; box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 34px 70px rgba(0,0,0,.6); background: #fff !important; }
.hxi-print:hover .hxi-print-f img { transform: scale(1.06); }
.hxi-wall.is-grab .hxi-print { transition: box-shadow .4s; }
/* dealing: prints drop onto the table one after another */
.hxi-wall.is-dealing .hxi-print { --lift: -90px; --rk: 3; --s: 1.28; opacity: 0; transition: none; }
.hxi-wall.is-dealing.is-dealt .hxi-print { --lift: 0px; --rk: 1; --s: 1; opacity: 1; transition: transform .8s cubic-bezier(.2,1.25,.4,1), opacity .35s ease; transition-delay: calc(var(--i) * 32ms); }
.hxi-wall.is-dealt:not(.is-dealing) .hxi-print { opacity: 1; }

/* ---------- phones and touch: the projector is a sticky viewer above the names ---------- */
@media (max-width: 899px), (hover: none) {
	.hxi-proj:not(.is-fixed) { position: sticky; top: 64px; display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: end; gap: 16px; margin: 0 -2px; padding: 14px 0 16px; background: var(--hx-ink); border-bottom: 1px solid var(--hx-line-d); }
	.hxi-proj:not(.is-fixed) .hxi-pcap { margin: 0 0 4px !important; }
	.hxi-proj:not(.is-fixed) .hxi-pno { font-size: 44px; left: 10px; }
}
@media (max-width: 767px) {
	.hxi-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; }
	.hxi-hint { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
	.hxi-count b { font-size: 56px; }
	.hxi-views button { padding: 12px 10px; }
	.hxi-link { grid-template-columns: 34px minmax(0, 1fr); padding: 10px 0; }
	.hxi-no { padding-top: .55em; font-size: 11px; }
	.hxi-name { font-size: clamp(34px, 10.4vw, 56px); }
	.hxi-role { grid-column: 2; justify-self: start; text-align: left; margin-top: 6px; font-size: 11px; }
	.hxi-row:not(.is-on) .hxi-role { display: none; }
	.hxi-wall { height: 72svh; margin-left: calc(-1 * clamp(20px, 5vw, 28px)); margin-right: calc(-1 * clamp(20px, 5vw, 28px)); }
}

@media (prefers-reduced-motion: reduce) {
	.hxi-name, .hxi-pf img.is-front, .hxi-print, .hxi-print-f img { transition: none !important; }
	.hxi-row.is-on .hxi-name { transform: none; }
}

/* desktop: the projected portrait carries the role, so the right column stays clear for it */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.hxi-link { grid-template-columns: clamp(40px, 4vw, 64px) minmax(0, 1fr) clamp(240px, 21vw, 380px); }
	.hxi-role { visibility: hidden; }
}

/* ---------- hero: HER-04 Portrait Row Headline in the house look (black, Circles 2027 Display, red duotone parade) ---------- */
body.c27-hp-speakers .ct2-hero-sb-her-04, body.c27-hp-speakers .ct2-hero-sb-her-04 .sb-blk, body.c27-hp-speakers .ct2-hero-sb-her-04 .hero { background: var(--hx-ink) !important; color: #fff !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 { overflow: clip; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .body { padding-top: clamp(150px, 20vh, 240px) !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .eyebrow { display: inline-flex; align-items: center; gap: 14px; font: 500 14px/1.3 var(--hx-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--hx-red-hi) !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
body.c27-hp-speakers .ct2-hero-sb-her-04 h1 { margin: 18px 0 0 !important; font: 700 clamp(56px, 10.5vw, 200px)/.84 var(--hx-display) !important; letter-spacing: -.01em !important; text-transform: uppercase; color: #fff !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 h1 .acc { display: block; font-weight: 200 !important; font-style: normal !important; color: var(--hx-red) !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .lead { max-width: 40ch; margin-left: auto !important; margin-right: auto !important; font: 400 clamp(18px, 1.45vw, 23px)/1.5 var(--hx-sans) !important; color: rgba(255,255,255,.82) !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .btn { border-radius: 0 !important; background: var(--hx-red) !important; color: #fff !important; font: 600 14px/1 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; padding: 18px 26px !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .btn::after { content: "→"; margin-left: 12px; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .tlink { color: #fff !important; font: 600 14px/1 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; text-decoration-color: var(--hx-red) !important; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .parade .photo { position: relative; overflow: hidden; isolation: isolate; background: #D13A1E; will-change: transform; }
body.c27-hp-speakers .ct2-hero-sb-her-04 .parade .photo img { filter: grayscale(1) contrast(1.12) brightness(1.06); }
body.c27-hp-speakers .ct2-hero-sb-her-04 .parade .photo::after { content: ""; position: absolute; inset: 0; background: #D13A1E; mix-blend-mode: multiply; pointer-events: none; }
html.hx-ready body.c27-hp-speakers .ct2-hero-sb-her-04 .parade .photo { animation: hxsp-rise 1.1s var(--hx-ease) both; animation-delay: calc(.2s + var(--k, 0) * 90ms); }
html.c27-thinking body.c27-hp-speakers .ct2-hero-sb-her-04 .parade .photo { animation-play-state: paused; }
@keyframes hxsp-rise { from { clip-path: inset(100% 0 0 0); transform: translateY(60px); } to { clip-path: inset(0 0 0 0); } }

/* ---------- close: CTA-06 Giant Words in the house look ---------- */
body.c27-hp-speakers .hx-close .sb-blk, body.c27-hp-speakers .hx-close .blk { background: transparent !important; color: #fff !important; }
body.c27-hp-speakers .hx-close .hd { font: 800 clamp(64px, 12vw, 240px)/.84 var(--hx-sans) !important; font-stretch: 62% !important; letter-spacing: -.01em !important; text-transform: uppercase; color: #fff !important; overflow-wrap: anywhere; }
body.c27-hp-speakers .hx-close .hd em { font: 200 1em/.84 var(--hx-display) !important; font-style: normal !important; text-transform: uppercase; color: var(--hx-red) !important; display: block; }
body.c27-hp-speakers .hx-close .lead { font: 500 14px/1.5 var(--hx-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mid-d) !important; }
body.c27-hp-speakers .hx-close .btn { border-radius: 0 !important; background: var(--hx-red) !important; color: #fff !important; font: 600 14px/1 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; padding: 18px 26px !important; }
body.c27-hp-speakers .hx-close .tlink { color: #fff !important; font: 600 14px/1 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; }
html.hx-ready body.c27-hp-speakers .hx-close .hd { transition: transform 1.2s var(--hx-ease), opacity .8s; transform-origin: 0 100%; }
html.hx-ready body.c27-hp-speakers .hx-close:not(.is-in) .hd { transform: translateY(80px) scale(.9); opacity: 0; }
@media (max-width: 767px) {
	body.c27-hp-speakers .ct2-hero-sb-her-04 h1 { font-size: clamp(44px, 13.5vw, 72px) !important; }
	body.c27-hp-speakers .hx-close .hd { font-size: clamp(48px, 15vw, 80px) !important; }
}
html body.c27-hp-speakers .ct2-hero-sb-her-04 .sb-blk h1 { font-size: clamp(56px, 10.5vw, 200px) !important; line-height: .84 !important; }
@media (max-width: 767px) {
	html body.c27-hp-speakers .ct2-hero-sb-her-04 .sb-blk h1 { font-size: clamp(44px, 13.5vw, 72px) !important; }
	body.c27-hp-speakers .ct2-hero-sb-her-04 .eyebrow { font-size: 10.5px !important; letter-spacing: .04em !important; white-space: nowrap; }
	body.c27-hp-speakers .ct2-hero-sb-her-04 .eyebrow::before { display: none; }
}
.hxi-link.is-nolink, .hxi-print.is-nolink { cursor: default; }
.hxi-wall.is-drag .hxi-print.is-nolink { cursor: inherit; }

/* every link a speaker has (owner, 2026-11-01): a small labeled row; the name and portrait go to the first one */
.hx-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hx-links a { font: 500 11px/1.6 var(--hx-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; color: var(--hx-mid-d) !important;
	background-image: linear-gradient(var(--hx-red), var(--hx-red)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: color .3s, background-size .4s var(--hx-snap); }
.hx-links a::after { content: " →"; color: var(--hx-red-hi); }
.hx-links a:hover { color: #fff !important; background-size: 100% 1px; }
.hx-links a:focus-visible { background-color: rgba(255,255,255,.08) !important; color: #fff !important; }
.hxi-row { position: relative; }
.hxi-links { margin: -4px 0 14px clamp(56px, 6vw, 96px); padding-left: clamp(16px, 2vw, 32px); opacity: .55; transition: opacity .3s; }
.hxi-row.is-on .hxi-links, .hxi-row:hover .hxi-links, .hxi-links:focus-within { opacity: 1; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { .hxi-links { margin-left: clamp(40px, 4vw, 64px); } }
@media (max-width: 767px) { .hxi-links { margin: -2px 0 12px 34px; padding-left: 16px; } }
.hxi-print-a { display: block; color: inherit !important; text-decoration: none !important; }
.hxi-print-links { margin-top: 8px; gap: 2px 12px; }
.hxi-print-links a { font-size: 10px; color: var(--hx-mid) !important; }
.hxi-print-links a:hover { color: var(--hx-ink) !important; }

/* "Speakers announced soon" (CTA-04, c27-if-spk-off) in the house look */
body.c27-hp-speakers .hx-spk-soon .sb-blk, body.c27-hp-speakers .hx-spk-soon .blk { background: transparent !important; color: #fff !important; }
body.c27-hp-speakers .hx-spk-soon :is(.card, .c4, .inner, .box) { background: var(--hx-coal) !important; border-radius: 0 !important; box-shadow: none !important; }
body.c27-hp-speakers .hx-spk-soon .hd { font: 800 clamp(44px, 7vw, 120px)/.9 var(--hx-sans) !important; font-stretch: 64% !important; text-transform: uppercase; color: #fff !important; overflow-wrap: anywhere; }
body.c27-hp-speakers .hx-spk-soon .hd em { font: 200 1em/.9 var(--hx-display) !important; font-style: normal !important; color: var(--hx-red) !important; }
body.c27-hp-speakers .hx-spk-soon p { color: var(--hx-mid-d) !important; font-size: clamp(17px, 1.3vw, 20px) !important; }
body.c27-hp-speakers .hx-spk-soon .btn { border-radius: 0 !important; background: var(--hx-red) !important; color: #fff !important; font: 600 14px/1 var(--hx-mono) !important; letter-spacing: .1em; text-transform: uppercase; padding: 18px 26px !important; }
@media (max-width: 767px) { body.c27-hp-speakers .hx-spk-soon .hd { font-size: clamp(40px, 13vw, 64px) !important; } }
/* phones: the close never breaks a word (owner rule: titles wrap and fully fit at 390) */
html body.c27-hp-speakers .hx-close .sb-blk .hd { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }
@media (max-width: 767px) { html body.c27-hp-speakers .hx-close .sb-blk .hd { font-size: clamp(36px, 10.5vw, 56px) !important; } }
/* the library block rules were shrinking these to 40px / 24px; the page's own sizes win */
html:root body.c27-hp-speakers .hx-spk-soon .hd { font-size: clamp(44px, 7vw, 120px) !important; line-height: .9 !important; }
html:root body.c27-hp-speakers .hx-close .hd { font-size: clamp(64px, 8.6vw, 180px) !important; line-height: .84 !important; }
@media (max-width: 767px) {
	html:root body.c27-hp-speakers .hx-spk-soon .hd { font-size: clamp(40px, 13vw, 64px) !important; }
	html:root body.c27-hp-speakers .hx-close .hd { font-size: clamp(30px, 8.6vw, 56px) !important; }
}