/* ---------------------------------------------------------------------------
   Daniel Cross — author landing. MVP: desktop layout only, no mobile pass.
   --------------------------------------------------------------------------- */

/* ===== Base ============================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100%;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 20px;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: var(--c-red);
	text-decoration: none;
}
a:hover {
	color: var(--c-red-light);
}

:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: rgba(230, 53, 43, 0.35);
	color: #fff;
}
input::placeholder {
	color: var(--c-text-dim);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition-duration: 0.001s !important;
		animation-duration: 0.001s !important;
	}
}

/* ===== Helpers =========================================================== */

.mp-overline {
	font-family: var(--font-core);
	font-weight: 700;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.dc-container {
	max-width: var(--mp-container);
	margin: 0 auto;
}

.dc-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The sticky header must not sit on top of an anchored section. */
#main,
#timeline,
#why,
#books,
#contact {
	scroll-margin-top: calc(var(--mp-header-h) + 20px);
}

/* ===== Header ============================================================ */

.dc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: linear-gradient(180deg, rgba(13, 17, 23, 0.92) 0%, rgba(13, 17, 23, 0.72) 100%);
	box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.06);
}

.dc-header__inner {
	max-width: var(--mp-container);
	margin: 0 auto;
	min-height: var(--mp-header-h);
	padding: 10px var(--mp-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.dc-logo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #fff;
	font: 900 15px/1 var(--font-core);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.dc-logo:hover {
	color: #fff;
}
.dc-logo b {
	font-weight: 900;
	color: var(--c-red);
}

.dc-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	font: 600 12px/1 var(--font-core);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.dc-nav a {
	color: var(--c-text-muted);
}
.dc-nav a:hover {
	color: #fff;
}

/* Burger — hidden until the mobile breakpoint takes over the nav. */
.dc-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--c-text-soft);
	cursor: pointer;
}
.dc-burger:hover {
	color: #fff;
}
.dc-burger.is-active {
	color: #fff;
}

.dc-burger__box {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}
.dc-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		top var(--mp-duration-fast) var(--mp-ease),
		transform var(--mp-duration-fast) var(--mp-ease),
		opacity var(--mp-duration-instant, 0.1s) var(--mp-ease);
}
.dc-burger__box span:nth-child(1) {
	top: 0;
}
.dc-burger__box span:nth-child(2) {
	top: 7px;
}
.dc-burger__box span:nth-child(3) {
	top: 14px;
}

.dc-burger.is-active .dc-burger__box span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}
.dc-burger.is-active .dc-burger__box span:nth-child(2) {
	opacity: 0;
}
.dc-burger.is-active .dc-burger__box span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* ===== Sections ========================================================== */

.dc-section {
	padding: 88px var(--mp-gutter);
}
.dc-section--base {
	background: var(--c-bg);
}
.dc-section--alt {
	background: var(--c-bg-alt);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

.dc-eyebrow {
	color: var(--c-red);
	margin: 0 0 12px;
}

.dc-h2 {
	margin: 0 0 12px;
	font-family: var(--font-core);
	font-weight: 800;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: #fff;
}

.dc-h2--spaced {
	margin-bottom: 48px;
}

.dc-section__lede {
	margin: 0 0 56px;
	max-width: 62ch;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text-muted);
}

/* ===== Hero ============================================================== */

.dc-hero {
	position: relative;
	padding: 96px var(--mp-gutter) 88px;
	overflow: hidden;
}

