/*
 * Dragoneye Duke front page.
 * Layout: a captain's chronicle under a night sky. Midnight-navy pages, chrome type and a
 * high-contrast Cormorant voice. Two accents with two jobs: jersey blue is the captain
 * (labels, buttons, numbers), cinnabar is the dragon (the eye, the words that burn).
 * The portrait sits in an arch, and the dragon's eye, set in a seal, marks the road to Worlds.
 */
:root {
	--dd-soot: #0b111c;    /* page ground, midnight navy */
	--dd-ash: #101929;     /* raised bands and frames */
	--dd-bone: #eef1f5;    /* primary text, chrome white */
	--dd-smoke: #94a1b5;   /* secondary text */
	--dd-line: #1f2b3e;    /* rules */
	--dd-flame: #e0613f;   /* the dragon, cinnabar */
	--dd-jersey: #4791cf;  /* the captain, sampled from the No. 01 jersey */
	--dd-sky: #9cc7ec;     /* jersey blue lifted for small type on navy */

	--dd-display: "Cormorant", "Cormorant Garamond", "Garamond", "Times New Roman", serif;
	--dd-text: "Newsreader", "Iowan Old Style", Georgia, serif;
	--dd-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--dd-step--1: 0.78rem;
	--dd-step-0: 1.0625rem;
	--dd-step-1: 1.3rem;
	--dd-step-2: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);
	--dd-step-3: clamp(2.6rem, 1.7rem + 3.8vw, 4.6rem);
	--dd-step-4: clamp(3.6rem, 1.6rem + 8.6vw, 9.25rem);

	--dd-gutter: clamp(16px, 5vw, 56px);
	--dd-section: clamp(4.5rem, 3rem + 7vw, 9rem);

	color-scheme: dark;
}

html:has(body.dd) {
	scroll-behavior: smooth;
}

.dd-page section[id] {
	scroll-margin-top: 5rem;
}

body.dd {
	margin: 0;
	background: var(--dd-soot);
	color: var(--dd-bone);
	font-family: var(--dd-text);
	font-size: var(--dd-step-0);
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.dd-page,
.dd-page * {
	box-sizing: border-box;
}

.dd-page {
	font-variant-numeric: lining-nums;
}

.dd-page img {
	display: block;
	max-width: 100%;
	height: auto;
}

.dd-page a {
	color: inherit;
	text-decoration: none;
}

.dd-page a:focus-visible {
	outline: 1px solid var(--dd-sky);
	outline-offset: 4px;
}

.dd-page h1,
.dd-page h2,
.dd-page h3,
.dd-page p,
.dd-page figure,
.dd-page blockquote,
.dd-page ol,
.dd-page ul,
.dd-page dl,
.dd-page dd {
	margin: 0;
	padding: 0;
}

.dd-page ol,
.dd-page ul {
	list-style: none;
}

.dd-page em {
	font-style: italic;
	color: var(--dd-flame);
}

.dd-wrap {
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
	padding-left: max(var(--dd-gutter), env(safe-area-inset-left, 0px));
	padding-right: max(var(--dd-gutter), env(safe-area-inset-right, 0px));
}

/* Type */

.dd-page h2 {
	font-family: var(--dd-display);
	font-size: var(--dd-step-3);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dd-label {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	font-family: var(--dd-mono);
	font-size: var(--dd-step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

.dd-label span {
	color: var(--dd-smoke);
}

.dd-label--quiet {
	color: var(--dd-smoke);
}

.dd-lede {
	font-family: var(--dd-display);
	font-size: var(--dd-step-2);
	font-style: italic;
	line-height: 1.25;
	max-width: 24ch;
}

.dd-body {
	color: var(--dd-smoke);
	max-width: 58ch;
}

.dd-note {
	font-family: var(--dd-display);
	font-style: italic;
	font-size: var(--dd-step-1);
	color: var(--dd-bone);
}

/* Controls */

.dd-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-top: 0.75rem;
}

.dd-btn {
	display: inline-block;
	padding: 0.95rem 1.8rem;
	border: 1px solid var(--dd-jersey);
	border-radius: 999px;
	background: var(--dd-jersey);
	color: var(--dd-soot) !important;
	font-family: var(--dd-mono);
	font-size: var(--dd-step--1);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 200ms ease, color 200ms ease;
}

.dd-btn:hover {
	background: transparent;
	color: var(--dd-sky) !important;
}

.dd-btn--ghost {
	background: transparent;
	color: var(--dd-sky) !important;
}

.dd-btn--ghost:hover {
	background: var(--dd-jersey);
	color: var(--dd-soot) !important;
}

.dd-link {
	font-family: var(--dd-mono);
	font-size: var(--dd-step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dd-bone);
	border-bottom: 1px solid var(--dd-line);
	padding-bottom: 0.3rem;
	white-space: nowrap;
	transition: border-color 200ms ease, color 200ms ease;
}

.dd-link:hover {
	color: var(--dd-sky);
	border-color: var(--dd-jersey);
}

/* Header */

.dd-bar {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 10;
	background: color-mix(in srgb, var(--dd-soot) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dd-line);
}

body.admin-bar .dd-bar {
	top: 32px;
}

.dd-bar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 0.9rem;
}

.dd-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--dd-display);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.dd-brand img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.dd-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	font-family: var(--dd-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-nav a:hover,
.dd-nav a[aria-current] {
	color: var(--dd-bone);
}

.dd-nav__out {
	color: var(--dd-sky);
}

/* Hero */

.dd-hero {
	overflow-x: clip;
}

.dd-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
	padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.dd-hero__text {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

.dd-hero__title {
	font-family: var(--dd-display);
	font-size: var(--dd-step-4);
	font-weight: 500;
	line-height: 0.88;
	letter-spacing: -0.025em;
	text-wrap: balance;
	padding-block: 0.4rem 0.6rem;
}

.dd-hero__title em {
	display: block;
	font-weight: 400;
}

/* The portrait, set in an arch with a second hairline arch behind it */

.dd-arch {
	position: relative;
	display: grid;
	gap: 1rem;
	min-width: 0;
	width: 100%;
	max-width: 27rem;
	justify-self: end;
}

.dd-arch__frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px 4px 4px;
	overflow: hidden;
	background: var(--dd-ash);
	/* the hairline arch rides the frame's own edge, a fixed gap outside it */
	box-shadow: 0 0 0 0.75rem var(--dd-soot), 0 0 0 calc(0.75rem + 1px) color-mix(in srgb, var(--dd-jersey) 60%, transparent);
}

.dd-page .dd-arch__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%;
	filter: saturate(0.85) contrast(1.05);
	color: var(--dd-smoke);
	font-size: var(--dd-step--1);
}

.dd-arch__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--dd-soot) 55%, transparent));
	pointer-events: none;
}

