/* ==========================================================================
   Homepage — Dial
   The topics as a ring around the lead story, each arc as long as the topic
   is big. The ring is the only loud thing on the page; the sections below
   borrow its colours through small copies of it and keep to hairlines.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.dial-hero {
	padding: clamp(1.25rem, 0.5rem + 2vw, 2.75rem) 0 clamp(2rem, 1rem + 2.5vw, 3.5rem);
	background: radial-gradient(42% 58% at 30% 48%, color-mix(in srgb, var(--tint) 6%, transparent), transparent 70%);
}

.dial-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}
.dial-hero__grid--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* The ring. Its size follows the viewport height as well as the width so the
   whole thing fits under the header on a laptop screen. */
.dial {
	position: relative;
	width: min(100%, max(22rem, min(40rem, calc(100svh - var(--header-h) - 5rem))));
	aspect-ratio: 1;
	container-type: inline-size;
}

.dial__ring { width: 100%; height: 100%; overflow: visible; }
.dial__ring circle { fill: none; }

.dial__track { stroke: color-mix(in srgb, var(--tint) 6%, transparent); stroke-width: 12; }
.dial__ticks { stroke: var(--line-2); stroke-width: 3; }

.dial__arc {
	stroke: var(--card-accent, var(--mint));
	stroke-width: 12;
	transition: stroke-width 0.25s var(--ease), opacity 0.25s var(--ease);
}
.dial__halo {
	stroke: var(--ink);
	stroke-width: 18;
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}
.dial__seg { cursor: pointer; }
.dial__seg:focus { outline: none; }
.dial__seg:focus-visible .dial__halo { opacity: 1; }

.dial__seg:hover .dial__arc,
.dial__seg:focus-visible .dial__arc,
.dial__seg.is-hot .dial__arc { stroke-width: 16; }

/* Pointing at one topic, on the ring or in the legend, lets the rest recede. */
[data-dial]:has(.is-hot) .dial__seg:not(.is-hot) .dial__arc,
.dial__ring:has(.dial__seg:hover) .dial__seg:not(:hover) .dial__arc { opacity: 0.3; }

.dial__ring .dial__marker { fill: var(--card-accent, var(--ink)); stroke: var(--bg); stroke-width: 1.2; }

/* The lead story, set in the middle of the ring. */
.dial__core {
	position: absolute;
	inset: 15%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--surface) 70%);
	box-shadow: inset 0 0 0 1px var(--line);
}
.dial__media { position: absolute; inset: 0; z-index: -2; background: var(--surface-2); }
.dial__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.dial__core--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, color-mix(in srgb, var(--bg) 40%, transparent) 100%);
}
.dial__core:has(.dial__title a:hover) .dial__img { transform: scale(1.04); }

.dial__story {
	display: grid;
	justify-items: center;
	gap: clamp(0.5rem, 2.2cqi, 1rem);
	width: 76%;
	text-align: center;
}
.dial__story .topic-tag { color: var(--ink); font-size: clamp(0.75rem, 2.3cqi, var(--fs-sm)); }
.dial__title {
	font-size: clamp(1.05rem, 5.3cqi, 2.35rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-wrap: balance;
	text-shadow: 0 2px 24px color-mix(in srgb, var(--bg) 70%, transparent);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0.1em 0.2em;
}
.dial__title a { transition: color 0.2s var(--ease); }
.dial__title a:hover { color: var(--mint); }
.dial__time {
	font-family: var(--font-mono);
	font-size: clamp(0.7rem, 2cqi, 0.8rem);
	color: var(--ink-2);
}

/* ── Legend ──────────────────────────────────────────────────────────── */
.dial-key { min-width: 0; }
.dial-key__title {
	font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
	max-width: 16ch;
	text-wrap: balance;
}
.dial-key__intro { margin-top: 0.9rem; max-width: 44ch; color: var(--ink-2); }

.dial-key__list {
	list-style: none;
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-top: 1px solid var(--line);
}
.dial-key__row {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 0.75rem 0.7rem 0.5rem;
	border-bottom: 1px solid var(--line);
	transition: background-color 0.2s var(--ease);
}
.dial-key__swatch {
	height: 6px;
	border-radius: 3px;
	background: var(--card-accent, var(--mint));
	transform-origin: left center;
	transform: scaleX(0.7);
	transition: transform 0.25s var(--ease);
}
.dial-key__name { font-weight: 600; line-height: 1.3; }
.dial-key__count {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--muted);
	transition: color 0.2s var(--ease);
}
.dial-key__row:hover,
.dial-key__row:focus-visible,
.dial-key__row.is-hot { background: color-mix(in srgb, var(--card-accent, var(--mint)) 10%, transparent); }
.dial-key__row:hover .dial-key__swatch,
.dial-key__row:focus-visible .dial-key__swatch,
.dial-key__row.is-hot .dial-key__swatch { transform: scaleX(1); }
.dial-key__row:hover .dial-key__count,
.dial-key__row:focus-visible .dial-key__count,
.dial-key__row.is-hot .dial-key__count { color: var(--card-accent, var(--mint)); }
.dial-key__row:focus-visible { outline-offset: -2px; }