.dc-hero__glow,
.dc-hero__mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dc-hero__glow {
	background:
		radial-gradient(
			760px 520px at 78% 8%,
			rgba(230, 53, 43, 0.28) 0%,
			rgba(230, 53, 43, 0.06) 45%,
			rgba(0, 0, 0, 0) 100%
		),
		radial-gradient(700px 600px at 2% 100%, rgba(26, 93, 206, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.dc-hero__mesh {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%);
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%);
}

.dc-hero__inner {
	position: relative;
	max-width: var(--mp-container);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: center;
}

.dc-hero__copy {
	flex: 1 1 460px;
	min-width: 0;
}
.dc-hero__eyebrow {
	color: var(--c-red);
	margin: 0 0 24px;
}

.dc-hero h1 {
	margin: 0;
	font-family: var(--font-core);
	font-weight: 900;
	font-size: clamp(40px, 5.2vw, 72px);
	line-height: 1.02;
	letter-spacing: -1.5px;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 0 42px rgba(230, 53, 43, 0.35);
}

.dc-hero__lede {
	margin: 28px 0 0;
	max-width: 60ch;
	font-size: 20px;
	line-height: 32px;
	color: var(--c-text-soft);
	text-wrap: pretty;
}
.dc-hero__lede strong {
	color: #fff;
	font-weight: 600;
}

.dc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

/* ===== Buttons =========================================================== */

.dc-btn {
	display: inline-flex;
	align-items: center;
	height: var(--mp-control-h-l);
	padding: 0 28px;
	border: 0;
	border-radius: 9999px;
	font: 700 12px/1 var(--font-core);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.dc-btn--red {
	background: var(--grad-red);
	color: #fff;
	transition:
		box-shadow var(--mp-duration-fast) var(--mp-ease),
		filter var(--mp-duration-fast) var(--mp-ease);
}
.dc-btn--red:hover {
	box-shadow: 0 0 28px rgba(230, 53, 43, 0.5);
	filter: brightness(1.08);
	color: #fff;
}

.dc-btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
	color: var(--c-text);
	transition: box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.dc-btn--ghost:hover {
	box-shadow: inset 0 0 0 2px rgba(230, 53, 43, 0.9);
	color: #fff;
}

/* ===== Portrait ========================================================== */

.dc-portrait {
	position: relative;
	margin: 0;
	flex: 1 1 300px;
	max-width: 420px;
	min-width: 0;
}

.dc-portrait__glow {
	position: absolute;
	inset: -18px;
	border-radius: 20px;
	background: radial-gradient(60% 60% at 70% 10%, rgba(230, 53, 43, 0.35), rgba(0, 0, 0, 0) 70%);
	filter: blur(24px);
}

.dc-portrait__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--c-field);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		0 24px 60px rgba(0, 0, 0, 0.55);
}
.dc-portrait__frame img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-portrait figcaption {
	margin-top: 14px;
	font-size: 12px;
	line-height: 16px;
	color: var(--c-text-dim);
}

/* Fallback shown behind the <img> until a real asset is dropped in. */
.dc-slot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font: 600 12px/18px var(--font-core);
	letter-spacing: 0.4px;
	color: var(--c-text-faint);
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 10px, transparent 10px 20px), var(--c-field);
}

/* ===== Timeline ========================================================== */

/* --dc-track-top / --dc-track-h are measured in JS (first dot centre → last dot
   centre); --dc-progress is the 0…1 scroll position along that span. */
.dc-timeline-wrap {
	position: relative;
	--dc-rail-w: 56px;
	--dc-dot: 14px;
	--dc-lift: 24px;
}

.dc-timeline__track {
	position: absolute;
	left: calc(var(--dc-rail-w) / 2);
	/* Without JS the fallbacks stretch the rail across the whole list. */
	top: var(--dc-track-top, calc(var(--dc-dot) / 2));
	bottom: calc(var(--dc-dot) / 2);
	height: var(--dc-track-h, auto);
	width: 2px;
	transform: translateX(-50%);
	border-radius: 2px;
	background: rgba(230, 53, 43, 0.16);
	overflow: hidden;
}

.dc-timeline__progress {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(230, 53, 43, 0.95), rgba(230, 53, 43, 0.5));
	box-shadow: 0 0 12px rgba(230, 53, 43, 0.6);
	transition: height 0.15s linear;
}
.has-js .dc-timeline__progress {
	height: calc(var(--dc-progress, 0) * 100%);
}

.dc-timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.dc-timeline-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	padding-bottom: 40px;
}
.dc-timeline-item:last-child {
	padding-bottom: 0;
}

.dc-timeline__rail {
	position: relative;
	flex: 0 0 auto;
	width: var(--dc-rail-w);
	display: flex;
	justify-content: center;
}

