/*
 * Vellren Kit: editorial sections built as Elementor widgets (master plan §11.1.1).
 * Loaded only on pages that use a Kit widget. Tokens only (tokens.css); radius 0; motion comes
 * from motion.css through data-v-anim set by the widget.
 */

/* ================================================================ Elementor frame
   A container holding a Kit section adds nothing of its own: no padding, no gap, full width. */
.e-con:has(> .elementor-widget > .v-kit) {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	padding: 0;
}
.elementor-widget:has(> .v-kit) { width: 100%; }

/* Elementor's frontend CSS sets `.elementor img { height: auto }`, which would undo every
   cover-fit image inside a Kit section (cards, tiles, story frames). */
.v-kit :is(.v-card__media, .v-tile, .v-kit-hero__media, .v-story__frame, .v-story__inline, .v-kit-fit__frame, .v-kit-band__img, .v-kit-post__media, .v-kit-pick__media, .v-kit-picks__thumb, .v-kit-overlap__frame, .v-kit-mast__media, .v-kit-cascade__frame, .v-kit-cascade__mobile-media, .v-kit-letter__portrait, .v-kit-spec__media) img { height: 100%; }

/* Intended shot (.v-kit-shot) lives in components.css: the Journal uses it too. */

/* Editor-only note for sections hidden until real content exists. */
.v-kit-note {
	margin: var(--v-space-5) var(--v-gutter);
	padding: var(--v-space-5);
	border: var(--v-hairline) dashed var(--v-border-input);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}

/* ================================================================ Hero chapters (§11.1 #3, §7.1 v1.55)
   A full-bleed photo stage with a solid Ink copy panel anchored bottom-left on the content edge
   (a label sewn on the hide: solid, so Paper text holds on any photo, and brown never sits on
   dark), then a Paper chapter bar whose current chapter carries the Hide Stitch. The hero fills
   the screen under the announcement and header at every width (owner, v1.55): the chapter bar is
   the last thing in view and the trust strip starts below the fold. --v-hero-top is the hero's
   distance from the top of the page, measured by kit.js (the announcement wraps on phones and
   can be dismissed); the fallback assumes a one-line announcement. Phones: photo, panel and bar
   stacked, the photo taking what the panel and bar leave. Slides share one grid cell, so the
   stage keeps its height while a chapter changes. */
.v-kit-hero {
	--_side: max(var(--v-gutter), (100% - var(--v-container)) / 2);
	display: flex;
	flex-direction: column;
	min-height: max(30rem, calc(100svh - var(--v-hero-top, var(--v-header-h) + var(--v-hit-min))));
	background: var(--v-surface);
}
.v-announce-off .v-kit-hero { --v-hero-top: var(--v-header-h); }
.v-kit-hero__stage { flex: 1 0 auto; display: grid; touch-action: pan-y; } /* horizontal swipes change chapter */
.v-kit-hero__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-rows: minmax(12rem, 1fr) auto;
}
.v-kit-hero__slide[hidden] { display: none; }
.v-kit-hero__slide[data-v-leaving] { display: grid; z-index: 0; }
.v-kit-hero__slide:not([data-v-leaving]) { z-index: 1; }
.v-kit-hero__media {
	grid-area: 1 / 1;          /* placed, not auto-flowed: the arrows share this cell */
	position: relative;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-kit-hero__media img,
.v-kit-hero__media .v-kit-shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;   /* keep the collar and shoulders in the crop */
}
.v-kit-hero__copy {
	grid-area: 2 / 1;
	display: grid;
	gap: var(--v-space-4);
	align-content: end;
	justify-items: start;
	padding: var(--v-space-6) var(--v-gutter) var(--v-space-7);
	background: var(--v-surface);
	color: var(--v-text);
}
.v-kit-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--v-font-display);
	font-size: var(--v-text-h1);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
	color: var(--v-heading);
	text-wrap: balance;
}
.v-kit-hero__title em { line-height: var(--v-lh-heading); }
.v-kit-hero__text {
	margin: 0;
	max-width: 40ch;
	font-size: var(--v-text-body);
	line-height: var(--v-lh-body);
	color: var(--v-text-muted);
}
.v-kit-hero__cta { margin-top: var(--v-space-3); }

/* The chapter bar: four equal columns on the content grid. Numerals are the position in a real
   set of four (§ taste: only a true sequence is numbered). The Stitch under the current chapter
   draws from the left; it is clipped away, never stretched (dashes keep their length). */
.v-kit-hero__bar { padding-inline: var(--_side); border-bottom: 1px solid var(--v-line); }
.v-kit-hero__chapters {
	display: grid;
	grid-template-columns: repeat(var(--v-hero-n, 4), minmax(0, 1fr));
	column-gap: var(--v-gap);
}
.v-kit-hero__chapter {
	position: relative;
	display: grid;
	align-content: start;   /* numerals share one line even when a label wraps */
	gap: var(--v-space-1);
	min-height: calc(var(--v-control-h) + var(--v-space-5));
	padding-block: var(--v-space-3);
	color: var(--v-text-muted);
	text-decoration: none;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-kit-hero__chapter::after { content: none; } /* no link underline Stitch: the bar has its own */
.v-kit-hero__num {
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-label);
	font-variant-numeric: tabular-nums;
}
.v-kit-hero__label {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
	text-wrap: balance;
}
.v-kit-hero__stitch {
	position: absolute;
	inset: auto 0 -1px;
	height: var(--v-stitch-width);
	background-image: repeating-linear-gradient(90deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--v-dur-ui) var(--v-ease-out);
}
.v-kit-hero__chapter:is([aria-selected="true"], [data-v-current]:not([role])) { color: var(--v-text); }
.v-kit-hero__chapter:is([aria-selected="true"], [data-v-current]:not([role])) .v-kit-hero__stitch { clip-path: inset(0 0 0 0); }
.v-kit-hero__chapter:active .v-kit-hero__label { transform: scale(var(--v-btn-press-scale)); }
@media (hover: hover) and (pointer: fine) {
	.v-kit-hero__chapter:hover { color: var(--v-text); }
}

@media (max-width: 767px) {
	.v-kit-hero__cta { width: 100%; justify-content: center; }
	.v-kit-hero__chapter { min-height: var(--v-control-h); padding-block: var(--v-space-2); }
	.v-kit-hero__label { font-size: var(--v-text-small); }
}
@media (min-width: 768px) {
	/* The panel sits on the photo, flush with its bottom edge, at the content edge. */
	.v-kit-hero__slide { grid-template-rows: 1fr; }
	.v-kit-hero__media,
	.v-kit-hero__copy { grid-area: 1 / 1; }
	.v-kit-hero__media { min-height: 24rem; }
	/* The wide stage (about 2 : 1) crops a 16:9 photo top and bottom: keep the headroom. */
	.v-kit-hero__media img { object-position: 50% 8%; }
	.v-kit-hero__copy {
		position: relative;
		align-self: end;
		justify-self: start;
		width: min(38rem, 72%);   /* sized so a 36-character heading sets in 2 lines */
		margin-left: var(--_side);
		padding: var(--v-space-8);
		gap: var(--v-space-5);
	}
	.v-kit-hero__text { font-size: var(--v-text-body-lg); }
	/* The intended-shot label sits in the photo's open side, clear of the panel. */
	.v-kit-hero__media .v-kit-shot { padding-left: calc(var(--_side) + min(38rem, 72%)); }
}
@media (min-width: 1024px) {
	.v-kit-hero__copy { width: min(38rem, 56%); }
	.v-kit-hero__media .v-kit-shot { padding-left: calc(var(--_side) + min(38rem, 56%)); }
}
/* Previous/next: 48px Paper squares at the photo's bottom-right (the secondary button, on Paper
   so it reads over any photo; its Ink hover fill rises as everywhere). Shown by the script. */
