/**
 * Article page template (page-templates/artikkeli.php).
 * Loaded only on pages that use the template. Rules are scoped to .pa-article and use two classes,
 * so they win over the theme base styles and the Elementor kit (".elementor-kit-N h2").
 * Block style classes (is-style-pa-*) are registered in inc/artikkeli.php.
 * Colours, fonts and widths are the design tokens of css/runko.css (--pa-color-*, --pa-font-*, --pa-width-*).
 * The base styles, Open Sans and the FAQ accordion are in css/perus.css.
 */

.pa-article {
	background: var(--pa-color-bg);
	color: var(--pa-color-text);
	font-family: var(--pa-font-text);
}

/* Hero: featured image with a dark fade into the page */
.pa-article .pa-article__hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(280px, 40vw, 520px);
	padding: 120px var(--pa-gutter) 40px;
	overflow: hidden;
}
.pa-article .pa-article__hero-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
.pa-article .pa-article__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .75) 78%, #000 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 60%);
}
.pa-article .pa-article__hero-inner {
	width: 100%;
	max-width: var(--pa-width-read);
	margin: 0 auto;
}
.pa-article .pa-article__title {
	margin: 0;
	font-family: var(--pa-font-display);
	font-size: clamp(52px, 8.5vw, 104px);
	font-weight: var(--pa-weight-display);
	line-height: .95;
	letter-spacing: .01em;
	color: #fff;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.pa-article .pa-article__lead {
	max-width: 52ch;
	margin: 16px 0 0;
	font-size: clamp(16px, 1.8vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

/* Reading column, wide blocks break out of it */
.pa-article .pa-article__content {
	padding: 8px var(--pa-gutter) 96px;
}
.pa-article .pa-article__content > * {
	max-width: var(--pa-width-read);
	margin-left: auto;
	margin-right: auto;
}
.pa-article .pa-article__content > .alignwide {
	max-width: var(--pa-width-wide);
}
.pa-article .pa-article__content > .alignfull {
	max-width: none;
	margin-left: calc(-1 * var(--pa-gutter));
	margin-right: calc(-1 * var(--pa-gutter));
}

/* Band: a full-width section on a lighter surface between hairlines, its content in the reading column */
.pa-article .pa-article__content > .is-style-pa-kaista {
	margin-top: 96px;
	margin-bottom: 96px;
	padding: 72px var(--pa-gutter) 64px;
	background: var(--pa-color-surface);
	border-top: 1px solid var(--pa-color-line);
	border-bottom: 1px solid var(--pa-color-line);
}
.pa-article .is-style-pa-kaista .wp-block-group__inner-container > *,
.pa-article .is-style-pa-kaista > :not(.wp-block-group__inner-container) {
	max-width: var(--pa-width-read);
	margin-left: auto;
	margin-right: auto;
}
.pa-article .is-style-pa-kaista .wp-block-group__inner-container > :first-child,
.pa-article .is-style-pa-kaista > :first-child {
	margin-top: 0;
}
.pa-article .is-style-pa-kaista .wp-block-group__inner-container > :last-child,
.pa-article .is-style-pa-kaista > :last-child {
	margin-bottom: 0;
}

/* Without theme.json, WordPress wraps group content in an inner container. Let the children join the
   group's own grid or flex layout, so the same rules work with and without the wrapper. */
.pa-article .pa-article__content .wp-block-group__inner-container {
	display: contents;
}

/* Typography */
.pa-article .pa-article__content p,
.pa-article .pa-article__content li {
	font-size: 17px;
	line-height: 1.75;
	color: var(--pa-color-text);
}
.pa-article .pa-article__content p {
	margin-top: 0;
	margin-bottom: 1.1em;
}
.pa-article .pa-article__content strong {
	color: var(--pa-color-ink);
}
.pa-article .pa-article__content a {
	color: var(--pa-color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.pa-article .pa-article__content a:hover {
	color: #fff;
}
.pa-article .pa-article__content h2 {
	margin-top: 88px;
	margin-bottom: 20px;
	font-family: var(--pa-font-display);
	font-size: clamp(32px, 3.8vw, 44px);
	font-weight: var(--pa-weight-display);
	line-height: 1.05;
	letter-spacing: .005em;
	color: var(--pa-color-ink);
	scroll-margin-top: 90px;
}
.pa-article .pa-article__content h2::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: 18px;
	background: var(--pa-color-accent);
}
.pa-article .pa-article__content h3 {
	margin-top: 40px;
	margin-bottom: 10px;
	font-family: var(--pa-font-display);
	font-size: 24px;
	font-weight: var(--pa-weight-display);
	line-height: 1.15;
	letter-spacing: .01em;
	color: var(--pa-color-ink);
}

/* Quotes: real italic Open Sans */
.pa-article .pa-article__content .wp-block-quote {
	margin-top: 36px;
	margin-bottom: 36px;
	padding: 2px 0 2px 24px;
	border-left: 2px solid var(--pa-color-accent);
}
.pa-article .pa-article__content .wp-block-quote p {
	font-size: 20px;
	font-style: italic;
	line-height: 1.6;
	color: var(--pa-color-ink);
}
.pa-article .pa-article__content .wp-block-quote cite {
	display: block;
	margin-top: -4px;
	font-size: 14px;
	font-style: normal;
	color: var(--pa-color-muted);
}

/* Lead paragraph under the hero */
.pa-article .pa-article__content .is-style-pa-ingressi {
	margin-top: 8px;
	margin-bottom: 40px;
	font-size: clamp(19px, 2.1vw, 23px);
	line-height: 1.6;
	color: #e6e6e6;
}

/* Images */
.pa-article .pa-article__content .wp-block-image {
	margin-top: 32px;
	margin-bottom: 32px;
}
.pa-article .pa-article__content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pa-shape-radius);
}
.pa-article .pa-article__content .wp-element-caption {
	margin: 10px 0 0;
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: var(--pa-color-muted);
}

/* Key figures: an open row of four between hairlines, two by two on phones */
.pa-article .is-style-pa-faktat {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 40px;
	margin-top: 8px;
	margin-bottom: 64px;
	padding: 32px 0;
	border-top: 1px solid var(--pa-color-line);
	border-bottom: 1px solid var(--pa-color-line);
}
.pa-article .is-style-pa-faktat .wp-block-group {
	margin: 0;
	padding: 0;
}
.pa-article .pa-article__content .pa-fakta__luku {
	margin: 0 0 12px;
	font-family: var(--pa-font-display);
	font-size: clamp(40px, 4.4vw, 54px);
	font-weight: var(--pa-weight-display);
	line-height: 1;
	white-space: nowrap;
	color: var(--pa-color-ink);
}
.pa-article .pa-article__content .pa-fakta__luku::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 14px;
	background: var(--pa-color-accent);
}
.pa-article .pa-article__content .pa-fakta__teksti {
	max-width: 24ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pa-color-muted);
}

