* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: #f6f8fc;
	color: #173555;
	font-family: Arial, sans-serif;
}
a {
	color: inherit;
	text-decoration: none;
}
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 6vw;
	border-bottom: 1px solid #17355525;
}
.brand {
	font-family: Georgia, serif;
	letter-spacing: 0.3em;
	font-size: 24px;
}
header a:last-child {
	font-size: 13px;
}
main {
	max-width: 1160px;
	margin: 0 auto;
	padding: 90px 32px;
}
h1,
h2 {
	font-family: Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.045em;
}
h1 {
	font-size: clamp(42px, 6vw, 76px);
	line-height: 1.07;
	max-width: 850px;
	margin: 20px 0;
}
p {
	line-height: 1.75;
	font-size: 18px;
	max-width: 680px;
	color: #53677c;
}
.eyebrow {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #2861ae;
}
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 64px;
}
.card {
	background: #fff;
	border: 1px solid #17355515;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s;
}
.card:hover {
	transform: translateY(-4px);
}
.art {
	height: 250px;
	background: #e6edf7;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.art img {
	height: 85%;
	width: 85%;
	object-fit: contain;
}
.copy {
	padding: 30px;
}
.copy h2 {
	font-size: 34px;
	margin: 16px 0;
}
.copy p {
	font-size: 16px;
}
.reading {
	max-width: 720px;
}
.reading h2 {
	font-size: 32px;
	margin-top: 48px;
}
.back {
	font-size: 14px;
}
.footer {
	margin-top: 64px;
	border-top: 1px solid #17355525;
	padding-top: 28px;
	font-size: 14px;
}
a:focus-visible {
	outline: 2px solid #2861ae;
	outline-offset: 6px;
}
@media (max-width: 640px) {
	header {
		padding: 24px;
	}
	.brand {
		font-size: 19px;
	}
	header a:last-child {
		max-width: 160px;
		text-align: right;
	}
	main {
		padding: 52px 24px;
	}
	.grid {
		grid-template-columns: 1fr;
		margin-top: 40px;
	}
	.art {
		height: 210px;
	}
}
body {
	background: #f3f6fb;
}
header {
	max-width: 1440px;
	margin: auto;
}
main {
	padding-top: 76px;
}
.grid {
	gap: 40px;
}
.card {
	border: 0;
	border-radius: 3px;
	background: transparent;
}
.art {
	height: auto;
	aspect-ratio: 20 / 13;
	border-radius: 5px;
}
.art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover .art img {
	transform: scale(1.025);
}
.copy {
	padding: 26px 0 12px;
}
.copy h2 {
	font-size: clamp(28px, 3vw, 40px);
	max-width: 440px;
	line-height: 1.13;
}
.copy p {
	max-width: 420px;
}
.reading {
	max-width: 820px;
	margin: auto;
}
.reading > p,
.reading > h2 {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}
.reading > p {
	font-size: 18px;
	line-height: 1.85;
}
.reading > h1 {
	font-size: clamp(40px, 5vw, 68px);
	margin: 30px auto 40px;
	max-width: 760px;
}
.reading > h2 {
	font-size: 31px;
	line-height: 1.2;
	margin-top: 48px;
}
.article-cover {
	margin: 36px 0 48px;
}
.article-cover img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	display: block;
}
.reading > .eyebrow {
	margin-top: 48px;
}
.back {
	display: inline-block;
	padding: 10px 0;
	border-bottom: 1px solid #17355545;
}
.footer {
	display: flex;
	justify-content: space-between;
	margin-top: 80px;
}
.card:hover {
	transform: none;
}
@media (max-width: 640px) {
	main {
		padding: 46px 24px;
	}
	.grid {
		gap: 32px;
	}
	.art {
		height: auto;
	}
	.reading > p {
		font-size: 17px;
	}
	.reading > h2 {
		font-size: 28px;
	}
	.article-cover {
		margin: 28px -8px 34px;
	}
	.copy {
		padding-top: 22px;
	}
	header .brand {
		font-size: 18px;
	}
	.reading > .eyebrow {
		margin-top: 30px;
	}
}