/*
	BreaQ page additions: speakers, day-by-day schedule, last-edition gallery.
	Layered on top of Solid State (main.css): same palette (#2e3141 / #4c5c96),
	same type (Raleway headings, Source Sans Pro body) and the orange
	(rgb 255,140,0) the theme already uses for hover states.
*/

:root {
	--bq-bg: #2e3141;
	--bq-accent: #4c5c96;
	--bq-hot: #ff8c00;
	--bq-fg-light: rgba(255, 255, 255, 0.62);
	--bq-line: rgba(255, 255, 255, 0.125);
	--bq-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--bq-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

	/* the theme's reset justifies every element; these components read better ragged-right */
	.sp-hint,
	.sp-card, .sp-card *,
	.sched, .sched *,
	.gal, .gal *,
	.catalog, .catalog *,
	.mosaic, .mosaic *,
	.lightbox, .lightbox *,
	.chap-nav, .chap-nav *,
	.hero-row, .hero-row *,
	.glance, .glance *,
	.stats, .stats *,
	.xp, .xp *,
	.ch-grid, .ch-grid *,
	.venues, .venues *,
	.faq, .faq *,
	.cta, .cta *,
	.fc-grid, .fc-grid *,
	.soon-grid, .soon-grid *,
	.soon-tl, .soon-tl *,
	.soon-cta {
		text-align: left;
	}

	/* the hidden attribute always wins, even over a display set below (lightbox, countdown digits, form states) */
	[hidden] {
		display: none !important;
	}

	/* buttons keep a centred label inside the ragged-right components above. On phones the
	   theme drops their side padding to 0 (it expects full-width action rows), which leaves
	   the label touching the border of any button that is not full width: put some back. */
	/* the id outranks the later ragged-right lists (.ch-hero-text *, .next-wrap *) */
	#wrapper .button {
		text-align: center;
	}

	@media screen and (max-width: 480px) {

		#wrapper .button {
			padding: 0 1.5em;
		}

		/* justified text opens wide gaps at forty characters a line: running text reads
		   ragged-right on phones (wider screens keep the theme's justified paragraphs) */
		.wrapper p,
		.wrapper a.special {
			text-align: left;
		}

	}

/* ------------------------------------------------------------------ */
/* Challenge pages (challenges/*.html)                                 */
/* ------------------------------------------------------------------ */

	.crumb {
		display: inline-block;
		margin: 0 0 1.1em 0;
		border: 0;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.55em;
		font-weight: 700;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		color: var(--bq-hot);
	}

	/* hero: text on the left, the challenge drawing on the right (a transparent
	   line-art copy in images/opt/*-line.webp, so it floats on the page) */
	.page-challenge #wrapper > header .inner,
	.page-art #wrapper > header .inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(11em, 16em);
		gap: 2.5em;
		align-items: center;
	}

	.logos-note {
		margin: -0.75em 0 2em 0;
		font-size: 0.75em;
		color: var(--bq-fg-light);
	}

	.tier-tag,
	.tier {
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.55em;
		font-weight: 700;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		color: var(--bq-hot);
	}

	.tier {
		margin: 0 0 0.8em 0;
	}

		.tier span {
			margin-left: 0.6em;
			font-weight: 200;
			letter-spacing: 0.08em;
			text-transform: none;
			color: var(--bq-fg-light);
		}


		.ch-hero-art {
			margin: 0;
		}

		.page-challenge .hero-row .button,
		.page-art .hero-row .button {
			margin-left: 0;
		}

			.ch-hero-art img {
				display: block;
				width: 100%;
				opacity: 0.92;
			}

	/* the argument: a lede, a question, then the brief */
	.ch-lede {
		font-size: 1.1em;
		font-weight: 300;
		line-height: 1.6;
	}

	.ch-q {
		margin: 1.5em 0 2em 0;
		padding: 0.15em 0 0.15em 1.25em;
		border-left: 2px solid var(--bq-hot);
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 1.15em;
		font-weight: 200;
		letter-spacing: 0.02em;
		line-height: 1.45;
	}

	.ch-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 15em;
		gap: 3em;
		align-items: start;
		margin: 0 0 1em 0;
	}

		.ch-facts {
			margin: 0.4em 0 0 0;
			padding: 1.2em 1.25em 0.2em 1.25em;
			border-top: 2px solid var(--bq-hot);
			border-radius: 0 0 5px 5px;
			background: rgba(255, 255, 255, 0.035);
		}

			.ch-facts dt {
				margin: 0 0 0.35em 0;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.55em;
				font-weight: 700;
				letter-spacing: 0.25em;
				text-transform: uppercase;
				color: var(--bq-hot);
			}

			.ch-facts dd {
				margin: 0 0 1.2em 0;
				font-size: 0.8em;
				line-height: 1.5;
				color: rgba(255, 255, 255, 0.88);
			}

	.ch-list {
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.ch-list li {
			position: relative;
			padding: 0 0 0.6em 1.3em;
			font-size: 0.9em;
			line-height: 1.5;
		}

			.ch-list li::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0.55em;
				width: 0.45em;
				height: 0.45em;
				background: var(--bq-hot);
			}

	/* what you get: an icon, a title, one line */
	.kit {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5em 2em;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		/* two items (the conference): two columns, so the row is not a third empty */
		.kit.kit--2 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.kit li {
			display: flex;
			align-items: flex-start;
			gap: 1em;
			padding: 0;
		}

		.kit-ic {
			flex: 0 0 2.6em;
			display: grid;
			place-items: center;
			width: 2.6em;
			height: 2.6em;
			border-radius: 50%;
			border: 2px solid rgba(255, 140, 0, 0.55);
			color: var(--bq-hot);
			font-size: 1em;
		}

			.kit-ic::before {
				font-size: 0.95em;
			}

		.kit h4 {
			margin: 0.35em 0 0.35em 0;
			font-size: 0.7em;
		}

		.kit p {
			margin: 0;
			font-size: 0.82em;
			line-height: 1.5;
			color: rgba(255, 255, 255, 0.8);
		}

	/* reading list: link tiles with a type label */
	.res {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1em;
		margin: 0 0 2em 0;
	}

		.res-item {
			position: relative;
			display: block;
			padding: 1.1em 3em 1.1em 1.2em;
			border: 1px solid var(--bq-line);
			border-radius: 5px;
			text-decoration: none;
			transition: border-color 0.25s var(--bq-ease-out), background-color 0.25s var(--bq-ease-out), transform 0.35s var(--bq-ease-out);
		}

			.res-item::after {
				content: "\2197";
				position: absolute;
				top: 1em;
				right: 1.1em;
				font-size: 0.85em;
				color: var(--bq-fg-light);
				transition: color 0.25s var(--bq-ease-out), transform 0.35s var(--bq-ease-out);
			}

			.res-item:hover {
				border-color: rgba(255, 140, 0, 0.6);
				background: rgba(255, 140, 0, 0.06);
				transform: translateY(-2px);
			}

				.res-item:hover::after {
					color: var(--bq-hot);
					transform: translate(2px, -2px);
				}

			.res-item:focus-visible {
				outline: none;
				box-shadow: 0 0 0 2px var(--bq-hot);
			}

		.res-tag {
			display: block;
			margin: 0 0 0.5em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.5em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

		.res-item strong {
			display: block;
			font-size: 0.85em;
			font-weight: 600;
			line-height: 1.4;
			color: #ffffff;
		}

		.res-item small {
			display: block;
			margin-top: 0.35em;
			font-size: 0.68em;
			line-height: 1.45;
			color: var(--bq-fg-light);
		}

	.ch-more {
		display: inline-block;
		margin-top: 0.8em;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.58em;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		border-bottom-color: var(--bq-hot);
	}

	.ch-hero-text, .ch-hero-text *,
	.ch-cols, .ch-cols *,
	.kit, .kit *,
	.res, .res * {
		text-align: left;
	}

	@media screen and (max-width: 980px) {

		.page-challenge #wrapper > header .inner,
		.page-art #wrapper > header .inner {
			grid-template-columns: 1fr;
			gap: 1.5em;
		}

			.ch-hero-art {
				order: -1;
				max-width: 11em;
			}

		.ch-cols {
			grid-template-columns: 1fr;
			gap: 1.5em;
		}

			.ch-facts {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 0 2em;
			}

	}

	@media screen and (max-width: 736px) {

		.ch-lede {
			font-size: 1em;
		}

		.ch-q {
			font-size: 1em;
		}

		.ch-facts {
			grid-template-columns: 1fr;
		}

		.kit,
		.kit.kit--2 {
			grid-template-columns: 1fr;
			gap: 1.25em 0;
		}

		.res {
			grid-template-columns: 1fr;
		}

	}

/* ------------------------------------------------------------------ */
/* "Coming soon" states (breaq-soon.html): ghost portraits and a ghost */
/* timeline with a slow interference shimmer                           */
/* ------------------------------------------------------------------ */

	.soon-tag {
		display: inline-block;
		vertical-align: middle;
		margin-left: 0.7em;
		padding: 0.3em 0.7em 0.25em 0.7em;
		border: 1px solid var(--bq-hot);
		border-radius: 3px;
		font-size: 0.6em;
		font-weight: 700 !important;
		letter-spacing: 0.22em;
		line-height: 1;
		color: var(--bq-hot);
	}

	@keyframes soon-sweep {
		0%   { transform: translateX(-100%); }
		100% { transform: translateX(100%); }
	}

	.soon-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1em;
		margin: 0 0 2em 0;
	}

	.soon-card {
		position: relative;
		aspect-ratio: 1 / 1;
		border-radius: 5px;
		overflow: hidden;
		background:
			radial-gradient(circle at 50% 38%, rgba(76, 92, 150, 0.42) 0 16%, transparent 17%),
			radial-gradient(ellipse 42% 30% at 50% 96%, rgba(76, 92, 150, 0.42) 0 100%, transparent 101%),
			#262838;
	}

		/* interference lines, as on the real portraits */
		.soon-card::before {
			content: "";
			position: absolute;
			inset: 0;
			background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px);
		}

		/* a slow band of light passing through */
		.soon-card::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
			transform: translateX(-100%);
			animation: soon-sweep 3.6s var(--bq-ease-inout) infinite;
			animation-delay: calc(var(--i, 0) * 0.45s);
		}

		.soon-index {
			position: absolute;
			top: 0.85em;
			left: 1em;
			z-index: 2;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.6em;
			font-weight: 700;
			letter-spacing: 0.2em;
			line-height: 1;
			color: rgba(255, 255, 255, 0.45);
		}

		.soon-strip {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
			padding: 2em 0.95em 0.85em 0.95em;
			background: linear-gradient(to top, rgba(46, 49, 65, 0.95), rgba(46, 49, 65, 0));
		}

			.soon-name {
				margin: 0;
				font-size: 0.72em;
				letter-spacing: 0.12em;
				line-height: 1.3;
				color: rgba(255, 255, 255, 0.75);
			}

			.soon-sub {
				margin: 0.15em 0 0 0;
				font-size: 0.62em;
				letter-spacing: 0.04em;
				color: var(--bq-fg-light);
			}

	.soon-cta {
		margin: 0 0 2em 0;
		font-size: 0.85em;
	}

	/* "What's next": three announcements orbiting the year, and a live countdown */
	.next-wrap {
		display: grid;
		grid-template-columns: 20em minmax(0, 1fr);
		gap: 2.5em;
		align-items: center;
		margin: 0 0 2em 0;
	}

	.orbits {
		display: block;
		width: 100%;
		height: auto;
		overflow: visible;
	}

		.orbits .orbit {
			fill: none;
			stroke: rgba(255, 255, 255, 0.16);
			stroke-width: 1;
		}

		/* nearly solid: the satellites pass behind it */
		.orbits .core {
			fill: rgba(62, 74, 122, 0.92);
			stroke: rgba(255, 255, 255, 0.28);
			stroke-width: 1;
		}

		.orbits .core-glow {
			fill: var(--bq-hot);
			opacity: 0.3;
		}

		.orbits .core-year {
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 22px;
			font-weight: 700;
			letter-spacing: 3px;
			fill: #ffffff;
		}

		.orbits .sat-dot {
			fill: var(--bq-hot);
		}

		.orbits .sat-halo {
			fill: var(--bq-hot);
			opacity: 0.35;
		}

		.orbits .sat-label {
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			fill: #ffffff;
			paint-order: stroke;
			stroke: rgba(46, 49, 65, 0.85);
			stroke-width: 4px;
			stroke-linejoin: round;
		}

	.next-body p {
		font-size: 0.92em;
		line-height: 1.6;
	}

		.next-body .next-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75em 1em;
			margin: 0 0 0.9em 0;
		}

		.next-body .next-gcal {
			margin: 0;
			font-size: 0.72em;
			color: var(--bq-fg-light);
		}

		@media screen and (max-width: 480px) {

			.next-body .next-actions .button {
				width: 100%;
			}

		}

	.next-count {
		margin: 0 0 1.5em 0;
	}

		.next-count-label {
			margin: 0 0 0.5em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.55em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

		.next-digits {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5em 1.75em;
		}

			.next-digits b {
				display: block;
				min-width: 2ch;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 2.3em;
				font-weight: 200;
				letter-spacing: 0.04em;
				line-height: 1;
				font-variant-numeric: tabular-nums;
				color: #ffffff;
			}

			.next-digits span {
				display: block;
				margin-top: 0.35em;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.5em;
				font-weight: 700;
				letter-spacing: 0.22em;
				text-transform: uppercase;
				color: var(--bq-fg-light);
			}

			@keyframes digit-tick {
				0%   { opacity: 0.25; transform: translateY(-0.2em); }
				100% { opacity: 1; transform: none; }
			}

			.next-digits b.is-tick {
				animation: digit-tick 0.35s var(--bq-ease-out);
			}

	.next-wrap, .next-wrap * {
		text-align: left;
	}

	@media screen and (max-width: 980px) {

		.next-wrap {
			grid-template-columns: 1fr;
			gap: 1.5em;
		}

		.orbits {
			max-width: 18em;
		}

	}

	@media screen and (max-width: 736px) {

		.next-digits b {
			font-size: 1.9em;
		}

		/* the countdown first, then a smaller orbit, then the text: .next-body steps out of the
		   way (display: contents) so its children can be ordered around the drawing */
		.next-wrap {
			display: flex;
			flex-direction: column;
			gap: 1.25em;
		}

			.next-body {
				display: contents;
			}

			.next-count {
				order: -2;
				margin: 0;
			}

			.orbits {
				order: -1;
				align-self: center;
				max-width: 15em;
			}

			.next-body p,
			.next-body .next-actions {
				margin: 0;
			}

			.next-body .next-gcal {
				margin-top: -0.5em;
			}

	}

	/* ghost cards carrying a faint drawing instead of the silhouette (hackathon tracks) */
	.soon-grid.soon-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2em;
	}

	.soon-card.soon-card--art {
		background: #262838;
	}

		.soon-card--art img {
			position: absolute;
			left: 18%;
			top: 14%;
			width: 64%;
			height: 64%;
			object-fit: contain;
			opacity: 0.16;
		}

	@media screen and (max-width: 736px) {
		.soon-grid.soon-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
		.soon-grid.soon-grid--3 > :nth-child(3) { display: none; }
	}

	/* ghost timeline */
	.soon-tl {
		position: relative;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.soon-tl::before {
			content: "";
			position: absolute;
			top: 0.5em;
			bottom: 0.5em;
			left: 7.05em;
			width: 1px;
			background: var(--bq-line);
		}

		.soon-tl li {
			position: relative;
			display: grid;
			grid-template-columns: 6.5em minmax(0, 1fr);
			column-gap: 1.5em;
			align-items: center;
			padding: 1.05em 0;
			border-top: 1px solid rgba(255, 255, 255, 0.06);
		}

			.soon-tl li:first-child {
				border-top: 0;
			}

			.soon-tl li::before {
				content: "";
				position: absolute;
				top: 50%;
				left: calc(7.05em - 3px);
				width: 7px;
				height: 7px;
				margin-top: -3px;
				border-radius: 50%;
				background: var(--bq-bg);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

		.soon-bar {
			position: relative;
			display: block;
			height: 0.7em;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0.08);
			overflow: hidden;
		}

			.soon-bar::after {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
				transform: translateX(-100%);
				animation: soon-sweep 3.6s var(--bq-ease-inout) infinite;
				animation-delay: calc(var(--i, 0) * 0.3s);
			}

			.soon-bar.is-time {
				width: 5.5em;
				height: 0.55em;
			}

			.soon-bar.is-sub {
				width: 30%;
				height: 0.45em;
				margin-top: 0.55em;
				opacity: 0.7;
			}

	.soon-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1em 2em;
		margin: 0 0 2em 0;
	}

		.soon-actions a.special:not(.button) {
			margin: 0;
		}

	@media screen and (max-width: 980px) {
		.soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.soon-grid > :nth-child(4) { display: none; }
	}

	@media screen and (max-width: 736px) {

		.soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
		.soon-grid > :nth-child(4) { display: block; }

		.soon-tl::before {
			left: 0.35em;
		}

		.soon-tl li {
			grid-template-columns: minmax(0, 1fr);
			row-gap: 0.5em;
			padding-left: 1.5em;
		}

			.soon-tl li::before {
				left: calc(0.35em - 3px);
			}

	}