.v-kit-hero__arrows {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	display: flex;
	gap: var(--v-space-2);
	margin: 0 var(--v-gutter) var(--v-space-4) 0;
}
.v-kit-hero__arrows[hidden] { display: none; }
.v-kit-hero__arrow { background-color: var(--v-paper); }
@media (min-width: 768px) {
	.v-kit-hero__arrows { margin: 0 var(--_side) var(--v-space-6) 0; }
}

/* Entry (§7.1 v1.56, owner): the photo opens from its centre, then the Ink panel rises from its
   bottom edge and its words lift in, then the chapter bar and the arrows fade up in turn. Pure
   CSS on the first paint (no script to wait for); kit.js drops the flag once it has played, so a
   return to chapter 1 never replays it. Off with reduced motion and under the 3 s failsafe. */
@media (prefers-reduced-motion: no-preference) {
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] {
		/* Kept short: the heading is the page's LCP, uncovered as the panel rises (§18). */
		--_rise: calc(var(--v-dur-chapter) * 0.5);
		--_bar: calc(var(--_rise) + var(--v-dur-swap));
	}
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__media { animation: v-hero-cut var(--v-dur-chapter) var(--v-ease-in-out) both; }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__media img { animation: v-hero-zoom var(--v-dur-chapter) var(--v-ease-out) both; }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__copy { animation: v-hero-rise var(--v-dur-swap) var(--v-ease-out) var(--_rise) both; }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__copy > * { animation: v-hero-lift var(--v-dur-swap) var(--v-ease-out) both; }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__copy > :nth-child(1) { animation-delay: var(--_rise); }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__copy > :nth-child(2) { animation-delay: calc(var(--_rise) + var(--v-stagger)); }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__slide:first-child .v-kit-hero__copy > :nth-child(3) { animation-delay: calc(var(--_rise) + var(--v-stagger) * 2); }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__chapter { animation: v-hero-up var(--v-dur-ui) var(--v-ease-out) calc(var(--_bar) + var(--v-stagger-cards) * var(--v-i, 0)) both; }
	.v-motion:not(.v-motion-failsafe) [data-v-hero-enter] .v-kit-hero__arrows { animation: v-hero-up var(--v-dur-ui) var(--v-ease-out) calc(var(--_bar) + var(--v-stagger-cards) * 4) both; }
}
/* Both ends named: clip-path cannot interpolate from inset() to the element's natural `none`
   (it would jump half-way, which is how the entry first looked missing). */
@keyframes v-hero-cut { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes v-hero-zoom { from { transform: scale(var(--v-zoom)); } }
@keyframes v-hero-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v-hero-lift { from { opacity: 0; transform: translateY(var(--v-lift)); } }
@keyframes v-hero-up { from { opacity: 0; transform: translateY(var(--v-lift-sm)); } }

@media (prefers-reduced-motion: reduce) {
	.v-kit-hero__stitch, .v-kit-hero__chapter { transition: none; }
}

/* ================================================================ Trust strip (§11.1 #4): dense Chalk band, no motion */
.v-kit-trust {
	padding-block: var(--v-space-6);
	background: var(--v-surface-alt);
}

/* ================================================================ Product rail (§11.1 #5)
   Starts on the content edge and bleeds off the right edge: 1.3 cards on phones, 2.3 from 768,
   3.3 from 1024, 4.3 from 1280. Scroll-snap; previous/next buttons (kit.js). */
.v-kit-rail {
	container-type: inline-size;
	--_n: 1.3;
	--_gaps: 1;
}
.v-kit-rail__head,
.v-kit-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--v-space-4) var(--v-space-6);
	margin-bottom: var(--v-space-7);
}
.v-kit-rail__tools {
	display: flex;
	align-items: center;
	gap: var(--v-space-5);
}
.v-kit-rail__nav {
	display: flex;
	gap: var(--v-space-2);
}
.v-kit-rail__nav[hidden] { display: none; }
.v-kit-rail__track {
	--_w: min(var(--v-container), 100cqi - 2 * var(--v-gutter));
	--_side: calc((100cqi - var(--_w)) / 2);
	position: relative;   /* contains the cards' visually hidden text, or it widens the page */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((var(--_w) - var(--_gaps) * var(--v-gap)) / var(--_n));
	gap: var(--v-gap);
	margin: 0;
	padding: 0 var(--_side) var(--v-space-5);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--_side);
	scrollbar-width: none;   /* v1.32 (owner): no scrollbar; previous/next buttons at every width, swipe on touch */
}
.v-kit-rail__track::-webkit-scrollbar { display: none; }
.v-kit-rail__item { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) {
	.v-kit-rail { --_n: 2.3; --_gaps: 2; }
}
@media (min-width: 1024px) {
	.v-kit-rail { --_n: 3.3; --_gaps: 3; }
}
@media (min-width: 1280px) {
	.v-kit-rail { --_n: 4.3; --_gaps: 4; }
}

/* ================================================================ Shop by style (§11.1 #6)
   Every style as a link under the heading, then the golden mosaic (base.css .v-golden):
   3 style tiles and the cell leading to all jackets. */
.v-kit-styles__head {
	display: grid;
	gap: var(--v-space-5);
	margin-bottom: var(--v-space-8);
}
.v-kit-styles__lead {
	max-width: 48ch;
	color: var(--v-text-muted);
}
.v-kit-styles__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-kit-styles__cell { display: grid; }
.v-kit-styles__cell > .v-tile { height: 100%; }
.v-kit-styles__all {
	align-content: space-between;
	min-height: calc(var(--v-control-h) * 3);
	text-decoration: none;
	transition: background-color var(--v-dur-hover) var(--v-ease-out);
}
.v-kit-styles__count {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-h3);
	font-variant-numeric: lining-nums;
}
@media (hover: hover) and (pointer: fine) {
	.v-kit-styles__all:hover { background: var(--v-surface-sunken); }
	.v-kit-styles__all:hover .v-btn__arrow { transform: translateX(var(--v-space-1)); }
}

/* ================================================================ Craft story (§11.1 #7): Ink, the page's one brand statement, then the sticky story */
.v-kit-story__head {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	margin: 0 auto var(--v-space-11);
	text-align: center;
}
.v-kit-story__title {
	max-width: 18ch;
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
}
.v-kit-story__lead {
	max-width: 44ch;
	color: var(--v-text-muted);
}
.v-kit-story .v-story__frame .v-kit-shot,
.v-kit-story .v-story__inline .v-kit-shot { aspect-ratio: auto; }

