/* Irrawaddy Leather: paper-cutout theme.
   Pure CSS: no images, no web fonts, no frameworks.
   The look: a kraft paper page, cream sheets with torn or deckled edges (clip-path),
   washi tape, photos taped on as prints, and bold cut-paper accents. */

:root {
	/* paper and ink */
	--kraft: #cfa97c;
	--cream: #fbf4e4;
	--cream-2: #efe1c0;
	--white-paper: #fffdf6;
	--ink: #2b211a;
	--ink-soft: #5a4a3c;
	/* cut-paper accents (text on them passes 4.5:1) */
	--terracotta: #b34a27;
	--terracotta-dark: #7c3017;
	--teal: #1f6f6b;
	--teal-deep: #174f4c;
	--mustard: #e0a526;

	--font-head: "Segoe Print", "Comic Neue", "Bradley Hand", cursive;
	--font-body:
		system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		sans-serif;

	/* Paper shadows. drop-shadow follows clipped (torn) edges, box-shadow would not. */
	--lift-low: drop-shadow(0 1px 1px rgb(58 34 12 / 0.32));
	--lift: drop-shadow(0 1px 1px rgb(58 34 12 / 0.3))
		drop-shadow(0 6px 8px rgb(58 34 12 / 0.22));
	--lift-high: drop-shadow(0 2px 2px rgb(58 34 12 / 0.3))
		drop-shadow(0 16px 18px rgb(58 34 12 / 0.28));

	/* washi tape ends: small zig-zag */
	--tape-ends: polygon(
		0 0,
		100% 0,
		calc(100% - 4px) 17%,
		100% 33%,
		calc(100% - 4px) 50%,
		100% 67%,
		calc(100% - 4px) 83%,
		100% 100%,
		0 100%,
		4px 83%,
		0 67%,
		4px 50%,
		0 33%,
		4px 17%
	);
}