/* ------------------------------------------------------------------ */
/* Flip cards (breaq-flip.html variant): click a portrait to turn it   */
/* over; the back carries the bio and the talk                         */
/* ------------------------------------------------------------------ */

	.fc-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1em;
		margin: 0 0 2.5em 0;
		perspective: 1600px;
	}

		/* entrance lives on the wrapper so it never fights the flip transform */
		.fc-wrap {
			opacity: 0;
			transform: translateY(1.25em);
			transition: opacity 0.7s var(--bq-ease-out), transform 0.7s var(--bq-ease-out);
			transition-delay: calc(min(var(--i, 0), 10) * 60ms);
		}

		.fc-grid.is-in .fc-wrap {
			opacity: 1;
			transform: none;
		}

	.fc {
		position: relative;
		aspect-ratio: 1 / 1;
		cursor: pointer;
		outline: none;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition: transform 0.75s var(--bq-ease-inout);
		-webkit-tap-highlight-color: transparent;
	}

		.fc:hover:not(.is-flipped) {
			transform: rotateY(-7deg) translateY(-3px);
		}

		.fc.is-flipped {
			transform: rotateY(180deg);
		}

		.fc:focus-visible .fc-face {
			box-shadow: 0 0 0 2px var(--bq-hot);
		}

	.fc-face {
		position: absolute;
		inset: 0;
		border-radius: 5px;
		overflow: hidden;
		background: #262838;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
		transition: box-shadow 0.35s var(--bq-ease-out), visibility 0s linear 0.37s;
	}

		.fc:hover .fc-face,
		.fc.is-flipped .fc-face {
			box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
		}

	/* front */
	.fc-front img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		-webkit-filter: saturate(0.85);
		filter: saturate(0.85);
		transform: scale(1.02);
		transition: filter 0.5s var(--bq-ease-out), -webkit-filter 0.5s var(--bq-ease-out), transform 0.8s var(--bq-ease-out);
	}

		.fc:hover .fc-front img {
			-webkit-filter: saturate(1);
			filter: saturate(1);
			transform: scale(1.05);
		}

	.fc-index {
		position: absolute;
		top: 0.85em;
		left: 1em;
		z-index: 2;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.6em;
		font-weight: 700;
		letter-spacing: 0.2em;
		line-height: 1;
		color: rgba(255, 255, 255, 0.68);
	}

	.fc-strip {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 2.5em 3.2em 0.85em 0.95em;
		background: linear-gradient(to top, rgba(46, 49, 65, 0.95), rgba(46, 49, 65, 0));
	}

	.fc-name {
		margin: 0;
		font-size: 0.72em;
		letter-spacing: 0.12em;
		line-height: 1.3;
	}

		.fc-name span {
			font-weight: 200;
		}

	.fc-flip {
		position: absolute;
		right: 0.8em;
		bottom: 0.8em;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 2em;
		height: 2em;
		border-radius: 50%;
		border: 2px solid rgba(255, 255, 255, 0.3);
		background: rgba(46, 49, 65, 0.55);
		color: rgba(255, 255, 255, 0.85);
		font-size: 0.75em;
		transition: transform 0.5s var(--bq-ease-out), border-color 0.25s var(--bq-ease-out), color 0.25s var(--bq-ease-out);
	}

		.fc-flip svg {
			width: 1.05em;
			height: 1.05em;
			display: block;
		}

		.fc:hover .fc-flip {
			border-color: var(--bq-hot);
			color: var(--bq-hot);
			transform: rotate(180deg);
		}

	/* back */
	.fc-back {
		display: flex;
		flex-direction: column;
		padding: 1.1em 1em 1em 1em;
		background: linear-gradient(160deg, #3b405c 0%, #262838 100%);
		transform: rotateY(180deg);
		visibility: hidden;
		overflow: auto;
		scrollbar-width: thin;
	}

		.fc-back::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: var(--bq-hot);
		}

		.fc.is-flipped .fc-front {
			visibility: hidden;
		}

		.fc.is-flipped .fc-back {
			visibility: visible;
		}

		.fc-back .fc-index {
			position: static;
			margin: 0 0 0.9em 0;
			color: var(--bq-hot);
		}

		.fc-back .fc-name {
			margin: 0 2.2em 0.5em 0;
		}

		.fc-back .fc-flip {
			top: 0.8em;
			right: 0.8em;
			bottom: auto;
			border-color: rgba(255, 255, 255, 0.2);
			background: transparent;
		}

		.fc-role {
			margin: 0;
			font-size: 0.62em;
			line-height: 1.5;
			color: rgba(255, 255, 255, 0.85);
		}

		.fc-talk {
			display: block;
			margin: 0.75em 0 0 0;
			padding-top: 0.6em;
			border: 0;
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			font-size: 0.6em;
			line-height: 1.45;
			color: #ffffff;
		}

			.fc-back .fc-talk {
				margin-top: auto;
				padding-top: 0.6em;
			}

			.fc-role + .fc-talk {
				margin-top: auto;
			}

			.fc-talk span {
				display: block;
				margin-bottom: 0.35em;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.8em;
				font-weight: 700;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				color: var(--bq-hot);
			}

			.fc-talk:hover {
				text-decoration: underline;
				text-decoration-color: var(--bq-hot);
				text-underline-offset: 0.2em;
			}

	@media screen and (max-width: 980px) {
		.fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	@media screen and (max-width: 736px) {
		.fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
		.fc-back { padding: 0.8em 0.75em 0.75em 0.75em; }
		.fc-back .fc-index { display: none; }   /* the back is small here: every line counts */
		.fc-back .fc-name { margin-right: 2.4em; }
		.fc-name { font-size: 0.64em; }
		.fc-role { font-size: 0.56em; }
		.fc-talk { font-size: 0.55em; }
		.fc-strip { padding: 2.25em 2.8em 0.7em 0.8em; }
	}

	@media screen and (max-width: 360px) {
		.fc-grid { grid-template-columns: 1fr; }
	}

/* ------------------------------------------------------------------ */
/* Background video: a calmer, even scrim so the footage reads         */
/* ------------------------------------------------------------------ */

	.video-overlay {
		background: linear-gradient(105deg, rgba(38, 40, 56, 0.78) 0%, rgba(46, 49, 65, 0.62) 55%, rgba(26, 27, 32, 0.8) 100%);
	}

/* ------------------------------------------------------------------ */
/* Menu: click to open, keyboard friendly, marks the current section   */
/* ------------------------------------------------------------------ */

	#header nav .dropdown:hover .dropdown-content {
		display: none;
	}

	#header nav .dropdown.is-open .dropdown-content {
		display: block;
	}

	#header nav .dropbtn {
		transition: background-color 0.2s ease-in-out;
	}

	#header nav .dropdown.is-open .dropbtn {
		background-color: rgba(255, 140, 0, 0.5);
	}

	#header nav .dropdown-content {
		left: auto;
		right: 0;
		top: calc(100% + 0.4em);
		width: auto;
		min-width: 13em;
		padding: 0.4em 0;
		border-radius: 5px;
		background: rgba(38, 40, 56, 0.97);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
		font-size: 0.75em;
		line-height: 1.6;
		z-index: 5;
	}

		#header nav .dropdown-content a {
			position: relative;
			display: block;
			padding: 0.55em 1.2em 0.55em 1.9em;
			border: 0;
			font-size: 1em;
			letter-spacing: 0.1em;
			text-align: left;
			color: rgba(255, 255, 255, 0.78);
			transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		}

			#header nav .dropdown-content a:hover,
			#header nav .dropdown-content a:focus-visible {
				outline: none;
				background: rgba(255, 140, 0, 0.15);
				color: #ffffff !important;
			}

			#header nav .dropdown-content a.is-current {
				color: #ffffff;
			}

				#header nav .dropdown-content a.is-current::before {
					content: "";
					position: absolute;
					left: 0.6em;
					top: 50%;
					width: 5px;
					height: 5px;
					margin-top: -2.5px;
					border-radius: 50%;
					background: var(--bq-hot);
				}

/* ------------------------------------------------------------------ */
/* Closing call to action                                              */
/* ------------------------------------------------------------------ */

	.cta h3.major {
		font-size: 1.15em;
	}

	.cta p {
		max-width: 36em;
	}

	/* when a section follows (the sponsor section on breaq.html), the same air under the
	   button as under any other section */
	.cta:not(:last-child) > .button {
		margin-bottom: 2em;
	}

	/* two buttons, one per event (breaq.html): the full width, so they fit side by side */
	.cta .cta-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75em 1em;
		max-width: none;
	}

	@media screen and (max-width: 736px) {

		.cta .button {
			width: 100%;
		}

	}

/* ------------------------------------------------------------------ */
/* Header: a Register button next to the menu                          */
/* ------------------------------------------------------------------ */

	#header nav {
		display: flex;
		align-items: center;
		gap: 0.6em;
	}

		#header nav a.hdr-cta {
			height: 2.6em;
			line-height: 2.6em;
			padding: 0 1.25em;
			border-radius: 5px;
			background: var(--bq-accent);
			color: #ffffff !important;
			transition: background-color 0.2s ease-in-out;
		}

			#header nav a.hdr-cta:hover {
				background: #53639e;
			}