.dc-timeline__dot {
	position: relative;
	z-index: 1;
	width: var(--dc-dot);
	height: var(--dc-dot);
	margin-top: 6px;
	border-radius: 9999px;
	background: var(--c-red);
	box-shadow:
		0 0 0 4px rgba(230, 53, 43, 0.16),
		0 0 18px rgba(230, 53, 43, 0.7);
	transition:
		background var(--mp-duration-normal) var(--mp-ease),
		box-shadow var(--mp-duration-normal) var(--mp-ease);
	transition-delay: var(--dc-delay, 0ms);
}

/* With JS the steps sit dim until the progress line arrives, then stay lit. */
.has-js .dc-timeline__dot {
	background: var(--c-bg-alt);
	box-shadow: inset 0 0 0 2px rgba(230, 53, 43, 0.4);
}
.has-js .dc-timeline-item.is-reached .dc-timeline__dot {
	background: var(--c-red);
	box-shadow:
		0 0 0 4px rgba(230, 53, 43, 0.16),
		0 0 18px rgba(230, 53, 43, 0.7);
}

/* The copy comes up off the back of the dot igniting, so it trails the dot's own
   delay. The rail is deliberately left out of the lift, which keeps the dots
   centred on the track while the copy floats up. */
.has-js .dc-timeline__body,
.has-js .dc-timeline__meta {
	opacity: 0;
	transform: translateY(var(--dc-lift));
	transition:
		opacity 0.55s var(--mp-ease),
		transform 0.55s var(--mp-ease);
	transition-delay: calc(var(--dc-delay, 0ms) + 130ms);
}
.has-js .dc-timeline__meta {
	transition-delay: calc(var(--dc-delay, 0ms) + 200ms);
}

.has-js .dc-timeline-item.is-visible .dc-timeline__body,
.has-js .dc-timeline-item.is-visible .dc-timeline__meta {
	opacity: 1;
	transform: none;
}

.dc-timeline__body {
	flex: 1 1 400px;
	min-width: 0;
}
.dc-timeline__body h3 {
	margin: 0 0 8px;
	font: 600 20px/28px var(--font-core);
	color: #fff;
}
.dc-timeline__body p {
	margin: 0;
	max-width: 70ch;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text-muted);
	text-wrap: pretty;
}

.dc-timeline__meta {
	flex: 0 1 176px;
	min-width: 0;
	margin-left: auto;
	padding-top: 2px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: right;
}
.dc-timeline__meta p {
	margin: 0;
}
.dc-timeline__meta .mp-overline {
	color: var(--c-red);
}
.dc-timeline__meta .dc-timeline__tag {
	font: 600 13px/18px var(--font-core);
	color: var(--c-text-dim);
}

/* ===== Why =============================================================== */

.dc-why {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}
.dc-why__head {
	flex: 1 1 300px;
	min-width: 0;
}
.dc-why__head .dc-h2 {
	margin: 0;
	text-wrap: balance;
}
.dc-why__body {
	flex: 2 1 460px;
	min-width: 0;
}

.dc-prose {
	font-size: 18px;
	line-height: 30px;
	color: var(--c-text-soft);
	text-wrap: pretty;
}
.dc-prose p {
	margin: 0 0 20px;
}
.dc-prose p:last-child {
	margin: 0;
}

.dc-signoff {
	margin: 28px 0 0;
	font-family: var(--font-core);
	font-style: italic;
	font-size: 16px;
	color: var(--c-text-dim);
}

/* ===== Books ============================================================= */

.dc-books {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
	gap: 32px;
}

.dc-book {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	padding: 28px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.09),
		0 10px 30px rgba(0, 0, 0, 0.25);
	transition: box-shadow var(--mp-duration-normal) var(--mp-ease);
}
.dc-book--lime:hover {
	box-shadow:
		inset 0 0 0 1px rgba(198, 228, 43, 0.45),
		0 18px 44px rgba(0, 0, 0, 0.45);
}
.dc-book--red:hover {
	box-shadow:
		inset 0 0 0 1px rgba(230, 53, 43, 0.4),
		0 18px 44px rgba(0, 0, 0, 0.45);
}