/* biome-ignore format: generated clip-path polygons (torn, deckled, zig-zag, hand-cut, seal), wrapped by hand */
:root {
	--tear-b: polygon(
		0 0, 100% 0, calc(100% - 1.2px) 12.6%, calc(100% - 0.9px) 25.3%, calc(100% - 1px) 38.5%,
		calc(100% - 1.7px) 51.7%, calc(100% - 0.8px) 66.6%, calc(100% - 1.3px) 79.4%,
		calc(100% - 1.4px) 89%, 100% calc(100% - 3.8px), 97.5% calc(100% - 0.3px),
		95% calc(100% - 0.8px), 92.2% calc(100% - 8.4px), 89% calc(100% - 5px),
		85.8% calc(100% - 5.3px), 82.1% calc(100% - 2.7px), 79.7% calc(100% - 5px),
		75.9% calc(100% - 7.3px), 72.2% calc(100% - 0.9px), 68.9% calc(100% - 6.4px),
		64.4% calc(100% - 0.5px), 60% calc(100% - 4.4px), 55.7% calc(100% - 6.3px),
		52.7% calc(100% - 9.8px), 48.9% calc(100% - 4.3px), 46.1% calc(100% - 4.7px),
		43.9% calc(100% - 3.5px), 39.7% calc(100% - 0.5px), 34.8% calc(100% - 7.3px),
		31.9% calc(100% - 4.2px), 29.4% calc(100% - 7.6px), 25.2% calc(100% - 3px),
		22.2% calc(100% - 5.5px), 18.5% calc(100% - 3.5px), 14.8% calc(100% - 8.4px),
		10.2% calc(100% - 1.6px), 7.8% calc(100% - 1.2px), 3.3% calc(100% - 6.3px),
		0% calc(100% - 6.2px), 1.2px 90.1%, 0.9px 78.5%, 0.6px 66.9%, 1px 51.3%, 0px 36.4%,
		1.8px 23%, 0.6px 11.1%
	);
	--tear-t: polygon(
		0% 8.5px, 2.3% 6.9px, 4.5% 8.1px, 8.4% 8.2px, 11.3% 5.8px, 14.3% 7.3px, 16.9% 6.4px,
		20.4% 2px, 25.3% 2.8px, 29.8% 4.7px, 31.8% 8.1px, 35.9% 8.6px, 38.6% 7.3px, 40.8% 5.8px,
		45.8% 2.9px, 50.3% 8.2px, 53.7% 1.8px, 57.9% 3.5px, 60.1% 7.2px, 63.5% 1.5px, 67.4% 6.1px,
		72.4% 8.1px, 75% 7px, 79.6% 0px, 82.3% 5.2px, 84.8% 4.8px, 89.2% 6.8px, 91.6% 3.3px,
		95.8% 2.6px, 98.9% 0.5px, 100% 0.1px, calc(100% - 1.5px) 10.4%, calc(100% - 1.1px) 23.9%,
		calc(100% - 0.6px) 33.5%, calc(100% - 0.1px) 46.6%, calc(100% - 1.7px) 62.1%,
		calc(100% - 1.5px) 76%, calc(100% - 1.7px) 86.3%, 100% 100%, 0 100%, 1.1px 86.1%, 2px 76.9%,
		0px 66.7%, 1.4px 53.1%, 1px 39.7%, 0.2px 29.1%, 1.9px 17.2%, 1.2px 6.6%
	);
	--tear-both: polygon(
		0% 3.3px, 3.5% 4.1px, 8.5% 6.8px, 10.6% 2.5px, 14.8% 2.5px, 17.4% 3.7px, 21.2% 0.9px,
		23.7% 6.4px, 28.6% 6.4px, 32.5% 0.9px, 36% 1.6px, 39.8% 4px, 44.2% 4.9px, 46.9% 2.2px,
		51.1% 6px, 55.9% 1.2px, 60.5% 1.5px, 65.4% 4.7px, 68.1% 0.2px, 71.9% 4px, 76.1% 6.9px,
		78.5% 6.3px, 81.9% 0.4px, 84.4% 2.1px, 88.3% 2.2px, 91.3% 6.2px, 95.5% 3.6px, 98.5% 2.9px,
		100% 5.5px, calc(100% - 0.2px) 14.2%, calc(100% - 1.5px) 26.7%, calc(100% - 1px) 37.8%,
		calc(100% - 0.7px) 50%, calc(100% - 1.7px) 65.9%, calc(100% - 1.6px) 79.3%,
		calc(100% - 1.8px) 90%, 100% calc(100% - 2.7px), 96.6% calc(100% - 6.7px),
		93.1% calc(100% - 6px), 90.8% calc(100% - 4.9px), 87.9% calc(100% - 3.8px),
		84.9% calc(100% - 3.4px), 80.4% calc(100% - 6.7px), 77.3% calc(100% - 4.3px),
		74.5% calc(100% - 5.8px), 71.3% calc(100% - 4.2px), 69.3% calc(100% - 2px),
		64.5% calc(100% - 2.7px), 60.4% calc(100% - 7.9px), 58.3% calc(100% - 0.2px),
		56.2% calc(100% - 2.8px), 53.4% calc(100% - 0.7px), 50.3% calc(100% - 1px),
		47.7% calc(100% - 1.9px), 44.4% calc(100% - 4.8px), 42% calc(100% - 4.1px),
		38.6% calc(100% - 0.1px), 33.7% calc(100% - 2.2px), 29.3% calc(100% - 2.7px),
		26.1% calc(100% - 3.1px), 21.3% calc(100% - 6px), 18.5% calc(100% - 0.7px),
		16.1% calc(100% - 2.5px), 13.7% calc(100% - 6.6px), 10.8% calc(100% - 2.7px),
		7.2% calc(100% - 0.9px), 2.7% calc(100% - 3.9px), 0% calc(100% - 1.5px), 1.4px 86%,
		1.9px 76.8%, 1.7px 64.2%, 0.4px 49.4%, 1px 33.7%, 1.1px 22.6%, 0.7px 10.2%
	);
	--deckle: polygon(
		0% 2.3px, 9.4% 0px, 19.3% 1.6px, 26.4% 1.1px, 35.5% 3.1px, 42% 1px, 50.9% 2.6px, 60.5% 2.5px,
		68.8% 0.9px, 79.3% 0.1px, 86.5% 2.8px, 96.4% 0.7px, 100% 1px, calc(100% - 1px) 8.7%,
		calc(100% - 1.4px) 19.6%, calc(100% - 0.8px) 33.5%, calc(100% - 3px) 43%,
		calc(100% - 2.5px) 51.5%, calc(100% - 3.1px) 64.6%, calc(100% - 1.8px) 74.5%,
		calc(100% - 2.8px) 84.9%, 100% calc(100% - 0.9px), 90.8% calc(100% - 0.6px),
		84.1% calc(100% - 2.9px), 74.9% calc(100% - 1px), 66% calc(100% - 3.5px), 58.4% 100%,
		48.5% calc(100% - 1.2px), 39.5% calc(100% - 2.7px), 33.4% calc(100% - 1.1px),
		22.8% calc(100% - 2.3px), 15.1% calc(100% - 0.3px), 7.3% calc(100% - 0.3px),
		0% calc(100% - 2.6px), 3px 88.9%, 2px 79.3%, 3.3px 65.8%, 2.5px 57.5%, 1.9px 45%,
		0.4px 31.3%, 1px 21.6%, 1.9px 10.4%
	);
	--deckle-b: polygon(
		0% 1.2px, 9.4% 1px, 16.3% 3.2px, 25% 3.7px, 31.8% 1.5px, 38.3% 2.4px, 48.1% 3.5px,
		55.5% 3.3px, 64.2% 2.8px, 71.5% 3px, 80.9% 2.8px, 90.9% 2px, 100% 0.3px,
		calc(100% - 0.5px) 8.4%, calc(100% - 4.8px) 21.6%, calc(100% - 1.6px) 31.6%,
		calc(100% - 0.5px) 42.1%, calc(100% - 3.6px) 53.9%, calc(100% - 1px) 65.6%,
		calc(100% - 2px) 73.8%, calc(100% - 3.6px) 83.2%, 100% calc(100% - 2.4px),
		93.6% calc(100% - 4.6px), 83.7% calc(100% - 2.9px), 76.5% calc(100% - 4.2px),
		66.4% calc(100% - 0.4px), 55.8% calc(100% - 3.9px), 48.1% calc(100% - 4.8px),
		41.1% calc(100% - 1.4px), 34% calc(100% - 0.4px), 24% calc(100% - 3.4px),
		15.2% calc(100% - 0.7px), 5.7% calc(100% - 1.7px), 0% calc(100% - 3.8px), 3.1px 88%,
		0.2px 76.7%, 4.7px 64.7%, 0.3px 51.8%, 2.8px 39.4%, 0.6px 28.8%, 1.6px 20.4%, 2.4px 8.4%
	);
	--zig-b: polygon(
		0 0, 100% 0, 100% 100%, 96.4% calc(100% - 9px), 92.9% 100%, 89.3% calc(100% - 9px),
		85.7% 100%, 82.1% calc(100% - 9px), 78.6% 100%, 75% calc(100% - 9px), 71.4% 100%,
		67.9% calc(100% - 9px), 64.3% 100%, 60.7% calc(100% - 9px), 57.1% 100%,
		53.6% calc(100% - 9px), 50% 100%, 46.4% calc(100% - 9px), 42.9% 100%, 39.3% calc(100% - 9px),
		35.7% 100%, 32.1% calc(100% - 9px), 28.6% 100%, 25% calc(100% - 9px), 21.4% 100%,
		17.9% calc(100% - 9px), 14.3% 100%, 10.7% calc(100% - 9px), 7.1% 100%, 3.6% calc(100% - 9px),
		0% 100%
	);
	--cut-a: polygon(
		0.6% 0%, 33.4% 0.05%, 66.7% 0.4%, 99.6% 0.1%, 99.9% 50.5%, 99.8% 99.9%, 66.6% 99.8%,
		33.7% 99.2%, 0.3% 99.4%, 0.15% 50.6%
	);
	--cut-b: polygon(
		0.2% 0.8%, 33.4% 0.4%, 66.7% 0.5%, 99% 0.3%, 99.7% 50.1%, 99.4% 99.9%, 66.7% 99.9%,
		33.2% 98.9%, 0.8% 99.9%, 0.1% 50%
	);
	--cut-c: polygon(
		0.4% 0.4%, 33.3% 0.2%, 66.5% 0.9%, 99.1% 0.3%, 99.8% 50.8%, 99.8% 99.7%, 66.6% 99.9%,
		33.1% 99.1%, 0.2% 99.4%, 0.4% 50.1%
	);
	--seal: polygon(
		100% 50%, 92.9% 59.8%, 95% 71.7%, 84.4% 77.4%, 81.2% 89.1%, 69.1% 89.6%, 61.1% 98.7%,
		50% 94%, 38.9% 98.7%, 30.9% 89.6%, 18.8% 89.1%, 15.6% 77.4%, 5% 71.7%, 7.1% 59.8%, 0% 50%,
		7.1% 40.2%, 5% 28.3%, 15.6% 22.6%, 18.8% 10.9%, 30.9% 10.4%, 38.9% 1.3%, 50% 6%, 61.1% 1.3%,
		69.1% 10.4%, 81.2% 10.9%, 84.4% 22.6%, 95% 28.3%, 92.9% 40.2%
	);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	color: var(--ink);
	font: 1rem / 1.6 var(--font-body);
	background-color: var(--kraft);
	background-image:
		radial-gradient(rgb(255 255 255 / 0.12) 1px, transparent 1.6px),
		radial-gradient(rgb(70 40 15 / 0.1) 1px, transparent 1.6px),
		repeating-linear-gradient(
			115deg,
			rgb(255 255 255 / 0.06) 0 2px,
			transparent 2px 9px
		);
	background-size:
		8px 8px,
		13px 13px,
		auto;
	background-position:
		0 0,
		4px 5px,
		0 0;
}