/* ------------------------------------------------------------------ */
/* Hero: tagline, key facts and the call to action                     */
/* ------------------------------------------------------------------ */

	/* The fixed video overlay is positioned (z-index 0) and the theme's hero is not,
	   so the hero used to paint underneath it. Lift it above. */
	#wrapper > header {
		position: relative;
		z-index: 1;
	}

	#wrapper > header .inner {
		height: auto;
		min-height: 20em;
	}

	#wrapper > header p {
		margin: 0 0 1.5em 0;
	}

	/* On wide screens the theme floats the hero straight over the video, under the
	   fixed top bar and on the light side of its gradient. Clear the bar and give
	   the text a scrim so it reads. */
	@media screen and (min-width: 1281px) {

		#wrapper > header {
			padding-top: 5.5em;
		}

			#wrapper > header .inner {
				box-sizing: border-box;
				padding: 2.25em 2.75em 2.5em 2.75em;
				min-height: 0;
				border-radius: 5px;
				background: linear-gradient(105deg, rgba(38, 40, 56, 0.88) 0%, rgba(46, 49, 65, 0.72) 100%);
			}

	}

	/* the page title is an h1 (one top-level heading per page) and keeps the theme's hero h2 look */
	#wrapper > header h1 {
		border-bottom: solid 2px rgba(255, 255, 255, 0.125);
		font-size: 2em;
		margin-bottom: 0.8em;
		padding-bottom: 0.4em;
	}

	@media screen and (max-width: 736px) {

		#wrapper > header h1 {
			font-size: 1.25em;
		}

	}

	.hero-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1em 2.75em;
	}

		.hero-fact {
			display: flex;
			flex-direction: column;
			gap: 0.2em;
			font-size: 0.72em;
			letter-spacing: 0.04em;
			color: var(--bq-fg-light);
		}

			.hero-fact b {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 1.05em;
				font-weight: 700;
				letter-spacing: 0.14em;
				text-transform: uppercase;
				color: #ffffff;
			}

		/* a fact with its icon in front, ringed like the About block's (the date and the venue on the event pages) */
		.hero-fact--ic {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			gap: 0.2em 0.9em;
		}

			.hero-fact--ic .hero-ic {
				grid-row: 1 / span 2;
				display: grid;
				place-items: center;
				width: 3em;
				height: 3em;
				border-radius: 50%;
				border: 1.5px solid rgba(255, 140, 0, 0.55);
				color: var(--bq-hot);
				letter-spacing: 0;
			}

				.hero-fact--ic .hero-ic::before {
					font-size: 1.15em;
				}

			.hero-fact--ic b,
			.hero-fact--ic > span:not(.hero-ic) {
				grid-column: 2;
			}

		/* the date over the venue, the button beside them: with their icons the three do not fit on one line */
		.hero-row.hero-row--stack {
			display: grid;
			grid-template-columns: auto auto;
			justify-content: start;
			align-items: center;
			gap: 1.1em 3em;
		}

			.hero-row--stack .hero-cta {
				grid-column: 2;
				grid-row: 1 / span 2;
			}

		.hero-row .button {
			margin-left: auto;
		}

		/* a fact that leads to its own page (the conference date on breaq.html) */
		a.hero-fact {
			border-bottom: 0;
		}

			a.hero-fact b::after {
				content: "\2192";
				display: inline-block;
				margin-left: 0.45em;
				color: var(--bq-hot);
				transition: transform 0.3s var(--bq-ease-out);
			}

			a.hero-fact:hover b::after {
				transform: translateX(3px);
			}

		/* the button with the deadline under it (breaq.html) */
		.hero-cta {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.6em;
		}

			.hero-cta small {
				font-size: 0.68em;
				letter-spacing: 0.04em;
				color: var(--bq-fg-light);
			}

	@media screen and (max-width: 736px) {

		.hero-row {
			gap: 0.9em 1.75em;
		}

		.hero-row .button {
			margin-left: 0;
			width: 100%;
		}

		.hero-cta {
			align-items: center;
			width: 100%;
		}

		.hero-row.hero-row--stack {
			grid-template-columns: minmax(0, 1fr);
		}

			.hero-row--stack .hero-cta {
				grid-column: auto;
				grid-row: auto;
			}

	}

