/* ==========================================================================
   Pamela Kay Studio

   The look comes from Heather's own brand (magenta brush script on black, a
   thin serif monogram) and from her craft: the dark sections are a cutting
   mat, and dashed outlines are cut lines.

   1. Fonts              8. Hero and cutting mat   15. Footer
   2. Tokens             9. Marquee                16. Pages and prose
   3. Base              10. Sections and tiles     17. Request form
   4. Type              11. Product cards          18. Motion
   5. Utilities         12. Steps
   6. Buttons, links    13. Story
   7. Form controls,    14. Group band
      header            19. The 3D studio
                        20. The table journey
                        21. Moving between pages
                        22. Type that answers the pointer
                        23. Satin
   ========================================================================== */

/* 1. Fonts
   ========================================================================== */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Lettering faces: the brush is also the brand's handwritten accent. */
@font-face {
	font-family: "Mr Dafoe";
	src: url("../fonts/mr-dafoe-latin-400-normal.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Sacramento";
	src: url("../fonts/sacramento-latin-400-normal.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Graduate";
	src: url("../fonts/graduate-latin-400-normal.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* 2. Tokens
   ========================================================================== */
:root {
	--ink: #17111a;
	--ink-2: #261c2a;
	--ink-line: rgba(251, 246, 239, 0.14);
	--paper: #fbf6ef;
	--paper-2: #f4eadd;
	--paper-3: #eadccb;
	--card: #fffdf9;
	--line: #e2d5c3;
	--magenta: #b5357c;
	--magenta-deep: #8e2260;
	--magenta-light: #ee9bc7;
	--magenta-tint: #f8e2ed;
	--text: #2b2130;
	--muted: #6d6172;

	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Jost", "Century Gothic", "Segoe UI", sans-serif;
	--font-script: "Mr Dafoe", "Brush Script MT", cursive;
	--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--wrap: 1240px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--radius: 22px;
	--radius-sm: 12px;
	--shadow: 0 1px 2px rgba(23, 17, 26, 0.06), 0 18px 40px -18px rgba(23, 17, 26, 0.28);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Cutting-mat grid: fine lines every 24px, heavier every 96px. */
	--mat-grid:
		linear-gradient(rgba(251, 246, 239, 0.075) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 246, 239, 0.075) 1px, transparent 1px),
		linear-gradient(rgba(251, 246, 239, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 246, 239, 0.035) 1px, transparent 1px);
	--mat-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
fieldset {
	margin: 0;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--magenta);
	color: #fff;
}

/* 4. Type
   ========================================================================== */
.pk-h1,
.pk-h2,
.pk-h3 {
	font-family: var(--font-display);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

.pk-h1 {
	font-size: clamp(2.6rem, 6.2vw, 4.75rem);
	line-height: 1;
}

.pk-h2 {
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.05;
}

.pk-h3 {
	font-size: 1.6rem;
	line-height: 1.2;
	font-weight: 400;
}

.pk-eyebrow,
.pk-kicker,
.pk-label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pk-eyebrow {
	margin-bottom: 1rem;
	color: var(--magenta);
}

.pk-eyebrow a {
	text-decoration: none;
}

.pk-eyebrow a:hover {
	text-decoration: underline;
}

.pk-kicker {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--muted);
}

.pk-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--muted);
}

.pk-optional {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.pk-script {
	display: inline-block;
	font-family: var(--font-script);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	color: var(--magenta);
	transform: rotate(-3deg);
}

.pk-lede {
	margin-top: 1.25rem;
	max-width: 52ch;
	font-size: 1.1875rem;
	color: var(--muted);
}

/* 5. Utilities
   ========================================================================== */
.pk-wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.pk-wrap--narrow {
	max-width: calc(820px + var(--gutter) * 2);
}

.pk-sr,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pk-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-sm);
}

.pk-skip:focus {
	top: 1rem;
}

.pk-main {
	overflow-x: clip;
}

.pk-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--paper-2);
}

.pk-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pk-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.9rem;
	background-color: var(--paper-2);
	background-image: radial-gradient(var(--paper-3) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.pk-placeholder img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	box-shadow: var(--shadow);
}

.pk-flower__eye {
	fill: var(--flower-eye, var(--paper));
}

/* 6. Buttons and links
   ========================================================================== */
.pk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 0.95rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.pk-btn .pk-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s var(--ease);
}

.pk-btn:hover .pk-icon--arrow {
	transform: translateX(4px);
}

.pk-btn:active {
	transform: scale(0.98);
}

.pk-btn--primary {
	background: var(--magenta);
	color: #fff;
}

.pk-btn--primary:hover {
	background: var(--magenta-deep);
}

.pk-btn--ink {
	background: var(--ink);
	color: var(--paper);
}

.pk-btn--ink:hover {
	background: var(--magenta);
	color: #fff;
}

.pk-btn--block {
	width: 100%;
}

.pk-link {
	padding: 0;
	border: 0;
	background: none;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	cursor: pointer;
	transition: color 0.2s;
}

.pk-link:hover {
	color: var(--magenta);
}

/* 7. Form controls and header
   ========================================================================== */
