/**
 * JimmyHQ.
 *
 * Dark base, tight NES palette. The pop comes from saturation against dark
 * rather than from more colours.
 */

:root {
	--jhq-bg: #0a0c14;
	--jhq-bg-raised: #11141f;
	--jhq-bg-card: #151a29;
	--jhq-line: #232a41;
	--jhq-line-bright: #35405f;

	--jhq-text: #e7ebf7;
	--jhq-text-dim: #97a1c0;
	--jhq-text-faint: #6b7594;

	--jhq-cyan: #3cbcfc;
	--jhq-amber: #f8b800;
	--jhq-red: #f83800;

	--jhq-wrap: 74rem;
	--jhq-radius: 2px;

	--jhq-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	--jhq-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--jhq-bg);
	color: var(--jhq-text);
	font-family: var(--jhq-sans);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* A faint scanline field, so the dark reads as a screen rather than a void. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba( 60, 188, 252, 0.035 ) 0,
		rgba( 60, 188, 252, 0.035 ) 1px,
		transparent 1px,
		transparent 3px
	);
}

.jhq-main,
.jhq-footer {
	position: relative;
	z-index: 1;
}

a {
	color: var(--jhq-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var(--jhq-amber);
}

:focus-visible {
	outline: 2px solid var(--jhq-amber);
	outline-offset: 3px;
}

code {
	font-family: var(--jhq-mono);
	font-size: 0.85em;
	color: var(--jhq-text-dim);
	overflow-wrap: anywhere;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.jhq-skip {
	position: absolute;
	left: -9999px;
}

.jhq-skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--jhq-amber);
	color: #10101c;
	font-weight: 600;
}

.jhq-wrap {
	width: 100%;
	max-width: var(--jhq-wrap);
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

/* ---------------------------------------------------------------- Type */

.jhq-eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
	/* Even out the lines rather than dropping two words onto their own. */
	text-wrap: balance;
}

.jhq-section {
	padding-block: clamp( 4rem, 9vw, 8rem );
	border-top: 1px solid var(--jhq-line);
}

.jhq-section__head {
	margin-bottom: 1.5rem;
}

.jhq-section__title {
	margin: 0;
	font-size: clamp( 2rem, 5vw, 3.25rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.jhq-section p {
	max-width: 62ch;
	color: var(--jhq-text-dim);
}

.jhq-note {
	max-width: 62ch;
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--jhq-line-bright);
	background: var(--jhq-bg-raised);
	color: var(--jhq-text-dim);
	font-size: 0.95rem;
}

.jhq-missing {
	padding: 1.25rem;
	border: 1px dashed var(--jhq-line-bright);
	color: var(--jhq-text-dim);
}

.jhq-alert {
	padding-block: 2rem;
	color: var(--jhq-red);
}

.jhq-button {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--jhq-cyan);
	color: var(--jhq-cyan);
	font-family: var(--jhq-mono);
	font-size: 0.85rem;
	text-decoration: none;
}

.jhq-button:hover {
	border-color: var(--jhq-amber);
}

.jhq-notfound {
	padding-block: clamp( 5rem, 12vw, 10rem );
}

/* ---------------------------------------------------------------- Sprites */

.jhq-sprite {
	display: block;
	height: auto;
	image-rendering: pixelated;
}

.jhq-sprite--jimmy {
	width: 100%;
	max-width: 16rem;
	margin-inline: auto;
	filter: drop-shadow( 0 0 26px rgba( 248, 184, 0, 0.22 ) );
}

/* ---------------------------------------------------------------- Hero */

.jhq-hero {
	padding-block: clamp( 3rem, 8vw, 6rem );
	background:
		radial-gradient( 60rem 30rem at 20% 0%, rgba( 60, 188, 252, 0.1 ), transparent 70% ),
		radial-gradient( 40rem 24rem at 90% 20%, rgba( 248, 184, 0, 0.07 ), transparent 70% );
}

.jhq-hero__grid {
	display: grid;
	gap: clamp( 2rem, 5vw, 4rem );
	grid-template-columns: 1fr;
	align-items: center;
}

@media ( min-width: 56rem ) {
	.jhq-hero__grid {
		grid-template-columns: minmax( 0, 22rem ) minmax( 0, 1fr );
	}
}

.jhq-hero__art-name,
.jhq-about__art-name {
	margin: 1rem 0 0;
	text-align: center;
}

.jhq-hero__art-who {
	display: block;
	font-family: var(--jhq-mono);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jhq-amber);
}

.jhq-hero__art-role {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--jhq-text-dim);
}

.jhq-hero__art-note {
	margin-top: 1.25rem;
	max-width: 24rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--jhq-text-faint);
	text-align: center;
}

.jhq-hero__title {
	margin: 0 0 1rem;
	font-size: clamp( 3rem, 11vw, 6.5rem );
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	background: linear-gradient( 100deg, var(--jhq-cyan), var(--jhq-amber) 70% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.jhq-hero__copy > p {
	max-width: 60ch;
	color: var(--jhq-text-dim);
}

/*
 * The kicker is short but heavily letter-spaced, so the 60ch measure above was
 * narrower than the line and forced a wrap — which balance then split straight
 * through "One Mac / Mini". It gets the full column instead.
 */
.jhq-hero__copy > .jhq-eyebrow {
	max-width: none;
}

/* Jump links, styled as navigation so they read as one. */
.jhq-hero__nav {
	margin-top: 2rem;
}

.jhq-hero__nav-label {
	margin: 0 0 0.6rem;
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-hero__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jhq-hero__nav-list a {
	display: block;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--jhq-line-bright);
	font-family: var(--jhq-mono);
	font-size: 0.74rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Chips share the row rather than sitting on it ragged. When they do have to
 * wrap on a narrow screen, the last row stretches to the full width instead of
 * leaving one link stranded on its own.
 */
.jhq-hero__nav-list li {
	flex: 1 1 auto;
}

.jhq-hero__nav-list a::after {
	content: " ↓";
	opacity: 0.6;
}

.jhq-hero__nav-list a:hover,
.jhq-hero__nav-list a:focus-visible {
	border-color: var(--jhq-amber);
	background: var(--jhq-bg-card);
}

/*
 * Figure and label side by side rather than stacked. Stacked, the number sat in
 * the top-left of a tall box with most of it empty.
 */
.jhq-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin: 2rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--jhq-line-bright);
	border-left: 4px solid var(--jhq-cyan);
	background: linear-gradient( 100deg, rgba( 60, 188, 252, 0.12 ), transparent 60% );
}

.jhq-headline__figure {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 3.25rem, 9vw, 5rem );
	line-height: 0.85;
	font-weight: 700;
	color: var(--jhq-cyan);
	text-shadow: 0 0 30px rgba( 60, 188, 252, 0.45 );
}