/* ------------------------------------------------------------------ */
/* Prizes (breaq-hackathon.html): a seal on the hero logo, then the    */
/* pool counted up beside a podium                                      */
/* ------------------------------------------------------------------ */

	/* the seal: an orange coin with the pool, its words turning round it. The logo gives it room: a little smaller,
	   in the top left of its box, the seal in the bottom right */
	.ch-hero-art {
		position: relative;
	}

		.ch-hero-art.has-seal img {
			width: 76%;
		}

	@keyframes prize-turn {
		to { transform: rotate(360deg); }
	}

	@keyframes prize-pop {
		from { opacity: 0; transform: scale(0.4) rotate(-40deg); }
		70%  { opacity: 1; transform: scale(1.08) rotate(6deg); }
		to   { opacity: 1; transform: none; }
	}

	#wrapper a.prize-seal {
		position: absolute;
		right: -12%;
		bottom: -8%;
		width: 44%;
		aspect-ratio: 1 / 1;
		border: 0;
		border-radius: 50%;
		color: #ffffff;
		text-align: center;
		transition: transform 0.45s var(--bq-ease-out);
	}

		#wrapper a.prize-seal:hover {
			transform: scale(1.07) rotate(-4deg);
		}

		#wrapper a.prize-seal:focus-visible {
			outline: 2px solid var(--bq-hot);
			outline-offset: 4px;
		}

		.prize-seal-ring {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			overflow: visible;
			animation: prize-turn 22s linear infinite;
		}

			.prize-seal-ring text {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 9.5px;
				font-weight: 800;
				letter-spacing: 0.12em;
				fill: var(--bq-hot);
			}

		/* the coin: lit from the top left, with a glow under it */
		.prize-seal-core {
			position: absolute;
			inset: 19%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 0.15em;
			border-radius: 50%;
			background:
				radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), transparent 42%),
				radial-gradient(circle at 50% 50%, #ffae3d 0%, #ff8c00 58%, #c96500 100%);
			box-shadow: 0 0 0 3px rgba(46, 49, 65, 0.9), 0 0 0 4.5px rgba(255, 140, 0, 0.7), 0 12px 34px rgba(255, 140, 0, 0.45);
			color: #1f2130;
		}

			.prize-seal-core b {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 1.15em;
				font-weight: 800;
				font-variant-numeric: lining-nums;
				line-height: 1;
				letter-spacing: 0.02em;
			}

			.prize-seal-core span {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.42em;
				font-weight: 800;
				letter-spacing: 0.16em;
				line-height: 1.2;
				text-transform: uppercase;
			}

	.page-motion a.prize-seal {
		animation: prize-pop 0.9s var(--bq-ease-out) 1.25s both;
	}

	/* the section: the pool on the left, the podium on the right, on a card lit from below */
	.prize {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
		gap: 2.5em;
		margin: 0 0 2em 0;
		padding: 2.25em 2.5em 2em 2.5em;
		border: 1px solid var(--bq-line);
		border-radius: 8px;
		overflow: hidden;
		background:
			radial-gradient(ellipse 55% 75% at 78% 105%, rgba(255, 140, 0, 0.2), transparent 70%),
			radial-gradient(ellipse 45% 60% at 0% 0%, rgba(76, 92, 150, 0.35), transparent 70%),
			rgba(255, 255, 255, 0.025);
	}

		.prize, .prize * {
			text-align: left;
		}

		.prize p {
			margin: 0;
		}

		.prize-k {
			display: flex;
			align-items: center;
			gap: 0.8em;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.6em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

		/* the sum: white into gold into orange, with a glow */
		.prize-sum {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			gap: 0 0.3em;
			margin: 0.15em 0 0.35em 0 !important;
			font-family: Raleway, Helvetica, sans-serif;
			font-weight: 800;
			line-height: 1;
		}

			.prize-n {
				font-size: clamp(3.4em, 8.5vw, 5.4em);
				font-variant-numeric: lining-nums tabular-nums;
				letter-spacing: -0.01em;
				background: linear-gradient(100deg, #ffffff 0%, #ffe0b0 38%, #ffae3d 66%, #ff8c00 100%);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				filter: drop-shadow(0 0 22px rgba(255, 140, 0, 0.35));
			}

			.prize-cur {
				font-size: 1.35em;
				letter-spacing: 0.2em;
				color: var(--bq-hot);
			}

		.prize-sr {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;
		}

		.prize-line {
			max-width: 30em;
			font-size: 0.95em;
			line-height: 1.6;
			color: #ffffff;
		}

		.prize-tracks {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5em;
			margin: 1.4em 0 0 0;
			padding: 0;
			list-style: none;
		}

			.prize-tracks li {
				display: inline-flex;
				align-items: center;
				gap: 0.55em;
				margin: 0;
				padding: 0.45em 0.9em 0.4em 0.75em;
				border: 1px solid var(--bq-line);
				border-radius: 999px;
				background: rgba(255, 255, 255, 0.03);
				font-size: 0.72em;
				letter-spacing: 0.04em;
				line-height: 1.2;
			}

				.prize-tracks li::before {
					content: "";
					width: 0.5em;
					height: 0.5em;
					border-radius: 50%;
					background: var(--bq-hot);
					box-shadow: 0 0 8px rgba(255, 140, 0, 0.8);
				}

	/* the podium: 2, 1, 3, standing on a line of light */
	.podium {
		position: relative;
		padding-top: 2.4em;
	}

		.podium-stage {
			position: relative;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			align-items: end;
			gap: 0.55em;
			height: 13em;
		}

			.podium-stage::after {
				content: "";
				position: absolute;
				left: -8%;
				right: -8%;
				bottom: -1px;
				height: 2px;
				background: linear-gradient(90deg, transparent, var(--bq-hot) 20%, #ffd08a 50%, var(--bq-hot) 80%, transparent);
				box-shadow: 0 0 18px rgba(255, 140, 0, 0.7);
			}

		.pod {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.35em;
			padding-top: 0.75em;
			border: 1px solid rgba(255, 140, 0, 0.32);
			border-bottom: 0;
			border-radius: 6px 6px 0 0;
			background: linear-gradient(180deg, rgba(255, 140, 0, 0.26), rgba(255, 140, 0, 0.03) 88%);
			overflow: visible;
			transform-origin: bottom;
		}

			.pod-1 { height: 100%; }
			.pod-2 { height: 74%; }
			.pod-3 { height: 56%; }

			.pod b {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 2.6em;
				font-weight: 800;
				font-variant-numeric: lining-nums;
				line-height: 1;
				color: #ffffff;
			}

			.pod span:not(.pod-cup) {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.55em;
				font-weight: 700;
				letter-spacing: 0.25em;
				text-transform: uppercase;
				color: var(--bq-fg-light);
			}

			/* first place: brighter, in gold, with the cup above it and light passing over it */
			.pod-1 {
				border-color: rgba(255, 174, 61, 0.75);
				background: linear-gradient(180deg, rgba(255, 174, 61, 0.42), rgba(255, 140, 0, 0.05) 90%);
				box-shadow: 0 -10px 40px rgba(255, 140, 0, 0.22);
			}

				.pod-1 b {
					font-size: 3.4em;
					background: linear-gradient(180deg, #ffffff, #ffc56b);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}

				/* a band of light crossing it, drawn by its background so it stays inside the block (the cup does not) */
				@keyframes prize-shine {
					from { background-position: 160% 0; }
					to   { background-position: -60% 0; }
				}

				.pod-1::after {
					content: "";
					position: absolute;
					inset: 0;
					border-radius: inherit;
					background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.18) 50%, transparent 58%) no-repeat;
					background-size: 250% 100%;
					background-position: 160% 0;
					animation: prize-shine 3.6s var(--bq-ease-inout) 2s infinite;
					pointer-events: none;
				}

			@keyframes prize-float {
				0%, 100% { transform: translate(-50%, 0); }
				50%      { transform: translate(-50%, -5px); }
			}

			.pod-cup {
				position: absolute;
				left: 50%;
				top: -2.1em;
				font-size: 1.5em;
				color: #ffae3d;
				filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.8));
				transform: translate(-50%, 0);
				animation: prize-float 3.2s ease-in-out infinite;
			}

		.podium-x {
			margin-top: 0.9em !important;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.6em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-align: center !important;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

	/* the entrance (breaq.js arms it, then sets is-in once in view): the blocks rise 3, 2, 1, the cup lands last */
	.prize.is-armed .pod {
		transform: scaleY(0);
		transition: transform 0.9s var(--bq-ease-out);
	}

		.prize.is-armed .pod-3 { transition-delay: 0.1s; }
		.prize.is-armed .pod-2 { transition-delay: 0.3s; }
		.prize.is-armed .pod-1 { transition-delay: 0.5s; }

		.prize.is-armed .pod > * {
			opacity: 0;
			transition: opacity 0.5s var(--bq-ease-out) 1.1s;
		}

		.prize.is-armed.is-in .pod {
			transform: none;
		}

		.prize.is-armed.is-in .pod > * {
			opacity: 1;
		}

	@media screen and (max-width: 980px) {

		/* the logo goes above the text, small and whole: the seal beside it */
		.ch-hero-art.has-seal img {
			width: 100%;
		}

		#wrapper a.prize-seal {
			left: calc(100% - 1.25em);
			right: auto;
			bottom: 2%;
			width: 7em;
		}

	}

	@media screen and (max-width: 736px) {

		.prize {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.75em;
			padding: 1.75em 1.5em 1.5em 1.5em;
		}

			.podium-stage {
				height: 10.5em;
			}

	}

	@media (prefers-reduced-motion: reduce) {

		.prize-seal-ring,
		.pod-1::after,
		.pod-cup,
		.page-motion a.prize-seal {
			animation: none;
		}

	}

/* ------------------------------------------------------------------ */
/* About: the event at a glance                                        */
/* ------------------------------------------------------------------ */

	.glance {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin: 0 0 2em 0;
		border-top: 1px solid var(--bq-line);
		border-bottom: 1px solid var(--bq-line);
	}

		.glance > div {
			padding: 1.1em 1.25em;
			border-left: 1px solid var(--bq-line);
		}

			.glance > div:first-child {
				padding-left: 0;
				border-left: 0;
			}

		.glance dt {
			display: flex;
			align-items: center;
			gap: 0.7em;
			margin: 0 0 0.6em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.55em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

			.glance-ic {
				display: grid;
				place-items: center;
				width: 2.4em;
				height: 2.4em;
				border-radius: 50%;
				border: 1.5px solid rgba(255, 140, 0, 0.55);
				font-size: 1.25em;
				letter-spacing: 0;
			}

				.glance-ic::before {
					font-size: 0.95em;
				}

		.glance dd {
			margin: 0;
			font-size: 0.85em;
			line-height: 1.45;
			color: #ffffff;
		}

			/* a quiet label above each line of dates: Hackathon, Presentations */
			.glance-k {
				display: block;
				font-size: 0.8em;
				color: var(--bq-fg-light);
			}

				.glance-k ~ .glance-k {
					margin-top: 0.55em;
				}

	@media screen and (max-width: 980px) {

		.glance {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

			.glance > div:nth-child(3) {
				padding-left: 0;
				border-left: 0;
			}

			.glance > div:nth-child(n + 3) {
				border-top: 1px solid var(--bq-line);
			}

	}

	@media screen and (max-width: 480px) {

		.glance {
			grid-template-columns: 1fr;
		}

			.glance > div {
				padding-left: 0;
				border-left: 0;
			}

			.glance > div + div {
				border-top: 1px solid var(--bq-line);
			}

	}

/* ------------------------------------------------------------------ */
/* What to expect: three numbered strands                              */
/* ------------------------------------------------------------------ */

	.xp {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 2.25em;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.xp li {
			padding: 1em 0 0 0;
			border-top: 1px solid var(--bq-line);
		}

		.xp-n {
			display: block;
			margin: 0 0 0.45em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 1.6em;
			font-weight: 200;
			letter-spacing: 0.1em;
			line-height: 1;
			color: var(--bq-hot);
		}

		.xp h4 {
			margin: 0 0 0.55em 0;
			font-size: 0.72em;
		}

		.xp p {
			margin: 0;
			font-size: 0.85em;
			line-height: 1.55;
			color: rgba(255, 255, 255, 0.85);
		}

	@media screen and (max-width: 736px) {

		.xp {
			grid-template-columns: 1fr;
			gap: 1.25em 0;
		}

	}

/* ------------------------------------------------------------------ */
/* Logos: organizers, sponsors and partners as tiles                   */
/* ------------------------------------------------------------------ */

	.logos {
		display: grid;
		gap: 1em;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.logos li {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 0;
		}

		.logos img {
			display: block;
			transition: transform 0.45s var(--bq-ease-out), opacity 0.3s var(--bq-ease-out);
		}

		.logos li:hover img {
			transform: scale(1.04);
		}

	/* tiles: one dark surface for every logo (transparent exports in images/opt/logos),
	   the logo contained inside with air around it; a tile is a link where we have one */
	.logos--tiles {
		/* as many columns as fit: the organizers, the supporters and the partners each make one row */
		grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
	}

		.logos--tiles li {
			display: block;
			aspect-ratio: 1200 / 630;
		}

		/* five to a row leaves less room than the ranked tiles: tighter air around the logo
		   (the extra class outranks the .logos .tile padding below) */
		.logos.logos--tiles .tile {
			padding: 1em 1.25em;
		}

	.logos .tile {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 1.5em 1.75em;
		border: solid 1px var(--bq-line);
		border-radius: 5px;
		background: var(--tile-bg, rgba(255, 255, 255, 0.035));
		transition: border-color 0.25s ease, background-color 0.25s ease;
	}

		/* a brand that must keep its own background: the li sets --tile-bg */
		.logos .tile--brand .tile {
			border-color: transparent;
		}

		.logos .tile img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		/* a round seal in dark blue: a thin light rim lifts its edge off the dark tile */
		.logos .tile--seal img {
			filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
		}

		/* a long wordmark (Kinderpedia) fills the tile's width and outweighs the logos beside it: a little narrower */
		.logos .tile--wordmark .tile img {
			max-width: 74%;
		}

		/* the K in the small Kfea file is tiny; do not blow it up */
		.logos .tile img[width="86"] {
			max-height: 70%;
		}

		.logos a.tile:hover,
		.logos a.tile:focus-visible {
			border-color: var(--bq-hot);
			background: rgba(255, 140, 0, 0.06);
			outline: none;
		}

	/* sponsors: one ranked row on the supporters' four-column grid, then equal supporters.
	   Gold spans three columns; silver and bronze take one each, at the full height of the row.
	   The tier's colour is the line along the tile's top edge and the tag in its corner. */
	.logos.logos--rank {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
		margin-bottom: 2.25em;
	}

		/* the full width of their column, said outright: with an aspect-ratio and only "stretch" to go on,
		   Safari sizes a tile from its content instead, and the silver one came out 172 px wide with no logo */
		.logos.logos--rank li {
			display: block;
			width: 100%;
			--tier: var(--bq-fg-light);
		}

		.logos.logos--rank .is-gold {
			grid-column: span 3;
			--tier: #e0b74f;
		}

		.logos.logos--rank .is-silver {
			--tier: #c9cfdb;
		}

		.logos.logos--rank .is-bronze {
			--tier: #c98c58;
		}

		.logos.logos--rank .is-silver {
			aspect-ratio: 3 / 2;
		}

		.logos.logos--rank .tile {
			padding: 3em 2.5em 2.25em;
			overflow: hidden;
		}

			.logos.logos--rank .is-bronze .tile {
				padding: 2.6em 1.5em 1.4em;
			}

			.logos.logos--rank .tile::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 2px;
				background: var(--tier);
			}

			.logos.logos--rank .tier-tag {
				position: absolute;
				top: 1.1em;
				left: 1.5em;
				color: var(--tier);
			}

			/* an absolute cap: a percentage here would let the logo's natural size set the row height
			   (and Safari can resolve it to nothing) */
			.logos.logos--rank .is-gold .tile img {
				max-height: 6.5em;
			}

			.logos.logos--rank .is-silver .tile img {
				max-height: 5em;
			}

	/* gold, silver and bronze in one row: nine columns, 4 / 3 / 2, so each tier is a step smaller.
	   Wide screens only; on phones the tiers stack (see the 736px block below). */
	@media screen and (min-width: 737px) {

		.logos.logos--rank:has(.is-silver) {
			grid-template-columns: repeat(9, minmax(0, 1fr));
		}

			.logos.logos--rank:has(.is-silver) .is-gold {
				grid-column: span 4;
			}

			.logos.logos--rank:has(.is-silver) .is-silver {
				grid-column: span 3;
				aspect-ratio: auto;
			}

			.logos.logos--rank:has(.is-silver) .is-bronze {
				grid-column: span 2;
			}

		/* two golds: they share the first row, half each; silver and bronze go under them, centred,
		   at about the size they have beside a single gold (fourteen columns: 7 + 7, then 5 + 3 in the middle) */
		.logos.logos--rank:has(.is-gold ~ .is-gold) {
			grid-template-columns: repeat(14, minmax(0, 1fr));
		}

			.logos.logos--rank:has(.is-gold ~ .is-gold) .is-gold {
				grid-column: span 7;
			}

			.logos.logos--rank:has(.is-gold ~ .is-gold) .is-silver {
				grid-column: 4 / span 5;
			}

			.logos.logos--rank:has(.is-gold ~ .is-gold) .is-bronze {
				grid-column: span 3;
			}

	}

	@media screen and (max-width: 736px) {

		.logos--tiles {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

			/* two narrow columns: a little taller, so the logos keep some size */
			.logos--tiles li {
				aspect-ratio: 3 / 2;
			}

			/* an odd last tile fills the row at the same height, so its logo stays the same size */
			.logos--tiles li:last-child:nth-child(odd) {
				grid-column: span 2;
				aspect-ratio: 3.1 / 1;
			}

		.logos.logos--rank {
			grid-template-columns: 1fr;
		}

			.logos.logos--rank .is-gold {
				grid-column: auto;
			}

			.logos.logos--rank .is-gold,
			.logos.logos--rank .is-silver {
				aspect-ratio: 2 / 1;
			}

			/* half width, like a supporter tile on a phone */
			.logos.logos--rank .is-bronze {
				width: calc(50% - 0.5em);
				aspect-ratio: 3 / 2;
			}

	}

/* ------------------------------------------------------------------ */
/* Hackathon challenges                                                */
/* ------------------------------------------------------------------ */

	.ch-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2em;
		margin: 0 0 2em 0;
	}

		.ch {
			margin: 0;
		}

		.ch .image.fit {
			margin: 0 0 1em 0;
		}

		.ch-tag {
			display: inline-block;
			margin: 0 0 0.6em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.5em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

		.ch h4 {
			margin: 0 0 0.5em 0;
			font-size: 0.75em;
		}

		.ch p {
			margin: 0;
			font-size: 0.85em;
			line-height: 1.55;
			color: rgba(255, 255, 255, 0.85);
		}

	@media screen and (max-width: 980px) {
		.ch-grid { gap: 1.25em; }
	}

	@media screen and (max-width: 736px) {
		.ch-grid { grid-template-columns: 1fr; gap: 2em; }
	}

/* ------------------------------------------------------------------ */
/* Venues side by side                                                 */
/* ------------------------------------------------------------------ */

	.venues {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2em;
		margin: 0 0 2em 0;
	}

		.venue h4 {
			margin: 0 0 0.4em 0;
			font-size: 0.75em;
		}

		.venue-when {
			margin: 0 0 0.4em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.55em;
			font-weight: 700;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

		.venue-addr {
			margin: 0 0 1em 0;
			font-size: 0.8em;
			line-height: 1.5;
			color: rgba(255, 255, 255, 0.75);
		}

		/* the map is a dark picture with our own caption on top; the embed's white
		   card is cropped away above the frame, Google's attribution stays visible below */
		.venue-map {
			position: relative;
			aspect-ratio: 4 / 3.4;
			border-radius: 5px;
			overflow: hidden;
			background: #262838;
		}

			.venue-map iframe {
				position: absolute;
				left: 0;
				top: -18%;
				width: 100%;
				height: 118%;
				border: 0;
				pointer-events: none;
				-webkit-filter: invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.82) contrast(1.05);
				filter: invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.82) contrast(1.05);
				transition: filter 0.5s var(--bq-ease-out), -webkit-filter 0.5s var(--bq-ease-out);
			}

			.venue-map:hover iframe {
				-webkit-filter: invert(0.92) hue-rotate(185deg) saturate(0.7) brightness(0.95) contrast(1.05);
				filter: invert(0.92) hue-rotate(185deg) saturate(0.7) brightness(0.95) contrast(1.05);
			}

			.venue-info {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				padding: 1.1em 1.2em 2.4em 1.2em;
				/* solid down to the links, fading only across the bottom padding, so no map label shows behind the text */
				background: linear-gradient(to bottom, rgba(38, 40, 56, 0.97) 0%, rgba(38, 40, 56, 0.95) calc(100% - 2.4em), rgba(38, 40, 56, 0) 100%);
			}

				.venue-info h4 {
					margin: 0 0 0.35em 0;
				}

				.venue-info .venue-when {
					margin: 0 0 0.4em 0;
				}

				.venue-info .venue-addr {
					margin: 0 0 0.6em 0;
				}

				.venue-links {
					display: flex;
					flex-wrap: wrap;
					gap: 0.4em 1.5em;
					margin: 0;
				}

					.venue-links .ch-more {
						margin-top: 0;
					}

	@media screen and (max-width: 736px) {
		.venues { grid-template-columns: 1fr; }
	}

/* ------------------------------------------------------------------ */
/* FAQ accordion                                                       */
/* ------------------------------------------------------------------ */

	.faq {
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
		border-top: 1px solid var(--bq-line);
	}

		.faq-item {
			margin: 0;
			padding: 0;
			border-bottom: 1px solid var(--bq-line);
		}

		.faq-q {
			-webkit-appearance: none;
			appearance: none;
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto;
			column-gap: 1em;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 0;
			padding: 0.95em 0;
			border: 0;
			border-radius: 0;
			box-shadow: none;
			background: transparent;
			font-family: inherit;
			font-size: 1em;
			font-weight: inherit;
			line-height: inherit;
			letter-spacing: 0;
			text-transform: none;
			white-space: normal;
			color: inherit;
			cursor: pointer;
		}

			.faq-q:hover,
			.faq-q:active {
				background: transparent;
			}

			.faq-q:focus-visible {
				outline: none;
				box-shadow: inset 0 0 0 2px var(--bq-hot);
			}

		.faq-ic {
			width: 1.6em;
			font-size: 0.8em;
			text-align: center !important;
			color: var(--bq-fg-light);
			transition: color 0.25s var(--bq-ease-out);
		}

		.faq-t {
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: 700;
			letter-spacing: 0.1em;
			line-height: 1.4;
			text-transform: uppercase;
			color: #ffffff;
		}

		.faq-q:hover .faq-ic,
		.faq-item.is-open .faq-ic {
			color: var(--bq-hot);
		}

		.faq-a {
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows 0.45s var(--bq-ease-out);
		}

			.faq-a > div {
				overflow: hidden;
				min-height: 0;
				padding: 0 3.5em 0 2.3em;
			}

			.faq-a p {
				margin: 0;
				padding: 0 0 1.1em 0;
				font-size: 0.85em;
				line-height: 1.6;
				color: rgba(255, 255, 255, 0.85);
				opacity: 0;
				transform: translateY(-0.3em);
				transition: opacity 0.35s var(--bq-ease-out), transform 0.35s var(--bq-ease-out);
			}

			.faq-item.is-open .faq-a {
				grid-template-rows: 1fr;
			}

			.faq-item.is-open .faq-a p {
				opacity: 1;
				transform: none;
				transition-delay: 0.12s;
			}

	@media screen and (max-width: 736px) {

		.faq-a > div {
			padding-right: 0;
		}

	}

/* ------------------------------------------------------------------ */
/* Speakers: portraits that "collapse" into the person on hover         */
/* ------------------------------------------------------------------ */

	.sp-hint {
		margin: -1em 0 1.5em 0;
		font-size: 0.7em;
		letter-spacing: 0.04em;
		color: var(--bq-fg-light);
	}

	.sp-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1em;
		margin: 0 0 2.5em 0;
	}

	.sp-card {
		position: relative;
		margin: 0;
		aspect-ratio: 1 / 1;
		border-radius: 5px;
		overflow: hidden;
		background: #262838;
		cursor: pointer;
		outline: none;
		isolation: isolate;
		-webkit-tap-highlight-color: transparent;

		/* entrance (released by .sp-grid.is-in) */
		opacity: 0;
		transform: translateY(1.25em);
		transition: opacity 0.7s var(--bq-ease-out), transform 0.7s var(--bq-ease-out);
		transition-delay: calc(min(var(--i, 0), 10) * 60ms);
	}

		.sp-grid.is-in .sp-card {
			opacity: 1;
			transform: none;
		}

		.sp-card:focus-visible {
			box-shadow: 0 0 0 2px var(--bq-hot);
		}

	/* photo: the uncertain state is grey, navy-tinted, with a faint interference pattern */
	.sp-photo {
		position: absolute;
		inset: 0;
	}

		.sp-photo img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			-webkit-filter: grayscale(1) contrast(1.05) brightness(0.9);
			filter: grayscale(1) contrast(1.05) brightness(0.9);
			transform: scale(1.06);
			transition: filter 0.6s var(--bq-ease-out), -webkit-filter 0.6s var(--bq-ease-out), transform 0.9s var(--bq-ease-out);
		}

		.sp-photo::before {
			content: "";
			position: absolute;
			inset: 0;
			background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
			mix-blend-mode: overlay;
			transition: opacity 0.5s var(--bq-ease-out);
		}

		.sp-photo::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(160deg, rgba(76, 92, 150, 0.6), rgba(46, 49, 65, 0.7));
			mix-blend-mode: multiply;
			transition: opacity 0.5s var(--bq-ease-out);
		}

	.sp-index {
		position: absolute;
		top: 0.85em;
		left: 1em;
		z-index: 2;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.6em;
		font-weight: 700;
		letter-spacing: 0.2em;
		line-height: 1;
		color: rgba(255, 255, 255, 0.68);
		transition: color 0.3s var(--bq-ease-out), transform 0.5s var(--bq-ease-out);
	}

	/* the caption: name always visible, details unfold beneath it */
	.sp-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		margin: 0;
		padding: 2.75em 0.95em 0.85em 0.95em;
		background: linear-gradient(to top, rgba(46, 49, 65, 0.97) 0%, rgba(46, 49, 65, 0.82) 55%, rgba(46, 49, 65, 0) 100%);
	}

		.sp-name {
			margin: 0;
			font-size: 0.72em;
			letter-spacing: 0.12em;
			line-height: 1.3;
		}

			.sp-name span {
				font-weight: 200;
			}

		.sp-more {
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows 0.55s var(--bq-ease-out);
		}

			.sp-more > div {
				overflow: hidden;
				min-height: 0;
			}

		.sp-role,
		.sp-talk {
			opacity: 0;
			transform: translateY(0.6em);
			transition: opacity 0.45s var(--bq-ease-out), transform 0.55s var(--bq-ease-out);
		}

		.sp-role abbr {
			text-decoration: none;
			border: 0;
			cursor: help;
		}

		.sp-role {
			margin: 0.55em 0 0 0;
			font-size: 0.62em;
			line-height: 1.5;
			color: rgba(255, 255, 255, 0.82);
			transition-delay: 90ms;
		}

		.sp-talk {
			display: block;
			margin: 0.75em 0 0 0;
			padding-top: 0.6em;
			border: 0;
			border-top: 1px solid rgba(255, 255, 255, 0.15);
			font-size: 0.6em;
			line-height: 1.45;
			color: #ffffff;
			transition-delay: 160ms;
		}

			.sp-talk span {
				display: block;
				margin-bottom: 0.35em;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.8em;
				font-weight: 700;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				color: var(--bq-hot);
			}

			.sp-talk:hover {
				text-decoration: underline;
				text-decoration-color: var(--bq-hot);
				text-underline-offset: 0.2em;
			}

	/* the "measurement" line drawn along the bottom edge */
	.sp-card::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		z-index: 3;
		background: var(--bq-hot);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.5s var(--bq-ease-out) 0.1s;
	}

	/* --- collapsed state: hover, keyboard focus or tap --- */
	/* colourise, and nudge the photo up so the face stays clear of the unfolding caption */
	.sp-card:is(:hover, :focus-visible, .is-open) .sp-photo img {
		-webkit-filter: grayscale(0) contrast(1) brightness(1);
		filter: grayscale(0) contrast(1) brightness(1);
		transform: scale(1.08) translateY(-6%);
	}

	.sp-card:is(:hover, :focus-visible, .is-open) .sp-photo::before,
	.sp-card:is(:hover, :focus-visible, .is-open) .sp-photo::after {
		opacity: 0;
	}

	.sp-card:is(:hover, :focus-visible, .is-open) .sp-index {
		color: var(--bq-hot);
		transform: translateX(0.35em);
	}

	.sp-card:is(:hover, :focus-visible, .is-open) .sp-more {
		grid-template-rows: 1fr;
	}

	.sp-card:is(:hover, :focus-visible, .is-open) .sp-role,
	.sp-card:is(:hover, :focus-visible, .is-open) .sp-talk {
		opacity: 1;
		transform: none;
	}

	.sp-card:is(:hover, :focus-visible, .is-open)::after {
		transform: scaleX(1);
	}

	/* the core team is larger than a row of four: five across, smaller cards */
	.sp-grid.sp-grid--dense {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.85em;
	}

		.sp-grid--dense .sp-name { font-size: 0.64em; }
		.sp-grid--dense .sp-role { font-size: 0.56em; }
		.sp-grid--dense .sp-info { padding: 2.25em 0.8em 0.7em 0.8em; }

	/* the core team shows its roles outright: four people, nothing to discover, so the
	   cards are not interactive. Taller than square so the face stays clear of the caption.
	   The photo keeps the grey resting state and colours on hover, purely decorative. */
	.sp-grid--open .sp-card {
		aspect-ratio: 4 / 5;
		cursor: default;
	}

		.sp-grid--open .sp-more {
			grid-template-rows: 1fr;
		}

		/* room for three lines of role on every card, so the names line up across the row */
		.sp-grid--open .sp-role {
			min-height: 4.5em;
			opacity: 1;
			transform: none;
		}

		.sp-grid--open .sp-card:hover .sp-photo img {
			transform: scale(1.08);
		}

	/* two narrow columns: the caption sits under the photo instead of over it */
	@media screen and (max-width: 736px) {

		.sp-grid--open .sp-card {
			aspect-ratio: auto;
		}

			.sp-grid--open .sp-photo {
				position: relative;
				aspect-ratio: 1 / 1;
			}

				.sp-grid--open .sp-photo img {
					position: absolute;
					inset: 0;
				}

			.sp-grid--open .sp-info {
				position: static;
				padding: 0.7em 0.8em 0.8em 0.8em;
				background: none;
			}

	}

	@media screen and (max-width: 980px) {
		.sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.sp-grid.sp-grid--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	@media screen and (max-width: 736px) {
		.sp-grid,
		.sp-grid.sp-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
		.sp-info { padding: 2.25em 0.8em 0.7em 0.8em; }
		.sp-name { font-size: 0.66em; }
		.sp-role { font-size: 0.58em; }
	}

	@media screen and (max-width: 360px) {
		.sp-grid { grid-template-columns: 1fr; }
	}

/* ------------------------------------------------------------------ */
/* Schedule: day selector + timeline                                    */
/* ------------------------------------------------------------------ */

	.sched {
		--tl-col: 6.5em;
		margin: 0 0 2em 0;
	}

	/* the day strip stays pinned under the top bar while a long day scrolls */
	.sched-tabs {
		position: sticky;
		top: 3.5em;
		z-index: 3;
		display: flex;
		margin: 0 0 1.75em 0;
		border-bottom: solid 2px var(--bq-line);
		background: #2e3141;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

		.sched-tabs::-webkit-scrollbar {
			display: none;
		}

	.sched-tab {
		-webkit-appearance: none;
		appearance: none;
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3em;
		height: auto;
		padding: 0.5em 1.4em 0.9em 0.9em;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		font-size: 1em;
		line-height: 1.1;
		letter-spacing: 0.1em;
		text-align: left;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.55) !important;
		cursor: pointer;
		transition: color 0.25s var(--bq-ease-out), background-color 0.25s var(--bq-ease-out);
	}

		.sched-tab:hover {
			background: rgba(255, 255, 255, 0.03);
			color: rgba(255, 255, 255, 0.8) !important;
		}

		.sched-tab:focus-visible {
			outline: none;
			box-shadow: inset 0 0 0 2px var(--bq-hot);
		}

		.sched-tab.is-active {
			color: #ffffff !important;
		}

		.sched-tab-k {
			font-size: 0.5em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
		}

		.sched-tab-d {
			font-size: 1.15em;
			font-weight: 200;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

			.sched-tab-d b {
				font-weight: 700;
			}

		.sched-tab-l {
			font-size: 0.5em;
			font-weight: 700;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			opacity: 0.7;
		}

	.sched-ink {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 2px;
		width: 0;
		background: var(--bq-hot);
		transition: transform 0.45s var(--bq-ease-out), width 0.45s var(--bq-ease-out);
		pointer-events: none;
	}

	.sched-panel[hidden] {
		display: none;
	}

	.sched-where {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.3em 1.25em;
		margin: 0 0 1.25em 0;
	}

		.sched-where strong {
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.sched-where span {
			font-size: 0.72em;
			color: var(--bq-fg-light);
		}

		.sched-where a {
			font-size: 0.62em;
			font-family: Raleway, Helvetica, sans-serif;
			font-weight: 700;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			border-bottom-color: var(--bq-hot);
		}

	.sched-note {
		margin: -0.5em 0 2em 0;
		font-size: 0.66em;
		letter-spacing: 0.03em;
		color: var(--bq-fg-light);
	}

	/* the talk happening right now (only on event days) */
	.tl-item.is-now::before {
		background: var(--bq-hot);
		border-color: var(--bq-hot);
		box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.22);
	}

		.tl-item.is-now .tl-time::after {
			content: "Now";
			display: inline-block;
			margin-left: 0.6em;
			padding: 0.15em 0.5em;
			border-radius: 3px;
			background: var(--bq-hot);
			color: #1f2130;
			font-size: 0.75em;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			vertical-align: middle;
		}

	/* timeline */
	.tl {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}

		.tl::before {
			content: "";
			position: absolute;
			top: 1em;
			bottom: 1em;
			left: calc(var(--tl-col) + 0.55em);
			width: 1px;
			background: var(--bq-line);
		}

	.tl-item {
		position: relative;
		opacity: 0;
		transform: translateY(0.5em);
		transition: opacity 0.5s var(--bq-ease-out), transform 0.5s var(--bq-ease-out);
		transition-delay: calc(min(var(--i, 0), 10) * 45ms);
	}

		.tl-item + .tl-item {
			border-top: 1px solid rgba(255, 255, 255, 0.06);
		}

		.sched-panel.is-active .tl-item {
			opacity: 1;
			transform: none;
		}

		/* marker on the rule */
		.tl-item::before {
			content: "";
			position: absolute;
			top: 1.45em;
			left: calc(var(--tl-col) + 0.55em - 4px);
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: var(--bq-bg);
			border: 1px solid rgba(255, 255, 255, 0.4);
			z-index: 1;
			transition: background-color 0.3s var(--bq-ease-out), border-color 0.3s var(--bq-ease-out), transform 0.3s var(--bq-ease-out);
		}

		.tl-item:hover::before,
		.tl-item.is-open::before {
			background: var(--bq-hot);
			border-color: var(--bq-hot);
			transform: scale(1.35);
		}

	.tl-head {
		-webkit-appearance: none;
		appearance: none;
		display: grid;
		grid-template-columns: var(--tl-col) minmax(0, 1fr) auto;
		column-gap: 1.5em;
		align-items: start;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0.9em 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		font-family: inherit;
		font-size: 1em;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: 0;
		text-align: left;
		text-transform: none;
		white-space: normal;
		color: inherit;
		cursor: default;
	}

		button.tl-head {
			cursor: pointer;
		}

		button.tl-head:hover,
		button.tl-head:active {
			background: transparent;
		}

		button.tl-head:focus-visible {
			outline: none;
			box-shadow: inset 0 0 0 2px var(--bq-hot);
		}

	.tl-time {
		position: relative;
		padding-top: 0.35em;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.62em;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.35;
		font-variant-numeric: tabular-nums;
		color: rgba(255, 255, 255, 0.78);
	}

		.tl-time small {
			display: block;
			font-size: 0.85em;
			font-weight: 200;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--bq-fg-light);
		}

	.tl-title {
		display: block;
		font-size: 0.85em;
		font-weight: 600;
		line-height: 1.4;
		color: #ffffff;
		transition: color 0.25s var(--bq-ease-out);
	}

	.tl-who {
		display: block;
		margin-top: 0.2em;
		font-size: 0.68em;
		letter-spacing: 0.04em;
		color: var(--bq-fg-light);
	}

	.tl-chev,
	.faq-chev {
		position: relative;
		width: 1.6em;
		height: 1.6em;
		margin-top: 0.15em;
		border-radius: 50%;
		border: 2px solid var(--bq-line);
		transition: transform 0.4s var(--bq-ease-out), border-color 0.25s var(--bq-ease-out), background-color 0.25s var(--bq-ease-out);
	}

		.faq-chev {
			margin-top: 0;
		}

		.tl-chev::before,
		.faq-chev::before {
			content: "";
			position: absolute;
			top: 38%;
			left: 50%;
			width: 0.42em;
			height: 0.42em;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: translate(-50%, -50%) rotate(45deg);
			color: rgba(255, 255, 255, 0.7);
		}

		button.tl-head:hover .tl-chev,
		.faq-q:hover .faq-chev {
			border-color: rgba(255, 255, 255, 0.4);
		}

		.tl-item.is-open .tl-chev,
		.faq-item.is-open .faq-chev {
			transform: rotate(180deg);
			border-color: var(--bq-hot);
			background: rgba(255, 140, 0, 0.15);
		}

	.tl-abs {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.45s var(--bq-ease-out);
	}

		.tl-abs > div {
			overflow: hidden;
			min-height: 0;
			padding: 0 3.5em 0 calc(var(--tl-col) + 1.5em);
		}

		.tl-abs p {
			margin: 0;
			padding: 0 0 1.1em 0;
			font-size: 0.78em;
			line-height: 1.65;
			color: rgba(255, 255, 255, 0.85);
			opacity: 0;
			transform: translateY(-0.3em);
			transition: opacity 0.35s var(--bq-ease-out), transform 0.35s var(--bq-ease-out);
		}

		.tl-item.is-open .tl-abs {
			grid-template-rows: 1fr;
		}

		.tl-item.is-open .tl-abs p {
			opacity: 1;
			transform: none;
			transition-delay: 0.12s;
		}

	/* breaks: quieter rows */
	.tl-break .tl-head {
		padding: 0.6em 0;
	}

		.tl-break .tl-title {
			font-weight: 300;
			font-style: italic;
			color: rgba(255, 255, 255, 0.6);
		}

		.tl-break .tl-who {
			font-size: 0.62em;
		}

		.tl-break::before {
			width: 5px;
			height: 5px;
			left: calc(var(--tl-col) + 0.55em - 3px);
			top: 1.2em;
			border-color: rgba(255, 255, 255, 0.25);
		}

	/* deep-link flash (from a speaker card) */
	@keyframes bq-flash {
		0%   { background-color: rgba(255, 140, 0, 0.28); }
		100% { background-color: transparent; }
	}

	.tl-item.is-hilite .tl-head {
		animation: bq-flash 1.8s var(--bq-ease-out) both;
	}

	@media screen and (max-width: 736px) {

		.sched {
			--tl-col: 0em;
		}

		.sched-tabs {
			top: 2.75em;
			margin-left: -0.5em;
			margin-right: -0.5em;
		}

		.sched-tab {
			flex: 0 0 auto;
			padding: 0.5em 1.1em 0.8em 0.75em;
		}

		.tl::before {
			left: 0.35em;
		}

		.tl-item::before {
			left: calc(0.35em - 3px);
			top: 1.15em;
		}

		.tl-break::before {
			left: calc(0.35em - 2px);
			top: 1.05em;
		}

		.tl-head,
		.tl-break .tl-head {
			grid-template-columns: minmax(0, 1fr) auto;
			column-gap: 1em;
			padding-left: 1.5em;
		}

		.tl-time {
			grid-column: 1 / -1;
			padding-top: 0;
			margin-bottom: 0.3em;
		}

			.tl-time small {
				display: inline;
				margin-right: 0.6em;
			}

		.tl-chev {
			grid-row: 2;
			grid-column: 2;
		}

		.tl-abs > div {
			padding: 0 0 0 1.5em;
		}

		.tl-abs p {
			padding: 0 0 1em 0;
		}

	}

/* ------------------------------------------------------------------ */
/* Last edition in numbers: the glance row's frame, the countdown's    */
/* light numerals                                                       */
/* ------------------------------------------------------------------ */

	.stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin: 0 0 2em 0;
		border-top: 1px solid var(--bq-line);
		border-bottom: 1px solid var(--bq-line);
	}

		/* the number reads first, the label under it; the markup keeps dt before dd */
		.stats > div {
			display: flex;
			flex-direction: column-reverse;
			justify-content: flex-end;
			gap: 0.45em;
			padding: 1.1em 1.25em;
			border-left: 1px solid var(--bq-line);
		}

			.stats > div:first-child {
				padding-left: 0;
				border-left: 0;
			}

		.stats dt {
			margin: 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.55em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-fg-light);
		}

		.stats dd {
			margin: 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 2.2em;
			font-weight: 200;
			line-height: 1;
			font-variant-numeric: tabular-nums;
			color: #ffffff;
		}

	@media screen and (max-width: 736px) {

		.stats {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

			.stats > div:nth-child(3) {
				padding-left: 0;
				border-left: 0;
			}

			.stats > div:nth-child(n + 3) {
				border-top: 1px solid var(--bq-line);
			}

			.stats dd {
				font-size: 1.8em;
			}

	}

/* ------------------------------------------------------------------ */
/* Last edition: photo carousel                                         */
/* ------------------------------------------------------------------ */

	.gal {
		position: relative;
		margin: 0 0 2em 0;
	}

	/* a film strip: fixed height, each photo keeps its own proportions */
	.gal-track {
		position: relative;
		display: flex;
		align-items: stretch;
		gap: 1em;
		height: clamp(14em, 38vw, 24em);
		padding: 0.25em 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		outline: none;
	}

		.gal-track::-webkit-scrollbar {
			display: none;
		}

		/* trailing spacer so the last photo can still snap to the left edge (sized by JS) */
		.gal-track::after {
			content: "";
			flex: 0 0 var(--gal-tail, 24%);
		}

		.gal-track:focus-visible {
			box-shadow: 0 0 0 2px var(--bq-hot);
			border-radius: 5px;
		}

	.gal-slide {
		position: relative;
		flex: 0 0 auto;
		height: 100%;
		max-width: 100%;
		aspect-ratio: 3 / 2;
		margin: 0;
		border-radius: 5px;
		overflow: hidden;
		background: #262838;
		scroll-snap-align: start;
		opacity: 0.45;
		transition: opacity 0.5s var(--bq-ease-out);
	}

		.gal-slide.is-current {
			opacity: 1;
		}

		/* the zoom lives on the image, not the slide: transforms would move the snap point */
		.gal-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 0;
			transform: scale(1.05);
			transition: transform 0.8s var(--bq-ease-out);
		}

		.gal-slide.is-current img {
			transform: none;
		}

		.gal-slide figcaption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 2.75em 1.1em 0.9em 1.1em;
			font-size: 0.72em;
			line-height: 1.45;
			background: linear-gradient(to top, rgba(46, 49, 65, 0.94), rgba(46, 49, 65, 0));
			opacity: 0;
			transform: translateY(0.5em);
			transition: opacity 0.45s var(--bq-ease-out), transform 0.5s var(--bq-ease-out);
		}

		.gal-slide.is-current figcaption {
			opacity: 1;
			transform: none;
			transition-delay: 0.15s;
		}

		.gal-tag {
			display: inline-block;
			margin-right: 0.75em;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.75em;
			font-weight: 700;
			letter-spacing: 0.2em;
			text-transform: uppercase;
			color: var(--bq-hot);
		}

	.gal-bar {
		display: flex;
		align-items: center;
		gap: 1.25em;
		margin-top: 1em;
	}

		.gal-count {
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.8em;
			font-weight: 200;
			letter-spacing: 0.15em;
			line-height: 1;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}

			.gal-count .gal-cur {
				font-weight: 700;
			}

			.gal-count .gal-sep {
				margin: 0 0.35em;
				opacity: 0.4;
			}

		.gal-progress {
			position: relative;
			flex: 1;
			height: 2px;
			background: var(--bq-line);
		}

			.gal-progress i {
				position: absolute;
				inset: 0;
				background: var(--bq-hot);
				transform: scaleX(0);
				transform-origin: left;
				transition: transform 0.5s var(--bq-ease-out);
			}

		.gal-nav {
			display: flex;
			gap: 0.5em;
		}

		.gal-btn {
			display: grid;
			place-items: center;
			width: 2.6em;
			height: 2.6em;
			padding: 0;
			border-radius: 50%;
			box-shadow: inset 0 0 0 2px var(--bq-line);
			font-size: 1em;
			line-height: 1;
			transition: box-shadow 0.25s var(--bq-ease-out), background-color 0.25s var(--bq-ease-out);
		}

			.gal-btn svg {
				width: 1em;
				height: 1em;
				display: block;
			}

			.gal-btn:hover {
				box-shadow: inset 0 0 0 2px var(--bq-hot);
				background: rgba(255, 140, 0, 0.12);
			}

			.gal-btn:focus-visible {
				outline: none;
				box-shadow: inset 0 0 0 2px var(--bq-hot);
			}

			/* play/pause shows one icon at a time; .gal.is-playing is set by breaq.js */
			.gal-play .ic-play,
			.gal.is-playing .gal-play .ic-pause {
				display: block;
			}

			.gal-play .ic-pause,
			.gal.is-playing .gal-play .ic-play {
				display: none;
			}

	@media screen and (max-width: 736px) {

		.gal-track {
			height: clamp(13em, 64vw, 20em);
		}

		.gal-bar {
			gap: 0.85em;
		}

		.gal-slide figcaption {
			font-size: 0.66em;
			padding: 2.25em 0.85em 0.75em 0.85em;
		}

	}