main {
	flex: 1;
	/* rotated paper layers can overhang the viewport edge; clip them instead of scrolling */
	overflow-x: clip;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

[hidden] {
	/* biome-ignore lint/complexity/noImportantStyles: hidden must win over display rules like .cart-layout and .card */
	display: none !important;
}

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-family: var(--font-head);
	line-height: 1.25;
	overflow-wrap: break-word;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--teal-deep);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--terracotta);
}

:focus-visible {
	outline: 3px solid var(--focus, var(--ink));
	outline-offset: 3px;
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip {
	position: absolute;
	left: 0.5rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	border-radius: 4px;
	background: var(--ink);
	color: var(--cream);
}

.skip:focus {
	top: 0.5rem;
}

.container {
	width: min(100% - 2rem, 72rem);
	margin-inline: auto;
}

/* ---------- Paper primitives ----------
   .paper   a sheet: shadow on the element, paper shape (clip-path) on ::before
   .taped   a washi tape strip across the top edge (needs position: relative)
   .print   a photo cut out and taped on: white mat plus hand-cut photo */
.paper {
	position: relative;
	isolation: isolate;
	filter: var(--lift);
}

.paper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sheet, var(--cream));
	clip-path: var(--edge, var(--deckle));
}

.taped::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: -13px;
	left: var(--tape-x, 50%);
	width: 92px;
	height: 26px;
	margin-left: -46px;
	background:
		repeating-linear-gradient(
			135deg,
			rgb(255 255 255 / 0.3) 0 5px,
			transparent 5px 10px
		),
		var(--tape, rgb(224 165 38 / 0.88));
	clip-path: var(--tape-ends);
	transform: rotate(var(--tape-tilt, -3deg));
	pointer-events: none;
}

