/*
 * Paper (styles/paper.json): what the tokens cannot say. Loaded on the
 * Paper page only, every rule keyed off html[data-style="paper"] (block
 * stylesheets print after the theme's; see night.css). Margaret Ash
 * speaks in a book serif at its reading weight, wide margins, hairlines
 * and one muted sage; nothing is boxed that a rule can separate. Every
 * text pair measures 7:1 or better (ink 15.4, muted 7.5 on the darkest
 * band, sage text 7.3 on the darkest band).
 */

/* Labels: Source Sans 600 small capitals in deep sage, led by a sage rule. */
html[data-style="paper"] .wu-chip.st-label,
html[data-style="paper"] .wu-label.st-label {
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wu-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
}

html[data-style="paper"] .wu-chip.st-label::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--st-sage);
}

/* Headings at the serif's book weight, a touch of negative tracking. */
html[data-style="paper"] .wu-h2,
html[data-style="paper"] .st-hero__title,
html[data-style="paper"] .st-close__title,
html[data-style="paper"] .st-card__title,
html[data-style="paper"] .st-steps__title,
html[data-style="paper"] .st-outcome__subhead {
	font-weight: 400;
	letter-spacing: -0.01em;
}

html[data-style="paper"] .wu-h2 {
	line-height: 1.12;
}

/* The hero: one large statement over white, the photograph kept below the
   first screen. Generous space above and below. */
html[data-style="paper"] .st-hero--plain {
	padding-block: 56px 72px;
}

@media (min-width: 1025px) {
	html[data-style="paper"] .st-hero--plain {
		display: flex;
		align-items: center;
		min-height: calc(100svh - var(--wu-header-h) - 24px);
		padding-block: 64px 96px;
	}

	html[data-style="paper"] .st-hero--plain .st-hero__grid {
		width: 100%;
	}
}

html[data-style="paper"] .st-hero__title {
	max-width: 15ch;
	line-height: 1.04;
}

html[data-style="paper"] .st-hero__lead {
	max-width: 46ch;
	color: var(--wu-muted);
}

html[data-style="paper"] .st-proof {
	font-size: 16px;
	font-weight: 400;
	color: var(--wu-muted);
}

html[data-style="paper"] .st-proof li + li::before {
	width: 5px;
	height: 5px;
	background: var(--st-sage);
}

html[data-style="paper"] .st-hero__call {
	font-weight: 400;
	font-size: 19px;
}

/* About: the one photograph, and the quote in the serif. */
html[data-style="paper"] .st-story__media {
	box-shadow: none;
}

html[data-style="paper"] .st-story__quote {
	border-left-color: var(--st-sage);
}

html[data-style="paper"] .st-story__quote blockquote p {
	font-weight: 400;
	font-size: 26px;
	line-height: 1.3;
}

html[data-style="paper"] .st-facts__figure {
	font-weight: 400;
	font-size: 40px;
}

/* How I can help: no cards, a list of hairlines in three columns. */
html[data-style="paper"] .st-cards__grid {
	gap: 0 48px;
}

html[data-style="paper"] .st-card {
	padding: 26px 0 30px;
	overflow: visible;
	border: 0;
	border-top: 1px solid var(--wu-line-strong);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

html[data-style="paper"] .st-card__text {
	gap: 10px;
	padding: 0;
}

html[data-style="paper"] .st-card__title {
	font-size: 28px;
	line-height: 1.15;
}

html[data-style="paper"] .st-card__body {
	max-width: 34ch;
}

/* What to expect: the step numbers in the serif, sage. */
html[data-style="paper"] .st-steps__item {
	border-top-color: var(--wu-line-strong);
}

html[data-style="paper"] .st-steps__num {
	color: var(--wu-accent);
	font-family: var(--wu-display);
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}

/* Fees: a pale band, the price on paper. */
html[data-style="paper"] .st-outcome {
	background: var(--wu-surface);
}

html[data-style="paper"] .st-outcome::before {
	display: none;
}

html[data-style="paper"] .st-price {
	border-color: var(--wu-line);
	border-radius: 4px;
	background: var(--wu-ground);
	box-shadow: none;
}

html[data-style="paper"] .st-price__figure,
html[data-style="paper"] .st-brand__name,
html[data-style="paper"] .st-footer__name {
	font-weight: 400;
}

html[data-style="paper"] .st-ticks__tick {
	background: var(--st-sage-pale);
	color: var(--wu-accent);
}

/* The call: calm, on the ground, a sage rule above the label. */
html[data-style="paper"] .st-close__title {
	max-width: 20ch;
	line-height: 1.1;
}

html[data-style="paper"] .st-close__body {
	max-width: 52ch;
}

/* Header: the name in the serif. */
html[data-style="paper"] .st-brand__name {
	font-size: 24px;
	letter-spacing: 0;
}

html[data-style="paper"] .st-nav a {
	font-size: 16px;
	font-weight: 400;
	color: var(--wu-muted);
}

/* Focus: a visible ring in ink. */
html[data-style="paper"] :where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wu-text);
	outline-offset: 3px;
}