.dd-arch figcaption {
	margin-top: 0.75rem;
	font-family: var(--dd-display);
	font-style: italic;
	font-size: var(--dd-step-1);
	line-height: 1.3;
	color: var(--dd-smoke);
	text-align: center;
	padding-top: 1rem;
}

/* The record, a single line of plates under the hero */

.dd-record {
	border-block: 1px solid var(--dd-line);
	/* the jersey's star-pattern finish, barely there */
	background-image:
		radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--dd-sky) 22%, transparent) 0 0.7px, transparent 1.2px),
		radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--dd-sky) 12%, transparent) 0 0.6px, transparent 1px);
	background-size: 34px 34px, 21px 21px;
}

.dd-record__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dd-record__list div {
	display: grid;
	gap: 0.35rem;
	padding: 1.6rem 1.25rem;
	border-left: 1px solid var(--dd-line);
	min-width: 0;
}

.dd-record__list div:first-child {
	border-left: 0;
	padding-left: 0;
}

.dd-record dt {
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-record dd {
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	line-height: 1.2;
}

.dd-record .is-mark dt {
	color: var(--dd-flame);
}

.dd-record .is-mark dd {
	font-style: italic;
}

/* Sections */

.dd-section {
	padding-block: var(--dd-section);
}

.dd-section + .dd-section {
	border-top: 1px solid var(--dd-line);
}

.dd-head {
	display: grid;
	align-content: start;
	gap: 1.25rem;
	min-width: 0;
}

.dd-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: clamp(2.5rem, 6vw, 6rem);
}

/* The invitation, set as a letter */