.print {
	position: relative;
	isolation: isolate;
	margin: 0;
	filter: var(--lift-low);
	transform: rotate(var(--print-tilt, -1deg));
}

.print::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--white-paper);
	clip-path: var(--cut-b);
}

.print img {
	width: calc(100% - 16px);
	margin: 8px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	clip-path: var(--cut-a);
}

/* Crops that keep the jacket in frame */
img[src$="black-rider.jpg"] {
	object-position: 50% 30%;
}
img[src$="brown-biker.jpg"] {
	object-position: 50% 35%;
}
img[src$="black-flatlay.jpg"] {
	object-position: 50% 55%;
}
img[src$="black-street.jpg"] {
	object-position: 50% 26%;
}
img[src$="black-detail.jpg"] {
	object-position: 50% 45%;
}
img[src$="shearling-women.jpg"] {
	object-position: 50% 42%;
}
img[src$="tan-bomber.jpg"] {
	object-position: 50% 60%;
}

.chip {
	position: absolute;
	z-index: 3;
	left: 14px;
	bottom: 14px;
	margin: 0;
	padding: 0.2rem 0.8rem;
	background: var(--accent, var(--terracotta));
	color: var(--on-accent, #fff);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	clip-path: var(--cut-c);
	transform: rotate(-3deg);
}

/* Accent colours cycle through cards, steps and so on */
:is(.card, .steps li) {
	--accent: var(--terracotta);
	--on-accent: #fff;
	--tape: rgb(224 165 38 / 0.88);
	--tilt: -1deg;
}
:is(.card, .steps li):nth-child(3n + 2) {
	--accent: var(--teal);
	--tape: rgb(179 74 39 / 0.85);
	--tilt: 0.8deg;
}
:is(.card, .steps li):nth-child(3n) {
	--accent: var(--mustard);
	--on-accent: var(--ink);
	--tape: rgb(31 111 107 / 0.85);
	--tilt: -0.5deg;
}

/* ---------- Buttons and chips ---------- */
.btn {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 5px 8px 6px 9px / 8px 6px 9px 5px;
	background: var(--terracotta);
	color: #fff;
	font: 700 1rem / 1.2 var(--font-body);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow:
		0 3px 0 var(--terracotta-dark),
		0 7px 10px rgb(58 34 12 / 0.3);
	transform: rotate(-0.5deg);
}

.btn:hover {
	background: #9c3c1d;
	color: #fff;
}

.btn:active {
	transform: translateY(2px) rotate(-0.5deg);
	box-shadow:
		0 1px 0 var(--terracotta-dark),
		0 3px 5px rgb(58 34 12 / 0.3);
}

.btn--teal {
	background: var(--teal);
	box-shadow:
		0 3px 0 var(--teal-deep),
		0 7px 10px rgb(58 34 12 / 0.3);
}

.btn--teal:hover {
	background: var(--teal-deep);
}

.btn--mustard {
	background: var(--mustard);
	color: var(--ink);
	box-shadow:
		0 3px 0 #8a6209,
		0 7px 10px rgb(0 0 0 / 0.3);
}

.btn--mustard:hover {
	background: #f0b73a;
	color: var(--ink);
}

.btn--ink {
	background: var(--ink);
	color: var(--cream);
	box-shadow:
		0 3px 0 #000,
		0 7px 10px rgb(58 34 12 / 0.3);
}

.btn--ink:hover {
	background: #000;
	color: var(--cream);
}

.btn--ghost {
	border: 2px solid var(--ink);
	background: var(--cream-2);
	color: var(--ink);
	box-shadow: 0 3px 0 rgb(43 33 26 / 0.35);
}

.btn--ghost:hover {
	background: #e6d3a8;
	color: var(--ink);
}

.btn--big {
	padding: 0.9rem 1.9rem;
	font-size: 1.15rem;
}

.pill {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.45rem 1rem;
	border: 2px solid var(--ink);
	border-radius: 3px 6px 4px 7px / 6px 4px 7px 3px;
	background: var(--cream-2);
	color: var(--ink);
	font: 700 1rem / 1.2 var(--font-body);
	cursor: pointer;
}

.pill:hover:not(:disabled) {
	background: #e6d3a8;
}

.pill[aria-pressed="true"] {
	border-color: var(--teal-deep);
	background: var(--teal);
	color: var(--cream);
}

.pill:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.link-btn {
	padding: 0.4rem 0.25rem;
	border: 0;
	background: none;
	color: var(--terracotta);
	font: 700 1rem / 1.2 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.link-btn:hover {
	color: var(--terracotta-dark);
}

/* ---------- Header ---------- */
.site-header {
	position: relative;
	isolation: isolate;
	padding-bottom: 1.6rem;
	filter: var(--lift);
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cream);
	clip-path: var(--tear-b);
}

.demo-banner {
	margin: 0;
	padding: 0.45rem 1rem;
	border-bottom: 3px dashed rgb(43 33 26 / 0.45);
	background: var(--mustard);
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	padding-top: 0.8rem;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	font: 700 1.35rem / 1.2 var(--font-head);
	text-decoration: none;
}

.logo b {
	color: var(--terracotta);
}

.logo-mark {
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	background: var(--terracotta);
	color: var(--cream);
	font-size: 0.95rem;
	clip-path: var(--seal);
	transform: rotate(-8deg);
}

.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	display: inline-block;
	padding: 0.45rem 0.65rem;
	border-radius: 4px;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.main-nav a:hover {
	color: var(--ink);
	text-decoration: underline wavy var(--terracotta) 2px;
	text-underline-offset: 5px;
}

.main-nav a[aria-current="page"] {
	background: var(--mustard);
	box-shadow: 0 2px 0 rgb(43 33 26 / 0.3);
	transform: rotate(-2deg);
}

.badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	margin-left: 0.15rem;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--terracotta);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding: 2.5rem 0 2.5rem;
	overflow-x: clip;
}