.dc-book__cover {
	position: relative;
	flex: 0 1 200px;
	max-width: 200px;
	min-width: 150px;
	aspect-ratio: 2 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: var(--c-field);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.dc-book__cover img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-book__body {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dc-book__kicker {
	margin: 0 0 8px;
}
.dc-book--lime .dc-book__kicker {
	color: var(--c-lime);
}
.dc-book--red .dc-book__kicker {
	color: var(--c-red);
}

.dc-book__body h3 {
	margin: 0 0 16px;
	font: 800 26px/32px var(--font-core);
	color: #fff;
}

.dc-book__points {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 15px;
	line-height: 23px;
	color: var(--c-text-muted);
}
.dc-book__points li {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 10px;
}
.dc-book__points .dot {
	font-weight: 700;
}
.dc-book--lime .dc-book__points .dot {
	color: var(--c-lime);
}
.dc-book--red .dc-book__points .dot {
	color: var(--c-red);
}

.dc-book__foot {
	margin-top: auto;
}
.dc-book__note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--c-text-dim);
}

/* CTA with the icon that slides out on hover/focus */
.dc-cta {
	display: inline-grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	height: var(--mp-control-h-l);
	padding: 0 26px;
	overflow: hidden;
	border-radius: 9999px;
	font: 700 12px/1 var(--font-core);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: box-shadow var(--mp-duration-normal) var(--mp-ease);
}
.dc-cta--lime {
	background: var(--grad-lime);
	color: #141a21;
}
.dc-cta--lime:hover,
.dc-cta--lime:focus-visible {
	box-shadow: 0 0 26px rgba(198, 228, 43, 0.4);
	color: #141a21;
}
.dc-cta--red {
	background: var(--grad-red);
	color: #fff;
}
.dc-cta--red:hover,
.dc-cta--red:focus-visible {
	box-shadow: 0 0 26px rgba(230, 53, 43, 0.45);
	color: #fff;
}

.dc-cta__reveal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	width: 0;
	opacity: 0;
	padding-left: 0;
	margin-left: 0;
	transition:
		width var(--mp-duration-normal) var(--mp-ease),
		opacity var(--mp-duration-normal) var(--mp-ease),
		padding-left var(--mp-duration-normal) var(--mp-ease),
		margin-left var(--mp-duration-normal) var(--mp-ease);
}
.dc-cta__reveal svg {
	flex: 0 0 auto;
}
.dc-cta--lime .dc-cta__reveal {
	box-shadow: inset 1px 0 0 0 rgba(20, 26, 33, 0.3);
}
.dc-cta--red .dc-cta__reveal {
	box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.28);
}

.dc-cta:hover .dc-cta__reveal,
.dc-cta:focus-visible .dc-cta__reveal {
	width: 70px;
	opacity: 1;
	padding-left: 14px;
	margin-left: 14px;
}

/* Touch has no hover to open the reveal with, so the CTA ships in its full
   state there. The width condition covers a narrow window on a mouse machine. */
@media (hover: none), (max-width: 767px) {
	.dc-cta__reveal {
		width: 70px;
		opacity: 1;
		padding-left: 14px;
		margin-left: 14px;
	}
	.dc-cta--lime {
		box-shadow: 0 0 26px rgba(198, 228, 43, 0.4);
	}
	.dc-cta--red {
		box-shadow: 0 0 26px rgba(230, 53, 43, 0.45);
	}
}

/* ===== Quotes ============================================================ */

.dc-quotes {
	position: relative;
	padding: 88px var(--mp-gutter);
	background: var(--c-bg);
	overflow: hidden;
}
.dc-quotes__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(600px 400px at 50% 0%, rgba(230, 53, 43, 0.14), rgba(0, 0, 0, 0) 70%);
}
.dc-quotes__inner {
	position: relative;
}
.dc-quotes__title {
	color: var(--c-red);
	margin: 0 0 40px;
}