/* ------------------------------------------------------------------ */
/* Motion system (body.page-motion): one orchestrated hero entrance,   */
/* sections that rise in as they scroll into view, small state changes */
/* ------------------------------------------------------------------ */

	/* reading progress under the top bar */
	.progress {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		z-index: 10001;
		pointer-events: none;
	}

		.progress i {
			display: block;
			height: 100%;
			background: var(--bq-hot);
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.15s linear;
		}

	/* the top bar solidifies once the page has scrolled */
	.page-motion #header {
		transition: background-color 0.35s var(--bq-ease-out), box-shadow 0.35s var(--bq-ease-out);
	}

		.page-motion #header.is-scrolled {
			background-color: rgba(38, 40, 56, 0.94);
			box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
		}

	/* the menu slides open instead of popping */
	.page-motion #header nav .dropdown-content,
	.page-motion #header nav .dropdown:hover .dropdown-content {
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5em);
		pointer-events: none;
		transition: opacity 0.25s var(--bq-ease-out), transform 0.35s var(--bq-ease-out), visibility 0s linear 0.35s;
	}

		.page-motion #header nav .dropdown.is-open .dropdown-content {
			visibility: visible;
			opacity: 1;
			transform: none;
			pointer-events: auto;
			transition-delay: 0s;
		}

	/* hero: text rises line by line, the drawing settles into place */
	@keyframes bq-rise {
		from { opacity: 0; transform: translateY(1em); }
		to   { opacity: 1; transform: none; }
	}

	@keyframes bq-art-in {
		from { opacity: 0; transform: scale(0.86) rotate(-5deg); }
		to   { opacity: 1; transform: none; }
	}

	.page-motion .ch-hero-text > * {
		animation: bq-rise 0.8s var(--bq-ease-out) both;
	}

		.page-motion .ch-hero-text > :nth-child(1) { animation-delay: 0.05s; }
		.page-motion .ch-hero-text > :nth-child(2) { animation-delay: 0.15s; }
		.page-motion .ch-hero-text > :nth-child(3) { animation-delay: 0.3s; }
		.page-motion .ch-hero-text > :nth-child(4) { animation-delay: 0.45s; }

	.page-motion .ch-hero-art {
		animation: bq-art-in 1.1s var(--bq-ease-out) 0.35s both;
	}

		/* the drawing leans towards the mouse (set by breaq.js) */
		.page-motion .ch-hero-art img {
			transform: perspective(900px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
			transition: transform 0.4s var(--bq-ease-out);
			will-change: transform;
		}

	/* scroll reveals: breaq.js marks elements and staggers children with --d */
	.page-motion [data-reveal] {
		opacity: 0;
		transform: translateY(1.1em);
		transition: opacity 0.75s var(--bq-ease-out), transform 0.75s var(--bq-ease-out);
		transition-delay: calc(var(--d, 0) * 1ms);
	}

		.page-motion [data-reveal].is-in {
			opacity: 1;
			transform: none;
		}

	/* the orange rule draws itself under a heading as it appears */
	.page-motion h3.major {
		position: relative;
	}

		.page-motion h3.major::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -2px;
			width: 4.5em;
			height: 2px;
			background: var(--bq-hot);
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.7s var(--bq-ease-out) 0.3s;
		}

		.page-motion h3.major.is-in::after {
			transform: scaleX(1);
		}

	/* tiles and cards get a little lift on hover, everywhere the same */
	.page-motion .logos--tiles li,
	.page-motion .logos--rank .tile,
	.page-motion .res-item,
	.page-motion .gal-slide {
		transition: transform 0.4s var(--bq-ease-out), box-shadow 0.4s var(--bq-ease-out), opacity 0.5s var(--bq-ease-out), border-color 0.25s var(--bq-ease-out), background-color 0.25s var(--bq-ease-out);
	}

		.page-motion .logos--tiles li:hover,
		.page-motion .logos--rank .tile:hover {
			transform: translateY(-3px);
			box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
		}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */

	@media (prefers-reduced-motion: reduce) {

		.sp-card,
		.sp-photo img,
		.sp-photo::before,
		.sp-photo::after,
		.sp-index,
		.sp-more,
		.sp-role,
		.sp-talk,
		.sp-card::after,
		.sched-ink,
		.tl-item,
		.tl-item::before,
		.tl-chev,
		.tl-abs,
		.tl-abs p,
		.faq-chev,
		.faq-a,
		.faq-a p,
		.logos img,
		.gal-slide,
		.gal-slide figcaption,
		.gal-progress i {
			transition-duration: 0.01ms !important;
			transition-delay: 0ms !important;
		}

		.tl-item.is-hilite .tl-head {
			animation: none;
			background-color: rgba(255, 140, 0, 0.15);
		}

		.gal-track {
			scroll-behavior: auto;
		}

		.soon-card::after,
		.soon-bar::after,
		.next-digits b.is-tick,
		.page-motion .ch-hero-text > *,
		.page-motion .ch-hero-art {
			animation: none;
		}

		.page-motion [data-reveal] {
			opacity: 1;
			transform: none;
			transition: none;
		}

		.page-motion h3.major::after {
			transform: scaleX(1);
			transition: none;
		}

		.page-motion .ch-hero-art img {
			transform: none;
			transition: none;
		}

		/* flip cards crossfade instead of turning */
		.fc-wrap,
		.fc,
		.fc-front img,
		.fc-flip {
			transition-duration: 0.01ms !important;
			transition-delay: 0ms !important;
		}

		.fc:hover:not(.is-flipped),
		.fc.is-flipped {
			transform: none;
		}

		.fc-face {
			transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
		}

		.fc-back {
			transform: none;
			opacity: 0;
		}

		.fc.is-flipped .fc-back {
			opacity: 1;
			transition-delay: 0s;
		}

		.fc.is-flipped .fc-front {
			opacity: 0;
		}

	}