.jhq-headline__label {
	flex: 1 1 12rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--jhq-text);
	text-wrap: balance;
}

/* ------------------------------------------------------- The hours triptych */

.jhq-hours {
	margin-top: clamp( 3rem, 7vw, 5rem );
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-raised);
}

.jhq-hours__title {
	margin: 0 0 1.5rem;
	font-size: clamp( 1.1rem, 2.5vw, 1.4rem );
	color: var(--jhq-text);
}

.jhq-hours__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-bottom: 1.5rem;
}

@media ( min-width: 44rem ) {
	.jhq-hours__row {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.jhq-stat {
	padding: 1.25rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-stat__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 2.25rem, 6vw, 3rem );
	line-height: 1;
	font-weight: 700;
}

.jhq-stat__unit {
	margin: 0.25rem 0 0.75rem;
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-stat__label {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--jhq-text-dim);
}

.jhq-stat--muted {
	border-style: dashed;
}

.jhq-stat--muted .jhq-stat__figure {
	color: var(--jhq-text-faint);
	text-decoration: line-through;
	text-decoration-color: var(--jhq-red);
	text-decoration-thickness: 3px;
}

.jhq-stat--accent {
	border-color: var(--jhq-cyan);
}

.jhq-stat--accent .jhq-stat__figure {
	color: var(--jhq-cyan);
}

.jhq-stat--warn .jhq-stat__figure {
	color: var(--jhq-red);
}

.jhq-hours p {
	font-size: 0.95rem;
}

.jhq-volume {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--jhq-line);
}

.jhq-volume__head {
	margin: 0 0 0.75rem;
	font-family: var(--jhq-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

/*
 * A grid that spans the container rather than a flex row that huddles on the
 * left. Two short entries left most of the width empty and made the block look
 * like something had failed to load.
 */
.jhq-volume__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jhq-volume__list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-volume__figure {
	font-family: var(--jhq-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--jhq-amber);
}

.jhq-volume__name {
	font-size: 0.9rem;
	color: var(--jhq-text-dim);
}

/* ---------------------------------------------------------------- Roster */

.jhq-roster__grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fill, minmax( 8.5rem, 1fr ) );
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.jhq-roster__item--lead {
	grid-column: 1 / -1;
}

.jhq-roster__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 1rem 0.75rem 1.15rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.jhq-roster__item--lead .jhq-roster__link {
	flex-direction: row;
	justify-content: center;
	gap: 1.5rem;
	border-color: var(--jhq-amber);
	background: linear-gradient( 100deg, rgba( 248, 184, 0, 0.09 ), transparent 55% );
}

.jhq-roster__link:hover,
.jhq-roster__link:focus-visible {
	border-color: var(--jhq-cyan);
	background: var(--jhq-bg-raised);
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.jhq-roster__link {
		transition: none;
	}

	.jhq-roster__link:hover {
		transform: none;
	}
}

.jhq-roster__art {
	display: block;
}

.jhq-roster__art .jhq-sprite {
	margin-inline: auto;
}

.jhq-roster__name {
	font-family: var(--jhq-mono);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--jhq-text);
}

.jhq-roster__role {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--jhq-text-faint);
}

/* ---------------------------------------------------------------- Cards */

.jhq-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.jhq-cards--wide {
	grid-template-columns: repeat( auto-fill, minmax( 19rem, 1fr ) );
}

.jhq-card__link {
	display: block;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.jhq-card__link:hover,
.jhq-card__link:focus-visible {
	border-color: var(--jhq-cyan);
	background: var(--jhq-bg-raised);
	color: inherit;
}

.jhq-card__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 2.5rem, 7vw, 3.5rem );
	line-height: 0.9;
	font-weight: 700;
	color: var(--jhq-cyan);
}

.jhq-card__figure-label {
	margin: 0.35rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-card__title {
	margin: 0.75rem 0 1rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.jhq-card__title--experiment {
	margin-top: 0;
	font-size: 1.15rem;
}

.jhq-card__split {
	margin: -0.5rem 0 1rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--jhq-text-faint);
}

.jhq-card__split strong {
	color: var(--jhq-cyan);
}

/* The half of a title that used to sit after an em dash. */
.jhq-card__subtitle {
	margin: -0.5rem 0 1rem;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--jhq-text-dim);
}

.jhq-card__metric {
	margin: 0 0 1rem;
	font-family: var(--jhq-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-card__stats {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( 2, 1fr );
	margin: 0 0 1rem;
}

.jhq-card__stats dt {
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-card__stats dd {
	margin: 0.2rem 0 0;
	font-size: 0.92rem;
	color: var(--jhq-text);
}

.jhq-card__flag {
	margin: 0 0 1rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--jhq-amber);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--jhq-text-dim);
}

.jhq-card__nodelta {
	display: inline-block;
	margin: 0.75rem 0 0;
	padding: 0.3rem 0.6rem;
	border: 1px dashed var(--jhq-red);
	font-family: var(--jhq-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jhq-red);
}

/*
 * Same slot, without the alarm. Chirp having two tracks and no combined score
 * is how it was designed, not a measurement that failed.
 */
.jhq-card__nodelta--calm {
	border-color: var(--jhq-line-bright);
	color: var(--jhq-text-faint);
}

/* ------------------------------------------------- Multi-track experiments */

.jhq-track-summaries {
	display: grid;
	gap: 0.6rem;
	margin: 0.25rem 0 0;
}

.jhq-track-summary {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.1rem 0.6rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--jhq-line);
	border-left: 3px solid var(--jhq-cyan);
	background: var(--jhq-bg);
}