.pk-input {
	display: block;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.pk-input:focus {
	outline: none;
	border-color: var(--magenta);
	box-shadow: 0 0 0 4px var(--magenta-tint);
}

textarea.pk-input {
	resize: vertical;
}

.pk-field + .pk-field,
.pk-field + .pk-fieldrow,
.pk-fieldrow + .pk-field,
.pk-proofchip + .pk-fieldrow {
	margin-top: 1.25rem;
}

.pk-fieldrow {
	display: grid;
	gap: 1.25rem;
}

/* Side by side, two fields start level; the row's own gap spaces them when they stack. */
.pk-fieldrow > .pk-field + .pk-field {
	margin-top: 0;
}

@media (min-width: 640px) {
	.pk-fieldrow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.pk-chip {
	position: relative;
	cursor: pointer;
}

/* A longer row of choices: tighter, so six pieces sit in two lines of the dock. */
.pk-chips--snug {
	gap: 0.35rem;
}

.pk-chips--snug .pk-chip span {
	padding-inline: 0.8rem;
	font-size: 0.8125rem;
}

.pk-chip input,
.pk-swatch input,
.pk-optioncard input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pk-chip span {
	display: grid;
	place-items: center;
	min-height: 2.5rem;
	padding: 0.3rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.875rem;
	line-height: 1;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pk-chip:hover span {
	border-color: var(--ink);
}

.pk-chip input:checked + span {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.pk-chip input:focus-visible + span,
.pk-optioncard input:focus-visible + span {
	outline: 2px solid var(--magenta);
	outline-offset: 3px;
}

/* Each lettering chip is set in the face it stands for. */
.pk-chip--letter[data-style="brush"] span {
	font-family: "Mr Dafoe", cursive;
	font-size: 1.2rem;
}

.pk-chip--letter[data-style="script"] span {
	font-family: "Sacramento", cursive;
	font-size: 1.45rem;
}

.pk-chip--letter[data-style="classic"] span {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.0625rem;
}

.pk-chip--letter[data-style="varsity"] span {
	font-family: "Graduate", serif;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pk-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pk-swatch {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgba(23, 17, 26, 0.18);
	cursor: pointer;
	transition: transform 0.2s var(--ease);
}

.pk-swatch:hover {
	transform: scale(1.1);
}

.pk-swatch:has(input:checked) {
	box-shadow: inset 0 0 0 1px rgba(23, 17, 26, 0.18), 0 0 0 3px var(--card), 0 0 0 5px var(--ink);
}

.pk-swatch:has(input:focus-visible) {
	outline: 2px solid var(--magenta);
	outline-offset: 7px;
}

/* Announcement */
.pk-announce {
	background: var(--ink);
	color: var(--paper);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.pk-announce p {
	padding-block: 0.65rem;
}

.pk-announce--notice {
	background: var(--magenta-deep);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Header */
.pk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 246, 239, 0.9);
	border-bottom: 1px solid transparent;
	backdrop-filter: saturate(1.4) blur(14px);
	transition: border-color 0.3s, box-shadow 0.3s;
}

.pk-header.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: 0 10px 30px -22px rgba(23, 17, 26, 0.5);
}

.pk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
}

.pk-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-shrink: 0;
	text-decoration: none;
}

.pk-brand__seal {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: transform 0.8s var(--ease);
}

.pk-brand:hover .pk-brand__seal {
	transform: rotate(18deg);
}

.pk-brand__wordmark {
	width: auto;
	height: 30px;
}

.pk-nav {
	display: none;
}

.pk-nav__list {
	display: flex;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-nav__list a {
	position: relative;
	padding-block: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.pk-nav__list a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--magenta);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
}

.pk-nav__list a:hover::after,
.pk-nav__list .current-menu-item a::after {
	transform: scaleX(1);
}

.pk-header__tools {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.pk-tool {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.pk-tool:hover {
	background: var(--paper-2);
}

.pk-tool--account {
	display: none;
}

.pk-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--magenta);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
}

.pk-burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.pk-burger__bars,
.pk-burger__bars::before,
.pk-burger__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.3s var(--ease), background-color 0.2s;
}

.pk-burger__bars {
	position: relative;
}

.pk-burger__bars::before,
.pk-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.pk-burger__bars::before {
	transform: translateY(-7px);
}

.pk-burger__bars::after {
	transform: translateY(7px);
}

.pk-burger[aria-expanded="true"] .pk-burger__bars {
	background: transparent;
}

.pk-burger[aria-expanded="true"] .pk-burger__bars::before {
	transform: rotate(45deg);
}

.pk-burger[aria-expanded="true"] .pk-burger__bars::after {
	transform: rotate(-45deg);
}

.pk-drawer {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 9rem var(--gutter) 2.5rem;
	background-color: var(--ink);
	background-image: var(--mat-grid);
	background-size: var(--mat-size);
	color: var(--paper);
	animation: pk-fade 0.3s both;
}

.pk-drawer__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-drawer__list a {
	display: block;
	padding-block: 0.35rem;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 10vw, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none;
}

.pk-drawer__list li {
	animation: pk-rise 0.6s var(--ease) both;
}

.pk-drawer__list li:nth-child(2) {
	animation-delay: 60ms;
}

.pk-drawer__list li:nth-child(3) {
	animation-delay: 120ms;
}

.pk-drawer__list li:nth-child(4) {
	animation-delay: 180ms;
}

.pk-drawer__tagline {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--magenta-light);
}

body.pk-menu-open {
	overflow: hidden;
}

@media (min-width: 900px) {
	.pk-nav {
		display: block;
	}

	.pk-tool--account {
		display: grid;
	}

	.pk-burger,
	.pk-drawer {
		display: none;
	}

	.pk-brand__wordmark {
		height: 34px;
	}
}

@media (max-width: 420px) {
	.pk-brand__seal {
		width: 40px;
		height: 40px;
	}

	.pk-brand__wordmark {
		height: 24px;
	}
}

/* 8. Hero and cutting mat
   ========================================================================== */
.pk-hero {
	padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}