.hero-grid {
	display: grid;
	gap: 2.75rem;
	align-items: center;
}

.hero-copy {
	--edge: var(--tear-both);
	padding: 2.2rem 1.5rem 2.4rem;
	transform: rotate(-1deg);
}

.hero-copy h1 {
	margin: 0.9rem 0 1rem;
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.1rem);
}

.eyebrow {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.9rem;
	background: var(--teal);
	color: var(--cream);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	clip-path: var(--cut-c);
	transform: rotate(-2deg);
}

.lead {
	max-width: 34rem;
	font-size: 1.1rem;
}

.perks {
	margin: 1.2rem 0 0;
	font-weight: 700;
	text-wrap: balance;
}

.hero-art {
	position: relative;
	isolation: isolate;
	filter: var(--lift);
}

.hero-art::before,
.hero-art::after {
	content: "";
	position: absolute;
	z-index: -1;
	clip-path: var(--tear-both);
}

.hero-art::before {
	inset: 8% -5% -7% 9%;
	background: var(--teal);
	transform: rotate(3deg);
}

.hero-art::after {
	top: -5%;
	left: -4%;
	width: 34%;
	height: 24%;
	background: var(--mustard);
	transform: rotate(-7deg);
}

.hero-art .print {
	--print-tilt: 1.6deg;
	--tape: rgb(179 74 39 / 0.85);
}