.dc-quotes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.dc-quote {
	margin: 0;
	padding: 32px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dc-quote blockquote {
	margin: 0;
	font-family: var(--font-core);
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;
	color: #fff;
	text-wrap: pretty;
}
.dc-quote figcaption {
	margin-top: 20px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.dc-quote--house figcaption {
	color: var(--c-red-light);
}
.dc-quote--sharp figcaption {
	color: var(--c-lime);
}

.dc-quotes__note {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--c-text-faint);
}

/* ===== Credibility ======================================================= */

.dc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 12px;
}

.dc-card {
	padding: 32px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.dc-card h3 {
	margin: 0 0 10px;
	font: 600 17px/24px var(--font-core);
	color: #fff;
}
.dc-card p {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--c-text-muted);
}

/* ===== Contact =========================================================== */

.dc-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 64px;
	align-items: start;
}

.dc-contact__title {
	margin: 0 0 14px;
	font-family: var(--font-core);
	font-weight: 800;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: #fff;
}

.dc-contact__lede {
	margin: 0 0 28px;
	max-width: 52ch;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text-muted);
}

.dc-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 520px;
}

.dc-input {
	flex: 1 1 240px;
	height: var(--mp-control-h-l);
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--c-field);
	color: var(--c-text);
	font: 400 16px/24px var(--font-ui);
	box-shadow: inset 0 0 0 1px var(--c-border);
	transition: box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.dc-input:focus {
	box-shadow: inset 0 0 0 2px var(--c-blue);
	outline: none;
}

.dc-form__status {
	margin: 14px 0 0;
	min-height: 20px;
	font-size: 14px;
	line-height: 20px;
	color: var(--c-green);
}

.dc-links__title {
	color: var(--c-text-dim);
	margin: 0 0 20px;
}

.dc-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.dc-links a {
	display: inline-flex;
	align-items: center;
	height: var(--mp-control-h-s);
	padding: 0 20px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	color: var(--c-text-soft);
	font: 600 13px/1 var(--font-core);
	transition:
		box-shadow var(--mp-duration-fast) var(--mp-ease),
		color var(--mp-duration-fast) var(--mp-ease);
}
.dc-links a:hover {
	box-shadow: inset 0 0 0 1px rgba(230, 53, 43, 0.6);
	color: #fff;
}

.dc-contact__note {
	margin: 20px 0 0;
	max-width: 44ch;
	font-size: 14px;
	line-height: 22px;
	color: var(--c-text-dim);
}

/* ===== Footer ============================================================ */

.dc-footer {
	padding: 56px var(--mp-gutter) 72px;
	background: var(--c-bg-alt);
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}

.dc-rg {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 28px;
	border-radius: 16px;
	background: rgba(230, 53, 43, 0.06);
	box-shadow: inset 0 0 0 1px rgba(230, 53, 43, 0.28);
}

.dc-rg__badge {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 2px var(--c-red);
	color: var(--c-red);
	font: 700 20px/1 var(--font-core);
}

.dc-rg__body {
	flex: 1 1 320px;
	min-width: 0;
}
.dc-rg__body h2 {
	margin: 0 0 12px;
	font: 700 18px/24px var(--font-core);
	color: #fff;
}
.dc-rg__body p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 22px;
	color: var(--c-text-muted);
	text-wrap: pretty;
}
.dc-rg__body p:last-child {
	margin: 0;
}

.dc-colophon {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-text-faint);
}
.dc-colophon p {
	margin: 0;
}

/* ===== Responsive ========================================================
   Desktop is the base above; everything below only scales it down.
   1024 → tablet, 900 → hero stacks, 767 → phone (burger nav), 560/360 → tight.
   ========================================================================= */

/* ---- tablet ---- */
@media (max-width: 1024px) {
	.dc-section {
		padding: 72px var(--mp-gutter);
	}
	.dc-hero {
		padding: 72px var(--mp-gutter) 64px;
	}
	.dc-quotes {
		padding: 72px var(--mp-gutter);
	}
	.dc-footer {
		padding: 48px var(--mp-gutter) 56px;
	}

	.dc-hero__inner {
		gap: 44px;
	}
	.dc-hero__lede {
		font-size: 18px;
		line-height: 30px;
	}

	.dc-section__lede {
		margin-bottom: 40px;
	}
	.dc-h2--spaced {
		margin-bottom: 36px;
	}
	.dc-quotes__title {
		margin-bottom: 32px;
	}

	.dc-why {
		gap: 32px;
	}
	.dc-contact {
		gap: 44px;
	}
	.dc-books {
		gap: 24px;
	}
}