.pk-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 1020px) {
	.pk-hero__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.pk-hero__title {
	font-family: var(--font-display);
	font-size: clamp(3.75rem, 10.5vw, 8rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 0.88;
	color: var(--ink);
}

.pk-hero__title > span {
	display: block;
}

/* The handwritten word rewrites itself with whatever name is typed on the mat. */
.pk-hero__script {
	width: max-content;
	max-width: 100%;
	margin-top: 0.04em;
	padding: 0.1em 0.12em 0.16em 0;
	font-family: var(--font-script);
	font-size: calc(1.08em * var(--fit, 1));
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	color: var(--magenta);
	transform: rotate(-4deg);
	transform-origin: left center;
	white-space: nowrap;
}

.pk-hero__text {
	max-width: 34ch;
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
	font-size: 1.1875rem;
	color: var(--muted);
}

.pk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 2rem;
}

.pk-mat {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: 30px;
	background-color: var(--ink);
	background-image: radial-gradient(70% 60% at 30% 58%, rgba(181, 53, 124, 0.3), transparent 72%);
	box-shadow: 0 2px 4px rgba(23, 17, 26, 0.2), 0 40px 70px -30px rgba(23, 17, 26, 0.55);
	color: var(--paper);
}

@media (min-width: 680px) {
	.pk-mat {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
	}
}

/* The piece: a photograph of the 3D blank, with the name set on it as live text. */
.pk-mat__stage {
	position: relative;
	min-height: 430px;
}

@media (min-width: 680px) {
	.pk-mat__stage {
		min-height: 560px;
	}
}

.pk-proof {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Cut vinyl has a little body to it; a hairline of the same color gives the text that. */
.pk-proof__text {
	fill: var(--vinyl, #b5357c);
	stroke: var(--vinyl, #b5357c);
	stroke-width: 1.2px;
	stroke-linejoin: round;
	font-family: var(--letter-font, "Mr Dafoe"), cursive;
	font-size: 100px;
	font-weight: var(--letter-weight, 400);
	text-transform: var(--letter-case, none);
	transition: fill 0.3s, stroke 0.3s;
}

.pk-proof__text.is-pressed {
	animation: pk-press 0.5s var(--ease);
}

[data-letter="brush"] {
	--letter-font: "Mr Dafoe";
}

[data-letter="script"] {
	--letter-font: "Sacramento";
}

/* The same cut of Fraunces the 3D studio's outlines were taken from. */
[data-letter="classic"] {
	--letter-font: "Fraunces";
	--letter-weight: 600;
}

[data-letter="varsity"] {
	--letter-font: "Graduate";
	--letter-case: uppercase;
}

.pk-mat__controls {
	display: grid;
	align-content: center;
	gap: 1.15rem;
	margin: 12px;
	padding: 1.5rem 1.35rem;
	border-radius: 20px;
	background: var(--card);
	color: var(--text);
}

.pk-mat__field input {
	display: block;
	width: 100%;
	padding: 0.1rem 0 0.4rem;
	border: 0;
	border-bottom: 2px solid var(--ink);
	border-radius: 0;
	background: none;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 300;
	letter-spacing: -0.01em;
	transition: border-color 0.2s;
}

.pk-mat__field input::placeholder {
	color: #b3a6b3;
}

.pk-mat__field input:focus {
	outline: none;
	border-bottom-color: var(--magenta);
	box-shadow: 0 2px 0 var(--magenta);
}

.pk-mat__swatchrow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* 9. Marquee
   ========================================================================== */
.pk-marquee {
	width: 104vw;
	margin-left: -2vw;
	overflow: hidden;
	background: var(--magenta);
	color: #fff;
	transform: rotate(-1.4deg);
	--flower-eye: var(--magenta);
}

.pk-marquee__track {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	width: max-content;
	padding-block: 0.95rem;
	animation: pk-marquee 34s linear infinite;
}

.pk-marquee__track span {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-style: italic;
	font-weight: 300;
	white-space: nowrap;
}

.pk-marquee .pk-flower {
	flex-shrink: 0;
	color: var(--ink);
}

/* 10. Sections and tiles
   ========================================================================== */
.pk-section {
	padding-block: clamp(3.75rem, 8vw, 7rem) 0;
}

.pk-section__head {
	margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.pk-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.pk-tiles {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"a a"
		"b c"
		"d d";
}

.pk-tiles--3 {
	grid-template-areas:
		"a a"
		"b b"
		"d d";
}

.pk-tiles--2 {
	grid-template-areas:
		"a a"
		"d d";
}

@media (min-width: 860px) {
	.pk-tiles {
		gap: 1.25rem;
		grid-template-columns: 1.3fr 1fr 1fr;
		grid-template-rows: 330px 250px;
		grid-template-areas:
			"a b c"
			"a d d";
	}

	.pk-tiles--3 {
		grid-template-columns: 1.3fr 1fr;
		grid-template-areas:
			"a b"
			"a d";
	}

	.pk-tiles--2 {
		grid-template-columns: 1.3fr 1fr;
		grid-template-rows: 420px;
		grid-template-areas: "a d";
	}
}

.pk-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 220px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--paper-2);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.pk-tile:nth-child(1) {
	grid-area: a;
	min-height: 320px;
}

.pk-tile:nth-child(2) {
	grid-area: b;
}

.pk-tile:nth-child(3) {
	grid-area: c;
}

.pk-tile--custom {
	grid-area: d !important;
}

.pk-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.pk-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(23, 17, 26, 0.78), rgba(23, 17, 26, 0) 58%);
}

.pk-tile:hover .pk-tile__img {
	transform: scale(1.06);
}

.pk-tile__label {
	display: grid;
	gap: 0.15rem;
	padding: 1.5rem;
}

.pk-tile__name {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.pk-tile__count {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* A category with no photographs yet sits on the mat instead of an empty frame. */
.pk-tile--bare {
	background-color: var(--ink);
	background-image: radial-gradient(70% 70% at 70% 20%, rgba(181, 53, 124, 0.4), transparent 70%), var(--mat-grid);
	background-size: auto, var(--mat-size);
}

.pk-tile--bare::after {
	display: none;
}

.pk-tile--custom {
	background-color: var(--magenta);
	background-image: var(--mat-grid);
	background-size: var(--mat-size);
	transition: background-color 0.3s;
}

.pk-tile--custom::after {
	display: none;
}

.pk-tile--custom:hover {
	background-color: var(--magenta-deep);
}

.pk-tile__script {
	position: absolute;
	top: 50%;
	right: 6%;
	font-family: var(--font-script);
	font-size: clamp(2.75rem, 6vw, 4.75rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.22);
	transform: translateY(-58%) rotate(-6deg);
	white-space: nowrap;
	transition: color 0.3s, transform 0.6s var(--ease);
}

.pk-tile--custom:hover .pk-tile__script {
	color: rgba(255, 255, 255, 0.4);
	transform: translateY(-62%) rotate(-8deg);
}

/* 11. Product cards
   ========================================================================== */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products::before,
ul.products::after {
	display: none;
}

@media (min-width: 720px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.75rem 1.5rem;
	}
}

@media (min-width: 1020px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* On phones the homepage row becomes a swipeable rail. */
@media (max-width: 719px) {
	ul.products.pk-grid--rail {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 66%;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	ul.products.pk-grid--rail::-webkit-scrollbar {
		display: none;
	}

	ul.products.pk-grid--rail > li {
		scroll-snap-align: start;
	}
}

.pk-card__link {
	display: block;
	text-decoration: none;
}

.pk-card__media {
	aspect-ratio: 4 / 5;
}

.pk-card__media .pk-media__img {
	transition: transform 0.9s var(--ease);
}

.pk-card__link:hover .pk-media__img {
	transform: scale(1.045);
}

.pk-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.pk-badge--muted {
	background: var(--ink);
	color: var(--paper);
}

.pk-card__body {
	display: grid;
	gap: 0.3rem;
	padding-top: 0.95rem;
}

.pk-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	line-height: 1.25;
	color: var(--ink);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 0.2s;
}

.pk-card__link:hover .pk-card__title {
	color: var(--magenta);
}

.pk-card__price {
	font-weight: 500;
}

.pk-card__price del {
	margin-right: 0.35rem;
	font-weight: 400;
	color: var(--muted);
}

.pk-card__price ins {
	text-decoration: none;
}

/* 12. Steps
   ========================================================================== */
.pk-steps {
	margin-top: clamp(4rem, 9vw, 8rem);
	padding-block: clamp(4rem, 8vw, 7rem);
	background-color: var(--ink);
	background-image: radial-gradient(50% 80% at 88% 8%, rgba(181, 53, 124, 0.34), transparent 70%), var(--mat-grid);
	background-size: auto, var(--mat-size);
	color: var(--paper);
}

.pk-steps .pk-h2 {
	color: var(--paper);
}

.pk-steps .pk-eyebrow {
	color: var(--magenta-light);
}

.pk-steps__list {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 820px) {
	.pk-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem;
	}
}

.pk-steps__list li {
	padding-top: 1.5rem;
	border-top: 1px dashed rgba(238, 155, 199, 0.55);
	counter-increment: step;
}

.pk-steps__list li::before {
	content: "0" counter(step);
	display: block;
	margin-bottom: 1rem;
	font-family: var(--font-display);
	font-size: 4.25rem;
	font-weight: 200;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--magenta-light);
}

.pk-steps__list h3 {
	margin-bottom: 0.6rem;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.pk-steps__list p {
	max-width: 34ch;
	color: rgba(251, 246, 239, 0.72);
}

.pk-steps__cta {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* 13. Story
   ========================================================================== */
.pk-story {
	padding-block: clamp(4.5rem, 10vw, 9rem);
}

.pk-story .pk-chapter__panel {
	display: grid;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 860px) {
	.pk-story .pk-chapter__panel {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}
}

.pk-story__seal {
	position: relative;
	width: min(100%, 320px);
	margin-inline: auto;
	aspect-ratio: 1;
}

.pk-story__seal::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--magenta);
	transform: translate(7%, 7%);
}

.pk-story__seal img {
	position: relative;
	width: 100%;
	border-radius: 50%;
	animation: pk-spin 80s linear infinite;
}

.pk-story__quote p {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	font-style: italic;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.14;
	color: var(--ink);
	text-wrap: balance;
}

.pk-story__text {
	max-width: 56ch;
	margin-top: 1.75rem;
	color: var(--muted);
}

.pk-story__sign {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	margin: 1.5rem 0 1.75rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.pk-story__sign span {
	font-family: var(--font-script);
	font-size: 2.75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	color: var(--magenta);
	transform: rotate(-4deg);
}

/* 14. Group band
   ========================================================================== */
.pk-band {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background: var(--paper-2);
}

.pk-band__inner {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 860px) {
	.pk-band__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
	}
}

.pk-band__copy p:not(.pk-eyebrow) {
	max-width: 44ch;
	margin-block: 1.25rem 2rem;
	font-size: 1.125rem;
	color: var(--muted);
}

.pk-band__media {
	position: relative;
	display: block;
	width: min(100%, 360px);
	margin-inline: auto;
	border: 10px solid #fff;
	border-radius: 6px;
	box-shadow: var(--shadow);
	/* `rotate`, not `transform`: the scroll reveal animates transform on this element. */
	rotate: 3deg;
	transition: rotate 0.6s var(--ease), scale 0.6s var(--ease), opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.pk-band__media:hover {
	rotate: 0.5deg;
	scale: 1.02;
}

.pk-band__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pk-band__caption {
	position: absolute;
	right: -14px;
	bottom: 18px;
	max-width: 80%;
	padding: 0.5rem 0.85rem;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The Snuggle Is Real: her blankets, on the homepage. */
.pk-snuggle {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.pk-snuggle__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 860px) {
	.pk-snuggle__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.pk-snuggle__media {
	position: relative;
	display: block;
	width: min(100%, 440px);
	margin-inline: auto;
}

.pk-snuggle__media img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 6;
	border-radius: var(--radius);
	object-fit: cover;
	box-shadow: var(--shadow);
}

/* The stitches up close, tucked over one corner. */
.pk-snuggle__media .pk-snuggle__close {
	position: absolute;
	right: -7%;
	bottom: -6%;
	width: 42%;
	aspect-ratio: 1;
	border: 6px solid var(--paper);
	border-radius: 50%;
}

.pk-snuggle__copy .pk-script {
	display: inline-block;
	font-size: 1.35em;
	line-height: 1.05;
	color: var(--magenta);
	rotate: -2deg;
}

.pk-snuggle__copy > p:not(.pk-eyebrow) {
	max-width: 42ch;
	margin-block: 1.25rem 0;
	font-size: 1.125rem;
	color: var(--muted);
}

.pk-snuggle__copy .pk-btn {
	margin-top: 2rem;
}

/* Heather's own words about one. */
.pk-snuggle__quote {
	max-width: 30rem;
	margin: 1.75rem 0 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--magenta);
}

.pk-snuggle__quote p {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--ink);
}

.pk-snuggle__quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Also from Heather: things to ask about, in her own pictures. */
.pk-also {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 8vw, 6.5rem);
}

.pk-also__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 720px) {
	.pk-also__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pk-also__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 719px) {
	.pk-also__card {
		aspect-ratio: 16 / 10;
	}
}