/* ------------------------------------------------------------------ */
/* Lightbox (carousel slides and album tiles)                           */
/* ------------------------------------------------------------------ */

	.lb-item {
		cursor: zoom-in;
	}

		.lb-item:focus-visible {
			outline: 2px solid var(--bq-hot);
			outline-offset: 3px;
		}

	body.has-lightbox {
		overflow: hidden;
	}

	.lightbox {
		position: fixed;
		inset: 0;
		z-index: 10001;
		display: grid;
		grid-template-columns: 4em 1fr 4em;
		grid-template-rows: 1fr;
		align-items: center;
		background: rgba(22, 23, 33, 0.96);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

		.lightbox.is-open {
			opacity: 1;
		}

		.lightbox button {
			-webkit-appearance: none;
			appearance: none;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.75em;
			height: 2.75em;
			padding: 0;
			margin: 0;
			border: solid 1px rgba(255, 255, 255, 0.18);
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.04);
			color: #fff;
			box-shadow: none;
			line-height: 1;
			cursor: pointer;
			transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
		}

			.lightbox button svg {
				width: 1.1em;
				height: 1.1em;
			}

			.lightbox button:hover,
			.lightbox button:focus-visible {
				border-color: var(--bq-hot);
				background: rgba(255, 140, 0, 0.12);
				transform: scale(1.06);
			}

		.lb-prev { grid-column: 1; justify-self: center; }
		.lb-next { grid-column: 3; justify-self: center; }

		.lb-close {
			position: absolute;
			top: 1em;
			right: 1em;
		}

		.lb-figure {
			grid-column: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			max-height: 100vh;
			margin: 0;
			padding: 3.5em 0 3em;
		}

		.lb-stage {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-height: calc(100vh - 8.5em);
		}

			.lb-stage img,
			.lb-stage video {
				display: block;
				max-width: 100%;
				max-height: calc(100vh - 8.5em);
				width: auto;
				height: auto;
				border-radius: 3px;
				box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
				background: #1a1b24;
			}

			.lb-stage img {
				opacity: 0;
				transform: scale(0.985);
				transition: opacity 0.35s ease, transform 0.5s var(--bq-ease-out);
			}

				.lb-stage img.is-ready {
					opacity: 1;
					transform: none;
				}

		.lb-figure figcaption {
			width: 100%;
			max-width: 60em;
			margin: 0.8em 0 0;
			font-size: 0.85em;
			color: var(--bq-fg-light);
		}

			.lb-figure figcaption .gal-tag {
				margin-right: 0.75em;
			}

		.lb-count {
			position: absolute;
			left: 1.25em;
			bottom: 1em;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.45);
		}

	@media screen and (max-width: 736px) {

		.lightbox {
			grid-template-columns: 1fr;
		}

			.lb-prev,
			.lb-next {
				position: absolute;
				bottom: 0.9em;
				grid-column: auto;
			}

			.lb-prev { right: 4.25em; }
			.lb-next { right: 1em; }

			.lb-figure {
				padding: 3.5em 1em 4.25em;
			}

			.lb-stage,
			.lb-stage img,
			.lb-stage video {
				max-height: calc(100vh - 9.5em);
			}

			.lb-figure figcaption {
				font-size: 0.8em;
			}

	}