/* ---- hero stops fitting two columns ---- */
@media (max-width: 900px) {
	.dc-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
	.dc-hero__copy {
		flex: 0 0 auto;
		width: 100%;
	}
	.dc-portrait {
		flex: 0 0 auto;
		width: 100%;
		max-width: 380px;
		align-self: center;
	}
}

/* ---- phone ---- */
@media (max-width: 767px) {
	:root {
		--mp-gutter: 16px;
		--mp-header-h: 56px;
	}

	.dc-section {
		padding: 56px var(--mp-gutter);
	}
	.dc-hero {
		padding: 44px var(--mp-gutter) 52px;
	}
	.dc-quotes {
		padding: 56px var(--mp-gutter);
	}
	.dc-footer {
		padding: 40px var(--mp-gutter) 48px;
	}

	/* header — the nav becomes a panel under the bar */
	.dc-header__inner {
		flex-wrap: nowrap;
		gap: 16px;
		min-height: var(--mp-header-h);
		padding: 6px var(--mp-gutter);
	}
	.dc-burger {
		display: inline-flex;
	}

	.dc-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		padding: 4px var(--mp-gutter) 16px;
		background: var(--c-bg-alt);
		box-shadow:
			inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
			0 22px 40px rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition:
			opacity var(--mp-duration-normal) var(--mp-ease),
			transform var(--mp-duration-normal) var(--mp-ease),
			visibility var(--mp-duration-normal) var(--mp-ease);
	}
	.dc-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.dc-nav a {
		padding: 15px 2px;
		font-size: 13px;
		color: var(--c-text-soft);
		box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.06);
	}
	.dc-nav a:last-child {
		box-shadow: none;
	}

	/* hero */
	.dc-hero__inner {
		gap: 32px;
	}
	.dc-hero__eyebrow {
		margin-bottom: 16px;
		font-size: 10px;
	}
	.dc-hero h1 {
		font-size: clamp(30px, 8.6vw, 44px);
		letter-spacing: -1px;
	}
	.dc-hero__lede {
		margin-top: 20px;
		font-size: 16px;
		line-height: 27px;
	}
	.dc-hero__actions {
		margin-top: 28px;
		gap: 10px;
	}
	.dc-hero__actions .dc-btn {
		flex: 1 1 180px;
		justify-content: center;
	}
	.dc-portrait {
		max-width: 100%;
	}
	.dc-portrait__frame {
		border-radius: 14px;
	}

	.dc-btn {
		height: 48px;
		padding: 0 22px;
	}

	/* headings */
	.dc-h2 {
		font-size: clamp(24px, 6.4vw, 30px);
		letter-spacing: -0.3px;
	}
	.dc-section__lede {
		margin-bottom: 32px;
		font-size: 15px;
		line-height: 24px;
	}
	.dc-h2--spaced {
		margin-bottom: 26px;
	}

	/* timeline — rail on the left, step label above the copy */
	.dc-timeline-wrap {
		--dc-rail-w: 28px;
		--dc-lift: 18px;
	}
	.dc-timeline-item {
		display: grid;
		grid-template-columns: var(--dc-rail-w) minmax(0, 1fr);
		grid-template-areas:
			'rail meta'
			'rail body';
		gap: 6px 10px;
		padding-bottom: 30px;
	}
	.dc-timeline__rail {
		grid-area: rail;
	}
	.dc-timeline__dot {
		margin-top: 1px;
	}
	.dc-timeline__meta {
		grid-area: meta;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 8px;
		margin: 0;
		padding-top: 0;
		text-align: left;
	}
	.dc-timeline__body {
		grid-area: body;
	}
	.dc-timeline__body h3 {
		font-size: 18px;
		line-height: 25px;
	}
	.dc-timeline__body p {
		font-size: 15px;
		line-height: 24px;
	}

	/* why */
	.dc-why {
		gap: 24px;
	}
	.dc-prose {
		font-size: 16px;
		line-height: 27px;
	}
	.dc-prose p {
		margin-bottom: 16px;
	}
	.dc-signoff {
		margin-top: 20px;
	}

	/* books */
	.dc-books {
		gap: 16px;
	}
	.dc-book {
		padding: 20px;
		gap: 18px;
		border-radius: 14px;
	}
	.dc-book__cover {
		flex: 0 1 150px;
		max-width: 150px;
		min-width: 0;
	}
	.dc-book__body {
		flex: 1 1 220px;
	}
	.dc-book__body h3 {
		margin-bottom: 14px;
		font-size: 22px;
		line-height: 28px;
	}
	.dc-book__points {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 22px;
	}
	.dc-book__foot {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.dc-cta {
		height: 48px;
		padding: 0 22px;
	}

	/* quotes */
	.dc-quotes__title {
		margin-bottom: 24px;
	}
	.dc-quotes__grid {
		gap: 14px;
	}
	.dc-quote {
		padding: 24px;
	}
	.dc-quote blockquote {
		font-size: 19px;
		line-height: 28px;
	}

	/* credibility */
	.dc-cards {
		gap: 10px;
	}
	.dc-card {
		padding: 22px;
	}

	/* contact */
	.dc-contact {
		gap: 20px;
	}
	.dc-form {
		max-width: none;
	}
	.dc-input {
		flex: 1 1 100%;
	}
	.dc-form .dc-btn {
		width: 100%;
		justify-content: center;
	}
	.dc-links a {
		height: 40px;
		padding: 0 16px;
		font-size: 12px;
	}

	/* footer */
	.dc-rg {
		padding: 20px;
		gap: 16px;
		border-radius: 14px;
	}
	.dc-rg__badge {
		width: 52px;
		height: 52px;
		font-size: 17px;
	}
	.dc-colophon {
		margin-top: 28px;
		gap: 6px;
	}
}