/* The unstable track is the one worth looking at, so it is flagged amber. */
.jhq-track-summary--range {
	border-left-color: var(--jhq-amber);
}

.jhq-track-summary__name {
	grid-column: 1 / -1;
	margin: 0 0 0.15rem;
	font-family: var(--jhq-mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-track-summary__value {
	grid-column: 1;
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: 1.7rem;
	line-height: 1;
	font-weight: 700;
	color: var(--jhq-cyan);
}

/* Inherit the block's size so a range reads as large as a bare score. */
.jhq-track-summary__value .jhq-range {
	font-size: inherit;
	gap: 0.25rem;
}

.jhq-track-summary__label {
	grid-column: 2;
	align-self: end;
	margin: 0;
	font-size: 0.7rem;
	line-height: 1.2;
	color: var(--jhq-text-faint);
}

.jhq-card__more {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--jhq-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-card__more::after {
	content: " →";
}

/* ------------------------------------------------------------ Delta chips */

.jhq-delta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-top: 0.75rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid currentcolor;
	font-family: var(--jhq-mono);
	font-size: 0.8rem;
}

.jhq-delta--up {
	color: var(--jhq-cyan);
}

.jhq-delta--down {
	color: var(--jhq-red);
}

.jhq-delta--flat {
	color: var(--jhq-text-faint);
}

.jhq-delta__vs {
	font-size: 0.7rem;
	opacity: 0.7;
}

/* The absence of a delta is designed, not empty space. */
.jhq-nocompare {
	margin: 1rem 0 0;
	padding: 1rem 1.15rem;
	border: 1px dashed var(--jhq-red);
	background: rgba( 248, 56, 0, 0.06 );
}

.jhq-nocompare__head {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--jhq-text);
}

.jhq-nocompare__badge {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: var(--jhq-red);
	color: #10101c;
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.jhq-nocompare__reason {
	margin: 0.75rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--jhq-text-dim);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Charts */

.jhq-spark {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 1.25rem 0 0;
	background: var(--jhq-bg);
	border: 1px solid var(--jhq-line);
}

.jhq-spark__line {
	fill: none;
	stroke: var(--jhq-cyan);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.jhq-spark--amber .jhq-spark__line {
	stroke: var(--jhq-amber);
}

.jhq-spark__dot {
	fill: var(--jhq-text);
}

.jhq-spark__break {
	stroke: var(--jhq-red);
	stroke-width: 1;
	stroke-dasharray: 2 2;
	vector-effect: non-scaling-stroke;
}

.jhq-spark__legend {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-size: 0.78rem;
	color: var(--jhq-text-dim);
}

.jhq-spark__legend-mark {
	flex: 0 0 auto;
	width: 0;
	height: 1.1rem;
	border-left: 2px dashed var(--jhq-red);
}

.jhq-bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 5.5rem;
	margin: 1.25rem 0 0;
	padding: 0.5rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg);
}

.jhq-bars__bar {
	position: relative;
	flex: 1 1 0;
	min-width: 3px;
	height: var(--jhq-bar-height, 2%);
	background: var(--jhq-amber);
}

/* A zero is a real measurement here, so it gets a visible floor rather than
   vanishing into the axis. */
.jhq-bars__bar--zero {
	height: 2px;
	background: var(--jhq-red);
}

.jhq-range {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--jhq-mono);
}

.jhq-range__lo {
	color: var(--jhq-red);
}

.jhq-range__hi {
	color: var(--jhq-cyan);
}

.jhq-range__dash {
	color: var(--jhq-text-faint);
}

/* ---------------------------------------------------------------- Figures */

.jhq-figures,
.jhq-track__figures {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	margin: 1.5rem 0;
}

.jhq-figure {
	padding: 1rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-figure--wide {
	grid-column: span 2;
	border-color: var(--jhq-amber);
}

.jhq-figure--muted {
	border-style: dashed;
}

.jhq-figure__value {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: 1.75rem;
	line-height: 1;
	font-weight: 700;
	color: var(--jhq-text);
}

.jhq-figure--muted .jhq-figure__value {
	color: var(--jhq-text-faint);
}

.jhq-figure__label {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--jhq-text-dim);
}

.jhq-counts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 7rem, 1fr ) );
	margin: 1.5rem 0;
}

.jhq-counts--card {
	margin: 1rem 0 0;
}

.jhq-counts__item {
	padding: 0.85rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-counts__figure {
	display: block;
	font-family: var(--jhq-mono);
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 700;
	color: var(--jhq-amber);
}

.jhq-counts__label {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-current {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--jhq-line-bright);
	background: var(--jhq-bg-card);
}

.jhq-current__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 2.5rem, 8vw, 3.5rem );
	line-height: 0.9;
	font-weight: 700;
	color: var(--jhq-cyan);
}

.jhq-current__meta {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--jhq-text-faint);
}

.jhq-current__date {
	display: block;
	font-family: var(--jhq-mono);
}

.jhq-current .jhq-nocompare {
	flex: 1 1 20rem;
	margin: 0;
}

/* ---------------------------------------------------------------- Tables */

.jhq-table {
	width: 100%;
	margin: 1.25rem 0;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.jhq-table th,
.jhq-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--jhq-line);
	text-align: left;
	vertical-align: top;
}