/* ------------------------------------------------------------------ */
/* Sponsorship catalog: a dark, document-shaped cover tile and the     */
/* tiers as a row of cards, the top tier in the accent colour           */
/* ------------------------------------------------------------------ */

	/* its own section at the end of the page: the section heading does the separating */
	.catalog {
		display: grid;
		grid-template-columns: minmax(11em, 13.5em) 1fr;
		gap: 2.5em;
		align-items: start;
		margin: 0 0 2em 0;
	}

		/* the cover: A4 proportions, the page's own dark, a folded corner cut with clip-path.
		   The lift on hover uses translate, which the reveal's transform: none leaves alone. */
		.catalog-cover {
			position: relative;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			aspect-ratio: 210 / 297;
			padding: 1.5em 1.4em 1.4em;
			border: solid 1px rgba(255, 255, 255, 0.18);
			border-radius: 5px;
			background:
				repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px),
				linear-gradient(160deg, #3d4262 0%, #262838 100%);
			color: #fff;
			clip-path: polygon(0 0, calc(100% - 2.6em) 0, 100% 2.6em, 100% 100%, 0 100%);
			transition: translate 0.5s var(--bq-ease-out), border-color 0.3s ease;
		}

			/* the fold: the lower-left half of the cut corner */
			.catalog-cover::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 2.6em;
				height: 2.6em;
				background: linear-gradient(225deg, transparent 0 50%, rgba(255, 255, 255, 0.14) 50% 100%);
				border-bottom-left-radius: 4px;
			}

			/* the mark carries the wordmark, so the tile does not repeat the name */
			.catalog-cover img {
				display: block;
				width: 60%;
				height: auto;
				margin: 0 0 auto;
			}

			.catalog-kicker,
			.catalog-meta,
			.catalog-go {
				display: block;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.55em;
				font-weight: 700;
				letter-spacing: 0.25em;
				line-height: 1.5;
				text-transform: uppercase;
			}

			.catalog-kicker {
				margin: 1.5em 0 0.35em;
				color: var(--bq-hot);
			}

			.catalog-meta {
				color: var(--bq-fg-light);
			}

			.catalog-go {
				display: flex;
				align-items: center;
				gap: 0.6em;
				margin-top: 2.2em;
				color: #fff;
				transition: color 0.2s ease-in-out;
			}

				.catalog-go svg {
					width: 1.6em;
					height: 1.6em;
					transition: transform 0.4s var(--bq-ease-out);
				}

			.catalog-cover:hover,
			.catalog-cover:focus-visible {
				translate: 0 -4px;
				border-color: var(--bq-hot);
				color: #fff;
			}

				.catalog-cover:hover .catalog-go,
				.catalog-cover:focus-visible .catalog-go {
					color: var(--bq-hot);
				}

				.catalog-cover:hover .catalog-go svg,
				.catalog-cover:focus-visible .catalog-go svg {
					transform: translate(2px, -2px);
				}

		.catalog-body > p {
			margin: 0 0 1.25em;
		}

		/* tiers as cards: the name in the tier's colour, the amount large, the perk under it */
		.tiers {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 0.75em;
			list-style: none;
			margin: 0 0 1em;
			padding: 0;
		}

			.tiers li {
				--tier: var(--bq-fg-light);
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 1.1em 1em 1em;
				border: solid 1px var(--bq-line);
				border-radius: 5px;
				background: rgba(255, 255, 255, 0.035);
				overflow: hidden;
			}

				/* the tier's line along the top edge */
				.tiers li::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 2px;
					background: var(--tier);
				}

				.tiers .is-partner {
					--tier: var(--bq-hot);
					border-color: rgba(255, 140, 0, 0.4);
					background: rgba(255, 140, 0, 0.08);
				}

				.tiers .is-gold { --tier: #e0b74f; }
				.tiers .is-silver { --tier: #c9cfdb; }
				.tiers .is-bronze { --tier: #c98c58; }

				.tiers b {
					font-family: Raleway, Helvetica, sans-serif;
					font-size: 0.55em;
					font-weight: 700;
					letter-spacing: 0.25em;
					text-transform: uppercase;
					color: var(--tier);
				}

				.tiers span {
					margin-top: 0.3em;
					font-size: 1.05em;
					font-weight: 600;
					color: #fff;
					white-space: nowrap;
				}

				.tiers em {
					margin-top: 0.4em;
					font-size: 0.78em;
					font-style: normal;
					line-height: 1.5;
					color: var(--bq-fg-light);
				}

		.tiers-note {
			margin: 0 0 1.5em;
			font-size: 0.85em;
			color: var(--bq-fg-light);
		}

			.tiers-note b {
				margin-right: 0.75em;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.65em;
				font-weight: 700;
				letter-spacing: 0.25em;
				text-transform: uppercase;
				color: #fff;
			}

		.catalog-actions {
			margin: 0;
		}

			.catalog-actions .button small {
				margin-left: 0.6em;
				font-size: 0.7em;
				letter-spacing: 0.15em;
				opacity: 0.65;
			}

	@media screen and (max-width: 980px) {

		.tiers {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}

	@media screen and (max-width: 736px) {

		/* one column: the cover would fill a screen before the heading, and the
		   "Open the catalog" button below links the same PDF, so it steps aside */
		.catalog {
			grid-template-columns: 1fr;
			gap: 0;
		}

			.catalog-cover {
				display: none;
			}

	}

	@media screen and (max-width: 480px) {

		/* the tier cards stay two by two, a little tighter; the buttons stack full width */
		.tiers {
			gap: 0.6em;
		}

			.tiers li {
				padding: 0.9em 0.85em 0.85em;
			}

			.tiers span {
				font-size: 1em;
			}

		.catalog-actions {
			display: flex;
			flex-direction: column;
			gap: 0.75em;
		}

			.catalog-actions .button {
				width: 100%;
			}

	}

/* ------------------------------------------------------------------ */
/* Video tile / slide: poster with a play button, opens the lightbox   */
/* ------------------------------------------------------------------ */

	.ph--video .play,
	.gal-slide--video .play {
		position: absolute;
		z-index: 2;
		left: 50%;
		top: 50%;
		width: 3.6em;
		height: 3.6em;
		margin: -1.8em 0 0 -1.8em;
		border: solid 1px rgba(255, 255, 255, 0.55);
		border-radius: 50%;
		background: rgba(22, 23, 33, 0.55);
		backdrop-filter: blur(4px);
		pointer-events: none;
		transition: transform 0.4s var(--bq-ease-out), background-color 0.3s ease, border-color 0.3s ease;
	}

		.ph--video .play::after,
		.gal-slide--video .play::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: 0;
			height: 0;
			margin: -0.55em 0 0 -0.35em;
			border-style: solid;
			border-width: 0.55em 0 0.55em 0.95em;
			border-color: transparent transparent transparent #fff;
		}

		.ph--video:hover .play,
		.ph--video:focus-visible .play,
		.gal-slide--video:hover .play,
		.gal-slide--video.is-current:hover .play {
			transform: scale(1.1);
			background: rgba(255, 140, 0, 0.85);
			border-color: transparent;
		}

	.ph--video .ph-tag {
		position: absolute;
		z-index: 2;
		left: 0.9em;
		bottom: 0.8em;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.65em;
		font-weight: 700;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: #fff;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
		pointer-events: none;
	}

/* ------------------------------------------------------------------ */
/* Album page                                                           */
/* ------------------------------------------------------------------ */

	.page-photos #wrapper > header {
		background:
			linear-gradient(105deg, rgba(38, 40, 56, 0.88) 0%, rgba(46, 49, 65, 0.72) 55%, rgba(26, 27, 32, 0.9) 100%),
			url("../../images/opt/breaq-reel-poster.webp") center / cover no-repeat;
	}

	/* chapter strip: pinned under the top bar */
	.chap-nav {
		position: sticky;
		top: 3.5em;
		z-index: 3;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.25em;
		margin: 0 0 2.5em;
		border-bottom: solid 2px var(--bq-line);
		background: #2e3141;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

		.chap-nav::-webkit-scrollbar {
			display: none;
		}

		.chap-nav a {
			flex: 0 0 auto;
			padding: 0.75em 0.9em 0.7em;
			margin-bottom: -2px;
			border: 0;
			border-bottom: solid 2px transparent;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.7em;
			font-weight: 700;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: var(--bq-fg-light);
			white-space: nowrap;
			transition: color 0.2s ease, border-color 0.2s ease;
		}

			.chap-nav a small {
				margin-left: 0.5em;
				font-size: 0.9em;
				font-weight: 400;
				letter-spacing: 0.1em;
				opacity: 0.55;
			}

			.chap-nav a:hover,
			.chap-nav a:focus-visible {
				color: #fff;
			}

			.chap-nav a.is-current {
				color: #fff;
				border-bottom-color: var(--bq-hot);
			}

	.mosaic {
		columns: 3;
		column-gap: 0.75em;
		margin: 0 0 1.5em;
	}

		.ph {
			position: relative;
			display: block;
			break-inside: avoid;
			margin: 0 0 0.75em;
			border-radius: 3px;
			overflow: hidden;
			background: rgba(255, 255, 255, 0.04);
			transform: translateZ(0);
		}

			.ph img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.7s var(--bq-ease-out);
			}

			.ph::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
				pointer-events: none;
				transition: box-shadow 0.3s ease;
			}

			.ph:hover img,
			.ph:focus-visible img {
				transform: scale(1.045);
			}

			.ph:hover::after,
			.ph:focus-visible::after {
				box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.6);
			}

	.page-photos h3.major span {
		display: block;
		margin-top: 0.4em;
		font-size: 0.55em;
		font-weight: 400;
		letter-spacing: 0.2em;
		color: var(--bq-fg-light);
	}

	@media screen and (max-width: 980px) {

		.mosaic {
			columns: 2;
		}

	}

	@media screen and (max-width: 480px) {

		.mosaic {
			column-gap: 0.5em;
		}

			.ph {
				margin-bottom: 0.5em;
			}

	}

	@media (prefers-reduced-motion: reduce) {

		.lightbox,
		.lb-stage img,
		.catalog-cover,
		.ph img,
		.ph--video .play,
		.gal-slide--video .play {
			transition: none;
		}

		.catalog-cover {
			transform: none;
		}

	}

	/* anchors land below the top bar and the pinned chapter strip */
	.page-photos .wrapper .inner > section {
		scroll-margin-top: 7.5em;
	}