/* ================================================================ Find your fit (§11.1 #8): golden stack */
.v-kit-fit__frame {
	width: 100%;
	height: 100%;
}
.v-kit-fit__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-fit .v-golden-stack__copy { row-gap: var(--v-space-7); }   /* heading, then the routes: between groups (§5.1) */
.v-kit-fit__routes {
	display: grid;
	gap: var(--v-space-8);
}
.v-kit-fit__route {
	display: grid;
	gap: var(--v-space-4);
	align-content: start;
	justify-items: start;
}
.v-kit-fit__route p { max-width: 40ch; color: var(--v-text-muted); }
.v-kit-fit__steps {
	display: grid;
	gap: var(--v-space-2);
	margin: 0;
	padding-left: var(--v-space-5);
	font-variant-numeric: tabular-nums lining-nums;
}
.v-kit-fit__steps li::marker { color: var(--v-text-muted); font-weight: var(--v-weight-semibold); }
@media (min-width: 768px) {
	.v-kit-fit__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-gap); }
}

/* ================================================================ Reviews (§11.1 #9): carousel inside the content width */
.v-kit-reviews__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--v-gap);
	margin: 0;
	padding: 0 0 var(--v-space-5);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.v-kit-reviews__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.v-kit-reviews__track { grid-auto-columns: calc((100% - var(--v-gap)) / 2); }
}
@media (min-width: 1024px) {
	.v-kit-reviews__track { grid-auto-columns: calc((100% - 2 * var(--v-gap)) / 3); }
}
.v-kit-review {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	gap: var(--v-space-4);
	padding: var(--v-space-6);
	background: var(--v-surface);
	scroll-snap-align: start;
}
.v-kit-review__rating {
	display: flex;
	align-items: center;
	gap: var(--v-space-2);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}
.v-kit-review__text { margin: 0; }
.v-kit-review__text p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.v-kit-review__by {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-1) var(--v-space-3);
	font-size: var(--v-text-small);
	color: var(--v-text-muted);
}
.v-kit-review__by strong { color: var(--v-text); }
.v-kit-review__product {
	display: inline-flex;
	align-items: center;
	min-height: var(--v-hit-min);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
}

/* ================================================================ Editorial band (§11.1 #10): full-bleed image, one line on Paper, the page's only parallax */
.v-kit-band { position: relative; }
.v-kit-band__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-kit-band__img { height: 100%; }
.v-kit-band__img img,
.v-kit-band__img .v-kit-shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-band__wrap { position: relative; }
.v-kit-band__panel {
	display: grid;
	gap: var(--v-space-5);
	justify-items: start;
	margin: calc(var(--v-space-9) * -1) 0 0;
	padding: var(--v-space-7) var(--v-space-6);
	background: var(--v-surface);
	max-width: 34rem;
}
.v-kit-band__line {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h2);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-heading);
	letter-spacing: var(--v-track-h2);
	color: var(--v-heading);
	text-wrap: balance;
}
@media (min-width: 1024px) {
	.v-kit-band__frame { aspect-ratio: 21 / 9; }
	.v-kit-band__wrap {
		position: absolute;
		inset: auto 0 var(--v-space-9);
		margin-inline: auto;
	}
	.v-kit-band__panel {
		margin: 0;
		padding: var(--v-space-8) var(--v-space-8);
	}
}

/* ================================================================ Journal list (§11.1 #11): 1 large + 2 small, no numbering */
.v-kit-journal__grid {
	display: grid;
	gap: var(--v-space-8) var(--v-gap);
}
.v-kit-post__link {
	display: grid;
	gap: var(--v-space-4);
	color: var(--v-text);
	text-decoration: none;
}
.v-kit-post__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-kit-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--v-dur-zoom) var(--v-ease-out);
}
.v-kit-post__body { display: grid; gap: var(--v-space-2); align-content: start; }
.v-kit-post__cat,
.v-kit-post__meta { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-kit-post__excerpt { max-width: 52ch; color: var(--v-text-muted); }
@media (hover: hover) and (pointer: fine) {
	.v-kit-post__link:hover .v-kit-post__media img { transform: scale(var(--v-zoom)); }
	.v-kit-post__link:hover .v-kit-post__title { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: var(--v-hairline); }
}
@media (min-width: 1024px) {
	.v-kit-journal__grid {
		grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
		grid-template-rows: min-content 1fr;   /* the two small posts stay together at the top */
		align-items: start;
	}
	.v-kit-post--large { grid-row: 1 / 3; }
	.v-kit-post:not(.v-kit-post--large) .v-kit-post__link {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
		align-items: start;
	}
}
@media (prefers-reduced-motion: reduce) {
	.v-kit-post__link:hover .v-kit-post__media img { transform: none; }
}

/* ================================================================ Newsletter (§11.1 #12): centred statement, one field */
.v-kit-news__inner {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	text-align: center;
}
.v-kit-news__lead { max-width: 44ch; color: var(--v-text-muted); }
.v-kit-news__form {
	position: relative;
	width: 100%;
	max-width: 32rem;
	text-align: left;
}
.v-kit-news__row {
	display: flex;
	gap: var(--v-space-2);
}
.v-kit-news__row .v-input { flex: 1 1 auto; min-width: 0; }
.v-kit-news__row .v-btn { flex: none; }
.v-kit-news__hp {
	position: absolute;
	left: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.v-kit-news__status {
	margin-top: var(--v-space-3);
	font-size: var(--v-text-small);
	color: var(--v-positive);
	text-align: left;
}
.v-kit-news__status:empty { display: none; }
@media (max-width: 379px) {
	.v-kit-news__row { flex-direction: column; }
}

/* ================================================================ Christmas cut-off (§11.1 #3a): one line, in season only */
.v-kit-xmas {
	border-bottom: var(--v-hairline) solid var(--v-border);
	background: var(--v-surface);
}
.v-kit-xmas__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--v-space-1) var(--v-space-4);
	padding-block: var(--v-space-3);
	font-size: var(--v-text-small);
	text-align: center;
}

/* ================================================================ Our picks (§11.1 #6, v1.32)
   Phones: photo, buying facts, description. From 1024px: description, photo, buying facts at
   1 : 1.618 : 1. One jacket at a time; the others are [hidden] panels. */
