/**
 * Attic article plates
 * Tokens inherit from base.css (:root --ac-bg, --ac-ink, --ac-line,
 * --ac-font-label, --ac-ease-out). Hard corners. No shadows. No fills.
 */

.ac-article-plate,
.ac-article-close {
	box-sizing: border-box;
}

/* Full-bleed breakout from .ac-page-content (max-width: 42rem). */
.ac-article-plate--mid,
.ac-article-close {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--ac-bg);
	text-align: center;
}

.ac-article-plate--mid {
	margin-top: 3.5rem;
	margin-bottom: 3.75rem;
	padding: 5.25rem 3rem 4.75rem;
	border-top: 1px solid var(--ac-line);
	border-bottom: 1px solid var(--ac-line);
}

.ac-article-plate__kicker {
	margin: 0 0 1.75rem;
	opacity: 0.45;
}

.ac-article-plate__stat {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.6rem, 7vw, 5.6rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--ac-ink);
}

.ac-article-plate__object {
	margin: 1.15rem 0 0;
	opacity: 0.45;
}

.ac-article-plate__remark {
	margin: 2.4rem auto 0;
	max-width: 22em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	text-align: center;
}

.ac-article-plate__cta,
.ac-article-dest__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2.4rem;
	color: inherit;
	text-decoration: none;
}

.ac-article-plate__arrow,
.ac-article-dest__arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	transform: rotate(45deg);
	opacity: 0.5;
}

.ac-article-plate__link,
.ac-article-dest__link {
	opacity: 0.6;
	padding: 0.4rem 0;
}

.ac-article-plate__cta:hover .ac-article-plate__link,
.ac-article-plate__cta:focus-visible .ac-article-plate__link,
.ac-article-dest:hover .ac-article-dest__link,
.ac-article-dest:focus-visible .ac-article-dest__link {
	opacity: 1;
}

.ac-article-close {
	margin-top: 4.5rem;
	margin-bottom: 0;
	border-top: 1px solid var(--ac-line);
}

.ac-article-dest {
	display: block;
	padding: 6.5rem 3rem 5.75rem;
	border-bottom: 1px solid var(--ac-line);
	color: inherit;
	text-decoration: none;
}

.ac-article-dest__kicker {
	margin: 0 0 1.6rem;
	opacity: 0.45;
}

.ac-article-dest__title {
	margin: 0;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(2.4rem, 6.4vw, 5.4rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
	text-align: center;
}

.ac-article-dest--attic .ac-article-dest__title {
	opacity: 0.22;
}

.ac-article-dest__dek {
	margin: 1.5rem auto 0;
	max-width: 22em;
	font-family: var(--ac-font-label);
	font-weight: 100;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-align: center;
}

/*
 * Showcase body copy uses `.ac-showcase-body__content p { margin: 0 0 2rem }`,
 * which is more specific than the rules above and kills `margin: auto`.
 * Without auto sides the 22em tagline box sits on the left under a
 * full-width centered title. These win that fight on desktop posts.
 */
.ac-showcase-body__content p.ac-article-plate__remark,
.ac-showcase-body__content p.ac-article-dest__dek,
.ac-page-content p.ac-article-plate__remark,
.ac-page-content p.ac-article-dest__dek {
	margin-top: 1.5rem;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	text-align: center;
}

.ac-showcase-body__content p.ac-article-plate__remark,
.ac-page-content p.ac-article-plate__remark {
	margin-top: 2.4rem;
}

.ac-article-dest__cta {
	margin-top: 2.35rem;
}

@media (max-width: 700px) {
	.ac-article-plate--mid,
	.ac-article-dest {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.ac-article-plate--mid {
		padding-top: 3.75rem;
		padding-bottom: 3.5rem;
	}

	.ac-article-dest {
		padding-top: 4.5rem;
		padding-bottom: 4.25rem;
	}
}