/*
 * The Vellren Journal (master plan §11.11.1): a symmetrical index and article.
 * Tokens only; radius 0; Read mode motion only (heading reveals come from the motion engine).
 */

/* ================================================================ Index: centred header */
.v-journal__head {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	padding-block: var(--v-space-9) var(--v-space-8);
	text-align: center;
}
.v-journal__title {
	max-width: 18ch;
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
	text-wrap: balance;
}
.v-journal__intro {
	max-width: 44ch;
	color: var(--v-text-muted);
	font-size: var(--v-text-body-lg);
	text-wrap: pretty;
}
@media (min-width: 1024px) {
	.v-journal__title {
		font-size: var(--v-text-display);
		line-height: var(--v-lh-display);
		letter-spacing: var(--v-track-display);
	}
}

/* Topic links: one centred row, the current topic in Hide with its underline. */
.v-journal-nav { margin-top: var(--v-space-3); }
.v-journal-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--v-space-2) var(--v-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-journal-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min);
	color: var(--v-text-muted);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 50% calc(100% - var(--v-space-2));
	background-size: 0% var(--v-stitch-width);
	transition: color var(--v-dur-hover) var(--v-ease-out), background-size var(--v-dur-ui) var(--v-ease-out);
}
.v-journal-nav a:hover { color: var(--v-text); background-size: 100% var(--v-stitch-width); }
.v-journal-nav a[aria-current="page"] {
	color: var(--v-link);
	background-size: 100% var(--v-stitch-width);
}

/* ================================================================ Index: the feature */
.v-journal__feature { padding-bottom: var(--v-section-y); }
.v-journal__feature-link {
	display: grid;
	gap: var(--v-space-7);
	color: inherit;
	text-decoration: none;
}
.v-journal__feature-media,
.v-jcard__media,
.v-article__hero-frame {
	position: relative;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-journal__feature-media { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
	.v-journal__feature-media { aspect-ratio: 21 / 9; }
}
:is(.v-journal__feature-media, .v-jcard__media, .v-article__hero-frame) :is(img, .v-kit-shot) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-journal__feature-body {
	display: grid;
	justify-items: center;
	gap: var(--v-space-4);
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}
.v-journal__feature-title {
	font-size: var(--v-text-h2);
	line-height: var(--v-lh-heading);
	text-wrap: balance;
}
.v-journal__feature-dek {
	color: var(--v-text-muted);
	text-wrap: pretty;
}

/* ================================================================ Index: the grid (uniform) */
.v-journal__grid-wrap {
	padding-block: var(--v-section-y);
	background: var(--v-surface-alt);
}
.v-journal__grid {
	display: grid;
	gap: var(--v-space-9) var(--v-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.v-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.v-journal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.v-journal__grid-wrap .navigation.pagination { margin-top: var(--v-space-9); text-align: center; }
.v-journal__grid-wrap .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--v-space-2);
}
.v-journal__grid-wrap .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: var(--v-hit-min);
	min-height: var(--v-hit-min);
	padding-inline: var(--v-space-3);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	text-decoration: none;
}
.v-journal__grid-wrap .page-numbers.current { color: var(--v-link); box-shadow: inset 0 calc(var(--v-stitch-width) * -1) 0 currentColor; }
.v-journal__empty { padding-block: var(--v-space-9); text-align: center; }

/* Article card */
.v-jcard__link {
	display: grid;
	gap: var(--v-space-5);
	color: inherit;
	text-decoration: none;
}
.v-jcard__media { aspect-ratio: 3 / 2; }
.v-jcard__media img { transition: transform var(--v-dur-zoom) var(--v-ease-out); }
.v-jcard__body {
	display: grid;
	gap: var(--v-space-2);
}
.v-jcard__cat,
.v-article__cat {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
}
.v-jcard__title {
	font-size: var(--v-text-h3);
	line-height: var(--v-lh-h3);
	font-weight: var(--v-weight-semibold);
	text-wrap: balance;
}
.v-jcard__meta {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
@media (hover: hover) and (pointer: fine) {
	.v-jcard__link:hover .v-jcard__media img,
	.v-journal__feature-link:hover .v-journal__feature-media img { transform: scale(var(--v-zoom)); }
	.v-jcard__link:hover .v-jcard__title,
	.v-journal__feature-link:hover .v-journal__feature-title { text-decoration: underline; text-decoration-thickness: var(--v-hairline); text-underline-offset: 0.15em; }
}
.v-journal__feature-media img { transition: transform var(--v-dur-zoom) var(--v-ease-out); }

/* ================================================================ Article: centred header */
.v-article__head {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	max-width: calc(46rem + 2 * var(--v-gutter));
	padding-block: var(--v-space-9) var(--v-space-8);
	text-align: center;
}
.v-article__cat a { color: inherit; text-decoration: none; }
.v-article__cat a:hover { color: var(--v-text); }
.v-article__title {
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
	text-wrap: balance;
}
.v-article__dek {
	max-width: 40ch;
	color: var(--v-text-muted);
	font-size: var(--v-text-body-lg);
	text-wrap: pretty;
}
.v-article__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--v-space-2) var(--v-space-5);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
.v-article__meta span + span {
	padding-left: var(--v-space-5);
	border-left: var(--v-hairline) solid var(--v-border);
}
.v-article__hero { margin: 0 auto; }
.v-article__hero-frame { aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
	.v-article__head { padding-block: var(--v-space-7) var(--v-space-6); }
	.v-article__hero-frame { aspect-ratio: 3 / 2; }
}
/* Desktop: a wide band, so the reading column starts within the second screen. */
@media (min-width: 1024px) {
	.v-article__hero-frame { aspect-ratio: 21 / 9; }
}