/* Cards: icon cards and fact cards share the same grid */
.pa-article .is-style-pa-kortit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 16px;
	margin-top: 32px;
	margin-bottom: 40px;
}
.pa-article .is-style-pa-kortit .wp-block-group {
	position: relative;
	margin: 0;
	padding: 26px 24px 10px;
	background: var(--pa-color-surface);
	border: 1px solid var(--pa-color-line);
	border-radius: var(--pa-shape-radius);
	transition: border-color .2s ease;
}
.pa-article .is-style-pa-kortit .wp-block-group:hover {
	border-color: #3a3a3a;
}
.pa-article .is-style-pa-kortit h3 {
	margin-top: 0;
	font-size: 23px;
}
.pa-article .is-style-pa-kortit p {
	font-size: 15px;
	line-height: 1.65;
}
/* Icons are black SVG files: shown white inside a thin ring */
.pa-article .pa-article__content .pa-ikoni {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 0 18px;
	border: 1px solid var(--pa-color-line);
	border-radius: 50%;
	background: var(--pa-color-surface-2);
}
.pa-article .pa-article__content .pa-ikoni img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 0;
	filter: invert(1);
}

/* Comparison table: scrolls sideways on narrow screens */
.pa-article .is-style-pa-vertailu {
	margin-top: 28px;
	margin-bottom: 28px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.pa-article .is-style-pa-vertailu table {
	width: 100%;
	min-width: 620px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--pa-color-line);
	border-radius: var(--pa-shape-radius);
	font-size: 15px;
	line-height: 1.5;
}
.pa-article .is-style-pa-vertailu th,
.pa-article .is-style-pa-vertailu td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--pa-color-line);
	text-align: left;
	vertical-align: top;
	color: var(--pa-color-text);
}
.pa-article .is-style-pa-vertailu tbody tr:last-child td {
	border-bottom: 0;
}
.pa-article .is-style-pa-vertailu thead th {
	background: var(--pa-color-surface-2);
	font-family: var(--pa-font-display);
	font-size: 22px;
	font-weight: var(--pa-weight-display);
	line-height: 1.1;
	color: #fff;
}
.pa-article .is-style-pa-vertailu thead th:first-child {
	border-top-left-radius: var(--pa-shape-radius);
}
.pa-article .is-style-pa-vertailu thead th:last-child {
	border-top-right-radius: var(--pa-shape-radius);
}
.pa-article .is-style-pa-vertailu thead th:nth-child(2) {
	color: var(--pa-color-accent);
}
.pa-article .is-style-pa-vertailu td:first-child {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pa-color-muted);
}
.pa-article .is-style-pa-vertailu td:nth-child(2) {
	background: var(--pa-color-surface-2);
	color: var(--pa-color-ink);
}