.jhq-table th {
	font-weight: 600;
	color: var(--jhq-text-dim);
}

.jhq-table thead th {
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-table td {
	font-family: var(--jhq-mono);
}

.jhq-table--series {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.jhq-table__row--break td {
	border-bottom: 2px dashed var(--jhq-red);
}

.jhq-table__break-flag {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--jhq-sans);
	font-size: 0.72rem;
	color: var(--jhq-red);
}

.jhq-key {
	font-size: 0.72rem;
	color: var(--jhq-text-faint);
}

.jhq-sources {
	margin: 1rem 0;
	padding-left: 1.25rem;
	color: var(--jhq-text-dim);
}

.jhq-qa {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--jhq-line);
}

.jhq-qa dt {
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-qa dd {
	margin: 0.35rem 0 1.25rem;
	max-width: 62ch;
	color: var(--jhq-text-dim);
}

/* ---------------------------------------------------------------- Changelog */

/*
 * Sized down to roughly two thirds of what it was. It carried the section on
 * its own while the changelog was empty; now that there are approved rounds to
 * read, it is a status line above them rather than the headline.
 */
.jhq-queue {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin: 1.5rem 0;
	padding: 0.8rem 1.15rem;
	border: 1px solid var(--jhq-amber);
	background: linear-gradient( 100deg, rgba( 248, 184, 0, 0.1 ), transparent 60% );
}

.jhq-queue__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 1.75rem, 4vw, 2.25rem );
	line-height: 0.9;
	font-weight: 700;
	color: var(--jhq-amber);
}

.jhq-queue__label {
	margin: 0;
	font-size: 0.92rem;
	color: var(--jhq-text);
}

/* Why the total on this page and the total in the hero disagree. */
.jhq-scope {
	max-width: 62ch;
	margin: 1.5rem 0;
	padding: 0.9rem 1.15rem;
	border-left: 3px solid var(--jhq-line-bright);
	background: var(--jhq-bg-raised);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--jhq-text-dim);
}

.jhq-scope strong {
	color: var(--jhq-text);
}

.jhq-scope span {
	display: block;
	margin-top: 0.4rem;
	color: var(--jhq-text-faint);
}

.jhq-rounds {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.jhq-round {
	padding: 1.5rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
	margin-bottom: 1rem;
}

/* ------------------------------------------------- Collapsed older rounds */

.jhq-rounds-more {
	margin-top: 1rem;
}

.jhq-rounds-more__toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.85rem;
	padding: 0.85rem 1.15rem;
	border: 1px solid var(--jhq-line-bright);
	background: var(--jhq-bg-card);
	font-family: var(--jhq-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--jhq-cyan);
	cursor: pointer;
	list-style: none;
}

/* Hide the platform's own disclosure triangle; there is a custom one below. */
.jhq-rounds-more__toggle::-webkit-details-marker {
	display: none;
}

.jhq-rounds-more__toggle::after {
	content: "\2193";
	margin-left: auto;
	opacity: 0.7;
}

.jhq-rounds-more[open] .jhq-rounds-more__toggle::after {
	content: "\2191";
}

.jhq-rounds-more__toggle:hover,
.jhq-rounds-more__toggle:focus-visible {
	border-color: var(--jhq-amber);
	color: var(--jhq-amber);
}

.jhq-rounds-more__range {
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--jhq-text-faint);
}

/* One label or the other, depending on state. */
.jhq-rounds-more__close,
.jhq-rounds-more[open] .jhq-rounds-more__open {
	display: none;
}

.jhq-rounds-more[open] .jhq-rounds-more__close {
	display: inline;
}

.jhq-rounds--older {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--jhq-line);
}

/* Printing should not depend on whether someone clicked the toggle. */
@media print {
	.jhq-rounds-more__toggle {
		display: none;
	}

	.jhq-rounds-more > .jhq-rounds--older {
		display: block;
	}
}

.jhq-round__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-round__slot {
	padding: 0.1rem 0.4rem;
	border: 1px solid var(--jhq-line-bright);
	font-size: 0.66rem;
	color: var(--jhq-text-faint);
}

.jhq-round__headline {
	margin: 0.35rem 0 1rem;
	font-size: 1.2rem;
}

.jhq-round__stats {
	display: flex;
	gap: 2rem;
	margin: 0 0 1rem;
}

.jhq-round__stats dt {
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-round__stats dd {
	margin: 0.2rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jhq-text);
}

.jhq-round__lines {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: var(--jhq-text-dim);
	font-size: 0.92rem;
}

.jhq-round__withheld {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 2px solid var(--jhq-amber);
	font-size: 0.85rem;
	color: var(--jhq-text-dim);
}

/* ---------------------------------------------------------------- About */

.jhq-about__grid {
	display: grid;
	gap: clamp( 2rem, 5vw, 4rem );
	grid-template-columns: 1fr;
	align-items: center;
}

@media ( min-width: 56rem ) {
	.jhq-about__grid {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 16rem );
	}
}

.jhq-contact {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.jhq-contact li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--jhq-line);
}

.jhq-contact__label {
	flex: 0 0 6rem;
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-about__art .jhq-sprite {
	width: 100%;
	max-width: 12rem;
	margin-inline: auto;
	filter: drop-shadow( 0 0 24px rgba( 74, 63, 159, 0.45 ) );
}

/* ---------------------------------------------------------------- Footer */

.jhq-footer {
	padding-block: 3rem;
	border-top: 1px solid var(--jhq-line);
	background: var(--jhq-bg-raised);
}

.jhq-footer p {
	margin: 0 0 0.5rem;
	max-width: 70ch;
	font-size: 0.85rem;
	color: var(--jhq-text-faint);
}

.jhq-footer__stale {
	display: block;
	margin-top: 0.35rem;
	color: var(--jhq-amber);
}

/* ---------------------------------------------------------- Chirp ticker */

/*
 * In the flow by default, which is what a phone gets: a floating overlay on a
 * small screen covers the page instead of decorating it. Lifted into the corner
 * only once there is room beside the content.
 */
.jhq-chirp-ticker {
	width: 100%;
	max-width: var(--jhq-wrap);
	margin: 0 auto 2rem;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}


.jhq-chirp-ticker__frame {
	display: block;
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--jhq-line-bright);
	background: var(--jhq-bg-card);
	color: inherit;
	text-decoration: none;
}