.pk-also__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.8s var(--ease);
}

.pk-also__card:hover img {
	scale: 1.05;
}

.pk-also__label {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 0.15rem;
	padding: 3.5rem 1.25rem 1.2rem;
	background: linear-gradient(to top, rgba(23, 17, 26, 0.9), rgba(23, 17, 26, 0));
}

.pk-also__label strong {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.pk-also__label small {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

/* Our Story: the studio. */
.pk-storystudio {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}

.pk-storystudio__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 860px) {
	.pk-storystudio__grid {
		grid-template-columns: minmax(0, 13fr) minmax(0, 10fr);
	}
}

.pk-storystudio figure {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.pk-storystudio img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

.pk-storystudio figcaption {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgba(23, 17, 26, 0.72);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper);
	backdrop-filter: blur(6px);
}

/* 15. Footer
   ========================================================================== */
.pk-footer {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
	background-color: var(--ink);
	background-image: var(--mat-grid);
	background-size: var(--mat-size);
	color: var(--paper);
}

.pk-footer__brand {
	padding-bottom: 3rem;
}

.pk-footer__wordmark {
	width: min(100%, 420px);
}

.pk-footer__tagline {
	margin-top: 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.pk-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 2rem;
	padding-block: 2.75rem;
	border-top: 1px solid var(--ink-line);
}

@media (min-width: 720px) {
	.pk-footer__cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pk-footer__heading {
	margin-bottom: 1rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--magenta-light);
}

.pk-footer ul {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-footer li a {
	color: rgba(251, 246, 239, 0.82);
	text-decoration: none;
	transition: color 0.2s;
}

.pk-footer li a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--magenta-light);
	text-underline-offset: 0.3em;
}

.pk-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.pk-footer__social .pk-icon {
	width: 20px;
	height: 20px;
}

.pk-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ink-line);
	font-size: 0.8125rem;
	color: rgba(251, 246, 239, 0.62);
}

.pk-footer__tribute {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-style: italic;
}

/* 16. Pages and prose
   ========================================================================== */
.pk-page {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.pk-pagehead {
	padding-block: clamp(2.75rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem);
}

.pk-prose {
	max-width: 68ch;
}

.pk-prose > * + * {
	margin-top: 1.15em;
}

.pk-prose h2,
.pk-prose h3 {
	margin-top: 2.2em;
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ink);
}

.pk-prose h2 {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.pk-prose h3 {
	font-size: 1.35rem;
}

.pk-prose a {
	text-decoration-color: var(--magenta);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.pk-prose a:hover {
	color: var(--magenta);
}

.pk-prose ul,
.pk-prose ol {
	padding-left: 1.2em;
}

.pk-prose li + li {
	margin-top: 0.4em;
}

.pk-prose li::marker {
	color: var(--magenta);
}

.pk-prose img {
	border-radius: var(--radius-sm);
}

.pk-posts {
	display: grid;
	gap: 3rem;
	max-width: calc(820px + var(--gutter) * 2);
}

.pk-post__title {
	margin-block: 0.5rem 0.75rem;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
}

.pk-post__title a {
	text-decoration: none;
}

.pk-post__title a:hover {
	color: var(--magenta);
}

.pk-post p {
	margin-bottom: 1rem;
	color: var(--muted);
}

.pk-notfound {
	padding-block: clamp(5rem, 14vw, 10rem);
}

.pk-notfound p:not(.pk-eyebrow) {
	margin-block: 1.25rem 2rem;
	font-size: 1.1875rem;
	color: var(--muted);
}

/* Our Story */
.pk-storyhead {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background-color: var(--ink);
	background-image: radial-gradient(55% 90% at 50% 0%, rgba(181, 53, 124, 0.4), transparent 70%), var(--mat-grid);
	background-size: auto, var(--mat-size);
	text-align: center;
}

.pk-storyhead .pk-h1 {
	color: var(--paper);
}

.pk-storyhead .pk-eyebrow {
	color: var(--magenta-light);
}

.pk-storyhead .pk-script {
	color: var(--magenta-light);
	font-size: 1.15em;
}

.pk-storyhead__seal {
	width: 132px;
	height: 132px;
	margin-bottom: 2rem;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(238, 155, 199, 0.4), 0 0 0 10px rgba(238, 155, 199, 0.08);
}

.pk-prose--story {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	font-size: 1.125rem;
}

.pk-prose--story > p:first-of-type {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	font-weight: 300;
	line-height: 1.4;
	color: var(--ink);
}

.pk-prose--story .pk-signature {
	margin-top: 2.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.pk-prose--story .pk-signature strong {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-script);
	font-size: 3.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	color: var(--magenta);
	transform: rotate(-4deg);
	transform-origin: left;
}

.pk-storycta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: 3rem;
}

/* 17. Request form
   ========================================================================== */
.pk-requestpage .pk-script {
	font-size: 1.12em;
}

/* An open sheet of questions with, beside it on wide screens, the ticket Heather will get. */
.pk-request {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 1020px) {
	.pk-request.has-ticket {
		grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
	}
}

.pk-request__sheet {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.pk-hp {
	position: absolute;
	left: -9999px;
}

.pk-ask {
	min-width: 0;
	padding: clamp(1.35rem, 3.5vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--card);
}

/* A legend ignores normal flow; floating it lets it behave like a heading. */
.pk-ask__title {
	float: left;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.75rem;
	width: 100%;
	margin-bottom: 1.15rem;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ink);
}

.pk-ask__title + * {
	clear: both;
}

.pk-ask__hint {
	margin-top: -0.7rem;
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.pk-ask__aside {
	margin-top: 1.1rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--magenta);
	border-radius: 0 12px 12px 0;
	background: color-mix(in srgb, var(--magenta) 6%, transparent);
	font-size: 0.9375rem;
}

/* The kinds of thing Heather makes, each with one of her own pictures. */
.pk-makes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 720px) {
	.pk-makes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pk-make {
	position: relative;
	display: block;
	cursor: pointer;
}

.pk-make input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pk-make__body {
	display: grid;
	align-content: start;
	gap: 0.2rem;
	height: 100%;
	padding: 0.55rem 0.55rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 18px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--ease);
}