.v-kit-picks__head {
	display: grid;
	gap: var(--v-space-4);
	margin-bottom: var(--v-space-8);
}
.v-kit-picks__lead { max-width: 48ch; color: var(--v-text-muted); }
.v-kit-pick {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "media" "buy" "info";
	gap: var(--v-space-6);
}
.v-kit-pick[hidden] { display: none; }
.v-kit-pick__media {
	grid-area: media;
	display: block;
	aspect-ratio: var(--v-card-ratio);
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-kit-pick__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-pick__info,
.v-kit-pick__buy {
	display: grid;
	gap: var(--v-space-4);
	align-content: center;
	justify-items: start;
}
.v-kit-pick__info { grid-area: info; }
.v-kit-pick__buy { grid-area: buy; }
.v-kit-pick__style,
.v-kit-pick__claim,
.v-kit-pick__incl { font-size: var(--v-text-small); color: var(--v-text-muted); }
.v-kit-pick__name a { color: inherit; text-decoration: none; }
.v-kit-pick__name a:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: var(--v-hairline); }
.v-kit-pick__desc { max-width: 40ch; color: var(--v-text-muted); }
.v-kit-pick__price { font-size: var(--v-text-price); }
.v-kit-pick__buy > .v-kit-pick__incl { margin-top: calc(var(--v-space-3) * -1); }
.v-kit-pick__colours {
	display: flex;
	align-items: center;
	gap: var(--v-space-3);
	font-size: var(--v-text-small);
}
.v-kit-pick__colours .v-card__dots { margin: 0; }
.v-kit-pick__fit {
	max-width: 36ch;
	font-size: var(--v-text-small);
	color: var(--v-text-muted);
}
.v-kit-pick__actions {
	display: grid;
	gap: var(--v-space-2);
	width: 100%;
	margin-top: var(--v-space-2);
}
@media (min-width: 1024px) {
	.v-kit-pick {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) minmax(0, 1fr);
		grid-template-areas: "info media buy";
		gap: var(--v-space-9);
		align-items: center;
	}
}
.v-kit-picks__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--v-space-3);
	margin-top: var(--v-space-8);
}
.v-kit-picks__controls[hidden],
.v-kit-picks__more[hidden] { display: none; }
.v-kit-picks__thumbs {
	display: none;
	gap: var(--v-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.v-kit-picks__thumbs { display: flex; }
}
.v-kit-picks__thumb {
	display: block;
	width: var(--v-control-h);
	aspect-ratio: var(--v-card-ratio);
	padding: 0;
	border: var(--v-hairline) solid var(--v-border);
	background: var(--v-placeholder);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--v-dur-hover) var(--v-ease-out), transform var(--v-dur-press) var(--v-ease-out);
}
.v-kit-picks__thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-kit-picks__thumb:active { transform: scale(var(--v-btn-press-scale)); }
.v-kit-picks__thumb[aria-pressed="true"] {
	border-color: var(--v-action);
	box-shadow: 0 0 0 var(--v-hairline) var(--v-action);
}
@media (hover: hover) and (pointer: fine) {
	.v-kit-picks__thumb:hover { border-color: var(--v-border-strong); }
}
.v-kit-picks__count {
	min-width: 5ch;
	font-size: var(--v-text-small);
	color: var(--v-text-muted);
	text-align: center;
}
.v-kit-picks__more {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-2) var(--v-space-6);
	margin: var(--v-space-8) 0 0;
	padding: 0;
	list-style: none;
}

/* Showcase reveal (§7.1 v1.32). Armed by kit.js only when motion is allowed, so without the
   script (or with reduced motion) nothing is ever hidden. Order: the photo is cut open from its
   centre and settles, then the buying facts lift in, then the description slides in from the left. */
.v-motion [data-v-picks][data-v-armed]:not(.is-in) [data-v-pick-part="media"] { clip-path: inset(0 50% 0 50%); }
.v-motion [data-v-picks][data-v-armed]:not(.is-in) [data-v-pick-part="media"] img { transform: scale(var(--v-clip-settle)); }
.v-motion [data-v-picks][data-v-armed]:not(.is-in) [data-v-pick-part="buy"] { opacity: 0; transform: translateY(var(--v-lift)); }
.v-motion [data-v-picks][data-v-armed]:not(.is-in) [data-v-pick-part="info"] { opacity: 0; transform: translateX(calc(var(--v-lift) * -1)); }
[data-v-picks][data-v-armed]:not(.is-done) [data-v-pick-part="media"] {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--v-dur-image) var(--v-ease-in-out);
}
[data-v-picks][data-v-armed]:not(.is-done) [data-v-pick-part="media"] img {
	transition: transform var(--v-dur-image) var(--v-ease-in-out);
}
[data-v-picks][data-v-armed]:not(.is-done) [data-v-pick-part="buy"] {
	transition: opacity var(--v-dur-reveal) var(--v-ease-out) calc(var(--v-stagger) * 4), transform var(--v-dur-reveal) var(--v-ease-out) calc(var(--v-stagger) * 4);
}
[data-v-picks][data-v-armed]:not(.is-done) [data-v-pick-part="info"] {
	transition: opacity var(--v-dur-reveal) var(--v-ease-out) calc(var(--v-stagger) * 6), transform var(--v-dur-reveal) var(--v-ease-out) calc(var(--v-stagger) * 6);
}

/* ================================================================ How ordering works (§11.1 #8, v1.32)
   Three stages on one Stitch. From 768px the Stitch runs across above the stages and draws with
   the scissors (.v-cut); phones: a vertical Stitch beside the stages, already drawn. */
.v-kit-steps__title { max-width: 22ch; margin-bottom: var(--v-space-8); }
.v-kit-steps__track { position: relative; }
.v-kit-steps__list {
	display: grid;
	gap: var(--v-space-7);
	margin: 0;
	padding: 0 0 0 calc(var(--v-step-mark) + var(--v-space-4));
	list-style: none;
	background-image: repeating-linear-gradient(180deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	background-size: var(--v-stitch-width) 100%;
	background-repeat: no-repeat;
	background-position: calc(var(--v-step-mark) / 2 - var(--v-stitch-width) / 2) 0;
}
.v-kit-steps__line { display: none; }
.v-kit-steps__stage {
	position: relative;
	display: grid;
	gap: var(--v-space-2);
	align-content: start;
}
/* Stage marker (§6 v1.58): a square with the stage's icon; the first stage (today) is Hide. */
.v-kit-steps__mark {
	position: absolute;
	top: 0;
	left: calc((var(--v-step-mark) + var(--v-space-4)) * -1);
	display: grid;
	place-items: center;
	width: var(--v-step-mark);
	height: var(--v-step-mark);
	border: var(--v-hairline) solid var(--v-text-muted);
	background: var(--v-surface-alt);
	color: var(--v-text-muted);
}
.v-kit-steps__mark .v-icon { width: var(--v-step-icon); height: var(--v-step-icon); }
.v-kit-steps__stage:first-child .v-kit-steps__mark { border-color: var(--v-action); background: var(--v-action); color: var(--v-surface); }
.v-kit-steps__name { font-size: var(--v-text-h3); }
.v-kit-steps__when {
	font-weight: var(--v-weight-semibold);
	font-variant-numeric: tabular-nums lining-nums;
}
.v-kit-steps__text { max-width: 36ch; color: var(--v-text-muted); }
@media (min-width: 768px) {
	.v-kit-steps__line {
		display: block;
		position: absolute;
		inset: calc(var(--v-step-mark) / 2 - var(--v-stitch-width) / 2) 0 auto 0;
	}
	.v-kit-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--v-gap);
		padding: calc(var(--v-step-mark) + var(--v-space-5)) 0 0;
		background: none;
	}
	.v-kit-steps__mark {
		top: calc((var(--v-step-mark) + var(--v-space-5)) * -1);
		left: 0;
	}
	.v-kit-steps__when { white-space: nowrap; }
}

