.tattoo-page {
	overflow-x: hidden;
	background:
		radial-gradient(circle at 10% 8%, rgba(255, 239, 128, 0.72), transparent 24rem),
		radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.28), transparent 20rem),
		radial-gradient(circle at 70% 86%, rgba(242, 19, 70, 0.16), transparent 26rem),
		linear-gradient(135deg, #ffc33b 0%, #ffdc55 48%, #ffb331 100%),
		var(--paper);
}

.tattoo-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.25rem, 5vw, 3.5rem);
	width: min(var(--max), calc(100% - 32px));
	min-height: auto;
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(0.85rem, 3vw, 1.65rem);
}

.tattoo-hero h1 {
	font-size: clamp(3.6rem, 10vw, 8.25rem);
}

.tattoo-hero .hero-lede {
	max-width: 760px;
}

.tattoo-contact-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: min(20rem, calc(100% - 64px));
	margin: 0.15rem auto 0.4rem;
}

.tattoo-contact-icons a {
	display: inline-flex;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--white);
	border: 4px solid var(--ink);
	box-shadow: 5px 5px 0 var(--teal);
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.tattoo-contact-icons a:hover,
.tattoo-contact-icons a:focus-visible {
	outline: 0;
	background: var(--yellow);
	box-shadow: 7px 7px 0 var(--ink);
	transform: translate(-2px, -2px);
}

.tattoo-contact-icons img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tattoo-menu {
	padding-top: clamp(0.8rem, 3vw, 2rem);
	scroll-margin-top: 1rem;
}

.tattoo-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.1rem);
	width: min(var(--max), calc(100% - 56px));
	margin: 0 auto;
	padding: clamp(0.65rem, 2vw, 1.35rem) 0 clamp(1rem, 3vw, 2rem);
}

.tattoo-mini-card {
	grid-template-columns: clamp(4.25rem, 8vw, 5.8rem) minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: center;
	column-gap: clamp(0.85rem, 2vw, 1.25rem);
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0.7rem 0.9rem 0.75rem 1.35rem;
	box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.9);
}

.tattoo-mini-card::before {
	width: 10px;
}

.tattoo-mini-card::after {
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	opacity: 0.16;
}

.tattoo-mini-card img,
.tattoo-mini-card .money-card-art {
	aspect-ratio: 1;
	width: 100%;
	margin: 0;
	border-width: 3px;
	border-radius: 4px;
	box-shadow: 3px 4px 0 color-mix(in srgb, var(--accent), #000 38%);
}

.tattoo-mini-card .money-card-art {
	font-size: clamp(2.75rem, 8vw, 4.25rem);
	text-shadow: 3px 3px 0 #ffe760, 5px 5px 0 #000;
}

.tattoo-mini-card h2 {
	margin: 0 0 0.25rem;
	color: var(--accent);
	font-family: "Bangers", Impact, fantasy;
	font-size: clamp(1.45rem, 2.8vw, 2.15rem);
	line-height: 0.9;
	overflow-wrap: anywhere;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(0, 0, 0, 0.18);
}

.tattoo-mini-card p {
	font-size: clamp(0.78rem, 1.8vw, 0.92rem);
	line-height: 1.16;
}

.tattoo-mini-card > div {
	min-width: 0;
}

.tattoo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 1rem;
}

.tattoo-grid button {
	position: relative;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: zoom-in;
}

.tattoo-grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 0.55rem;
	background: var(--white);
	border: 4px solid var(--ink);
	box-shadow: 6px 7px 0 rgba(17, 17, 17, 0.24);
	content-visibility: auto;
	transition: transform 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.tattoo-number-badge {
	position: absolute;
	right: 0.9rem;
	bottom: 0.8rem;
	z-index: 2;
	color: var(--white);
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-size: clamp(2.05rem, 11vw, 3.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	-webkit-text-stroke: 2px var(--ink);
	text-shadow: 3px 3px 0 var(--ink);
	pointer-events: none;
}

.tattoo-grid button:hover img,
.tattoo-grid button:focus-visible img {
	background: var(--yellow);
	box-shadow: 3px 4px 0 var(--ink);
	transform: translateY(-4px) rotate(-1deg);
}

.tattoo-load-row {
	display: grid;
	place-items: center;
	gap: 0.85rem;
	margin-top: 2rem;
}

.tattoo-load-row p {
	margin: 0;
	font-weight: 900;
}

.tattoo-load-row [hidden] {
	display: none;
}

@media (max-width: 720px) {
	.tattoo-page .site-header {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.tattoo-page .brand {
		justify-self: start;
	}

	.tattoo-hero {
		grid-template-columns: 1fr;
		gap: 1rem;
		width: min(100% - 32px, var(--max));
	}

	.tattoo-hero h1 {
		max-width: 7.2ch;
		font-size: clamp(2.7rem, 12vw, 3.75rem);
	}

	.tattoo-contact-icons a {
		width: 3.2rem;
		height: 3.2rem;
	}

	.tattoo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tattoo-quick-actions {
		grid-template-columns: 1fr;
		gap: 0.55rem;
		width: min(19rem, calc(100vw - 48px));
		margin-left: 16px;
		margin-right: auto;
	}

	.tattoo-mini-card {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		column-gap: 0.8rem;
		justify-items: stretch;
		padding: 0.45rem 0.7rem 0.5rem 0.9rem;
		text-align: left;
		box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.9);
		max-width: 100%;
		overflow: hidden;
	}

	.tattoo-mini-card::before {
		width: 8px;
	}

	.tattoo-mini-card::after {
		display: none;
	}

	.tattoo-mini-card img,
	.tattoo-mini-card .money-card-art {
		width: 3rem;
		border-width: 2px;
		box-shadow: 2px 3px 0 color-mix(in srgb, var(--accent), #000 38%);
	}

	.tattoo-mini-card .money-card-art {
		font-size: 2.5rem;
		text-shadow: 2px 2px 0 #ffe760, 3px 3px 0 #000;
	}

	.tattoo-mini-card h2 {
		margin: 0;
		font-size: 1.18rem;
		line-height: 0.9;
		word-break: break-word;
	}

	.tattoo-mini-card p {
		display: block;
		font-size: 0.68rem;
		line-height: 1.05;
	}
}