.pk-make__picture {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.55rem;
	border-radius: 12px;
	object-fit: cover;
}

.pk-make__picture--open {
	display: grid;
	place-items: center;
	background-color: var(--ink);
	background-image: var(--mat-grid);
	background-size: var(--mat-size);
	font-family: var(--font-script);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--magenta-light);
}

.pk-make strong {
	padding-inline: 0.4rem;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
}

.pk-make small {
	padding-inline: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--muted);
}

.pk-make:hover .pk-make__body {
	border-color: var(--ink);
	transform: translateY(-2px);
}

.pk-make input:checked + .pk-make__body {
	border-color: var(--magenta);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent);
}

.pk-make input:checked + .pk-make__body::after {
	content: "\2713";
	position: absolute;
	top: 1.05rem;
	right: 1.05rem;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--magenta);
	font-size: 0.9rem;
	line-height: 1;
	color: #fff;
}

.pk-make input:focus-visible + .pk-make__body {
	outline: 2px solid var(--magenta);
	outline-offset: 3px;
}

.pk-input--idea {
	min-height: 9.5rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Phrases to start with, and things a design can go on. */
.pk-starters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.pk-starters[hidden] {
	display: none;
}

.pk-starters .pk-label {
	margin: 0 0.35rem 0 0;
}

.pk-starter {
	padding: 0.42rem 0.85rem;
	border: 1.5px dashed var(--line);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.pk-starter:hover {
	border-color: var(--magenta);
	border-style: solid;
	color: var(--magenta);
}

.pk-field--on {
	margin-top: 1.5rem;
}

/* Pictures. Until the script is ready this is a plain file field. */
.pk-drop {
	position: relative;
	display: block;
}

.pk-drop__ask {
	display: none;
}

.pk-drop.is-ready {
	cursor: pointer;
}

.pk-drop.is-ready input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.pk-drop.is-ready .pk-drop__ask {
	display: grid;
	justify-items: center;
	gap: 0.2rem;
	padding: 1.75rem 1rem;
	border: 2px dashed var(--line);
	border-radius: 18px;
	background: #fff;
	text-align: center;
	transition: border-color 0.2s, background-color 0.2s;
}

.pk-drop__ask strong {
	font-weight: 500;
	color: var(--ink);
}

.pk-drop__ask small {
	font-size: 0.8125rem;
	color: var(--muted);
}

.pk-drop__ask svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--magenta);
}

.pk-drop.is-ready:hover .pk-drop__ask,
.pk-drop.is-over .pk-drop__ask,
.pk-drop input:focus-visible + .pk-drop__ask {
	border-color: var(--magenta);
	background: color-mix(in srgb, var(--magenta) 5%, #fff);
}

.pk-drop.is-full {
	opacity: 0.45;
	pointer-events: none;
}

@media (hover: none) {
	.pk-drop__drag {
		display: none;
	}
}

.pk-drop__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.pk-drop__list:empty {
	display: none;
}

.pk-drop__list li {
	position: relative;
	width: 92px;
	height: 92px;
}

.pk-drop__list img {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	object-fit: cover;
}

.pk-drop__remove {
	position: absolute;
	top: -8px;
	right: -8px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	font-size: 1rem;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.pk-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.1rem;
	font-size: 0.9375rem;
	cursor: pointer;
}

.pk-check input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--magenta);
}

/* The studio itself, above the form. */
.pk-studioshot {
	position: relative;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.pk-studioshot img {
	width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius);
	object-fit: cover;
	object-position: 50% 30%;
}

.pk-studioshot figcaption {
	position: absolute;
	bottom: 1rem;
	left: calc(var(--gutter) + 1rem);
	max-width: calc(100% - var(--gutter) * 2 - 2rem);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgba(23, 17, 26, 0.72);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--paper);
	backdrop-filter: blur(6px);
}

@media (max-width: 600px) {
	.pk-studioshot img {
		aspect-ratio: 3 / 2;
	}

	.pk-studioshot figcaption {
		bottom: 0.7rem;
		left: calc(var(--gutter) + 0.7rem);
		font-size: 0.5625rem;
		letter-spacing: 0.12em;
	}
}

.pk-proofchip {
	margin-top: 1rem;
	padding: 1.5rem 1.25rem 1.1rem;
	border: 1.5px dashed var(--line);
	border-radius: 16px;
	background: var(--paper-2);
	text-align: center;
}

/* White vinyl needs a dark blank behind it to be seen. */
.pk-proofchip[data-vinyl="white"] {
	border-color: transparent;
	background-color: var(--ink);
	background-image: var(--mat-grid);
	background-size: var(--mat-size);
	color: var(--paper);
}

.pk-proofchip__text {
	display: block;
	overflow-wrap: anywhere;
	font-family: "Mr Dafoe", cursive;
	font-size: clamp(2rem, 8vw, 3.25rem);
	line-height: 1.15;
	color: var(--vinyl, var(--magenta));
	transition: color 0.3s;
}

.pk-proofchip[data-style="script"] .pk-proofchip__text {
	font-family: "Sacramento", cursive;
	font-size: clamp(2.4rem, 9vw, 3.75rem);
}

.pk-proofchip[data-style="classic"] .pk-proofchip__text {
	font-family: var(--font-display);
}

.pk-proofchip[data-style="varsity"] .pk-proofchip__text {
	font-family: "Graduate", serif;
	font-size: clamp(1.5rem, 6vw, 2.4rem);
	text-transform: uppercase;
}

.pk-proofchip small {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	opacity: 0.7;
}

.pk-request__send {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.5rem;
}

/* The ticket: a kraft gift tag on a black ribbon, like the one Heather ties to a
   finished blanket. It shows what she will receive, and stays in view while the
   customer fills the sheet. Wide screens only; the sheet says it all on a phone. */
.pk-ticket {
	display: none;
}

@media (min-width: 1020px) {
	.pk-request.has-ticket .pk-ticket {
		position: sticky;
		top: 7.5rem;
		display: block;
		margin-top: 2.25rem;
		padding: 3.5rem 1.4rem 1.4rem;
		border-radius: 30px 30px 12px 12px;
		background-color: #d8bb90;
		background-image:
			repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 5px),
			repeating-linear-gradient(3deg, rgba(90, 62, 30, 0.05) 0 1px, transparent 1px 7px);
		box-shadow: 0 24px 40px -24px rgba(23, 17, 26, 0.6), inset 0 0 0 1px rgba(90, 62, 30, 0.12);
		color: #3b2c1b;
		transform: rotate(1.1deg);
	}
}

/* The ribbon, coming down to the hole. */
.pk-ticket::before {
	content: "";
	position: absolute;
	top: -2.4rem;
	left: 50%;
	width: 9px;
	height: 3.9rem;
	margin-left: -4px;
	border-radius: 3px;
	background: var(--ink);
	transform: rotate(-5deg);
	transform-origin: bottom center;
}