.hero-art img {
	aspect-ratio: 3 / 2;
}

.seal {
	position: absolute;
	z-index: 3;
	left: -6px;
	bottom: -20px;
	display: grid;
	place-items: center;
	width: 7.8rem;
	height: 7.8rem;
	background: var(--terracotta);
	color: #fff;
	font: 700 0.82rem / 1.2 var(--font-head);
	text-align: center;
	clip-path: var(--seal);
	transform: rotate(-9deg);
}

/* ---------- Sections ---------- */
.section {
	padding: 2rem 0;
}

.ribbon {
	--sheet: var(--teal);
	--edge: var(--tear-both);
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.5rem 1.6rem 0.6rem;
	color: var(--cream);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
	transform: rotate(-1.2deg);
}

h1.ribbon {
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem);
}

.ribbon--terracotta {
	--sheet: var(--terracotta);
}

.slip {
	--edge: var(--cut-b);
	display: inline-block;
	text-wrap: balance;
	margin: 0 0 1rem;
	padding: 0.7rem 1.5rem;
	font-weight: 700;
	transform: rotate(-1deg);
}

.more {
	margin: 1.5rem 0 0;
	text-align: center;
}

/* ---------- Product cards ---------- */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 2.5rem 1.75rem;
	margin: 0;
	padding: 1.5rem 0 1rem;
	list-style: none;
}

.card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	filter: var(--lift);
	transform: rotate(var(--tilt));
}

.card::before {
	content: "";
	position: absolute;
	inset: 10px -7px -9px 7px;
	z-index: -1;
	background: var(--accent);
	clip-path: var(--deckle-b);
	transform: rotate(2.4deg);
}

.sheet {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 14px 14px 20px;
	filter: var(--lift-low);
}

.sheet::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cream);
	clip-path: var(--deckle);
}

.sheet h2,
.sheet h3 {
	margin: 1rem 0 0.1rem;
	font-size: 1.1rem;
}

.price {
	margin: 0;
	color: var(--terracotta);
	font: 700 1.2rem / 1.2 var(--font-head);
	white-space: nowrap;
}

.blurb {
	margin: 0.2rem 0 0.8rem;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sizes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.45rem;
	margin-top: 0.4rem;
}

.size {
	position: relative;
}

.size input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.size span {
	display: block;
	padding: 0.6rem 0;
	border: 2px solid var(--ink);
	border-radius: 3px 6px 4px 7px / 6px 4px 7px 3px;
	background: var(--cream-2);
	font-weight: 700;
	text-align: center;
}

.size:hover span {
	background: #e6d3a8;
}

.size input:checked + span {
	border-color: var(--teal-deep);
	background: var(--teal);
	color: var(--cream);
}

.size input:focus-visible + span {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.msg {
	min-height: 1.5em;
	margin: 0.5rem 0 0.2rem;
	color: var(--terracotta);
	font-size: 0.9rem;
	font-weight: 700;
}

.msg.ok {
	color: var(--teal-deep);
}

.buy {
	margin-top: auto;
}

.buy .btn {
	width: 100%;
}

/* ---------- Forms ---------- */
.field {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}

label {
	font-weight: 700;
}

input:not([type="radio"]),
textarea,
select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 2px solid var(--ink);
	border-radius: 4px 6px 5px 7px / 6px 5px 7px 4px;
	background: var(--white-paper);
	color: var(--ink);
	font: inherit;
}

textarea {
	min-height: 7.5rem;
	line-height: 1.7rem;
	background:
		repeating-linear-gradient(
			transparent 0 calc(1.7rem - 1px),
			rgb(31 111 107 / 0.22) calc(1.7rem - 1px) 1.7rem
		)
		0 0.7rem / 100% 100% local,
		var(--white-paper);
	resize: vertical;
}

[aria-invalid="true"] {
	border-color: var(--terracotta);
	background-color: #fff1ea;
}