a.jhq-chirp-ticker__frame:hover,
a.jhq-chirp-ticker__frame:focus-visible {
	border-color: var(--jhq-cyan);
	background: var(--jhq-bg-raised);
	color: inherit;
}

.jhq-chirp-ticker__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-chirp-ticker__dot {
	width: 6px;
	height: 6px;
	background: var(--jhq-cyan);
	box-shadow: 0 0 8px var(--jhq-cyan);
	animation: jhq-pulse 2.4s ease-in-out infinite;
}

@keyframes jhq-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.jhq-chirp-ticker__hint {
	flex: 1 1 100%;
	order: 3;
	font-family: var(--jhq-sans);
	font-size: 0.7rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jhq-text-faint);
}

/*
 * Fixed height, not min-height. Posts run from 12 to 174 characters, so a list
 * that sizes to its contents changes height every few seconds — in the flow
 * that shoves the rest of the page up and down on a timer, and pinned to the
 * corner it makes the panel breathe. A reserved box absorbs the variation,
 * including the extra post that is briefly present while one collapses out.
 */
/*
 * Fixed height, not min-height. Posts run from 12 to 174 characters, so a list
 * that sizes to its contents changes height every few seconds — in the flow
 * that shoves the rest of the page up and down on a timer, and pinned to the
 * corner it makes the panel breathe. A reserved box absorbs the variation,
 * including the extra post that is briefly present while one collapses out.
 *
 * 14rem is what three two-line posts actually occupy at the panel's width:
 * roughly 70px each plus two 8px gaps. Narrower than this and a second line
 * becomes the common case rather than the exception, so the box was raised to
 * match rather than clipping more often.
 */
.jhq-chirp-ticker__list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.5rem;
	height: 14rem;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Without scripting the first three are simply on show. The ticker is a
 * flourish, so its no-JS state is a short static excerpt rather than nothing.
 */
.jhq-chirp-ticker__item {
	padding: 0.55rem 0.7rem;
	border-left: 2px solid var(--jhq-line-bright);
	background: var(--jhq-bg);
}

.jhq-chirp-ticker__item:nth-child( n + 4 ) {
	display: none;
}

/* Once the script takes over, visibility is its call. */
.jhq-chirp-ticker.is-live .jhq-chirp-ticker__item {
	display: none;
}

.jhq-chirp-ticker.is-live .jhq-chirp-ticker__item.is-visible {
	display: block;
	animation: jhq-chirp-in 0.45s ease-out both;
}

/*
 * The departing post collapses as it fades rather than just going transparent.
 * Fading alone leaves it holding its space for the length of the transition, so
 * a fourth post is briefly in the box and the panel grows — visible as a jump on
 * the fixed desktop version. Collapsing keeps three in flow at all times.
 */
.jhq-chirp-ticker.is-live .jhq-chirp-ticker__item.is-leaving {
	animation: jhq-chirp-out 0.55s ease-in both;
	overflow: hidden;
}

@keyframes jhq-chirp-in {
	from { opacity: 0; transform: translateY( -0.4rem ); }
	to { opacity: 1; transform: none; }
}

/*
 * Fades and collapses together. Holding full height for part of the transition
 * leaves a fourth post occupying space on the way out, which shows up as the
 * panel jumping taller for a few hundred milliseconds.
 */
@keyframes jhq-chirp-out {
	from {
		opacity: 1;
		max-height: 8rem;
	}
	to {
		opacity: 0;
		max-height: 0;
		padding-block: 0;
		margin-bottom: -0.5rem; /* absorbs the flex gap it leaves behind */
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.jhq-chirp-ticker__dot {
		animation: none;
	}

	.jhq-chirp-ticker.is-live .jhq-chirp-ticker__item.is-visible,
	.jhq-chirp-ticker.is-live .jhq-chirp-ticker__item.is-leaving {
		animation: none;
	}
}

.jhq-chirp-ticker__item--cyan { border-left-color: var(--jhq-cyan); }
.jhq-chirp-ticker__item--amber { border-left-color: var(--jhq-amber); }
.jhq-chirp-ticker__item--red { border-left-color: var(--jhq-red); }

.jhq-chirp-ticker__item.is-reply {
	margin-left: 0.85rem;
}

.jhq-chirp-ticker__meta {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.2rem;
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
}

.jhq-chirp-ticker__reply-mark {
	color: var(--jhq-text-faint);
}

.jhq-chirp-ticker__persona {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jhq-text);
}

.jhq-chirp-ticker__time {
	color: var(--jhq-text-faint);
}

/*
 * Two lines, which fits the median post whole. The long tail clips with a
 * visible ellipsis rather than being silently cut, and the full text is one
 * click away in the feed.
 */
.jhq-chirp-ticker__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--jhq-text-dim);
}

.jhq-chirp-ticker__note {
	margin: 0.85rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--jhq-text-faint);
}