.pk-ticket__hole {
	position: absolute;
	top: 1.15rem;
	left: 50%;
	width: 15px;
	height: 15px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--bg, #fbf6ef);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(90, 62, 30, 0.16);
}

.pk-ticket__for {
	margin-bottom: 1.1rem;
	font-family: var(--font-script);
	font-size: 2.1rem;
	line-height: 1;
	text-align: center;
	color: #2b1f13;
}

.pk-ticket__lines {
	display: grid;
	gap: 0.7rem;
	margin: 0;
}

.pk-ticket__lines div {
	display: grid;
	gap: 0.12rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px dashed rgba(59, 44, 27, 0.32);
}

.pk-ticket__lines div[hidden] {
	display: none;
}

.pk-ticket dt {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.62;
}

.pk-ticket dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* The wording, in the lettering and the vinyl that were picked. */
.pk-ticket__says {
	font-family: "Mr Dafoe", cursive;
	font-size: 1.7rem;
	line-height: 1.15;
	color: var(--vinyl, var(--magenta));
}

.pk-ticket__says[data-style="script"] {
	font-family: "Sacramento", cursive;
	font-size: 2rem;
}

.pk-ticket__says[data-style="classic"] {
	font-family: var(--font-display);
	font-weight: 600;
}

.pk-ticket__says[data-style="varsity"] {
	font-family: "Graduate", serif;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pk-ticket__says.is-pale {
	text-shadow: 0 1px 2px rgba(59, 44, 27, 0.45);
}

.pk-ticket__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding-top: 0.15rem;
}

.pk-ticket__photos img {
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 6px;
	object-fit: cover;
}

.pk-ticket__foot {
	margin-top: 1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	opacity: 0.8;
}

.pk-notice {
	margin-bottom: 1.5rem;
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius);
}

.pk-notice > * + * {
	margin-top: 0.6rem;
}

.pk-notice--good {
	border: 1.5px dashed var(--magenta);
	background: var(--card);
}

.pk-notice--bad {
	background: var(--magenta-tint);
	color: var(--magenta-deep);
}

/* 18. Motion
   ========================================================================== */
@keyframes pk-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

@keyframes pk-fade {
	from {
		opacity: 0;
	}
}

@keyframes pk-mat-in {
	from {
		opacity: 0;
		transform: translateY(34px) rotate(1.6deg);
	}
}

@keyframes pk-press {
	from {
		opacity: 0;
		letter-spacing: 0.12em;
	}
}

@keyframes pk-marquee {
	to {
		transform: translateX(-50%);
	}
}

@keyframes pk-spin {
	to {
		transform: rotate(360deg);
	}
}

.pk-rise {
	animation: pk-rise 0.9s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

/* The script word keeps its tilt while it rises. */
.pk-hero__script.pk-rise {
	animation-name: pk-rise-tilted;
}

@keyframes pk-rise-tilted {
	from {
		opacity: 0;
		transform: translateY(20px) rotate(-1deg);
	}
}

.pk-mat {
	animation: pk-mat-in 1.1s var(--ease) 0.25s both;
}

/* Scroll reveals only hide content once the script that reveals it is running. */
.js [data-pk-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-pk-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.js [data-pk-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* 19. The 3D studio
   ==========================================================================
   Browsers with WebGL2 get `pk-3d` on <html> (inc/assets.php). The homepage
   hero then becomes Heather's worktable: a full-bleed canvas with the copy and
   the controls floating over it. Without the class, the photographed preview
   above is what shows, and nothing in this section applies. */

.pk-studio,
.pk-studio__hint {
	display: none;
}

.pk-foryou {
	display: none;
}

@media (min-width: 1100px) {
	.pk-foryou:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		margin-right: 0.6rem;
		padding: 0.45rem 0.9rem;
		border: 1.5px dashed var(--magenta);
		border-radius: 999px;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	.pk-foryou strong {
		max-width: 12ch;
		overflow: hidden;
		font-family: var(--font-script);
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.8;
		text-overflow: ellipsis;
		color: var(--magenta);
	}
}

/* The header joins the dark scene on the homepage. */
.pk-3d .pks-home .pk-header {
	background: var(--ink);
	color: var(--paper);
	backdrop-filter: none;
}

.pk-3d .pks-home .pk-header.is-stuck {
	border-bottom-color: var(--ink-line);
}

.pk-3d .pks-home .pk-tool:hover {
	background: rgba(255, 255, 255, 0.1);
}

.pk-3d .pks-home .pk-foryou strong {
	color: var(--magenta-light);
}

.pk-3d .pk-hero--studio {
	position: relative;
	height: clamp(620px, calc(100svh - 150px), 920px);
	padding: 0;
	color: var(--paper);
}

.pk-3d .pk-studio {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: grab;
	touch-action: pan-y;
	transition: opacity 1.4s ease;
}

.pk-3d .pk-studio.is-live {
	opacity: 1;
}

.pk-3d .pk-studio.is-grabbing {
	cursor: grabbing;
}

/* Held still (`pk-calm`), the scene changes by a short dissolve: a fade is not motion.
   This outranks the blanket rule that switches transitions off for those visitors. */
.pk-calm .pk-studio {
	transition: opacity 0.24s linear !important;
}

.pk-calm .pk-studio.is-cutting {
	opacity: 0;
}

/* Darken the edges so the table melts into the page, and keep the headline legible. */
.pk-3d .pk-hero--studio::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(23, 17, 26, 0.72), rgba(23, 17, 26, 0) 30%),
		linear-gradient(to top, rgba(23, 17, 26, 0.8), rgba(23, 17, 26, 0) 26%),
		radial-gradient(120% 100% at 40% 55%, rgba(23, 17, 26, 0) 55%, rgba(23, 17, 26, 0.85) 100%);
	pointer-events: none;
}

.pk-3d .pk-hero--studio .pk-hero__grid {
	position: relative;
	z-index: 2;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	height: 100%;
	align-items: stretch;
	/* Clicks and drags fall through to the canvas except on real controls. */
	pointer-events: none;
}

.pk-3d .pk-hero--studio .pk-hero__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-block: clamp(1.5rem, 4.5vh, 3.25rem) clamp(1.5rem, 4vh, 2.75rem);
}

.pk-3d .pk-hero--studio a,
.pk-3d .pk-hero--studio .pk-mat__controls {
	pointer-events: auto;
}

.pk-3d .pk-hero--studio .pk-eyebrow {
	color: var(--magenta-light);
}

.pk-3d .pk-hero--studio .pk-hero__title {
	font-size: clamp(3.25rem, 6.2vw, 5.75rem);
	color: var(--paper);
	text-shadow: 0 2px 40px rgba(23, 17, 26, 0.7);
}

.pk-3d .pk-hero--studio .pk-hero__script {
	color: #f0559d;
}

.pk-3d .pk-hero--studio .pk-hero__text {
	width: fit-content;
	max-width: 27ch;
	margin-top: 0.75rem;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(251, 246, 239, 0.74);
	text-shadow: 0 1px 16px rgba(23, 17, 26, 0.9);
}

.pk-3d .pk-hero--studio .pk-hero__actions {
	margin-top: auto;
}

.pk-3d .pk-hero--studio .pk-btn--ink {
	background: var(--paper);
	color: var(--ink);
}

