/**
 * Belaya Doroga case — travel log / kilometer posts / photo album.
 * Not a generic hero-swatches-phone landing.
 *
 * @package SunnyAgency
 */

:root {
	--bd-night: #111111;
	--bd-ink: #222222;
	--bd-mute: #555555;
	--bd-gold: #c99e66;
	--bd-gold-deep: #b0884f;
	--bd-paper: #f3f0eb;
	--bd-snow: #f7f5f2;
	--bd-sheet: #ffffff;
	--bd-line: #e8e4de;
	--bd-serif: "AA Stetica", Georgia, "Times New Roman", serif;
	--bd-sans: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bd-max: 1060px;
	--bd-pad: clamp(20px, 4vw, 30px);
	--bd-section: clamp(48px, 7vw, 88px);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

body.bd-log {
	margin: 0;
	color: var(--bd-mute);
	background: var(--bd-paper);
	font-family: var(--bd-sans);
	font-size: 16px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
}

.bd-log img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bd-log a {
	color: inherit;
}

.bd-log a:focus-visible,
.bd-log .all-cases:focus-visible {
	outline: 3px solid var(--bd-gold);
	outline-offset: 3px;
}

.bd-log h1,
.bd-log h2,
.bd-log h3 {
	margin: 0;
	color: var(--bd-ink);
	font-family: var(--bd-serif);
	font-weight: 400;
	letter-spacing: 0;
	text-wrap: balance;
}

.bd-log h1 {
	font-size: clamp(36px, 4.6vw, 52px);
	line-height: 1.15;
}

.bd-log h2 {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.2;
}

.bd-log h3 {
	font-size: 26px;
	line-height: 1.3;
}

:where(.bd-log) p {
	margin: 0;
}

:is(.bd-pass, .bd-sheet, .bd-night, .bd-trail, .bd-pocket, .bd-endpaper) :is(h1, h2, h3) + p {
	margin-top: 16px;
}

.bd-wrap {
	width: min(var(--bd-max), calc(100% - var(--bd-pad) * 2));
	margin-inline: auto;
}

.bd-km,
.bd-coords,
.bd-route__label,
.bd-stop__num,
.bd-type__sans,
.bd-print__km,
.bd-pass__scale,
.bd-endpaper dt,
.bd-phone figcaption {
	line-height: 1.2;
}

.bd-km {
	margin: 0 0 8px;
	color: var(--bd-gold-deep);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bd-km--light {
	color: var(--bd-gold);
}

.bd-lede {
	max-width: 40rem;
	color: var(--bd-mute);
	font-size: 16px;
	line-height: 26px;
}

.bd-lede--light {
	color: rgba(255, 255, 255, 0.72);
}

.all-cases {
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 120;
	top: 20px;
	right: -300px;
	height: 52px;
	color: #fff !important;
	font-size: 14px;
	text-decoration: none !important;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
	transition: right 0.5s ease-in-out;
}

.all-cases:hover,
.all-cases:focus,
.all-cases span {
	color: #fff !important;
	text-decoration: none !important;
}

.all-cases.active {
	right: 20px;
}

/* Photo album print ------------------------------------------------------- */

.bd-print {
	position: relative;
	margin: 0;
}

.bd-print__km {
	position: absolute;
	z-index: 3;
	top: -10px;
	left: -8px;
	padding: 6px 10px;
	background: var(--bd-night);
	color: var(--bd-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bd-print__sheet {
	position: relative;
	padding: 15px;
	box-shadow:
		0 1px 0 rgba(17, 17, 17, 0.04),
		0 18px 40px rgba(17, 17, 17, 0.12);
}

.bd-print__sheet img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}

.bd-print--hero .bd-print__sheet img {
	aspect-ratio: 16 / 10;
}

.bd-print--tall .bd-print__sheet img {
	aspect-ratio: 10 / 11;
}

.bd-print--wide .bd-print__sheet img {
	aspect-ratio: 1000 / 370;
}

.bd-print__corner {
	position: absolute;
	z-index: 2;
	width: 22px;
	height: 22px;
	border-color: var(--bd-gold);
	border-style: solid;
	border-width: 0;
	pointer-events: none;
}

.bd-print__corner--tl {
	top: 10px;
	left: 10px;
	border-top-width: 2px;
	border-left-width: 2px;
}

.bd-print__corner--tr {
	top: 10px;
	right: 10px;
	border-top-width: 2px;
	border-right-width: 2px;
}

.bd-print__corner--bl {
	bottom: 10px;
	left: 10px;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.bd-print__corner--br {
	right: 10px;
	bottom: 10px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}

.bd-print figcaption {
	margin-top: 16px;
	color: var(--bd-mute);
	font-family: var(--bd-serif);
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
}

/* Hero / mountain pass ---------------------------------------------------- */

.bd-pass {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 8vh, 96px) 0 40px;
	background: var(--bd-night);
	color: #fff;
}

.bd-pass__topo {
	position: absolute;
	inset: -10% -5% auto;
	width: 120%;
	height: 80%;
	pointer-events: none;
	stroke: rgba(201, 158, 102, 0.16);
	stroke-width: 1.2;
	fill: none;
}

.bd-pass__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	width: min(1240px, calc(100% - var(--bd-pad) * 2));
	margin-inline: auto;
}

.bd-pass__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bd-pass__kicker {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.bd-pass__copy .bd-km,
.bd-pass__copy .bd-coords {
	margin: 0;
	line-height: 1.2;
}

.bd-coords {
	color: rgba(255, 255, 255, 0.42);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.bd-pass__mark {
	width: 64px;
	height: auto;
	margin: 0;
}

.bd-pass__copy .bd-pass__brand {
	margin: 20px 0 4px;
	color: var(--bd-gold);
	font-family: var(--bd-serif);
	font-size: 18px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.15;
}

.bd-pass h1 {
	color: #fff;
}

.bd-pass__copy .bd-pass__lead {
	max-width: 34rem;
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 26px;
}

.bd-pass__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	margin-top: 26px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.bd-pass__meta a {
	color: var(--bd-gold);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.bd-pass__meta a:hover,
.bd-pass__meta a:focus-visible {
	color: #fff;
}

.bd-print--hero {
	transform: rotate(-1.4deg);
}

.bd-print--hero .bd-print__km {
	background: var(--bd-gold);
	color: var(--bd-night);
}

.bd-print--hero figcaption {
	color: rgba(255, 255, 255, 0.55);
}

.bd-pass__scale {
	width: min(1240px, calc(100% - var(--bd-pad) * 2));
	margin: 0 auto;
	padding-top: 16px;
	border-top: 1px dashed rgba(201, 158, 102, 0.35);
	color: rgba(255, 255, 255, 0.38);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Paper sheets ----------------------------------------------------------- */

.bd-sheet {
	padding: var(--bd-section) 0;
	background:
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.04) 1px, transparent 0),
		var(--bd-paper);
	background-size: 18px 18px, auto;
}

.bd-route__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 48px);
	margin-top: 32px;
}

.bd-route__label {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bd-line);
	color: var(--bd-mute);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bd-stops {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bd-stop;
}

.bd-stops li {
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	gap: 2px 14px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--bd-line);
	counter-increment: bd-stop;
}

.bd-stops li::before {
	grid-row: 1 / span 2;
	color: var(--bd-gold-deep);
	font-family: var(--bd-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	content: counter(bd-stop, decimal-leading-zero);
}

.bd-stops b {
	color: var(--bd-ink);
	font-family: var(--bd-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
}

.bd-stops span {
	grid-column: 2;
	color: var(--bd-mute);
	font-size: 14px;
	line-height: 22px;
}

.bd-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.bd-fork {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.bd-fork li {
	padding: 16px 0;
	border-top: 1px solid var(--bd-line);
}

.bd-fork s {
	display: block;
	margin-bottom: 6px;
	color: rgba(85, 85, 85, 0.72);
	font-size: 16px;
	line-height: 26px;
	text-decoration-color: var(--bd-gold);
	text-decoration-thickness: 1px;
}

.bd-fork b {
	color: var(--bd-ink);
	font-weight: 700;
}

/* Night palette ---------------------------------------------------------- */

.bd-night {
	padding: var(--bd-section) 0;
	background: var(--bd-night);
	color: #fff;
}

.bd-night h2 {
	color: #fff;
}

.bd-light {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 32px;
	margin-top: 32px;
}

.bd-swatches {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.bd-swatch {
	margin: 0;
	min-height: 140px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.bd-swatch code {
	font-family: var(--bd-sans);
	font-size: 11px;
	font-weight: 700;
}

.bd-swatch--night {
	background: #111;
	color: rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.bd-swatch--gold {
	background: var(--bd-gold);
	color: var(--bd-night);
}

.bd-swatch--paper {
	background: var(--bd-paper);
	color: var(--bd-ink);
}

.bd-swatch--ink {
	background: var(--bd-ink);
	color: #fff;
}

.bd-swatch--mute {
	background: var(--bd-mute);
	color: #fff;
}

.bd-type {
	margin: 0;
	padding: 24px 24px 28px;
	border: 1px solid rgba(201, 158, 102, 0.28);
	background: rgba(255, 255, 255, 0.03);
}

.bd-type__serif {
	color: #fff;
	font-family: var(--bd-serif);
	font-size: clamp(28px, 3vw, 40px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.18;
}

.bd-type__sans {
	margin: 8px 0 16px;
	color: var(--bd-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bd-type p:last-child {
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 22px;
}

/* Trail of screens ------------------------------------------------------- */

.bd-trail {
	position: relative;
	padding: var(--bd-section) 0;
	background: var(--bd-snow);
}

.bd-trail::before {
	content: "";
	position: absolute;
	top: 120px;
	bottom: 80px;
	left: max(14px, calc((100% - var(--bd-max)) / 2 - 18px));
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var(--bd-gold) 0 10px,
		transparent 10px 20px
	);
	opacity: 0.55;
	pointer-events: none;
}

.bd-trail__head {
	max-width: 40rem;
	margin-bottom: 48px;
}

.bd-trail__head p:last-child {
	color: var(--bd-mute);
	line-height: 26px;
}

.bd-stop {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-bottom: clamp(40px, 6vw, 72px);
}

.bd-stop--flip {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.bd-stop--flip .bd-stop__note {
	order: 2;
}

.bd-stop--flip .bd-stop__media {
	order: 1;
}

.bd-stop__num {
	margin: 0 0 8px;
	color: var(--bd-gold-deep);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bd-stop__note p:not(.bd-stop__num),
.bd-stop__note li {
	color: var(--bd-mute);
}

.bd-stop__note h3 + p {
	line-height: 26px;
}

.bd-stop__note ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bd-stop__note li {
	position: relative;
	padding: 5px 0 5px 18px;
	font-size: 15px;
	line-height: 24px;
}

.bd-stop__note li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--bd-gold);
}

.bd-stop__media--stack {
	display: grid;
	gap: 28px;
}

.bd-trail__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 36px);
	margin: 0 0 clamp(40px, 6vw, 72px);
}

/* Pocket / mobile -------------------------------------------------------- */

.bd-pocket {
	padding: var(--bd-section) 0;
	background:
		radial-gradient(circle at 1px 1px, rgba(201, 158, 102, 0.18) 1px, transparent 0),
		var(--bd-night);
	background-size: 22px 22px, auto;
	color: #fff;
}

.bd-pocket h2 {
	color: #fff;
}

.bd-pocket__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.bd-pocket__copy .bd-km {
	color: var(--bd-gold);
}

.bd-pocket__copy p:not(.bd-km) {
	color: rgba(255, 255, 255, 0.7);
	line-height: 26px;
}

.bd-pocket__copy ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bd-pocket__copy li {
	padding: 8px 0 8px 16px;
	border-bottom: 1px dashed rgba(201, 158, 102, 0.25);
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 24px;
}

.bd-pocket__copy li::before {
	content: "→ ";
	color: var(--bd-gold);
	margin-left: -16px;
}

.bd-pocket__devices {
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: flex-end;
}

.bd-phone {
	margin: 0;
	width: min(230px, 42vw);
	padding: 12px 10px 18px;
	background: #1c1c1c;
	border-radius: 28px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.bd-phone--shift {
	transform: translateY(28px);
}

.bd-phone__notch {
	display: block;
	width: 72px;
	height: 8px;
	margin: 0 auto 10px;
	background: #0a0a0a;
	border-radius: 8px;
}

.bd-phone img {
	width: 100%;
	border-radius: 14px;
}

.bd-phone figcaption {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

/* Endpaper --------------------------------------------------------------- */

.bd-endpaper {
	background: var(--bd-paper);
}

.bd-endpaper__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 40px;
	align-items: end;
	padding: var(--bd-section) 0 40px;
}

.bd-endpaper__grid > div > p:not(.bd-km) {
	max-width: 38rem;
	color: var(--bd-mute);
	line-height: 26px;
}

.bd-endpaper dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 32px 0 0;
}

.bd-endpaper dt {
	color: var(--bd-gold-deep);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bd-endpaper dd {
	margin: 4px 0 0;
	color: var(--bd-ink);
	font-family: var(--bd-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
}

.bd-endpaper__link {
	margin-top: 26px;
}

.bd-endpaper__link a {
	color: var(--bd-gold-deep);
	font-weight: 700;
	text-decoration: none;
}

.bd-endpaper__link a:hover,
.bd-endpaper__link a:focus-visible {
	text-decoration: underline;
}

.bd-endpaper__logo {
	width: min(360px, 100%);
	margin-left: auto;
}

.bd-endpaper__foot {
	padding: 28px 0 48px;
	border-top: 1px solid var(--bd-line);
	background: var(--bd-sheet);
}

.bd-endpaper__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.bd-endpaper__cta > p {
	max-width: 22rem;
	color: var(--bd-ink);
	font-family: var(--bd-serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.3;
}

.bd-endpaper__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
}

.bd-mark-link {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	background: var(--bd-night);
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none !important;
	text-transform: uppercase;
}

.bd-mark-link:hover,
.bd-mark-link:focus-visible {
	background: var(--bd-gold-deep);
}

.bd-endpaper .sa-logo {
	max-width: 180px;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 980px) {
	.bd-pass__inner,
	.bd-route__grid,
	.bd-why__grid,
	.bd-light,
	.bd-stop,
	.bd-stop--flip,
	.bd-trail__pair,
	.bd-pocket__grid,
	.bd-endpaper__grid {
		grid-template-columns: 1fr;
	}

	.bd-stop--flip .bd-stop__note,
	.bd-stop--flip .bd-stop__media {
		order: 0;
	}

	.bd-trail::before {
		display: none;
	}

	.bd-print--hero {
		transform: none;
	}

	.bd-swatches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bd-endpaper__logo {
		margin-left: 0;
	}

	.bd-phone--shift {
		transform: none;
	}
}

@media (max-width: 640px) {
	.bd-swatches,
	.bd-endpaper dl {
		grid-template-columns: 1fr 1fr;
	}

	.bd-pocket__devices {
		flex-direction: column;
		align-items: center;
	}

	.bd-phone {
		width: min(260px, 78vw);
	}

	.bd-endpaper__cta {
		flex-direction: column;
		align-items: flex-start;
	}
}