.dd-letter {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.dd-letter .dd-head {
	position: sticky;
	top: 6rem;
}

.dd-prose {
	display: grid;
	gap: 1.5rem;
	max-width: 38rem;
	font-size: 1.15rem;
	color: color-mix(in srgb, var(--dd-bone) 86%, var(--dd-smoke));
}

.dd-prose__open {
	font-family: var(--dd-display);
	font-size: var(--dd-step-2);
	font-weight: 500;
	line-height: 1.25;
	color: var(--dd-bone);
}

.dd-prose__open::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: 0.8;
	padding: 0.06em 0.12em 0 0;
	color: var(--dd-flame);
	font-weight: 400;
}

.dd-quote {
	margin-block: 1.5rem !important;
	padding: 2rem 0 2rem 1.75rem !important;
	border-left: 1px solid var(--dd-flame);
}

.dd-quote p {
	font-family: var(--dd-display);
	font-size: var(--dd-step-2);
	font-style: italic;
	line-height: 1.2;
	color: var(--dd-bone);
	text-wrap: balance;
}

.dd-prose__close {
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-style: italic;
	color: var(--dd-bone);
	padding-top: 0.5rem;
}

/* Duke's player card: standard trading-card proportions (63 × 88 mm), a chrome frame,
   and a holo foil that follows the pointer. */
.dd-card-stage {
	margin-top: 1.5rem;
	perspective: 1100px;
	max-width: 21rem;
}

.dd-card {
	--mx: 50%;
	--my: 30%;
	--foil: 0.22;
	position: relative;
	display: block;
	aspect-ratio: 63 / 88;
	border-radius: 18px;
	padding: 10px;
	background: linear-gradient(140deg, #dfe6ef 0%, #8fa3bd 22%, #f4f7fb 38%, #6f86a6 58%, #d6dfea 78%, #7b90ad 100%);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
	transform-style: preserve-3d;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 500ms ease;
	will-change: transform;
}

.dd-card.is-tilting {
	transition: transform 80ms linear;
	box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.8), 0 0 50px -10px color-mix(in srgb, var(--dd-jersey) 60%, transparent);
}

.dd-card__face {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto;
	gap: 0.45rem;
	height: 100%;
	padding: 0.7rem 0.75rem 0.6rem;
	border-radius: 10px;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--dd-jersey) 45%, transparent), transparent 55%),
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--dd-flame) 25%, transparent), transparent 50%),
		linear-gradient(180deg, #13223a, #0b111c);
	color: var(--dd-bone);
	/* the jersey's star finish */
	background-image:
		radial-gradient(circle at 30% 40%, rgba(214, 232, 250, 0.22) 0 0.7px, transparent 1.2px),
		radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--dd-jersey) 45%, transparent), transparent 55%),
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--dd-flame) 25%, transparent), transparent 50%),
		linear-gradient(180deg, #13223a, #0b111c);
	background-size: 18px 18px, auto, auto, auto;
}

.dd-card__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 0.5rem;
}

.dd-card__stage {
	grid-column: 1 / -1;
	font-family: var(--dd-mono);
	font-size: 0.55rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

.dd-card__name {
	font-family: var(--dd-display);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dd-card__no {
	font-family: var(--dd-display);
	font-size: 1.45rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	color: var(--dd-flame);
}

.dd-card__no small {
	margin-right: 0.15rem;
	font-family: var(--dd-mono);
	font-size: 0.55rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-card__art {
	position: relative;
	min-height: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--dd-ash);
	box-shadow: 0 0 0 2px #c7d3e2, 0 0 0 3px rgba(0, 0, 0, 0.4);
}

.dd-page .dd-card__art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 22%;
}

.dd-card__ability {
	display: grid;
	gap: 0.2rem;
	padding: 0.45rem 0 0.5rem 0.65rem;
	border-left: 2px solid var(--dd-flame);
	background: linear-gradient(to right, color-mix(in srgb, var(--dd-flame) 16%, transparent), transparent 85%);
}

.dd-card__ability-head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.dd-card__ability-head span {
	font-family: var(--dd-mono);
	font-size: 0.5rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dd-flame);
}

.dd-card__ability-head strong {
	font-family: var(--dd-display);
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--dd-flame);
}

.dd-card__ability-text {
	font-family: var(--dd-display);
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.25;
	color: var(--dd-bone);
}

.dd-card__moves {
	display: grid;
	gap: 0.3rem;
}

.dd-card__moves li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 0.5rem;
	align-items: baseline;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid rgba(214, 232, 250, 0.14);
}