.jhq-chirp-ticker__more {
	margin: 0.6rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-chirp-ticker__more::after {
	content: " →";
}

.jhq-chirp-ticker__empty {
	margin: 0;
	font-size: 0.82rem;
	color: var(--jhq-text-faint);
}

/*
 * In the flow, the ticker spans the column and splits in two: what it is on the
 * left, the conversation on the right.
 *
 * It used to be a narrow 22rem block shoved against the right edge, which read
 * as a fragment of the floating version that had fallen out of place rather
 * than as a deliberate part of the page.
 */
@media ( min-width: 46rem ) {
	.jhq-chirp-ticker__frame {
		display: grid;
		grid-template-columns: minmax( 10rem, 15rem ) minmax( 0, 1fr );
		gap: 0.5rem 2rem;
		align-items: start;
		padding: 1.15rem 1.35rem;
	}

	.jhq-chirp-ticker__head {
		grid-column: 1;
		margin-bottom: 0;
	}

	.jhq-chirp-ticker__list {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.jhq-chirp-ticker__note,
	.jhq-chirp-ticker__more {
		grid-column: 1;
	}

	.jhq-chirp-ticker__note {
		margin-top: 0.75rem;
	}
}

/*
 * Only float it once there is genuinely room beside the content.
 *
 * The page is 74rem wide and centred, so the free margin either side is
 * (100vw - 74rem) / 2. The panel needs its own width plus the 1.5rem edge gap to
 * fit inside that margin without landing on the hero.
 *
 * At 19rem wide the panel clears the hero's standfirst from about 1424px, so the
 * cutoff is 89rem. The earlier 22rem panel needed 100rem, which meant it only
 * floated on a maximised window and dropped into the flow the moment the window
 * was nudged smaller, with visible empty space still left in the corner.
 * Narrowing the panel is what buys the lower breakpoint; moving the breakpoint
 * alone would just have put the panel on top of the text.
 *
 * 89 rather than 90 on purpose. Both this query and the fixed positioning
 * measure the layout viewport, which excludes the scrollbar, so a maximised
 * 1440px window is really 1425px of layout. A 90rem cutoff would have missed
 * exactly the monitor size this change exists to serve.
 */
@media ( min-width: 89rem ) {
	.jhq-chirp-ticker {
		position: fixed;
		top: 1.5rem;
		/*
		 * 1rem rather than 1.5rem. Every pixel taken off this gap is a pixel of
		 * clearance from the hero text, and at the bottom of the range that
		 * clearance is the tight constraint. Docked a little closer to the edge
		 * also reads more deliberately than floating in from it.
		 */
		right: 1rem;
		z-index: 40;
		width: 19rem;
		max-width: calc( 100vw - 2rem );
		margin: 0;
		padding: 0;
	}

	/* Back to a single column once it is out of the flow and in the corner. */
	.jhq-chirp-ticker__frame {
		display: block;
		width: 100%;
		padding: 0.9rem 1rem 1rem;
		backdrop-filter: blur( 6px );
		background: rgba( 21, 26, 41, 0.92 );
		box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.45 );
	}

	.jhq-chirp-ticker__head {
		margin-bottom: 0.75rem;
	}

	/* The detail overlay owns the screen once it is open. */
	.jhq-panel-open .jhq-chirp-ticker {
		display: none;
	}
}

@media print {
	.jhq-chirp-ticker {
		display: none;
	}
}

/* ------------------------------------------------------------ Chirp feed */

.jhq-chirp-feed__intro {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	color: var(--jhq-text-faint);
}

.jhq-chirp-thread,
.jhq-chirp-replies {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jhq-chirp-thread > .jhq-chirp-post {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--jhq-line);
}

.jhq-chirp-thread > .jhq-chirp-post:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

/*
 * A rail rather than an ever-growing indent. Threads reach depth 7, so the
 * indent is capped after the second level (data-depth stops incrementing in
 * PHP) and the rail carries the relationship the rest of the way down.
 */
.jhq-chirp-replies {
	margin-top: 0.6rem;
	padding-left: 0.9rem;
	border-left: 1px solid var(--jhq-line-bright);
}

.jhq-chirp-replies[data-depth="3"] {
	padding-left: 0.45rem;
	border-left-style: dashed;
}

.jhq-chirp-post__body {
	padding: 0.55rem 0.75rem;
	border-left: 2px solid var(--jhq-line-bright);
	background: var(--jhq-bg-card);
}

.jhq-chirp-post--cyan > .jhq-chirp-post__body { border-left-color: var(--jhq-cyan); }
.jhq-chirp-post--amber > .jhq-chirp-post__body { border-left-color: var(--jhq-amber); }
.jhq-chirp-post--red > .jhq-chirp-post__body { border-left-color: var(--jhq-red); }

.jhq-chirp-post + .jhq-chirp-post {
	margin-top: 0.6rem;
}

.jhq-chirp-post__meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.2rem;
	font-family: var(--jhq-mono);
	font-size: 0.68rem;
}

.jhq-chirp-post__persona {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jhq-text);
}

.jhq-chirp-post__time {
	color: var(--jhq-text-faint);
}

.jhq-detail .jhq-chirp-post__text {
	margin: 0;
	max-width: 60ch;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--jhq-text-dim);
}

.jhq-chirp-feed__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--jhq-line);
}

.jhq-chirp-feed__stats dt {
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-chirp-feed__stats dd {
	margin: 0.2rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--jhq-text);
}

.jhq-chirp-feed__withheld dd {
	color: var(--jhq-amber);
}

.jhq-detail .jhq-chirp-feed__fingerprint {
	margin: 1.25rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

.jhq-chirp-feed__fingerprint code {
	margin-inline: 0.4rem;
	color: var(--jhq-cyan);
}

.jhq-chirp-feed__fingerprint span {
	display: block;
	margin-top: 0.4rem;
	max-width: 60ch;
	font-family: var(--jhq-sans);
	font-size: 0.8rem;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
}

/* ---------------------------------------------------------- Detail panels */

/*
 * Without JavaScript every panel is simply part of the long page — expanded,
 * readable, and reachable by its own URL. The .jhq-js class only lands when
 * scripting is on, and only then do panels become overlays.
 */
.jhq-detail {
	margin: 1rem 0 2rem;
	border: 1px solid var(--jhq-line-bright);
	background: var(--jhq-bg-raised);
}

.jhq-detail__inner {
	position: relative;
	padding: clamp( 1.25rem, 3vw, 2rem );
}

.jhq-detail__close {
	display: none;
}

.jhq-detail__title {
	margin: 0 0 1rem;
	font-size: clamp( 1.3rem, 3.5vw, 1.9rem );
	line-height: 1.15;
}

.jhq-detail__standfirst {
	margin: -0.5rem 0 1.25rem;
	max-width: 62ch;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--jhq-text-dim);
}