.pk-3d .pk-hero--studio .pk-btn--ink:hover {
	background: var(--magenta);
	color: #fff;
}

.pk-3d .pk-hero--studio .pk-link {
	color: var(--paper);
	text-decoration-color: var(--magenta-light);
}

/* The mat card dissolves; only its controls remain, as a floating dock. */
.pk-3d .pk-hero--studio .pk-mat {
	display: flex;
	align-items: center;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
	animation: none;
}

.pk-3d .pk-hero--studio .pk-mat__stage {
	display: none;
}

.pk-3d .pk-hero--studio .pk-mat__controls {
	width: 100%;
	margin: 0;
	background: rgba(255, 253, 249, 0.96);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
	animation: pk-rise 0.9s var(--ease) 0.5s both;
}

.pk-3d .pk-studio__hint {
	position: absolute;
	right: var(--gutter);
	bottom: 1.4rem;
	z-index: 2;
	display: block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ink-line);
	border-radius: 999px;
	background: rgba(23, 17, 26, 0.6);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(251, 246, 239, 0.85);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.6s, transform 0.6s var(--ease);
	pointer-events: none;
	backdrop-filter: blur(6px);
}

.pk-3d .pk-studio__hint.is-shown {
	opacity: 1;
	transform: none;
}

@media (min-width: 900px) {
	/* Wide enough, where there is room, for each row of choices to sit on one line. */
	.pk-3d .pk-journey {
		--dock: clamp(336px, 27vw, 388px);
	}

	.pk-3d .pk-hero--studio .pk-hero__grid {
		grid-template-columns: minmax(0, 1fr) var(--dock, 336px);
	}

	/* The dock keeps clear of the machine's readout above it. */
	.pk-3d .pk-hero--studio .pk-mat {
		padding-top: 7.25rem;
		padding-bottom: 1.25rem;
	}

	.pk-3d .pk-hero--studio .pk-mat__controls {
		gap: 1rem;
		padding-block: 1.3rem;
	}

	.pk-3d .pk-hero--studio .pk-mat__swatchrow {
		grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
		gap: 0.9rem;
	}

	.pk-3d .pk-hero--studio .pk-swatches {
		gap: 0.34rem;
	}

	.pk-3d .pk-hero--studio .pk-swatch {
		width: 26px;
		height: 26px;
	}

	.pk-3d .pk-studio__hint {
		right: calc(var(--dock, 336px) + var(--gutter) * 2);
	}
}

/* Short screens: tighter still, and without the readout once there is no room for both. */
@media (min-width: 900px) and (max-height: 800px) {
	.pk-3d .pk-hero--studio .pk-mat__controls {
		gap: 0.75rem;
		padding-block: 1rem;
	}

	.pk-3d .pk-hero--studio .pk-mat__field input {
		font-size: 1.45rem;
	}
}

@media (min-width: 900px) and (max-height: 700px) {
	.pk-3d .pk-journey .pk-hud {
		display: none;
	}

	.pk-3d .pk-hero--studio .pk-mat {
		padding-top: 1.25rem;
	}
}

/* Phones: the table fills the top of the screen and the dock follows below it. */
@media (max-width: 899px) {
	.pk-3d .pk-journey {
		--table: max(66svh, 430px);
	}

	/* The two actions share a line where the phone is wide enough, leaving the piece more room. */
	.pk-3d .pk-hero--studio .pk-hero__actions {
		gap: 0.75rem 1rem;
	}

	.pk-3d .pk-hero--studio .pk-hero__actions .pk-btn {
		padding-inline: 1.2rem;
	}

	.pk-3d .pk-hero--studio {
		height: auto;
	}

	.pk-3d .pk-studio,
	.pk-3d .pk-hero--studio::after {
		bottom: auto;
		height: var(--table);
	}

	.pk-3d .pk-hero--studio::after {
		background:
			linear-gradient(to bottom, rgba(23, 17, 26, 0.8), rgba(23, 17, 26, 0) 34%),
			linear-gradient(to top, var(--ink), rgba(23, 17, 26, 0) 22%);
	}

	.pk-3d .pk-hero--studio .pk-hero__copy {
		min-height: var(--table);
	}

	.pk-3d .pk-hero--studio .pk-hero__text {
		display: none;
	}

	.pk-3d .pk-hero--studio .pk-mat {
		padding-block: 0.5rem 2.5rem;
	}

	/* Above the buttons, clear of the piece. */
	.pk-3d .pk-studio__hint {
		top: calc(var(--table) - 7.6rem);
		right: var(--gutter);
		bottom: auto;
	}

	.pk-3d .pk-hero--studio .pk-hero__title {
		font-size: clamp(2.75rem, 13vw, 3.75rem);
	}
}

/* Live product renders: the 3D viewer on a product page, and still pictures on cards. */
.pk-viewer {
	background: var(--ink);
}

.pk-3d .pk-viewer .pk-studio {
	z-index: 1;
}

.pk-3d .pk-viewer .pk-placeholder {
	background: var(--ink);
	color: transparent;
}

.pk-3d .pk-viewer .pk-placeholder img {
	opacity: 0.35;
}

.pk-viewer__hint {
	display: none;
}

.pk-3d .pk-viewer__hint {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	z-index: 2;
	display: block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ink-line);
	border-radius: 999px;
	background: rgba(23, 17, 26, 0.6);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(251, 246, 239, 0.85);
	translate: -50% 0;
	pointer-events: none;
}

.pk-shotbox {
	position: absolute;
	inset: 0;
	display: block;
}

/* A photograph of the piece on its dark table, where a 3D picture would be. */
.pk-shotbox:has(.pk-standin),
.pk-viewer:has(.pk-standin) {
	background: var(--ink);
}

.pk-standin {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pk-3d .pk-viewer .pk-standin {
	opacity: 0.35;
}

.pk-shotbox.has-shot {
	background: var(--ink);
}

.pk-shot {
	animation: pk-fade 0.6s both;
}

/* 20. The table journey
   ==========================================================================
   With the 3D studio running, the hero and the three sections after it become
   chapters laid over one pinned canvas. Scrolling moves the camera along the
   worktable (assets/js/studio.js); each chapter's words sit to one side so the
   table shows beside them. Without `pk-3d` none of this applies and the same
   markup is four ordinary sections. */

.pk-journey__stage {
	display: none;
}

.pk-3d .pk-journey {
	--bar: 78px;
	position: relative;
	background: var(--ink);
	color: var(--paper);
}

/* The canvas stays put under the header while the chapters scroll over it. */
.pk-3d .pk-journey__stage {
	position: sticky;
	top: var(--bar);
	z-index: 0;
	display: block;
	height: calc(100svh - var(--bar));
	margin-bottom: calc(var(--bar) - 100svh);
	overflow: hidden;
}

.pk-3d .pk-journey__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(23, 17, 26, 0.6), rgba(23, 17, 26, 0) 26%),
		linear-gradient(to top, rgba(23, 17, 26, 0.75), rgba(23, 17, 26, 0) 22%),
		radial-gradient(125% 105% at 50% 55%, rgba(23, 17, 26, 0) 55%, rgba(23, 17, 26, 0.8) 100%);
	pointer-events: none;
}

.pk-3d .pk-studio.is-pointing {
	cursor: pointer;
}

/* The hero is now just the first chapter: see-through, and out of the canvas's way. */
.pk-3d .pk-journey .pk-hero--studio {
	z-index: 1;
	/* At least a screenful, and taller when a short window leaves the dock no room. */
	display: grid;
	height: auto;
	min-height: clamp(600px, calc(100svh - 150px), 900px);
	overflow: visible;
	background: none;
	pointer-events: none;
}