/* ================================================================ FAQ (§11.1 #14, v1.32): heading 1 : questions 1.618 */
.v-kit-faq__grid {
	display: grid;
	gap: var(--v-space-7);
}
.v-kit-faq__head { display: grid; gap: var(--v-space-4); align-content: start; }
.v-kit-faq__contact { color: var(--v-text-muted); }
.v-kit-faq__list .v-accordion__body p { max-width: var(--v-measure); }
@media (min-width: 1024px) {
	.v-kit-faq__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
		gap: var(--v-gap);
	}
}

/* ================================================================ Offset overlap (§11.4.1 #1)
   The family itself is in base.css (.v-overlap). As a page hero the image is capped on phones so
   the whole hero stays under ~80% of the screen (§5.1), and from 1024 px the panel takes 6
   columns until 1280 px, where a 5-column panel would wrap a 2-line H1 onto 4 lines. */
.v-kit-overlap__frame { width: 100%; height: 100%; }
.v-kit-overlap__frame img { width: 100%; height: 100%; object-fit: cover; }
.v-kit-overlap__title { max-width: 14ch; }
.v-kit-overlap__text { max-width: 40ch; color: var(--v-text-muted); }
.v-kit-overlap__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-3);
	margin-top: var(--v-space-3);
}
.v-kit-overlap--hero { padding-block: var(--v-space-6) var(--v-space-9); background: var(--v-surface); }
.v-kit-overlap--hero .v-kit-overlap__title {
	font-size: var(--v-text-h1);
	line-height: var(--v-lh-h1);
	letter-spacing: var(--v-track-h1);
}
@media (max-width: 767px) {
	.v-kit-overlap--hero { padding-bottom: var(--v-space-7); }
	.v-kit-overlap--hero .v-overlap__media { aspect-ratio: auto; height: clamp(10rem, 26svh, 18rem); }
	.v-kit-overlap--hero .v-overlap__panel { padding: var(--v-space-5) var(--v-space-5) 0; margin-left: var(--v-space-5); }
	.v-kit-overlap--hero .v-kit-overlap__text { font-size: var(--v-text-body); }
	.v-kit-overlap__actions { gap: var(--v-space-2); }
	.v-kit-overlap__actions > .v-btn { --v-btn-px: var(--v-space-4); flex: 1 1 auto; }
}
@media (min-width: 1024px) {
	.v-kit-overlap--hero { padding-block: var(--v-space-8); }
	.v-kit-overlap--hero .v-kit-overlap__text { font-size: var(--v-text-body-lg); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.v-kit-overlap--hero .v-overlap__panel { grid-column: 7 / 13; padding: var(--v-space-8) var(--v-space-7); }
	.v-kit-overlap--hero.v-kit-overlap--reverse .v-overlap__panel { grid-column: 1 / 7; }
}

/* ================================================================ How to measure (§11.4.1 #3): dense, 2 × 2 from 1024 */
.v-kit-measure__head {
	display: grid;
	gap: var(--v-space-4);
	margin-bottom: var(--v-space-8);
}
.v-kit-measure__intro { max-width: 52ch; color: var(--v-text-muted); }
.v-kit-measure__groups {
	display: grid;
	gap: var(--v-space-8) var(--v-gap);
}
.v-kit-measure__group {
	display: grid;
	gap: var(--v-space-5);
	align-content: start;
	padding-top: var(--v-space-5);
	border-top: var(--v-hairline) solid var(--v-border-strong);
}
.v-kit-measure__list { display: grid; gap: var(--v-space-5); margin: 0; }
.v-kit-measure__list dt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--v-space-2) var(--v-space-3);
	font-weight: var(--v-weight-semibold);
}
.v-kit-measure__list dd { margin: var(--v-space-1) 0 0; max-width: 48ch; color: var(--v-text-muted); }
.v-kit-measure__opt { font-size: var(--v-text-small); font-weight: var(--v-weight-regular); color: var(--v-text-muted); }
.v-kit-measure__foot {
	display: grid;
	gap: var(--v-space-3);
	justify-items: start;
	margin-top: var(--v-space-9);
	max-width: var(--v-measure);
	color: var(--v-text-muted);
}
.v-kit-measure__foot .v-arrow-link { margin-top: var(--v-space-2); }
@media (min-width: 768px) {
	.v-kit-measure__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ Golden stack (§11.4.1 #4) */
.v-kit-stack .v-golden-stack__copy { row-gap: var(--v-space-6); }
.v-kit-stack__body {
	display: grid;
	gap: var(--v-space-4);
	justify-items: start;
}
.v-kit-stack__body p { max-width: 60ch; }
.v-kit-stack__body .v-arrow-link { margin-top: var(--v-space-3); }

/* ================================================================ Compare table (§8, §11.4.1 #5)
   A real table with row headers. Below 768 px each row becomes a small block (row header, then
   each option with its column name); the ARIA roles keep the table semantics when display changes. */
.v-kit-compare__head {
	display: grid;
	gap: var(--v-space-4);
	margin-bottom: var(--v-space-8);
}
.v-kit-compare__head p { max-width: 52ch; color: var(--v-text-muted); }
.v-kit-compare__table { font-size: var(--v-text-body); font-variant-numeric: normal; }
.v-kit-compare__table th,
.v-kit-compare__table td { padding: var(--v-space-5) var(--v-space-5) var(--v-space-5) 0; }
.v-kit-compare__table thead th {
	font-size: var(--v-text-h4);
	font-weight: var(--v-weight-bold);
	color: var(--v-text);
}
.v-kit-compare__table tbody th { font-weight: var(--v-weight-semibold); }
.v-kit-compare__table td { color: var(--v-text-muted); }
@media (min-width: 768px) {
	.v-kit-compare__table tbody th { width: 26%; }
	.v-kit-compare__table td { width: 37%; }
}
@media (max-width: 767px) {
	.v-kit-compare__table,
	.v-kit-compare__table tbody,
	.v-kit-compare__table tr,
	.v-kit-compare__table th,
	.v-kit-compare__table td { display: block; width: auto; }
	.v-kit-compare__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.v-kit-compare__table tr {
		display: grid;
		gap: var(--v-space-3);
		padding-block: var(--v-space-5);
		border-bottom: var(--v-hairline) solid var(--v-border);
	}
	.v-kit-compare__table th,
	.v-kit-compare__table td { padding: 0; border: 0; }
	.v-kit-compare__table td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--v-text-small);
		font-weight: var(--v-weight-semibold);
		color: var(--v-text);
	}
}

/* ================================================================ Closing statement (§11.4.1 #7): centred, airy */
.v-kit-closing__inner {
	display: grid;
	justify-items: center;
	gap: var(--v-space-5);
	text-align: center;
}
.v-kit-closing__inner h2 { max-width: 18ch; }
.v-kit-closing__text { max-width: 44ch; color: var(--v-text-muted); }
.v-kit-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--v-space-3);
	margin-top: var(--v-space-3);
}

/* ================================================================ Our Craft (§11.9.1, v1.64)
   Distinct families: masthead, making frame, inspection table, letter, specimen pair, itemised list. */