/* Episode cards, the archive link and the Spotify playlist */
.pa-article .pa-jaksot {
	margin-top: 28px;
	margin-bottom: 28px;
}
.pa-article .pa-article__content .pa-lisaa-linkki {
	margin: 18px 0 0;
	text-align: right;
}
.pa-article .pa-article__content .pa-lisaa-linkki a {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--pa-color-ink);
}
.pa-article .pa-article__content .pa-lisaa-linkki a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pa-article .pa-article__content .pa-lisaa-linkki a::after,
.pa-article .pa-article__content .pa-profiili__jakso a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--pa-color-accent);
	-webkit-mask: var(--pa-icon-arrow) center / contain no-repeat;
	mask: var(--pa-icon-arrow) center / contain no-repeat;
	transition: transform .15s ease;
}
.pa-article .pa-article__content .pa-lisaa-linkki a:hover::after {
	transform: translateX(3px);
}
.pa-article .pa-article__content .pa-lisaa-linkki a:hover {
	color: var(--pa-color-accent);
}
.pa-article .pa-soittolista {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-top: 96px;
	margin-bottom: 96px;
	/* Full-width band: the gutter is outside the content box, so it is added back to line up with the text */
	padding: 64px max(var(--pa-gutter), calc((100% - var(--pa-width-read)) / 2 + var(--pa-gutter)));
	background:
		radial-gradient(ellipse 60% 120% at 20% 50%, color-mix(in srgb, var(--pa-color-spotify) 22%, transparent) 0%, transparent 70%),
		var(--pa-color-surface);
	border-top: 1px solid var(--pa-color-line);
	border-bottom: 1px solid var(--pa-color-line);
}
.pa-article .pa-article__content .pa-soittolista .wp-block-image {
	margin: 0;
}
.pa-article .pa-article__content .pa-soittolista .wp-block-image img {
	border-radius: 6px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.pa-article .pa-article__content .pa-soittolista__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--pa-color-spotify);
}
/* Spotify mark (green circle, black waves) */
.pa-article .pa-article__content .pa-soittolista__label::before,
.pa-article .pa-article__content .pa-nappi-spotify .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231db954'/%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M6.4 9.3c3.8-1.2 8.1-.8 11.4 1.1' stroke-width='1.9'/%3E%3Cpath d='M7 12.6c3.1-.9 6.4-.6 9.1 1' stroke-width='1.6'/%3E%3Cpath d='M7.6 15.8c2.4-.6 4.9-.4 7 .8' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.pa-article .pa-article__content .pa-soittolista h3 {
	margin: 0 0 10px;
	font-size: 44px;
}
.pa-article .pa-article__content .pa-soittolista p:not(.pa-soittolista__label) {
	margin-bottom: 18px;
	font-size: 15px;
	color: var(--pa-color-text);
}