.dd-card__moves strong {
	font-family: var(--dd-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
}

.dd-card__moves span {
	grid-column: 1;
	font-size: 0.68rem;
	line-height: 1.3;
	color: var(--dd-smoke);
}

.dd-card__moves b {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-family: var(--dd-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--dd-sky);
}

.dd-card__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	text-align: center;
}

.dd-card__stats div + div {
	border-left: 1px solid rgba(214, 232, 250, 0.14);
}

.dd-card__stats dt {
	font-family: var(--dd-mono);
	font-size: 0.48rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-card__stats dd {
	font-family: var(--dd-display);
	font-size: 0.85rem;
	font-weight: 600;
	font-style: italic;
}

.dd-card__flavor {
	font-family: var(--dd-display);
	font-style: italic;
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--dd-smoke);
}

.dd-card__set {
	font-family: var(--dd-mono);
	font-size: 0.48rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--dd-smoke) 70%, transparent);
}

/* The foil and the glare sit over the whole face and follow the pointer */
.dd-card__holo,
.dd-card__glare {
	position: absolute;
	inset: 10px;
	border-radius: 10px;
	pointer-events: none;
}

.dd-card__holo {
	opacity: var(--foil);
	mix-blend-mode: color-dodge;
	background:
		repeating-linear-gradient(115deg, rgba(255, 90, 90, 0.5) 0%, rgba(255, 220, 110, 0.5) 6%, rgba(120, 255, 190, 0.5) 12%, rgba(110, 190, 255, 0.5) 18%, rgba(210, 130, 255, 0.5) 24%, rgba(255, 90, 90, 0.5) 30%);
	background-size: 260% 260%;
	background-position: var(--mx) var(--my);
	transition: opacity 400ms ease;
}

.dd-card__glare {
	background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%);
	mix-blend-mode: overlay;
	opacity: 0;
	transition: opacity 400ms ease;
}

.dd-card.is-tilting .dd-card__glare {
	opacity: 1;
}

.dd-card.is-tilting {
	--foil: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
	/* At rest the foil drifts on its own, so it shimmers on phones too */
	.dd-card:not(.is-tilting) .dd-card__holo {
		animation: dd-foil 9s ease-in-out infinite alternate;
	}

	@keyframes dd-foil {
		from { background-position: 0% 0%; }
		to { background-position: 100% 100%; }
	}
}

/* The road to Worlds */

.dd-road {
	background: var(--dd-ash);
	border-block: 1px solid var(--dd-line);
}

.dd-road__in {
	display: grid;
	justify-items: center;
	gap: 1.4rem;
	padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
	text-align: center;
}

.dd-road .dd-body {
	max-width: 46ch;
}

.dd-road .dd-link {
	margin-top: 0.5rem;
}

.dd-road {
	position: relative;
	overflow: hidden;
}

/* The dragon's eye in its seal */

.dd-seal {
	--look-x: 0px;
	--look-y: 0px;
	position: relative;
	width: clamp(15rem, 40vw, 23rem);
	aspect-ratio: 1;
	margin-bottom: 0.25rem;
}

.dd-seal::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--dd-flame) 30%, transparent), color-mix(in srgb, var(--dd-flame) 8%, transparent) 55%, transparent);
	filter: blur(18px);
	opacity: 0.75;
	transition: opacity 600ms ease;
}

.dd-seal:hover::before,
.dd-seal.is-awake::before {
	opacity: 1;
}

.dd-seal__svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.dd-seal__hair {
	fill: none;
	stroke: color-mix(in srgb, var(--dd-jersey) 45%, transparent);
	stroke-width: 0.75;
}

.dd-seal__ticks line {
	stroke: color-mix(in srgb, var(--dd-sky) 50%, transparent);
	stroke-width: 0.75;
}

.dd-seal__text {
	font-family: var(--dd-mono);
	font-size: 9.5px;
	letter-spacing: 0.32em;
	fill: var(--dd-sky);
}

.dd-seal__ring,
.dd-eye__lid,
.dd-eye__pupil,
.dd-eye__look {
	transform-box: view-box;
	transform-origin: 150px 150px;
}

.dd-eye__fibers line {
	stroke: #3a0f0a;
	stroke-width: 0.6;
	opacity: 0.55;
}

.dd-eye__pupil {
	fill: #05080e;
	stroke: #ffb066;
	stroke-width: 0.6;
	stroke-opacity: 0.6;
}