/* Shared: a photo that fills its frame (cover), a Sand block while empty. */
:is(.v-kit-mast__media, .v-kit-cascade__frame, .v-kit-cascade__mobile-media, .v-kit-letter__portrait, .v-kit-spec__media) {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--v-placeholder);
}
:is(.v-kit-mast__media, .v-kit-cascade__frame, .v-kit-cascade__mobile-media, .v-kit-letter__portrait, .v-kit-spec__media) :is(img, .v-kit-shot) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- Masthead (#1)
   Type first: the H1 across the width, then manifesto + button beside a wide photo whose top
   meets the manifesto's first line. Both text blocks sit in the first viewport at every width. */
.v-kit-mast {
	padding-block: var(--v-space-7) var(--v-space-9);
	background: var(--v-surface);
}
.v-kit-mast__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--v-space-6);
}
.v-kit-mast__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-kit-mast__title em { line-height: var(--v-lh-heading); }
.v-kit-mast__copy {
	display: grid;
	gap: var(--v-space-6);
	justify-items: start;
	align-content: start;
}
.v-kit-mast__text {
	max-width: 32ch;
	font-size: var(--v-text-body-lg);
	line-height: var(--v-lh-body);
	color: var(--v-text-muted);
}
.v-kit-mast__media { height: clamp(10rem, 30svh, 16rem); }
@media (max-width: 767px) {
	.v-kit-mast { padding-block: var(--v-space-5) var(--v-space-7); }
	.v-kit-mast__grid { gap: var(--v-space-5); }
	.v-kit-mast__text { font-size: var(--v-text-body); }
}
@media (min-width: 768px) {
	.v-kit-mast__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v-gap); row-gap: var(--v-space-8); }
	.v-kit-mast__title { grid-column: 1 / -1; max-width: 24ch; }
	.v-kit-mast__copy { grid-column: 1 / 6; }
	.v-kit-mast__media { grid-column: 6 / -1; height: auto; aspect-ratio: 16 / 9; }
	/* With the film (v1.53, v1.54): the copy column runs the photo's full height and the play badge
	   takes its last row, so its bottom edge sits on the photo's bottom edge. The photo stretches to
	   the column (cover-cropped) instead of a fixed ratio, with the ratio's height as its minimum. */
	.v-kit-mast__grid:has(.v-film--mast) .v-kit-mast__copy { grid-template-rows: auto auto minmax(0, 1fr); }
	.v-kit-mast__grid:has(.v-film--mast) .v-kit-mast__media { aspect-ratio: auto; min-height: calc(var(--v-space-13) + var(--v-space-11)); }
	.v-kit-mast .v-film--mast { align-self: end; justify-self: start; }
}
@media (min-width: 1024px) {
	.v-kit-mast__title {
		font-size: var(--v-text-display);
		line-height: var(--v-lh-display);
		letter-spacing: var(--v-track-display);
	}
	.v-kit-mast__copy { grid-column: 1 / 5; padding-right: var(--v-space-5); }
	.v-kit-mast__media { grid-column: 5 / -1; aspect-ratio: 21 / 9; }
	.v-kit-mast__grid:has(.v-film--mast) .v-kit-mast__media { aspect-ratio: auto; min-height: calc(var(--v-space-13) * 2 + var(--v-space-8)); }
}

/* ---------------------------------------------------------------- Making frame (#2, v1.64)
   One workshop image follows the ordered process story on wide screens. The narrative stays
   plain text; smaller screens return each photograph to its matching chapter in the document. */