.jhq-detail__subhead {
	margin: 2rem 0 0.75rem;
	font-family: var(--jhq-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-cyan);
}

.jhq-detail p {
	max-width: 66ch;
	color: var(--jhq-text-dim);
}

.jhq-detail__permalink {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--jhq-line);
	font-family: var(--jhq-mono);
	font-size: 0.75rem;
}

.jhq-js .jhq-detail {
	display: none;
}

.jhq-js .jhq-detail.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 50;
	margin: 0;
	border: 0;
	background: rgba( 5, 7, 12, 0.86 );
	backdrop-filter: blur( 3px );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.jhq-js .jhq-detail.is-open .jhq-detail__inner {
	width: 100%;
	max-width: 52rem;
	margin: clamp( 1rem, 5vh, 4rem ) auto;
	padding: clamp( 1.5rem, 4vw, 2.75rem );
	border: 1px solid var(--jhq-cyan);
	background: var(--jhq-bg-raised);
	box-shadow: 0 0 60px rgba( 0, 0, 0, 0.6 );
}

.jhq-js .jhq-detail.is-open .jhq-detail__close {
	display: block;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--jhq-line-bright);
	background: var(--jhq-bg-card);
	color: var(--jhq-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.jhq-js .jhq-detail.is-open .jhq-detail__close:hover {
	border-color: var(--jhq-amber);
	color: var(--jhq-amber);
}

.jhq-js.jhq-panel-open {
	overflow: hidden;
}

/* Print: panels expanded, chrome gone. */
@media print {
	.jhq-js .jhq-detail,
	.jhq-detail {
		display: block;
		position: static;
		inset: auto;
		background: none;
	}

	body::before {
		display: none;
	}
}

/* ================================================================== v2 === */

/* ------------------------------------------------------------ Hero: shop */

.jhq-hero__title--shop {
	font-size: clamp( 2.2rem, 6vw, 4rem );
	text-transform: none;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.jhq-hero__lead {
	max-width: 58ch;
	font-size: 1.05rem;
	color: var(--jhq-text);
}

.jhq-hero__epitaph {
	max-width: none;
	color: var(--jhq-text-dim);
}

.jhq-sprite--door {
	width: 100%;
	max-width: 14rem;
	margin-inline: auto;
	filter: drop-shadow( 0 0 26px rgba( 248, 56, 0, 0.18 ) );
}

/* The hanging sign. Data-driven words on an HTML plaque, chains in CSS. */
.jhq-closed-sign {
	position: relative;
	display: block;
	width: max-content;
	margin: 0.9rem auto 0;
	padding: 0.55rem 1.1rem 0.6rem;
	border: 2px solid var(--jhq-red);
	background: var(--jhq-bg-card);
	text-align: center;
	text-decoration: none;
	transform: rotate( -2deg );
	transition: transform 0.15s;
}

.jhq-closed-sign::before,
.jhq-closed-sign::after {
	content: "";
	position: absolute;
	top: -0.8rem;
	width: 2px;
	height: 0.8rem;
	background: var(--jhq-line-bright);
}

.jhq-closed-sign::before { left: 22%; }
.jhq-closed-sign::after { right: 22%; }

.jhq-closed-sign:hover,
.jhq-closed-sign:focus-visible {
	transform: rotate( 1deg );
}

.jhq-closed-sign__text {
	display: block;
	font-family: var(--jhq-mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--jhq-text-dim);
}

.jhq-closed-sign__sub {
	display: block;
	font-family: var(--jhq-mono);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	padding-left: 0.3em; /* optically recentres the tracked-out caps */
	color: var(--jhq-red);
}

.jhq-closed-sign__hint {
	margin: 0.6rem 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--jhq-text-faint);
}

/* The origin stat: written -> read back. */
.jhq-gravestat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--jhq-line-bright);
	border-left: 4px solid var(--jhq-red);
	background: linear-gradient( 100deg, rgba( 248, 56, 0, 0.08 ), transparent 60% );
}

.jhq-gravestat__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 2rem, 5.5vw, 3.4rem );
	line-height: 0.9;
	font-weight: 700;
	color: var(--jhq-cyan);
}

.jhq-gravestat__half--zero .jhq-gravestat__figure {
	color: var(--jhq-red);
	text-shadow: 0 0 24px rgba( 248, 56, 0, 0.5 );
}

.jhq-gravestat__half {
	flex: 1 1 14rem;
}

.jhq-gravestat__half--zero {
	text-align: right;
}

.jhq-gravestat__half--zero .jhq-gravestat__label {
	margin-left: auto;
}

.jhq-gravestat__label {
	margin: 0.35rem 0 0;
	max-width: 22ch;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--jhq-text-dim);
}

.jhq-gravestat__arrow {
	font-family: var(--jhq-mono);
	font-size: 1.8rem;
	color: var(--jhq-text-faint);
}

.jhq-confession {
	margin: 1.75rem 0 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--jhq-amber);
	background: var(--jhq-bg-raised);
}

.jhq-confession p {
	margin: 0;
	max-width: none;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--jhq-text-dim);
}

.jhq-confession__attribution {
	margin-top: 0.6rem;
	font-family: var(--jhq-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-amber);
}

.jhq-provenance {
	margin: 2rem 0 0;
	max-width: none;
	font-family: var(--jhq-mono);
	font-size: 0.78rem;
	color: var(--jhq-text-faint);
}

/* ------------------------------------------------------------ Live line */

