.site-main--now {
	display: grid;
	gap: clamp(var(--hut-space-lg), 4vw, var(--hut-space-2xl));
	width: min(calc(100% - (var(--hut-container-padding) * 2)), var(--hut-container-md));
	margin-inline: auto;
}

.site-main--now > section,
.site-main--now > aside {
	border: 1px solid rgb(223 210 191 / 68%);
	border-radius: var(--hut-radius-lg);
	background:
		linear-gradient(135deg, rgb(255 253 248 / 92%), rgb(250 244 232 / 74%)),
		var(--hut-color-surface-raised);
	box-shadow: var(--hut-shadow-warm-sm);
}

.now-hero,
.now-note,
.now-snapshot,
.now-take {
	padding: clamp(var(--hut-space-xl), 5vw, var(--hut-space-3xl));
}

.now-hero {
	background:
		linear-gradient(135deg, rgb(13 27 42 / 96%), rgb(44 31 24 / 92%)),
		var(--hut-color-ink-900);
	color: rgb(255 253 248 / 84%);
}

.now-hero h1 {
	max-width: 11ch;
	margin-block: var(--hut-space-xs) var(--hut-space-md);
	color: var(--hut-color-paper-000);
	font-size: clamp(3rem, 7vw, 5.6rem);
	line-height: 0.96;
	text-wrap: balance;
}

.now-hero__description {
	max-width: 42rem;
	color: rgb(255 253 248 / 82%);
	font-size: clamp(1.06rem, 1.8vw, 1.28rem);
}

.now-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hut-space-xs) var(--hut-space-md);
	padding: 0;
	margin: var(--hut-space-lg) 0 0;
	color: rgb(255 253 248 / 76%);
	font-size: var(--hut-font-size-sm);
	font-weight: 800;
	list-style: none;
}

.now-meta li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	margin-inline-start: var(--hut-space-md);
	border-radius: 999px;
	background: rgb(255 253 248 / 44%);
	vertical-align: middle;
}

.now-note {
	color: var(--hut-color-text-muted);
	font-size: clamp(var(--hut-font-size-md), 1.8vw, var(--hut-font-size-lg));
}

.now-snapshot h2 {
	max-width: 13ch;
	margin-block-end: clamp(var(--hut-space-lg), 4vw, var(--hut-space-2xl));
	font-size: clamp(var(--hut-font-size-2xl), 4vw, 4rem);
	line-height: 0.98;
	text-wrap: balance;
}

.now-snapshot__grid {
	display: grid;
	gap: var(--hut-space-md);
}

.now-item {
	padding: clamp(var(--hut-space-md), 3vw, var(--hut-space-lg));
	border: 1px solid rgb(143 74 40 / 20%);
	border-radius: var(--hut-radius-md);
	background: rgb(255 253 248 / 78%);
}

.now-item h3 {
	margin-block-end: var(--hut-space-xs);
	color: var(--hut-color-brown-700);
	font-size: var(--hut-font-size-md);
	text-transform: uppercase;
}

.now-item p,
.now-take p {
	margin: 0;
	color: var(--hut-color-text-muted);
	font-size: var(--hut-font-size-md);
}

.now-take {
	border-inline-start: 0.35rem solid var(--hut-color-accent);
}

.now-take h2 {
	margin-block-end: var(--hut-space-xs);
	color: var(--hut-color-brown-700);
	font-size: var(--hut-font-size-xl);
}

@media (min-width: 48rem) {
	.now-snapshot__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}