.v-kit-cascade__head {
	display: grid;
	gap: var(--v-space-4);
	max-width: 36rem;
	margin-bottom: var(--v-space-9);
}
.v-kit-cascade__head p { color: var(--v-text-muted); }
.v-kit-cascade__story {
	display: grid;
	gap: var(--v-space-8);
}
.v-kit-cascade__list {
	display: grid;
	gap: var(--v-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-kit-cascade__step {
	position: relative;
	display: grid;
	gap: var(--v-space-4);
	padding-block: var(--v-space-5);
}
.v-kit-cascade__mobile-media {
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
	background: var(--v-surface-sunken);
}
.v-kit-cascade__mobile-media img,
.v-kit-cascade__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-cascade__index {
	margin: 0;
	color: var(--v-text-muted);
	font-size: var(--v-text-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--v-track-label);
}
.v-kit-cascade__copy {
	display: grid;
	gap: var(--v-space-3);
	align-content: start;
}
.v-kit-cascade__name {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-regular);
	line-height: var(--v-lh-h3);
}
.v-kit-cascade__description {
	max-width: 38ch;
	margin: 0;
	color: var(--v-text-muted);
}
.v-kit-cascade__step[aria-current="step"]::before {
	position: absolute;
	inset-block: var(--v-space-5);
	inset-inline-start: 0;
	width: var(--v-stitch-width);
	background: var(--v-action);
	content: "";
}
.v-kit-cascade__stage { display: none; }
.v-kit-cascade__frame-count {
	margin-top: var(--v-space-2);
	color: var(--v-text-muted);
	font-size: var(--v-text-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--v-track-label);
}

@media (min-width: 768px) {
	.v-kit-cascade__story { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--v-gap); }
	.v-kit-cascade__stage { display: none; }
	.v-kit-cascade__list { grid-column: 1 / -1; gap: var(--v-space-9); }
	.v-kit-cascade__step { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--v-gap); align-items: center; }
	.v-kit-cascade__mobile-media { grid-column: 1 / span 5; aspect-ratio: 3 / 2; }
	.v-kit-cascade__copy { grid-column: 6 / -1; }
}
@media (min-width: 1024px) {
	.v-kit-cascade__story { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.v-kit-cascade__stage {
		display: block;
		position: sticky;
		top: calc(var(--v-header-h) + var(--v-space-5));
		grid-column: 1 / span 7;
		align-self: start;
		margin: 0;
	}
	.v-kit-cascade__window {
		position: relative;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background: var(--v-surface-sunken);
	}
	.v-kit-cascade__frame { position: absolute; inset: 0; }
	.v-kit-cascade__frame[hidden] { display: none; }
	.v-kit-cascade__list { grid-column: 8 / -1; gap: var(--v-space-8); }
	.v-kit-cascade__step { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline-start: var(--v-space-5); }
	.v-kit-cascade__mobile-media { display: none; }
	.v-kit-cascade__copy { grid-column: 1; }
}

/* ---------------------------------------------------------------- Inspection table (#2a, v1.63)
   A broad workbench detail stage is deliberately paired with a narrow control rail. The user
   chooses a proof point; the ticket gives that close look context and a route back to jackets. */
.v-kit-inspect {
	overflow: clip;
	background: var(--v-surface);
}
.v-kit-inspect__layout {
	display: grid;
	gap: var(--v-space-6);
}
.v-kit-inspect__head {
	display: grid;
	gap: var(--v-space-4);
	max-width: 42rem;
}
.v-kit-inspect__head h2 { max-width: 17ch; }
.v-kit-inspect__head p { max-width: 48ch; color: var(--v-text-muted); }
.v-kit-inspect__choices {
	display: grid;
	align-content: start;
	border-top: var(--v-hairline) solid var(--v-border);
}
.v-kit-inspect__choice {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--v-space-3);
	min-height: var(--v-control-h);
	padding-block: var(--v-space-3);
	border-bottom: var(--v-hairline) solid var(--v-border);
	color: var(--v-text-muted);
	text-decoration: none;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-kit-inspect__choice::after { content: none; }
.v-kit-inspect__choice-num {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h4);
	font-variant-numeric: tabular-nums;
}
.v-kit-inspect__choice-name {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
}
.v-kit-inspect__choice[aria-selected="true"],
.v-kit-inspect__choice[data-v-current] { color: var(--v-action); }
.v-kit-inspect__stitch {
	position: absolute;
	inset: auto 0 -1px;
	height: var(--v-stitch-width);
	background-image: repeating-linear-gradient(90deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--v-dur-ui) var(--v-ease-out);
}
.v-kit-inspect__choice[aria-selected="true"] .v-kit-inspect__stitch,
.v-kit-inspect__choice[data-v-current] .v-kit-inspect__stitch { clip-path: inset(0); }
@media (hover: hover) and (pointer: fine) {
	.v-kit-inspect__choice:hover { color: var(--v-text); }
	.v-kit-inspect__choice:hover .v-kit-inspect__stitch { clip-path: inset(0); }
}
.v-kit-inspect__choice:focus-visible .v-kit-inspect__stitch { clip-path: inset(0); }
.v-kit-inspect__stage {
	display: grid;
	min-width: 0;
	gap: var(--v-space-6);
}
.v-kit-inspect__panel {
	display: grid;
	margin: 0;
}
.v-kit-inspect__panel[hidden] { display: none; }
.v-kit-inspect__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--v-placeholder);
	isolation: isolate;
}
.v-kit-inspect__media > :is(img, .v-kit-shot),
.v-kit-inspect__lens > :is(img, .v-kit-shot) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-inspect__lens {
	position: absolute;
	inset: 0;
	display: none;
	clip-path: circle(var(--v-inspect-lens) at var(--v-inspect-x, 50%) var(--v-inspect-y, 50%));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--v-dur-ui) var(--v-ease-out);
	will-change: opacity;
}
.v-kit-inspect__lens > :is(img, .v-kit-shot) {
	transform: scale(var(--v-inspect-lens-zoom));
	transform-origin: var(--v-inspect-x, 50%) var(--v-inspect-y, 50%);
}
.v-kit-inspect__ring {
	position: absolute;
	top: var(--v-inspect-y, 50%);
	left: var(--v-inspect-x, 50%);
	width: calc(var(--v-inspect-lens) * 2);
	aspect-ratio: 1;
	overflow: visible;
	color: var(--v-surface);
	pointer-events: none;
	transform: translate(-50%, -50%);
}
.v-kit-inspect__ring circle { fill: none; stroke: currentColor; stroke-width: var(--v-hairline); vector-effect: non-scaling-stroke; }
.v-kit-inspect__ticket {
	display: grid;
	justify-items: start;
	gap: var(--v-space-3);
	max-width: 34rem;
	padding: var(--v-space-5);
	border: var(--v-hairline) solid var(--v-border);
	background: var(--v-surface);
}
.v-kit-inspect__index {
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-label);
	font-variant-numeric: tabular-nums;
	color: var(--v-text-muted);
}
.v-kit-inspect__index span { padding-inline: var(--v-space-1); }
.v-kit-inspect__ticket h3 {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h3);
}
.v-kit-inspect__ticket > p:not(.v-kit-inspect__index) {
	max-width: 34ch;
	color: var(--v-text-muted);
}
.v-kit-inspect__hint { display: none; }
@media (hover: hover) and (pointer: fine) {
	.v-kit-inspect__lens { display: block; }
	.v-kit-inspect__media.is-v-inspect-lensing .v-kit-inspect__lens { opacity: 1; }
	.v-kit-inspect__hint {
		display: block;
		font-size: var(--v-text-small);
		color: var(--v-text-muted);
	}
}
@media (min-width: 768px) {
	.v-kit-inspect__layout {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		column-gap: var(--v-gap);
		row-gap: var(--v-space-7);
	}
	.v-kit-inspect__head { grid-column: 1 / 7; grid-row: 1; }
	.v-kit-inspect__choices { grid-column: 7 / 9; grid-row: 1 / 3; }
	.v-kit-inspect__stage { grid-column: 1 / 7; grid-row: 2; }
	.v-kit-inspect__hint { grid-column: 1 / 7; grid-row: 3; }
	.v-kit-inspect__stage.is-v-inspect-ready {
		position: relative;
		display: block;
		aspect-ratio: 3 / 2;
		background: var(--v-surface-sunken);
	}
	.v-kit-inspect__stage.is-v-inspect-ready .v-kit-inspect__panel {
		position: absolute;
		inset: 0;
		display: block;
		overflow: hidden;
	}
	.v-kit-inspect__stage.is-v-inspect-ready .v-kit-inspect__media { height: 100%; aspect-ratio: auto; }
	.v-kit-inspect__stage.is-v-inspect-ready .v-kit-inspect__ticket {
		position: absolute;
		inset: auto 0 0 auto;
		width: min(58%, 28rem);
	}
}
@media (min-width: 1024px) {
	.v-kit-inspect__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--v-space-8); }
	.v-kit-inspect__head { grid-column: 1 / 8; }
	.v-kit-inspect__choices { grid-column: 10 / 13; }
	.v-kit-inspect__stage { grid-column: 1 / 10; }
	.v-kit-inspect__hint { grid-column: 1 / 10; }
	.v-kit-inspect__stage.is-v-inspect-ready .v-kit-inspect__ticket {
		padding: var(--v-space-6);
		transform: rotate(var(--v-inspect-ticket-turn));
		transform-origin: 100% 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.v-kit-inspect__choice,
	.v-kit-inspect__stitch,
	.v-kit-inspect__lens { transition: none; }
	.v-kit-inspect__lens { display: none; }
}

/* ---------------------------------------------------------------- Letter (#3)
   One narrow column on Ink; the portrait hangs in the left margin from 1024. */
.v-kit-letter__grid {
	display: grid;
	gap: var(--v-space-7);
}
.v-kit-letter__portrait {
	width: min(100%, 11rem);
	aspect-ratio: 4 / 5;
}
.v-kit-letter__body {
	display: grid;
	gap: var(--v-space-6);
	max-width: 34em;
}
.v-kit-letter__text {
	display: grid;
	gap: var(--v-space-5);
}
.v-kit-letter__pull {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h3);
	color: var(--v-heading);
	text-wrap: pretty;
}
.v-kit-letter__sign {
	display: grid;
	gap: var(--v-space-1);
	margin-top: var(--v-space-3);
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
}
.v-kit-letter__name {
	color: var(--v-text);
	font-size: var(--v-text-body);
	font-weight: var(--v-weight-semibold);
}
@media (min-width: 1024px) {
	.v-kit-letter__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--v-gap); align-items: start; }
	.v-kit-letter__portrait { grid-column: 2 / 4; width: 100%; margin-top: var(--v-space-2); }
	.v-kit-letter__body { grid-column: 5 / 11; }
}