.err {
	margin: 0;
	color: var(--terracotta);
	font-size: 0.9rem;
	font-weight: 700;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.row input {
	flex: 1 1 14rem;
	width: auto;
}

/* ---------- Shop toolbar ---------- */
.toolbar {
	--edge: var(--deckle-b);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 1.2rem 1.3rem;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sort {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sort select {
	width: auto;
}

.count {
	margin: 1.1rem 0 0;
	font-weight: 700;
}

/* ---------- Story ---------- */
.story {
	--edge: var(--tear-both);
	display: grid;
	gap: 2.5rem;
	padding: 2.8rem 1.4rem 3rem;
}

.story h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
}

.story .print {
	--print-tilt: 1.8deg;
	--tape: rgb(31 111 107 / 0.85);
	--accent: var(--mustard);
	--on-accent: var(--ink);
	width: min(100%, 22rem);
	margin-inline: auto;
}

.steps {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	filter: var(--lift-low);
}

.steps li {
	position: relative;
	padding: 0.9rem 1rem 0.6rem 4rem;
	background: var(--cream-2);
	clip-path: var(--cut-b);
	counter-increment: step;
	transform: rotate(var(--tilt));
}

.steps li::before {
	content: counter(step);
	position: absolute;
	top: 0.8rem;
	left: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--accent);
	color: var(--on-accent);
	font: 700 1.1rem / 1 var(--font-head);
	clip-path: var(--seal);
}

.steps h3 {
	margin: 0 0 0.2rem;
	font-size: 1.1rem;
}

.steps p {
	margin: 0 0 0.4rem;
}

/* ---------- Newsletter ---------- */
.note {
	--sheet: var(--mustard);
	--edge: var(--deckle-b);
	--tape: rgb(255 253 246 / 0.75);
	max-width: 44rem;
	margin-inline: auto;
	padding: 2.4rem 1.4rem 1.6rem;
	transform: rotate(0.7deg);
}

.note h2 {
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
}

.note small {
	display: block;
	margin-top: 0.4rem;
}

/* ---------- Cart ---------- */
.page-head {
	padding: 2.2rem 0 0.4rem;
}

.page-head p {
	max-width: 40rem;
	margin: 0.2rem 0 1.2rem;
}

.cart-layout {
	display: grid;
	gap: 2.2rem;
	padding: 1rem 0 2rem;
	grid-template-areas: "items" "summary" "checkout";
}

.cart-items {
	grid-area: items;
}

.summary {
	--sheet: var(--white-paper);
	--edge: var(--zig-b);
	grid-area: summary;
	padding: 1.8rem 1.4rem 2.8rem;
	transform: rotate(0.6deg);
}

.checkout {
	--edge: var(--deckle-b);
	grid-area: checkout;
	padding: 2.2rem 1.4rem 1.6rem;
}

.lines {
	display: grid;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.line {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	grid-template-areas: "thumb info info" "thumb qty total" "thumb remove remove";
	gap: 0.5rem 1rem;
	align-items: center;
	padding: 1rem;
}

.thumb {
	grid-area: thumb;
	align-self: start;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	clip-path: var(--cut-a);
}

.line-info {
	grid-area: info;
}

.line-info h3 {
	margin: 0;
	font-size: 1.05rem;
}

.line-info p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.qty {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.qty-n {
	min-width: 2ch;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
}

.line-total {
	grid-area: total;
	justify-self: end;
	margin: 0;
	font: 700 1.1rem / 1.2 var(--font-head);
}

.line .link-btn {
	grid-area: remove;
	justify-self: start;
}

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.4rem;
	margin-top: 1.4rem;
}

.sum {
	margin: 0 0 1rem;
}

.sum div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 2px dashed rgb(43 33 26 / 0.3);
}

.sum dt,
.sum dd {
	margin: 0;
}

.sum .total {
	border-bottom: 0;
	font: 700 1.25rem / 1.3 var(--font-head);
}

.fine {
	margin: 0 0 0.8rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.empty {
	max-width: 34rem;
	margin: 1rem 0 2.5rem;
	padding: 2.2rem 1.6rem 2rem;
}

.thanks {
	--sheet: var(--teal);
	--edge: var(--deckle-b);
	--focus: var(--cream);
	margin: 0 0 1.5rem;
	padding: 1.4rem 1.3rem 0.6rem;
	color: var(--cream);
}

.thanks a {
	color: var(--cream);
}

.thanks h3 {
	font-size: 1.25rem;
}

/* ---------- Contact ---------- */
.contact-grid {
	display: grid;
	gap: 2.5rem;
	padding: 1rem 0 2rem;
}

.contact-form {
	--edge: var(--deckle-b);
	padding: 2.2rem 1.4rem 1.4rem;
}

.visit {
	--sheet: var(--cream-2);
	--edge: var(--cut-b);
	--tape: rgb(31 111 107 / 0.85);
	padding: 2rem 1.4rem 1.2rem;
	transform: rotate(0.8deg);
}

.visit h2 {
	font-size: 1.4rem;
}

address {
	margin: 0 0 1rem;
	font-style: normal;
}

.faq {
	display: grid;
	gap: 1rem;
	padding: 0.5rem 0 2rem;
}

.faq details {
	--edge: var(--deckle-b);
}

.faq summary {
	padding: 1rem 3.2rem 1rem 1.3rem;
	font: 700 1.05rem / 1.3 var(--font-head);
	list-style: none;
	cursor: pointer;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	position: absolute;
	top: 0.75rem;
	right: 1.2rem;
	color: var(--terracotta);
	font: 700 1.6rem / 1 var(--font-body);
}

.faq details[open] summary::after {
	content: "\2212";
}

.faq details p {
	margin: 0;
	padding: 0 1.3rem 1.2rem;
}

/* ---------- Footer ---------- */
.site-footer {
	--focus: var(--cream);
	position: relative;
	isolation: isolate;
	margin-top: 3rem;
	padding: 3.4rem 0 1.6rem;
	color: var(--cream);
	filter: drop-shadow(0 -2px 2px rgb(58 34 12 / 0.3));
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--teal-deep);
	clip-path: var(--tear-t);
}

.site-footer a {
	color: var(--cream);
}

.site-footer a:hover {
	color: var(--cream);
	text-decoration-color: var(--mustard);
	text-decoration-thickness: 2px;
}

.site-footer h2 {
	font-size: 1.15rem;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li {
	margin-bottom: 0.3rem;
}

.site-footer .err {
	color: #ffd9c9;
}

.site-footer .msg,
.site-footer .msg.ok {
	color: var(--cream);
}

.footer-brand {
	margin: 0 0 0.4rem;
	font: 700 1.3rem / 1.2 var(--font-head);
}

.footer-grid {
	display: grid;
	gap: 2rem;
}

.footnote {
	margin: 2rem auto 0;
	padding-top: 1rem;
	border-top: 2px dashed rgb(251 244 228 / 0.4);
	font-size: 0.9rem;
}

/* ---------- Toast ---------- */
.toast {
	position: fixed;
	z-index: 50;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	width: max-content;
	max-width: min(92vw, 26rem);
	padding: 0.75rem 1.2rem;
	border-radius: 3px;
	background: var(--mustard);
	box-shadow:
		0 3px 0 rgb(43 33 26 / 0.35),
		0 10px 18px rgb(58 34 12 / 0.35);
	font-weight: 700;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0) rotate(-1deg);
}

.toast.show {
	opacity: 1;
}

/* ---------- Larger screens ---------- */
@media (min-width: 40rem) {
	.main-nav a {
		padding: 0.45rem 0.9rem;
	}

	.footer-grid {
		grid-template-columns: 1.2fr 0.6fr 1.2fr;
	}

	.line {
		grid-template-columns: 5rem 1fr auto 6.5rem auto;
		grid-template-areas: "thumb info qty total remove";
	}

	.line .link-btn {
		justify-self: end;
	}
}

@media (min-width: 56rem) {
	.hero-grid {
		grid-template-columns: 5fr 6fr;
	}

	.hero-copy {
		padding: 2.8rem 2.6rem 3rem;
	}

	.story {
		grid-template-columns: 1.35fr 1fr;
		align-items: center;
		padding: 3.2rem 3rem 3.4rem;
	}

	.note {
		padding: 2.6rem 2.6rem 1.8rem;
	}

	.cart-layout {
		grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
		grid-template-areas: "items summary" "checkout summary";
		align-items: start;
	}

	.contact-grid {
		grid-template-columns: 1.25fr 1fr;
		align-items: start;
	}
}

/* ---------- Motion: only when the visitor has not asked for less ---------- */
@media (hover: hover) {
	.card:hover {
		filter: var(--lift-high);
	}
}

.card:focus-within {
	filter: var(--lift-high);
}

@media (prefers-reduced-motion: no-preference) {
	.card {
		transition:
			transform 0.25s ease,
			filter 0.25s ease;
	}

	.card:hover,
	.card:focus-within {
		transform: translateY(-6px) rotate(0deg);
	}

	.toast {
		transition: opacity 0.25s ease;
	}

	.btn {
		transition: background-color 0.15s ease;
	}
}