/* ------------------------------------------------------------------ */
/* The two halves of BreaQ: a panel a shade bluer than the page that   */
/* leads to the conference (breaq.html) or back to the hackathon        */
/* (breaq-conference.html), with a small sneak peek                     */
/* ------------------------------------------------------------------ */

	.twin {
		position: relative;
		isolation: isolate;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 2.5em;
		margin: 0 0 2em 0;
		padding: 2.25em 2.5em 2.25em 2.25em;
		border: 1px solid rgba(138, 154, 214, 0.3);
		border-radius: 5px;
		background:
			radial-gradient(ellipse 55% 85% at 100% 0%, rgba(96, 114, 184, 0.36), transparent 70%),
			linear-gradient(120deg, rgba(76, 92, 150, 0.34) 0%, rgba(62, 74, 122, 0.22) 100%);
		overflow: hidden;
	}

		/* two faint orbits in the corner, the page's motif */
		.twin::before,
		.twin::after {
			content: "";
			position: absolute;
			right: -7em;
			top: -3.5em;
			z-index: -1;
			width: 24em;
			height: 9em;
			border: 1px solid rgba(255, 255, 255, 0.09);
			border-radius: 50%;
			transform: rotate(-20deg);
			pointer-events: none;
		}

		.twin::after {
			transform: rotate(32deg);
		}

		/* the date, large and light, like the countdown's numerals */
		.twin-date {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 0.15em 2.5em 0 0;
			border-right: 1px solid var(--bq-line);
		}

			.twin-date b {
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 3.4em;
				font-weight: 200;
				letter-spacing: 0.02em;
				line-height: 1;
				white-space: nowrap;
				color: #ffffff;
			}

			.twin-date span {
				margin-top: 0.8em;
				font-family: Raleway, Helvetica, sans-serif;
				font-size: 0.55em;
				font-weight: 700;
				letter-spacing: 0.25em;
				text-transform: uppercase;
				color: var(--bq-hot);
			}

			.twin-date small {
				margin-top: 0.35em;
				font-size: 0.72em;
				color: var(--bq-fg-light);
			}

		.twin-kicker {
			margin: 0 0 0.7em 0;
			font-family: Raleway, Helvetica, sans-serif;
			font-size: 0.55em;
			font-weight: 700;
			letter-spacing: 0.25em;
			text-transform: uppercase;
			color: var(--bq-fg-light);
		}

		.twin h3 {
			margin: 0 0 0.55em 0;
			font-size: 1.3em;
			letter-spacing: 0.12em;
		}

			.twin h3 a {
				border-bottom: 0;
			}

				.twin h3 a:hover {
					color: var(--bq-hot) !important;
				}

		.twin-body > p:not([class]) {
			max-width: 38em;
			margin: 0 0 1.25em 0;
			font-size: 0.92em;
			line-height: 1.6;
		}

		/* where it happens, right under the title (the panels on breaq.html) */
		.twin-where {
			margin: -0.15em 0 1em 0;
			font-size: 0.8em;
			color: var(--bq-fg-light);
		}

			.twin-where .icon {
				margin-right: 0.55em;
				color: var(--bq-hot);
			}

		/* the event page and, on breaq.html, its form side by side, with the deadline beside them */
		.twin-body > .twin-actions {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.75em 1em;
			margin: 0;
		}

			.twin-actions small {
				font-size: 0.72em;
				color: var(--bq-fg-light);
			}

		/* sneak peek: a row of faces or photos with one line beside it */
		.twin-peek {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.75em 1.1em;
			margin: 0 0 1.5em 0;
		}

			.twin-peek p {
				flex: 1 1 14em;
				margin: 0;
				font-size: 0.72em;
				line-height: 1.5;
				color: var(--bq-fg-light);
			}

		/* last year's speakers, overlapping, and a ghost for the 2026 line-up */
		.faces {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0 0 0 0.55em;
		}

			.faces li {
				position: relative;
				margin: 0 0 0 -0.55em;
				padding: 0;
			}

				.faces li:hover {
					z-index: 1;
				}

			.faces img,
			.faces-next {
				display: block;
				box-sizing: border-box;
				width: 2.7em;
				height: 2.7em;
				border: 2px solid #394061;
				border-radius: 50%;
				object-fit: cover;
				transition: transform 0.3s var(--bq-ease-out);
			}

				.faces li:hover img {
					transform: translateY(-3px);
				}

			.faces-next {
				position: relative;
				overflow: hidden;
				background:
					radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.3) 0 17%, transparent 18%),
					radial-gradient(ellipse 36% 26% at 50% 100%, rgba(255, 255, 255, 0.3) 0 100%, transparent 101%),
					#2a2e45;
			}

				.faces-next::after {
					content: "";
					position: absolute;
					inset: 0;
					background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65%);
					transform: translateX(-100%);
					animation: soon-sweep 3.6s var(--bq-ease-inout) infinite;
				}

		.shots {
			display: flex;
			gap: 0.5em;
			list-style: none;
			margin: 0;
			padding: 0;
		}

			.shots li {
				padding: 0;
			}

			.shots img {
				display: block;
				width: 5.4em;
				height: 3.7em;
				border-radius: 3px;
				object-fit: cover;
			}

		/* a partner event's own banner (SecITC on breaq-conference.html), the whole picture its link */
		.twin-banner {
			display: block;
			margin: 0 0 1.5em 0;
			border: 1px solid var(--bq-line);
			border-radius: 4px;
			overflow: hidden;
			transition: border-color 0.25s ease;
		}

			.twin-banner:hover {
				border-color: rgba(255, 255, 255, 0.35);
			}

			.twin-banner img {
				display: block;
				width: 100%;
				height: auto;
			}

	/* an event whose registration has closed (the hackathon, since 18 October): the panel steps back
	   into the shade, plainer and dimmer, and comes back to full light under the pointer or the keyboard */
	.twin--shade {
		border-color: var(--bq-line);
		background: rgba(255, 255, 255, 0.025);
		opacity: 0.7;
		transition: opacity 0.3s ease;
	}

		.twin--shade:hover,
		.twin--shade:focus-within {
			opacity: 1;
		}

		.twin--shade .twin-date span {
			color: var(--bq-fg-light);
		}

		.twin--shade .shots img {
			filter: grayscale(1);
		}

	.twin, .twin * {
		text-align: left;
	}

	@media screen and (max-width: 736px) {

		.twin {
			grid-template-columns: minmax(0, 1fr);
			padding: 1.6em 1.4em;
		}

			.twin-date {
				flex-direction: row;
				flex-wrap: wrap;
				align-items: baseline;
				gap: 0.2em 0.75em;
				margin: 0 0 1.25em 0;
				padding: 0 0 1em 0;
				border-right: 0;
				border-bottom: 1px solid var(--bq-line);
			}

				.twin-date b {
					font-size: 2.3em;
				}

				.twin-date span,
				.twin-date small {
					margin-top: 0;
				}

			.twin h3 {
				font-size: 1em;
			}

			.shots img {
				width: 4.6em;
				height: 3.2em;
			}

	}

	@media screen and (max-width: 480px) {

		.twin-actions .button {
			width: 100%;
		}

	}

	@media (prefers-reduced-motion: reduce) {

		.faces-next::after {
			animation: none;
		}

		.faces img {
			transition: none;
		}

	}

/* ------------------------------------------------------------------ */
/* Conference page (breaq-conference.html)                             */
/* ------------------------------------------------------------------ */

	/* speakers still to come: the countdown beside the announcement */
	.soon-next {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 1.25em 3em;
		align-items: start;
		margin: 0 0 2em 0;
	}

		.soon-next .next-count {
			margin: 0;
		}

		.soon-next-body p {
			margin: 0 0 0.9em 0;
			font-size: 0.92em;
			line-height: 1.6;
		}

			.soon-next-body .next-gcal {
				margin: 0;
				font-size: 0.72em;
				color: var(--bq-fg-light);
			}

	/* last year's talks: a portrait, the title, who and where */
	.talks {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1em;
		list-style: none;
		margin: 0 0 2em 0;
		padding: 0;
	}

		.talks li {
			display: flex;
			align-items: flex-start;
			gap: 1em;
			padding: 1.1em 1.2em;
			border: 1px solid var(--bq-line);
			border-radius: 5px;
		}

			.talks img {
				flex: 0 0 3em;
				width: 3em;
				height: 3em;
				border-radius: 50%;
				object-fit: cover;
			}

			.talks strong {
				display: block;
				font-size: 0.85em;
				font-weight: 600;
				line-height: 1.4;
				color: #ffffff;
			}

			.talks small {
				display: block;
				margin-top: 0.4em;
				font-size: 0.68em;
				line-height: 1.45;
				color: var(--bq-fg-light);
			}

	/* one venue across the full width */
	.venues--one {
		grid-template-columns: minmax(0, 1fr);
	}

		.venues--one .venue-map {
			aspect-ratio: 16 / 7;
		}

	.soon-next, .soon-next *,
	.talks, .talks * {
		text-align: left;
	}

	@media screen and (max-width: 736px) {

		.soon-next {
			grid-template-columns: minmax(0, 1fr);
		}

		.talks {
			grid-template-columns: minmax(0, 1fr);
		}

		.venues--one .venue-map {
			aspect-ratio: 4 / 3.4;
		}

	}