.dd-eye__look {
	transform: translate(var(--look-x), var(--look-y));
	transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The mystery: at rest the eye lurks in shadow behind drifting smoke, breathing slowly.
   When the pointer comes close (or on a tap) it wakes: the shadow lifts and the pupil narrows. */
.dd-eye__veil {
	opacity: 0.9;
	transition: opacity 1200ms ease;
}

.dd-smoke {
	opacity: 0.65;
	transform-box: fill-box;
	transform-origin: center;
}

.dd-eye__pupil {
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dd-seal.is-focused .dd-eye__veil {
	animation: none;
	opacity: 0.12;
}

.dd-seal.is-focused .dd-smoke {
	opacity: 0.2;
}

.dd-seal.is-focused .dd-eye__pupil {
	animation: none;
	transform: scaleX(0.42);
}

.dd-seal.is-focused::before {
	opacity: 1;
	filter: blur(22px) saturate(1.3);
}

.dd-eye__line {
	fill: none;
	stroke: var(--dd-flame);
	stroke-width: 1.6;
}

.dd-eye__echo {
	fill: none;
	stroke: color-mix(in srgb, var(--dd-flame) 40%, transparent);
	stroke-width: 0.75;
}

@media (prefers-reduced-motion: no-preference) {
	.dd-seal__ring {
		animation: dd-spin 90s linear infinite;
	}

	.dd-eye__pupil {
		animation: dd-pupil 7s ease-in-out infinite;
	}

	.dd-seal.is-blinking .dd-eye__lid {
		animation: dd-blink 260ms ease-in-out;
	}

	/* The eye opens the first time it comes into view */
	.dd-seal.is-asleep .dd-eye__lid {
		transform: scaleY(0.04);
	}

	.dd-seal.is-awake .dd-eye__lid {
		transition: transform 900ms cubic-bezier(0.3, 0.8, 0.2, 1);
	}

	.dd-eye__veil {
		animation: dd-breathe 7s ease-in-out infinite;
	}

	.dd-smoke--a {
		animation: dd-drift-a 16s ease-in-out infinite alternate;
	}

	.dd-smoke--b {
		animation: dd-drift-b 21s ease-in-out infinite alternate;
	}

	.dd-smoke {
		transition: opacity 1200ms ease;
	}

	@keyframes dd-breathe {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}

	@keyframes dd-drift-a {
		from { transform: translateX(-40px); }
		to { transform: translateX(110px); }
	}

	@keyframes dd-drift-b {
		from { transform: translateX(50px); }
		to { transform: translateX(-120px); }
	}

	@keyframes dd-pupil {
		0%, 100% { transform: scaleX(1); }
		45% { transform: scaleX(0.55); }
		60% { transform: scaleX(1.25); }
	}

	@keyframes dd-blink {
		50% { transform: scaleY(0.05); }
	}
}

/* The moment: Duke at Worlds, framed like a ticket stub under the eye */
.dd-moment {
	display: grid;
	gap: 0.9rem;
	width: 100%;
	max-width: 46rem;
	margin-top: 1rem !important;
}

.dd-moment__frame {
	position: relative;
	aspect-ratio: 1600 / 1287;
	max-width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--dd-soot);
	box-shadow: 0 0 0 0.6rem var(--dd-ash), 0 0 0 calc(0.6rem + 1px) color-mix(in srgb, var(--dd-flame) 45%, transparent), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.dd-page .dd-moment__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.dd-moment figcaption {
	margin-top: 0.6rem;
	font-family: var(--dd-display);
	font-style: italic;
	font-size: var(--dd-step-1);
	color: var(--dd-smoke);
}

.dd-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

/* The route: Mérida to San Francisco */

.dd-route {
	display: grid;
	grid-template-columns: auto minmax(3rem, 9rem) auto;
	align-items: center;
	gap: 1.25rem;
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-route li {
	display: grid;
	gap: 0.2rem;
}

.dd-route span {
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dd-bone);
}

.dd-route .is-mark span {
	font-style: italic;
	color: var(--dd-flame);
}

.dd-route .dd-route__line {
	position: relative;
	height: 1px;
	background: linear-gradient(to right, var(--dd-line), var(--dd-flame));
}

.dd-route .dd-route__line::after {
	content: "";
	position: absolute;
	right: -3px;
	top: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dd-flame);
	box-shadow: 0 0 12px var(--dd-flame);
}

/* The soundtrack */

.dd-music__head {
	position: sticky;
	top: 6rem;
}

.dd-sleeve {
	margin-top: 1rem !important;
	max-width: 22rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--dd-ash);
	box-shadow: 0 0 0 1px var(--dd-line), 0 0 0 0.9rem var(--dd-soot), 0 0 0 calc(0.9rem + 1px) color-mix(in srgb, var(--dd-jersey) 55%, transparent);
}