/* ---------------------------------------------------------------- Specimen pair (#4) */
.v-kit-spec__head {
	display: grid;
	gap: var(--v-space-4);
	max-width: 36rem;
	margin-bottom: var(--v-space-8);
}
.v-kit-spec__head p { color: var(--v-text-muted); }
.v-kit-spec__pair {
	display: grid;
	gap: var(--v-space-9);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v-kit-spec__item {
	display: grid;
	gap: var(--v-space-5);
	align-content: start;
}
.v-kit-spec__media { aspect-ratio: 4 / 3; }
.v-kit-spec__item > .v-arrow-link { justify-self: start; }
.v-kit-cascade__end { margin-top: var(--v-space-9); }
@media (min-width: 1024px) {
	.v-kit-cascade__end { padding-left: calc((100% - 11 * var(--v-gap)) / 12 * 7 + 7 * var(--v-gap)); }
}
.v-kit-spec__name {
	font-size: var(--v-text-h3);
	line-height: var(--v-lh-h3);
}
.v-kit-spec__facts {
	display: grid;
	gap: var(--v-space-3);
	margin: 0;
	padding-top: var(--v-space-4);
	border-top: var(--v-hairline) solid var(--v-border);
}
.v-kit-spec__facts > div {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--v-space-4);
}
.v-kit-spec__facts dt {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	line-height: var(--v-lh-body);
}
.v-kit-spec__facts dd { margin: 0; }
@media (min-width: 768px) {
	.v-kit-spec__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v-space-8); }
}

/* ---------------------------------------------------------------- Itemised list (#5)
   A receipt: one column, lines ending "Included", the Stitch, the total, the buttons. */
.v-kit-items__col {
	display: grid;
	gap: var(--v-space-5);
	max-width: calc(40rem + 2 * var(--v-gutter));
}
.v-kit-items__lead { color: var(--v-text-muted); }
.v-kit-items__list {
	display: grid;
	gap: var(--v-space-4);
	margin: var(--v-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.v-kit-items__list li {
	display: flex;
	align-items: baseline;
	gap: var(--v-space-3);
}
.v-kit-items__leader {
	flex: 1 1 var(--v-space-6);
	min-width: var(--v-space-6);
	border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-kit-items__state {
	color: var(--v-text-muted);
	font-size: var(--v-text-small);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-ui);
	white-space: nowrap;
}
.v-kit-items__rule { margin-top: var(--v-space-4); }
.v-kit-items__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--v-space-2) var(--v-space-5);
}
.v-kit-items__total span { font-weight: var(--v-weight-semibold); }
.v-kit-items__total strong {
	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-kit-items__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v-space-3);
	margin-top: var(--v-space-5);
}

/* ================================================================ Leather-grain explorer (§11.1.1, v1.62)
   One large, user-controlled material image balances the narrow copy and selector rail. The
   solid Paper caption overlaps the image edge; it stays out of the photo so contrast is stable. */
.v-kit-grain__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--v-space-5);
}
.v-kit-grain__head {
	display: grid;
	align-content: start;
	gap: var(--v-space-4);
}
.v-kit-grain__head h2 { max-width: 14ch; }
.v-kit-grain__head p { max-width: 40ch; color: var(--v-text-muted); }
.v-kit-grain__stage {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 3;
	background: var(--v-surface-sunken);
}
.v-kit-grain__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}
.v-kit-grain__panel[hidden] { display: none; }
.v-kit-grain__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--v-placeholder);
}
.v-kit-grain__media :is(img, .v-kit-shot) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.v-kit-grain__caption {
	position: absolute;
	inset: auto auto 0 0;
	display: grid;
	justify-items: start;
	gap: var(--v-space-2);
	width: min(82%, 26rem);
	padding: var(--v-space-4);
	background: var(--v-surface);
}
.v-kit-grain__index {
	font-size: var(--v-text-label);
	font-weight: var(--v-weight-semibold);
	letter-spacing: var(--v-track-label);
	font-variant-numeric: tabular-nums;
	color: var(--v-text-muted);
}
.v-kit-grain__index span { padding-inline: var(--v-space-1); }
.v-kit-grain__caption h3 {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h3);
	font-weight: var(--v-weight-medium);
	line-height: var(--v-lh-h3);
}
.v-kit-grain__choices {
	display: grid;
	align-content: end;
}
.v-kit-grain__choice {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--v-space-4);
	min-height: var(--v-hit-min);
	padding-block: var(--v-space-4);
	border-bottom: var(--v-hairline) solid var(--v-border);
	color: var(--v-text-muted);
	text-decoration: none;
	transition: color var(--v-dur-hover) var(--v-ease-out);
}
.v-kit-grain__choice::after { content: none; }
.v-kit-grain__choice-number {
	font-family: var(--v-font-display);
	font-size: var(--v-text-h4);
	font-variant-numeric: tabular-nums;
}
.v-kit-grain__choice-name {
	font-size: var(--v-text-ui);
	font-weight: var(--v-weight-semibold);
	line-height: var(--v-lh-ui);
}
.v-kit-grain__choice[aria-selected="true"],
.v-kit-grain__choice[data-v-current] { color: var(--v-action); }
.v-kit-grain__stitch {
	position: absolute;
	inset: auto 0 -1px;
	height: var(--v-stitch-width);
	background-image: repeating-linear-gradient(90deg, var(--v-stitch) 0 var(--v-stitch-dash), transparent var(--v-stitch-dash) calc(var(--v-stitch-dash) + var(--v-stitch-gap)));
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--v-dur-ui) var(--v-ease-out);
}
.v-kit-grain__choice[aria-selected="true"] .v-kit-grain__stitch { clip-path: inset(0); }
.v-kit-grain__choice[data-v-current] .v-kit-grain__stitch { clip-path: inset(0); }
@media (hover: hover) and (pointer: fine) {
	.v-kit-grain__choice:hover { color: var(--v-text); }
	.v-kit-grain__choice:hover .v-kit-grain__stitch { clip-path: inset(0); }
}
.v-kit-grain__choice:focus-visible .v-kit-grain__stitch { clip-path: inset(0); }
@media (min-width: 768px) {
	.v-kit-grain__layout {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		column-gap: var(--v-gap);
		row-gap: var(--v-space-7);
	}
	.v-kit-grain__head { grid-column: 1 / 4; grid-row: 1; }
	.v-kit-grain__stage { grid-column: 4 / 9; grid-row: 1 / 3; aspect-ratio: 5 / 4; }
	.v-kit-grain__choices { grid-column: 1 / 4; grid-row: 2; }
	.v-kit-grain__caption { padding: var(--v-space-5); }
}
@media (min-width: 1024px) {
	.v-kit-grain__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--v-space-8); }
	.v-kit-grain__head,
	.v-kit-grain__choices { grid-column: 1 / 5; }
	.v-kit-grain__stage { grid-column: 5 / 13; aspect-ratio: 5 / 4; }
	.v-kit-grain__caption { padding: var(--v-space-6); }
}
@media (prefers-reduced-motion: reduce) {
	.v-kit-grain__choice,
	.v-kit-grain__stitch { transition: none; }
}