/* ================================================================ Article: 3 : 6 : 3 */
.v-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* A wide table scrolls inside its figure, never widens the page. */
	gap: var(--v-space-8);
	padding-block: var(--v-space-9) var(--v-section-y);
}
.v-article__body { justify-self: center; width: 100%; }
@media (min-width: 1024px) {
	.v-article__layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--v-gap);
		align-items: start;
	}
	.v-toc { grid-column: 1 / 4; }
	.v-article__body { grid-column: 4 / 10; }
	.v-article__aside { grid-column: 10 / 13; }
	.v-toc,
	.v-article__aside {
		position: sticky;
		top: calc(var(--v-header-h) + var(--v-space-6));
	}
	/* The aside card starts where the article's first paragraph does. */
	.v-article__aside { padding-left: var(--v-space-5); }
	.v-toc { padding-right: var(--v-space-5); }
}

/* Contents list */
.v-toc__fold { border-block: var(--v-hairline) solid var(--v-border); }
.v-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--v-hit-min);
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-bold);
	cursor: pointer;
	list-style: none;
}
.v-toc__title::-webkit-details-marker { display: none; }
.v-toc__title::after {
	content: "";
	width: var(--v-accordion-icon);
	height: var(--v-accordion-icon);
	background:
		linear-gradient(currentColor, currentColor) center / 100% var(--v-stitch-width) no-repeat,
		linear-gradient(currentColor, currentColor) center / var(--v-stitch-width) 100% no-repeat;
	transition: transform var(--v-dur-ui) var(--v-ease-out);
}
.v-toc__fold[open] > .v-toc__title::after { transform: rotate(45deg); }
.v-toc__list {
	display: grid;
	gap: var(--v-space-1);
	margin: 0;
	padding: 0 0 var(--v-space-5);
	list-style: none;
	counter-reset: v-toc;
}
.v-toc__list li { counter-increment: v-toc; }
.v-toc__list a {
	display: grid;
	grid-template-columns: var(--v-space-6) minmax(0, 1fr);
	padding-block: var(--v-space-2);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-ui);
	text-decoration: none;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-toc__list a::before {
	content: counter(v-toc);
	font-variant-numeric: tabular-nums;
}
.v-toc__list a:hover { color: var(--v-text); }
.v-toc__list a[aria-current] {
	color: var(--v-link);
	font-weight: var(--v-weight-semibold);
}
@media (min-width: 1024px) {
	.v-toc__fold { border-bottom: 0; }
	.v-toc__title { pointer-events: none; }
	.v-toc__title::after { display: none; }
}

/* Size help card */
.v-sizehelp {
	display: grid;
	gap: var(--v-space-4);
	justify-items: start;
	padding: var(--v-space-6);
	background: var(--v-surface-alt);
}
.v-sizehelp__title {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-h3);
}
.v-sizehelp__text {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-body);
}
.v-sizehelp .v-btn { width: 100%; justify-content: center; }

/* ================================================================ Article: scannable prose */
.v-article__body.v-prose { max-width: var(--v-measure); }
.v-article__body > h2 { scroll-margin-top: calc(var(--v-header-h) + var(--v-space-6)); }
.v-article__body > h3 {
	font-family: var(--v-font-body);
	font-size: var(--v-text-h4);
	font-weight: var(--v-weight-bold);
	line-height: var(--v-lh-ui);
}
.v-article__body > h2:first-child,
.v-article__body > :first-child { margin-top: 0; }

/* The short answer (first in every article) and the quick check */
.v-prose .v-answer,
.v-prose .v-check {
	display: grid;
	gap: var(--v-space-3);
	padding: var(--v-space-6);
}
.v-prose .v-answer { background: var(--v-surface-alt); }
.v-prose .v-check { border: var(--v-hairline) solid var(--v-border-strong); }
.v-prose :is(.v-answer, .v-check) > * { margin: 0; }
.v-answer__label,
.v-check__label {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-bold);
	letter-spacing: var(--v-track-ui);
}
.v-prose .v-check ul { display: grid; gap: var(--v-space-2); }
.v-prose .v-check li + li { margin-top: 0; }

