/* Two stones above, one below. The open fourth space is intentional. */
[content][home-page] {
	max-width: 54rem;
	padding: clamp(1.5rem, 5vw, 3.5rem);
}

[hero] {
	padding-bottom: .25rem;
}

[home-page] [hero] h1 {
	margin: 0 0 .75rem;
	text-align: center;
	font-size: clamp(4.5rem, 13vw, 8rem);
	font-weight: 500;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: -.065em;
	line-height: .95;
}

[home-tagline] {
	margin: 1.25rem 0 .75rem;
	font-size: clamp(1.1rem, 3vw, 1.5rem);
}

[cards] {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-top: .75rem;
}

[card] {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: 5px 16px 5px 5px;
	border: 1px solid var(--border-card);
	background: var(--home-tile-account);
	color: var(--card-text, var(--text-primary));
}

[card]:nth-child(2) {
	background: var(--home-tile-forums);
}

[card]:nth-child(3) {
	grid-column: 1;
	background: var(--home-tile-servers);
}

[card-symbol] {
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 1.25rem;
}

[card] h2 {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.35;
}

[card] p {
	margin: .6rem 0 0;
}

[card] details {
	margin-top: 1.25rem;
	font-size: .875rem;
}

[card] summary {
	cursor: pointer;
	text-underline-offset: .2em;
}

[card] summary:hover {
	text-decoration: underline;
}

[card-link] {
	display: block;
	margin-top: 1.25rem;
	font-size: .875rem;
	font-weight: bold;
}

[browser-card]:hover {
	color: var(--text-primary);
	text-decoration: none;
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

[browser-card]:hover [card-link] {
	text-decoration: underline;
	text-underline-offset: .2em;
}

@media (max-width: 560px) {
	[cards] {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

}