/* Buttons */
.pa-article .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pa-article .pa-article__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 1px solid var(--pa-color-accent);
	border-radius: 999px;
	background: var(--pa-color-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pa-article .pa-article__content .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: #111;
}
.pa-article .pa-article__content .pa-nappi-spotify .wp-block-button__link {
	gap: 10px;
	padding-left: 14px;
	background: var(--pa-color-spotify);
	border-color: var(--pa-color-spotify);
	color: #000;
}
.pa-article .pa-article__content .pa-nappi-spotify .wp-block-button__link::before {
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cg fill='none' stroke='%231db954' stroke-linecap='round'%3E%3Cpath d='M6.4 9.3c3.8-1.2 8.1-.8 11.4 1.1' stroke-width='1.9'/%3E%3Cpath d='M7 12.6c3.1-.9 6.4-.6 9.1 1' stroke-width='1.6'/%3E%3Cpath d='M7.6 15.8c2.4-.6 4.9-.4 7 .8' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");
}
.pa-article .pa-article__content .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}
.pa-article .pa-article__content .pa-nappi-spotify .wp-block-button__link:hover,
.pa-article .pa-article__content .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: #111;
}

/* Motives: an open list, outlined number on the left, hairlines between, no boxes */
/* The text stays in the reading column; the numbers hang in the margin to its left */
.pa-article .pa-article__content > .alignwide.is-style-pa-motiivit {
	max-width: calc(var(--pa-width-read) + 128px);
	margin-left: max(0px, calc((100% - var(--pa-width-read)) / 2 - 128px));
}
.pa-article .is-style-pa-motiivit {
	margin-top: 40px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--pa-color-line);
	counter-reset: pa-motiivi;
}
.pa-article .is-style-pa-motiivit .wp-block-group {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 32px;
	margin: 0;
	padding: 36px 0 20px;
	border-top: 1px solid var(--pa-color-line);
	counter-increment: pa-motiivi;
}
.pa-article .is-style-pa-motiivit .wp-block-group::before {
	content: counter(pa-motiivi, decimal-leading-zero);
	grid-row: 1 / span 20;
	font-family: var(--pa-font-display);
	font-size: 64px;
	font-weight: var(--pa-weight-display);
	line-height: .9;
	color: transparent;
	-webkit-text-stroke: 1px var(--pa-color-accent);
}
.pa-article .is-style-pa-motiivit .wp-block-group__inner-container > *,
.pa-article .is-style-pa-motiivit .wp-block-group > :not(.wp-block-group__inner-container) {
	grid-column: 2;
}
.pa-article .is-style-pa-motiivit h3 {
	margin-top: 0;
	font-size: 28px;
}
.pa-article .pa-article__content .pa-alaryhmat {
	margin: 24px 0 20px;
	padding: 0;
	list-style: none;
}
.pa-article .pa-article__content .pa-alaryhmat li {
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--pa-color-line);
	font-size: 16px;
	line-height: 1.7;
}
.pa-article .pa-article__content .pa-alaryhmat li:last-child {
	padding-bottom: 0;
}
.pa-article .pa-article__content .pa-alaryhmat strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--pa-font-display);
	font-size: 21px;
	font-weight: var(--pa-weight-display);
	letter-spacing: .01em;
	line-height: 1.15;
}
.pa-article .pa-article__content .pa-alaryhmat br {
	display: none;
}
.pa-article .pa-article__content .is-style-pa-motiivit .wp-block-image {
	margin: 12px 0 16px;
}

/* Callout box */
.pa-article .is-style-pa-nosto {
	margin-top: 24px;
	margin-bottom: 24px;
	padding: 24px 26px 8px;
	background: var(--pa-color-surface);
	border-left: 2px solid var(--pa-color-accent);
	border-radius: 0 var(--pa-shape-radius) var(--pa-shape-radius) 0;
}
.pa-article .is-style-pa-nosto h3 {
	margin-top: 0;
}