/* Tables scroll inside their own box on phones */
.v-prose .wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}
.v-prose .wp-block-table table { min-width: 32rem; font-size: var(--v-text-small); border: 0; }
/* WordPress draws a box around every cell; the site's tables use hairline rows only (base.css). */
.v-prose .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: var(--v-hairline) solid var(--v-border);
	padding: var(--v-space-3) var(--v-space-4) var(--v-space-3) 0;
}
.v-prose .wp-block-table thead { border: 0; }
.v-prose .wp-block-table thead th { border-bottom: var(--v-hairline) solid var(--v-border-strong); }
.v-prose .wp-block-table figcaption {
	margin-top: var(--v-space-3);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
.v-prose .wp-block-table th[scope="row"],
.v-prose .wp-block-table tbody td:first-child { font-weight: var(--v-weight-semibold); color: var(--v-text); }

/* Questions: native <details> */
.v-prose .wp-block-details { border-top: var(--v-hairline) solid var(--v-border); }
.v-prose .wp-block-details:last-child { border-bottom: var(--v-hairline) solid var(--v-border); }
.v-prose .wp-block-details + .wp-block-details { margin-top: 0; }
.v-prose .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--v-space-5);
	min-height: var(--v-hit-min);
	padding-block: var(--v-space-4);
	font-family: var(--v-font-body);
	font-size: var(--v-text-body);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
	cursor: pointer;
	list-style: none;
}
.v-prose .wp-block-details summary::-webkit-details-marker { display: none; }
.v-prose .wp-block-details summary::after {
	content: "";
	flex: none;
	width: var(--v-accordion-icon);
	height: var(--v-accordion-icon);
	background:
		linear-gradient(currentColor, currentColor) center / 100% var(--v-stitch-width) no-repeat,
		linear-gradient(currentColor, currentColor) center / var(--v-stitch-width) 100% no-repeat;
	transition: transform var(--v-dur-ui) var(--v-ease-out);
}
.v-prose .wp-block-details[open] summary::after { transform: rotate(45deg); }
.v-prose .wp-block-details > :not(summary) {
	margin: 0 0 var(--v-space-5);
	color: var(--v-text-muted);
	font-size: var(--v-text-body);
}

/* Images: always the reading column's width (wide/full alignments fall back to it), caption below */
.v-prose .wp-block-image {
	margin-inline: 0;
	max-width: 100%;
}
.v-prose .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.v-prose .wp-block-image :is(figcaption, .wp-element-caption),
.v-prose .wp-block-embed figcaption {
	margin-top: var(--v-space-3);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-body);
	text-align: left;
}
.v-prose .wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Jackets placed in an article (vellren/products): the shared product card, 1–3 across */
.v-prose .v-inline-products {
	display: grid;
	gap: var(--v-space-5);
	justify-items: start;
	margin-block: var(--v-space-9);
	padding-block: var(--v-space-6);
	border-block: var(--v-hairline) solid var(--v-border);
}
.v-inline-products__title {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-bold);
	letter-spacing: var(--v-track-ui);
}
.v-prose .v-inline-products__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-5) var(--v-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--v-text-body);
	line-height: var(--v-lh-body);
}
.v-prose .v-inline-products__list li + li { margin-top: 0; }
.v-prose .v-inline-products--1 .v-inline-products__list { grid-template-columns: minmax(0, 18rem); }
@media (min-width: 768px) {
	.v-prose .v-inline-products--3 .v-inline-products__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.v-prose .v-inline-products a { background-image: none; }

/* ================================================================ After the article */
.v-article__author {
	max-width: calc(var(--v-measure) + 2 * var(--v-gutter));
	padding-bottom: var(--v-space-9);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
.v-article__related,
.v-article__jackets { padding-block: var(--v-section-y); }
.v-article__related { background: var(--v-surface-alt); }
.v-article__section-title {
	margin-bottom: var(--v-space-8);
	font-size: var(--v-text-h2);
	line-height: var(--v-lh-heading);
	text-align: center;
}
.v-article__jackets-head {
	display: grid;
	justify-items: center;
	gap: var(--v-space-4);
	margin-bottom: var(--v-space-8);
}
.v-article__jackets-head .v-article__section-title { margin-bottom: 0; }
.v-article__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v-space-7) var(--v-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1024px) {
	.v-article__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.v-jcard__media img,
	.v-journal__feature-media img,
	.v-toc__title::after,
	.v-prose .wp-block-details summary::after { transition: none; }
	.v-jcard__link:hover .v-jcard__media img,
	.v-journal__feature-link:hover .v-journal__feature-media img { transform: none; }
}