.pk-3d .pk-journey .pk-hero--studio::after {
	display: none;
}

.pk-3d .pk-journey .pk-hero--studio .pk-hero__grid {
	height: auto;
}

.pk-3d .pk-chapter {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 135svh;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--paper);
	pointer-events: none;
}

.pk-3d .pk-chapter > .pk-wrap {
	display: flex;
}

.pk-3d .pk-chapter[data-side="right"] > .pk-wrap {
	justify-content: flex-end;
}

.pk-3d .pk-chapter__panel {
	position: relative;
	width: min(100%, 30rem);
	padding-block: 2rem;
	pointer-events: auto;
}

/* A soft dark pool behind the words, so they read over whatever is on the table. */
.pk-3d .pk-chapter__panel::before {
	content: "";
	position: absolute;
	inset: -5rem -7rem;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(23, 17, 26, 0.86), rgba(23, 17, 26, 0));
	pointer-events: none;
}

.pk-3d .pk-chapter .pk-h2 {
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	color: var(--paper);
}

.pk-3d .pk-chapter .pk-eyebrow {
	color: var(--magenta-light);
}

.pk-3d .pk-chapter .pk-link {
	color: var(--paper);
	text-decoration-color: var(--magenta-light);
}

/* Shelf chapter: the photo tiles become a plain list; the pieces themselves are on the table. */
.pk-3d .pk-chapter .pk-tiles {
	display: block;
}

.pk-3d .pk-chapter .pk-tile,
.pk-3d .pk-chapter .pk-tile:nth-child(1) {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	min-height: 0;
	padding: 1.05rem 0;
	overflow: visible;
	border-bottom: 1px solid var(--ink-line);
	border-radius: 0;
	background: none;
	color: var(--paper);
	isolation: auto;
}

.pk-3d .pk-chapter .pk-tile:nth-child(1) {
	border-top: 1px solid var(--ink-line);
}

.pk-3d .pk-chapter .pk-tile::after,
.pk-3d .pk-chapter .pk-tile__img,
.pk-3d .pk-chapter .pk-tile__script {
	display: none;
}

.pk-3d .pk-chapter .pk-tile__label {
	display: contents;
}

.pk-3d .pk-chapter .pk-tile__name {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	transition: color 0.2s, translate 0.35s var(--ease);
}

.pk-3d .pk-chapter .pk-tile:hover .pk-tile__name {
	color: var(--magenta-light);
	translate: 0.4rem 0;
}

.pk-3d .pk-chapter .pk-tile--custom .pk-tile__name {
	color: var(--magenta-light);
}

/* Custom chapter: the steps stack, numbers beside them. */
.pk-3d .pk-chapter.pk-steps {
	margin-top: 0;
}

.pk-3d .pk-chapter .pk-steps__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem;
}

.pk-3d .pk-chapter .pk-steps__list li {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	column-gap: 1rem;
	padding-top: 1.1rem;
}

.pk-3d .pk-chapter .pk-steps__list li::before {
	grid-row: 1 / span 2;
	margin: 0;
	font-size: 2.4rem;
}

.pk-3d .pk-chapter .pk-steps__list h3 {
	margin-bottom: 0.2rem;
	font-size: 1.3rem;
}

.pk-3d .pk-chapter .pk-steps__list p {
	font-size: 0.9375rem;
}

.pk-3d .pk-chapter .pk-steps__cta {
	margin-top: 1.75rem;
}

/* Story chapter: the seal is on the table, so only the words remain. */
.pk-3d .pk-chapter.pk-story {
	padding-block: 0;
}

.pk-3d .pk-chapter.pk-story .pk-chapter__panel {
	display: block;
	width: min(100%, 33rem);
}

.pk-3d .pk-chapter .pk-story__seal {
	display: none;
}

.pk-3d .pk-chapter .pk-story__quote p {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	color: var(--paper);
}

.pk-3d .pk-chapter .pk-story__text {
	color: rgba(251, 246, 239, 0.76);
}

.pk-3d .pk-chapter .pk-story__sign {
	color: rgba(251, 246, 239, 0.6);
}

.pk-3d .pk-chapter .pk-story__sign span {
	color: #f0559d;
}

/* The cutting machine's readout. */
.pk-hud {
	display: none;
}

.pk-3d .pk-hud {
	position: absolute;
	top: 1.4rem;
	right: var(--gutter);
	z-index: 2;
	display: grid;
	gap: 0.3rem;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
	color: var(--magenta-light);
	transition: opacity 0.4s;
}

.pk-hud div {
	display: flex;
	justify-content: flex-end;
	gap: 0.9em;
}

.pk-hud dt {
	color: rgba(251, 246, 239, 0.42);
}

.pk-hud dd {
	min-width: 10.5em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Once the camera leaves the mat, the readout and the hint have nothing to say. */
.pk-journey.is-travelling .pk-hud,
.pk-journey.is-travelling .pk-studio__hint {
	opacity: 0;
}

@media (max-width: 899px) {
	/* Phones: words rise from the bottom; the table shows above them. */
	.pk-3d .pk-chapter {
		align-items: flex-end;
		min-height: 150svh;
		padding-bottom: 10svh;
	}

	.pk-3d .pk-chapter__panel,
	.pk-3d .pk-chapter.pk-story .pk-chapter__panel {
		width: 100%;
	}

	.pk-3d .pk-chapter__panel::before {
		inset: -7rem calc(var(--gutter) * -1) -12svh;
		background: linear-gradient(to top, var(--ink) 62%, rgba(23, 17, 26, 0));
	}

	.pk-3d .pk-journey .pk-hero--studio {
		height: auto;
	}

	.pk-3d .pk-journey .pk-studio {
		height: 100%;
	}

	/* Beside the headline, under the small line above it. */
	.pk-3d .pk-hud {
		top: 4.6rem;
		font-size: 0.5625rem;
	}

	.pk-3d .pk-hud dt {
		display: none;
	}

	.pk-hud div:nth-child(n + 4) {
		display: none;
	}

	.pk-hud dd {
		min-width: 0;
	}
}

/* 21. Moving between pages
   ==========================================================================
   Cross-page view transitions: a product's picture and name carry over from
   its card to its own page, cards glide to their new places when the category
   changes, and the header holds still. Browsers without the feature simply
   load the next page. */

@view-transition {
	navigation: auto;
}

::view-transition-group(*) {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pk-header {
	view-transition-name: pk-header;
}

.pk-footer {
	view-transition-name: pk-footer;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* 22. Type that answers the pointer
   ==========================================================================
   Headings marked data-pk-kinetic are split into letters by assets/js/main.js;
   each letter's weight follows how close the pointer is, as if pressed. */

.pk-k {
	display: inline-block;
	font-variation-settings: "wght" var(--w, 300);
	transition: font-variation-settings 0.35s ease-out;
}

.pk-k-word {
	display: inline-block;
	white-space: nowrap;
}

/* 23. Satin
   ==========================================================================
   A shader-drawn field behind dark surfaces outside the table (assets/js/silk.js).
   It ripples with the pointer. Without WebGL the plain background stays. */

.pk-silk {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s;
}

.pk-silk.is-live {
	opacity: 1;
}

.pk-footer,
.pk-storyhead {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.pk-footer > .pk-wrap,
.pk-storyhead > .pk-wrap {
	position: relative;
	z-index: 1;
}