.dd-sleeve img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	color: var(--dd-smoke);
	font-size: var(--dd-step--1);
}

/* While the song plays, the sleeve changes to that song's cover */
.dd-sleeve {
	position: relative;
}

.dd-sleeve__now {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 700ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dd-song-on .dd-sleeve__now {
	opacity: 1;
	transform: none;
}

@keyframes dd-spin {
	to { transform: rotate(360deg); }
}

.dd-tracks {
	border-top: 1px solid var(--dd-line);
	counter-reset: none;
}

.dd-tracks a {
	display: grid;
	grid-template-columns: 2.25rem 3.75rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--dd-line);
	transition: background-color 200ms ease;
}

.dd-tracks__no {
	font-family: var(--dd-mono);
	font-size: var(--dd-step--1);
	color: var(--dd-smoke);
	font-variant-numeric: tabular-nums;
}

.dd-tracks__art {
	width: 3.75rem;
	height: 3.75rem;
	object-fit: cover;
	border-radius: 3px;
	background: var(--dd-ash);
	color: transparent;
}

.dd-tracks__text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.dd-tracks__title {
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	line-height: 1.15;
	transition: color 200ms ease;
}

.dd-tracks__about {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--dd-smoke);
}

.dd-tracks__go {
	font-family: var(--dd-mono);
	color: var(--dd-smoke);
	transition: color 200ms ease, transform 200ms ease;
}

.dd-tracks a:hover .dd-tracks__title,
.dd-tracks a:hover .dd-tracks__go,
.dd-tracks a:hover .dd-tracks__no {
	color: var(--dd-flame);
}

.dd-tracks a:hover .dd-tracks__go {
	transform: translate(2px, -2px);
}

/* Sung in Spanish */

.dd-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	margin-block: 0.2rem 0.15rem;
	padding: 0.2rem 0.6rem 0.2rem 0.2rem;
	border: 1px solid color-mix(in srgb, var(--dd-flame) 50%, transparent);
	border-radius: 999px;
	font-family: var(--dd-display);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--dd-bone);
}

.dd-lang abbr {
	padding: 0.25rem 0.4rem;
	border-radius: 999px;
	background: var(--dd-flame);
	color: var(--dd-soot);
	font-family: var(--dd-mono);
	font-style: normal;
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
}

/* Now playing, on the player's own track */

.dd-now {
	display: none;
	align-items: flex-end;
	gap: 2px;
	justify-self: start;
	margin-top: 0.3rem;
	font-family: var(--dd-mono);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

.dd-now i {
	display: inline-block;
	width: 2px;
	height: 9px;
	border-radius: 1px;
	background: currentColor;
	transform-origin: bottom;
}

.dd-now i:nth-child(3) {
	margin-right: 0.5rem;
}

.dd-song-on .dd-tracks .is-player .dd-now {
	display: inline-flex;
}

.dd-song-on .dd-tracks .is-player a {
	background: linear-gradient(to right, color-mix(in srgb, var(--dd-jersey) 12%, transparent), transparent 70%);
}

.dd-song-on .dd-tracks .is-player .dd-tracks__art {
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--dd-jersey), 0 0 22px -4px var(--dd-jersey);
}

@media (prefers-reduced-motion: no-preference) {
	.dd-now i {
		animation: dd-eq 900ms ease-in-out infinite alternate;
	}

	.dd-now i:nth-child(2) { animation-delay: -300ms; }
	.dd-now i:nth-child(3) { animation-delay: -600ms; }

	.dd-song-on .dd-tracks .is-player .dd-tracks__art {
		animation: dd-spin 6s linear infinite;
	}

	@keyframes dd-eq {
		from { transform: scaleY(0.3); }
		to { transform: scaleY(1); }
	}
}

.dd-tracks__art {
	transition: border-radius 400ms ease;
}

/* More from the artist, and from the pack */

.dd-music__list {
	display: grid;
	gap: 2.5rem;
	min-width: 0;
}

.dd-more {
	display: grid;
	gap: 1rem;
}