/* ---- book card: the bullets stop fitting beside the cover ----
   Keep the cover and the title paired on one row so the top-right does not go
   hollow, and drop the bullets and the CTA to the card's full width. */
@media (max-width: 560px) {
	.dc-book {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		grid-template-areas:
			'cover head'
			'points points'
			'foot foot';
		align-items: start;
		gap: 20px 16px;
	}
	.dc-book__cover {
		grid-area: cover;
		flex: none;
		width: 128px;
		min-width: 0;
		max-width: none;
	}
	/* Lets head / points / foot sit on the card grid directly. */
	.dc-book__body {
		display: contents;
	}
	.dc-book__head {
		grid-area: head;
		align-self: center;
	}
	.dc-book__body h3 {
		margin-bottom: 0;
	}
	.dc-book__points {
		grid-area: points;
		margin: 0;
	}
	.dc-book__foot {
		grid-area: foot;
		margin-top: 0;
	}
}

/* ---- small phones (360 and under; 375/390 keep the 16px gutter) ---- */
@media (max-width: 360px) {
	:root {
		--mp-gutter: 14px;
	}

	.dc-hero h1 {
		font-size: clamp(28px, 9vw, 36px);
	}
	.dc-book {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 16px 14px;
	}
	.dc-book__cover {
		width: 108px;
	}
	.dc-timeline__meta {
		gap: 2px 6px;
	}
	.dc-quote {
		padding: 20px;
	}
	.dc-quote blockquote {
		font-size: 18px;
		line-height: 26px;
	}
	.dc-card {
		padding: 20px;
	}
	.dc-rg__body p {
		font-size: 13px;
		line-height: 21px;
	}
}

/* Reveal offsets are motion; drop them last so they beat the rules above. */
@media (prefers-reduced-motion: reduce) {
	.has-js .dc-timeline__body,
	.has-js .dc-timeline__meta {
		opacity: 1;
		transform: none;
	}
	.dc-timeline__progress {
		transition: none;
	}
}