.jhq-liveline {
	border-top: 1px solid var(--jhq-line);
	border-bottom: 1px solid var(--jhq-line);
	background: var(--jhq-bg-raised);
}

.jhq-liveline__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding-block: 0.8rem;
	text-align: center;
}

.jhq-liveline__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1rem;
}

.jhq-liveline__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: var(--jhq-cyan);
	box-shadow: 0 0 8px var(--jhq-cyan);
	animation: jhq-pulse 2.4s ease-in-out infinite;
}

.jhq-liveline__text {
	font-size: 0.82rem;
	color: var(--jhq-text);
	overflow-wrap: anywhere;
}

.jhq-liveline__key {
	color: var(--jhq-cyan);
}

.jhq-liveline__pipe {
	margin-inline: 0.5rem;
	color: var(--jhq-text-faint);
}

.jhq-liveline__note {
	font-family: var(--jhq-mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

/* ------------------------------------------------------------ The desks */

.jhq-desks__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.jhq-desk {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
	text-align: center;
}

/* Pinned to the bottom so the dotted rule and the receipt line up across the
   row, whatever length each blurb runs to. */
.jhq-desk__receipt {
	margin-top: auto;
}

.jhq-desk__art .jhq-sprite {
	margin-inline: auto;
}

.jhq-desk__name {
	margin: 0.75rem 0 0;
	font-family: var(--jhq-mono);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jhq-desk__role {
	margin: 0.15rem 0 0.75rem;
	font-size: 0.8rem;
	color: var(--jhq-amber);
}

.jhq-desk__line {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--jhq-text-dim);
	text-align: left;
}

.jhq-desk__receipt {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--jhq-line-bright);
	font-family: var(--jhq-mono);
	font-size: 0.7rem;
	color: var(--jhq-text-faint);
}

/* ------------------------------------------------------------- The Tape */

.jhq-tape__blurb {
	max-width: 66ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--jhq-text-dim);
}

/* A strip of ledger tape: perforated edges, entries printed along it. */
.jhq-tape__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 1.75rem;
	padding-block: 0.85rem;
	border: 1px solid var(--jhq-line-bright);
	background:
		/* Sprocket holes along both edges, like ledger paper. */
		radial-gradient( circle 3px at 0.75rem 0.45rem, var(--jhq-bg) 2.6px, transparent 3px ) top left / 1.75rem 0.9rem repeat-x,
		radial-gradient( circle 3px at 0.75rem 0.45rem, var(--jhq-bg) 2.6px, transparent 3px ) bottom left / 1.75rem 0.9rem repeat-x,
		var(--jhq-bg-raised);
}

.jhq-tape__cell {
	flex: 1 1 9rem;
	padding: 0.5rem 1.25rem;
	border-right: 1px dashed var(--jhq-line-bright);
}

.jhq-tape__cell:last-child {
	border-right: 0;
}

.jhq-tape__figure {
	display: block;
	font-family: var(--jhq-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--jhq-cyan);
}

.jhq-tape__cell--since .jhq-tape__figure {
	color: var(--jhq-amber);
}

.jhq-tape__unit {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

/* ------------------------------------------------------------- The rooms */

.jhq-room__line {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--jhq-text-dim);
}

.jhq-room {
	padding: 1.5rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-room .jhq-card__title {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------- The miner */

.jhq-miner__blurb {
	max-width: 66ch;
	color: var(--jhq-text-dim);
}

.jhq-miner__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	margin-top: 1.75rem;
}

.jhq-miner__stat {
	padding: 1.25rem;
	border: 1px solid var(--jhq-line);
	background: var(--jhq-bg-card);
}

.jhq-miner__figure {
	margin: 0;
	font-family: var(--jhq-mono);
	font-size: clamp( 2rem, 5vw, 2.8rem );
	line-height: 0.9;
	font-weight: 700;
	color: var(--jhq-text);
}

.jhq-miner__stat--good .jhq-miner__figure {
	color: var(--jhq-cyan);
}

.jhq-miner__stat--blocked {
	border-color: var(--jhq-red);
}

.jhq-miner__stat--blocked .jhq-miner__figure {
	color: var(--jhq-red);
}

.jhq-miner__label {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

/* -------------------------------------------------------------- Top nav */

.jhq-topnav {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	border-bottom: 1px solid var(--jhq-line);
	background: rgba( 10, 12, 20, 0.88 );
	backdrop-filter: blur( 8px );
}

.jhq-topnav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.4rem;
	padding-block: 0.65rem;
}

.jhq-topnav__brand {
	font-family: var(--jhq-mono);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jhq-amber);
	text-decoration: none;
}

.jhq-topnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jhq-topnav__list a {
	font-family: var(--jhq-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jhq-text-dim);
	text-decoration: none;
}

.jhq-topnav__list a:hover,
.jhq-topnav__list a:focus-visible {
	color: var(--jhq-amber);
}

/* Anchored sections stop below the sticky bar instead of under it. */
.jhq-section[id],
.jhq-hero[id] {
	scroll-margin-top: 4.5rem;
}

/* A room that publishes no count: the figure slot states that, sized so the
   cards in the row still align. */
.jhq-room__nocount {
	display: inline-block;
	margin: 0.55rem 0 0.85rem;
	padding: 0.3rem 0.6rem;
	border: 1px dashed var(--jhq-line-bright);
	font-family: var(--jhq-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jhq-text-faint);
}

/* The generic hero column cap (60ch) loses here: these three are meant to run
   the full width of the boxes above them. Specificity matched to the cap. */
.jhq-hero__copy > .jhq-hero__epitaph,
.jhq-hero__copy > .jhq-hero__lead,
.jhq-hero__copy > .jhq-provenance {
	max-width: none;
}

/* Pin receipts to the card bottom. Placed after the base receipt rule, whose
   margin shorthand was resetting the auto top margin back to 1rem. */
.jhq-desk > .jhq-desk__receipt {
	margin-top: auto;
	padding-top: 0.75rem;
}