.dd-more a {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: start;
	gap: 1.1rem;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid var(--dd-line);
	border-radius: 4px;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.dd-more a:hover {
	border-color: var(--dd-jersey);
	background: color-mix(in srgb, var(--dd-jersey) 6%, transparent);
}

.dd-more img {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 50%;
	background: var(--dd-ash);
	box-shadow: 0 0 0 1px var(--dd-line), 0 0 0 4px var(--dd-soot), 0 0 0 5px color-mix(in srgb, var(--dd-jersey) 40%, transparent);
	color: transparent;
}

.dd-more__text {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.dd-more__text .dd-label {
	font-size: 0.66rem;
}

.dd-more__title {
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	line-height: 1.15;
}

.dd-more__about {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--dd-smoke);
}

.dd-more .dd-link {
	justify-self: start;
	margin-top: 0.35rem;
}

/* The player: a small chrome record, bottom left */

.dd-player {
	position: fixed;
	left: max(16px, env(safe-area-inset-left, 0px));
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	z-index: 20;
}

.dd-player__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.45rem 1.1rem 0.45rem 0.45rem;
	border: 1px solid color-mix(in srgb, var(--dd-jersey) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dd-soot) 90%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 28px rgba(3, 6, 12, 0.55);
	color: var(--dd-bone);
	font: inherit;
	text-align: left;
	cursor: pointer;
	opacity: 0.88;
	transition: opacity 250ms ease, border-color 250ms ease;
}

.dd-player__btn:hover,
.dd-player.is-playing .dd-player__btn {
	opacity: 1;
	border-color: var(--dd-sky);
}

.dd-player__btn:focus-visible {
	outline: 1px solid var(--dd-sky);
	outline-offset: 3px;
}

.dd-player__disc {
	position: relative;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--dd-soot) 0 2.5px, var(--dd-flame) 3px 6px, transparent 6.5px),
		repeating-radial-gradient(circle, #1b2a40 0 1px, #0b111c 1px 2.5px);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--dd-sky) 60%, transparent);
}

.dd-player__disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 20%, rgba(214, 232, 250, 0.35) 25%, transparent 30% 70%, rgba(214, 232, 250, 0.25) 75%, transparent 80%);
}

.dd-player__text {
	display: grid;
	line-height: 1.2;
}

.dd-player__title {
	font-family: var(--dd-display);
	font-style: italic;
	font-size: 0.95rem;
	font-weight: 500;
}

.dd-player__state {
	font-family: var(--dd-mono);
	font-size: 0.58rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

@media (prefers-reduced-motion: no-preference) {
	.dd-player.is-playing .dd-player__disc {
		animation: dd-spin 2.4s linear infinite;
	}
}

/* The pack */

.dd-pack__side {
	display: grid;
	gap: 2.5rem;
	min-width: 0;
}

.dd-roster {
	border-top: 1px solid var(--dd-line);
}

.dd-roster li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--dd-line);
}

.dd-roster__no {
	font-family: var(--dd-display);
	font-style: italic;
	font-size: var(--dd-step-2);
	color: var(--dd-smoke);
	font-variant-numeric: tabular-nums;
}

.dd-roster li.is-here .dd-roster__no {
	color: var(--dd-sky);
}

.dd-roster__name {
	display: grid;
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	line-height: 1.2;
}

.dd-roster__name span {
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dd-smoke);
	padding-top: 0.3rem;
}

.dd-roster__here {
	font-family: var(--dd-display);
	font-style: italic;
	color: var(--dd-sky);
}

.dd-jersey {
	display: grid;
	gap: 0.6rem;
	padding: 1.75rem;
	border: 1px solid var(--dd-line);
	border-top-color: var(--dd-jersey);
	border-radius: 4px;
	padding-top: 2.25rem;
	text-align: center;
	justify-items: center;
	transition: border-color 200ms ease;
}

.dd-jersey:hover {
	border-color: var(--dd-jersey);
}

.dd-jersey.is-soon,
.dd-jersey.is-soon:hover {
	border-color: var(--dd-line);
	border-top-color: var(--dd-jersey);
}

.dd-jersey__soon {
	margin-top: 0.4rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--dd-jersey) 55%, transparent);
	border-radius: 999px;
	font-family: var(--dd-mono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dd-sky);
}

.dd-jersey__name {
	font-family: var(--dd-display);
	font-size: var(--dd-step-2);
	font-weight: 600;
	line-height: 1.1;
}