/* Profiles of known serial killers */
.pa-article .is-style-pa-profiilit {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 16px;
	margin-top: 32px;
}
.pa-article .pa-profiili {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 22px 18px;
	background: var(--pa-color-surface);
	border: 1px solid var(--pa-color-line);
	border-top: 2px solid var(--pa-color-line);
	border-radius: var(--pa-shape-radius);
}
.pa-article .pa-profiili--jakso {
	border-top-color: var(--pa-color-accent);
}
.pa-article .pa-article__content .pa-profiili h3 {
	margin: 0 0 4px;
	font-size: 24px;
}
.pa-article .pa-article__content .pa-profiili h3 a {
	color: #fff;
	text-decoration: none;
}
.pa-article .pa-article__content .pa-profiili h3 a:hover {
	color: var(--pa-color-accent);
}
.pa-article .pa-article__content .pa-profiili__maa {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pa-color-muted);
}
/* Facts as two even columns: label above the value */
.pa-article .pa-article__content .pa-profiili__tiedot {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 16px;
	padding: 14px 0 0;
	border-top: 1px solid var(--pa-color-line);
	list-style: none;
}
.pa-article .pa-article__content .pa-profiili__tiedot li {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--pa-color-ink);
}
.pa-article .pa-article__content .pa-profiili__tiedot strong {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--pa-color-muted);
}
.pa-article .pa-article__content .pa-profiili p {
	font-size: 14px;
	line-height: 1.6;
}
.pa-article .pa-article__content .pa-profiili .pa-profiili__jakso {
	margin: auto 0 0;
	padding-top: 6px;
}
.pa-article .pa-article__content .pa-profiili__jakso a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.pa-article .pa-article__content .pa-profiili__jakso a:hover::after {
	transform: translateX(3px);
}

/* Sources */
.pa-article .pa-article__content .pa-lahteet {
	padding-left: 1.2em;
}
.pa-article .pa-article__content .pa-lahteet li {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pa-color-muted);
}

/* Cards fade in while scrolling (browsers with scroll-driven animations only) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pa-article .is-style-pa-kortit .wp-block-group,
		.pa-article .is-style-pa-motiivit .wp-block-group,
		.pa-article .pa-profiili {
			animation: pa-article-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}
@keyframes pa-article-reveal {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 900px) {
	.pa-article .is-style-pa-faktat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pa-article .is-style-pa-motiivit .wp-block-group {
		grid-template-columns: 1fr;
	}
	.pa-article .is-style-pa-motiivit .wp-block-group::before {
		grid-row: auto;
		margin-bottom: 14px;
		font-size: 52px;
	}
	.pa-article .is-style-pa-motiivit .wp-block-group__inner-container > *,
	.pa-article .is-style-pa-motiivit .wp-block-group > :not(.wp-block-group__inner-container) {
		grid-column: 1;
	}
}

@media (max-width: 600px) {
	.pa-article .pa-article__hero {
		padding-bottom: 28px;
	}
	.pa-article .pa-article__content p,
	.pa-article .pa-article__content li {
		font-size: 16px;
	}
	.pa-article .pa-article__content h2 {
		margin-top: 64px;
	}
	.pa-article .is-style-pa-faktat {
		gap: 28px 20px;
		padding: 26px 0;
	}
	.pa-article .pa-article__content .pa-fakta__luku {
		font-size: 38px;
	}
	.pa-article .pa-article__content .pa-fakta__teksti {
		font-size: 13px;
	}
	.pa-article .pa-soittolista {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 20px;
		align-items: start;
		margin-top: 72px;
		margin-bottom: 72px;
		padding: 40px var(--pa-gutter);
	}
	.pa-article .pa-article__content .pa-soittolista h3 {
		font-size: 32px;
	}
	.pa-article .pa-article__content > .is-style-pa-kaista {
		margin-top: 72px;
		margin-bottom: 72px;
		padding: 56px var(--pa-gutter) 48px;
	}
}