/* ── Small copies of the ring ────────────────────────────────────────── */
.dial-mini { flex: none; overflow: visible; }
.dial-mini circle { fill: none; stroke: var(--line-2); stroke-width: 10; }
.dial-mini .is-lit { stroke: var(--card-accent, var(--mint)); }

/* ── Latest in each topic ────────────────────────────────────────────── */
.dial-desks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(2rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
}
.dial-desks__grid--1 { max-width: 30rem; }

.dial-desk {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--card-accent, var(--mint));
}
.dial-desk__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 0.85rem;
	margin-bottom: 1.25rem;
}
.dial-desk__dial { grid-row: span 2; width: 44px; height: 44px; }
.dial-desk__name {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}
.dial-desk__name a:hover { color: var(--card-accent, var(--mint)); }
.dial-desk__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }

.dial-desk__list { list-style: none; }
.dial-desk__item {
	display: grid;
	gap: 0.55rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}
.dial-desk__item:first-child { padding-top: 0; }
.dial-desk__media {
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: 0.4rem;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface-2);
}
.dial-desk__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.dial-desk__item:hover .dial-desk__img { transform: scale(1.04); }
.dial-desk__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	transition: color 0.2s var(--ease);
}
.dial-desk__item:first-child .dial-desk__title { font-size: 1.22rem; line-height: 1.22; letter-spacing: -0.02em; }
.dial-desk__title:hover { color: var(--card-accent, var(--mint)); }

.dial-desk__all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 1.1rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--card-accent, var(--mint));
}
.dial-desk__all::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width 0.2s var(--ease); }
.dial-desk__all:hover::after { width: 26px; }

/* ── More stories ────────────────────────────────────────────────────── */
.dial-more__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 1rem + 3vw, 4rem);
	border-top: 1px solid var(--line);
}
.dial-more__item {
	position: relative;
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.15rem 0 1.15rem 1.1rem;
	border-bottom: 1px solid var(--line);
}
.dial-more__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	width: 3px;
	height: 1.1rem;
	border-radius: 2px;
	background: var(--card-accent, var(--line-2));
}
.dial-more__title {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	transition: color 0.2s var(--ease);
}
.dial-more__title:hover { color: var(--card-accent, var(--mint)); }
.dial-more__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }

/* ── Sign-up ─────────────────────────────────────────────────────────── */
.dial-join { padding-top: 0; }
.dial-join__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background:
		radial-gradient(70% 90% at 0% 0%, var(--mint-glow), transparent 60%),
		var(--surface);
}
.dial-join__dial { width: 64px; height: 64px; margin-bottom: 1.5rem; }
.dial-join__title {
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	max-width: 15ch;
	text-wrap: balance;
}
.dial-join__text { margin-top: 1rem; max-width: 48ch; color: var(--ink-2); }

/* ── The one load moment: the arcs draw in, in order round the ring ───── */
@media (prefers-reduced-motion: no-preference) {
	.dial__arc {
		animation: dial-draw 1.1s var(--ease) both;
		animation-delay: calc(0.15s + var(--i, 0) * 0.08s);
	}
	.dial__ticks { animation: dial-fade 0.9s var(--ease) both; }

	@keyframes dial-draw {
		from { stroke-dashoffset: var(--len); }
		to { stroke-dashoffset: 0; }
	}
	@keyframes dial-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.dial__arc, .dial__halo, .dial-key__row, .dial-key__swatch, .dial-key__count,
	.dial__img, .dial-desk__img { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.dial-hero { background: radial-gradient(70% 40% at 50% 26%, color-mix(in srgb, var(--tint) 6%, transparent), transparent 70%); }
	.dial-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.dial { justify-self: center; width: min(100%, 36rem); }
	.dial-key__list--long {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
}
@media (max-width: 760px) {
	.dial-desk__item--photo { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
	.dial-desk__item--photo .dial-desk__media { grid-row: span 2; aspect-ratio: 1; margin: 0; border-radius: var(--r-sm); }
	.dial-desk__item--photo .dial-desk__title { font-size: 1.08rem; }
	.dial-more__list { grid-template-columns: minmax(0, 1fr); }
	.dial-join__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.dial-key__list--long { grid-template-columns: minmax(0, 1fr); }
	.dial__story { width: 82%; }
}