.dd-jersey__buy {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding-top: 0.5rem;
	font-family: var(--dd-mono);
	font-variant-numeric: tabular-nums;
}

/* Footer */

.dd-foot {
	border-top: 1px solid var(--dd-line);
}

.dd-foot__top {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 2rem clamp(2.5rem, 6vw, 6rem);
	align-items: end;
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 3rem;
}

.dd-foot__call {
	font-family: var(--dd-display);
	font-size: var(--dd-step-3);
	font-weight: 500;
	line-height: 1;
}

.dd-social {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--dd-line);
}

.dd-social a {
	display: grid;
	gap: 0.2rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--dd-line);
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	overflow-wrap: anywhere;
	transition: color 200ms ease;
}

.dd-social a span {
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dd-smoke);
}

.dd-social a:hover {
	color: var(--dd-sky);
}

.dd-foot__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem 2rem;
	padding-block: 2rem 3rem;
	border-top: 1px solid var(--dd-line);
}

.dd-foot__brand {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dd-foot__brand img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.dd-foot__brand p {
	display: grid;
	font-family: var(--dd-display);
	font-size: var(--dd-step-1);
	font-weight: 600;
	line-height: 1.15;
}

.dd-foot__brand span {
	font-style: italic;
	font-weight: 400;
	font-size: var(--dd-step-0);
	color: var(--dd-smoke);
}

.dd-foot__fine {
	font-family: var(--dd-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	color: var(--dd-smoke);
}

.dd-foot__fine a {
	color: var(--dd-bone);
	border-bottom: 1px solid var(--dd-line);
}

.dd-foot__fine a:hover {
	color: var(--dd-sky);
	border-color: var(--dd-jersey);
}

/* Entrance: the headline and the arch rise once, from a visible resting state */

@media (prefers-reduced-motion: no-preference) {
	.dd-hero__title,
	.dd-arch {
		animation: dd-rise 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.dd-arch {
		animation-delay: 160ms;
	}

	@keyframes dd-rise {
		from {
			opacity: 0.35;
			transform: translateY(14px);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-page * {
		transition: none !important;
	}
}

/* Six plates need room: three to a row below wide screens */

@media (max-width: 1180px) and (min-width: 961px) {
	.dd-record__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dd-record__list div {
		border-bottom: 1px solid var(--dd-line);
	}

	.dd-record__list div:nth-child(3n + 1) {
		border-left: 0;
		padding-left: 0;
	}

	.dd-record__list div:nth-last-child(-n+3) {
		border-bottom: 0;
	}
}

/* Narrow */

@media (max-width: 960px) {
	.dd-hero__in,
	.dd-split,
	.dd-letter,
	.dd-foot__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.dd-arch {
		justify-self: center;
		max-width: 22rem;
		margin-top: 1rem;
		padding-inline: 0.8rem;
	}

	.dd-letter .dd-head,
	.dd-music__head {
		position: static;
	}

	.dd-card-stage {
		justify-self: center;
		width: min(100%, 20rem);
	}

	.dd-sleeve {
		display: none;
	}

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

	.dd-record__list div,
	.dd-record__list div:first-child {
		border-left: 0;
		padding-left: 0;
		border-bottom: 1px solid var(--dd-line);
	}

	.dd-record__list div:nth-child(even) {
		padding-left: 1.25rem;
		border-left: 1px solid var(--dd-line);
	}

	.dd-record__list div:nth-last-child(-n+2) {
		border-bottom: 0;
	}
}

@media (max-width: 782px) {
	body.admin-bar .dd-bar {
		top: 46px;
	}
}

@media (max-width: 640px) {
	.dd-nav {
		gap: 0.5rem 1.25rem;
	}

	.dd-tracks a {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 1rem;
	}

	.dd-tracks__no,
	.dd-tracks__go {
		display: none;
	}

	.dd-tracks__art {
		width: 3.25rem;
		height: 3.25rem;
	}

	.dd-roster li {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.dd-roster li > :last-child {
		grid-column: 2;
		justify-self: start;
	}

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

	.dd-more a {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		padding: 1.1rem;
	}

	.dd-more img {
		width: 3.5rem;
		height: 3.5rem;
	}

	.dd-route {
		gap: 0.9rem;
	}

	.dd-foot {
		padding-bottom: 4.5rem;
	}
}

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