/**
 * Parnaz Kaur — parnazkaur.com
 *
 * The palette is a hard constraint: these six values never change, and no
 * colour is ever pulled from an artwork into the interface. Nothing here is
 * more saturated than the paintings.
 */

:root {
	--pk-ground: #F2EADA;
	--pk-raised: #FAF6EE;
	--pk-rule: #DFD5C0;
	--pk-text: #1F1C17;
	--pk-secondary: #6E6656;
	--pk-accent: #2C3A63;

	/* Narrative body, a touch softer than Text. */
	--pk-prose: #3A352C;
	/* Contact module only. Appears nowhere else. */
	--pk-chah: #C4707F;

	/* Narrative body size. EB Garamond has a small x-height, so it sets
	   optically smaller than the same value in a sans face. One knob: change
	   this to 18px to return to the handoff's literal value. */
	/* One type scale. Change these, not individual rules. */
	/* Type scale. Every size on the site comes from one of these, and every
	   one is fluid: it grows with the viewport instead of sitting at a fixed
	   px that looks right on a laptop and small on a large display. Ratios
	   at 1700px wide: 54 / 38 / 31 / 27 / 24 / 19 / 19 / 18. */
	--pk-h1-size: clamp(35px, 1.75rem + 1.85vw, 54px);
	--pk-h2-size: clamp(28px, 1.45rem + 1.05vw, 38px);
	--pk-h3-size: clamp(24px, 1.3rem + 0.75vw, 31px);
	--pk-lede-size: clamp(21px, 1.2rem + 0.55vw, 27px);
	--pk-title-size: clamp(20px, 1.05rem + 0.4vw, 26px); /* card and item titles */
	--pk-prose-size: clamp(19px, 1.1rem + 0.4vw, 24px);  /* body copy */
	--pk-ui-size: clamp(17px, 1rem + 0.22vw, 19px);      /* nav, buttons, labels */
	--pk-meta-size: clamp(17px, 1rem + 0.18vw, 19px);    /* captions, metadata */
	--pk-fine-size: clamp(16px, 0.95rem + 0.12vw, 18px); /* the floor */

	--pk-radius: 12px;
	--pk-pad: clamp(16px, 5vw, 40px);
	--pk-max: 1440px;

	--pk-serif: 'EB Garamond', Georgia, serif;
	--pk-sans: Inter, system-ui, -apple-system, sans-serif;
	--pk-gurmukhi: 'Noto Serif Gurmukhi', 'EB Garamond', serif;

	--pk-shadow-card: 0 14px 40px rgba(31, 28, 23, 0.05);
	--pk-shadow-photo: 0 12px 30px rgba(31, 28, 23, 0.10);
	--pk-shadow-small: 0 6px 14px rgba(31, 28, 23, 0.09);
	--pk-shadow-framed: 0 14px 26px rgba(31, 28, 23, 0.22);
}

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--pk-ground);
}

body {
	color: var(--pk-text);
	font-family: var(--pk-sans);
	font-size: var(--pk-prose-size);
	min-height: 100vh;
}

a {
	color: var(--pk-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--pk-text); }
::selection { background: var(--pk-rule); }

img { max-width: 100%; }

/* ------------------------------------------------------------------ header */

.pk-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: 20px var(--pk-pad) 18px;
	border-bottom: 1px solid var(--pk-rule);
	position: sticky;
	top: 0;
	background: var(--pk-ground);
	z-index: 20;
}

.pk-wordmark {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
}
.pk-wordmark__name {
	font-family: var(--pk-serif);
	font-size: var(--pk-title-size);
	letter-spacing: 0.01em;
	color: var(--pk-accent);
}
.pk-wordmark__tagline {
	font-family: var(--pk-serif);
	font-size: var(--pk-fine-size);
	font-style: italic;
	color: var(--pk-secondary);
}

.pk-nav {
	display: flex;
	gap: clamp(12px, 3vw, 28px);
	align-items: center;
	font-size: var(--pk-ui-size);
	flex-wrap: wrap;
	row-gap: 10px;
}
.pk-nav__list {
	display: flex;
	gap: clamp(12px, 3vw, 28px);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	row-gap: 10px;
}
.pk-nav__list a { color: var(--pk-accent); text-decoration: none; }
.pk-nav__list a:hover { color: var(--pk-text); }

/* The page you are on. A rule under the word rather than a colour change, so
   it still reads as a link and does not compete with hover. */
.pk-nav__item.is-current > a {
	color: var(--pk-text);
	box-shadow: inset 0 -2px 0 var(--pk-accent);
	padding-bottom: 2px;
}

.pk-cart-pill {
	margin-left: 8px;
	padding: 9px 16px;
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	background: var(--pk-raised);
	font-size: var(--pk-ui-size);
	color: var(--pk-secondary);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	text-decoration: none;
}

/* ------------------------------------------------------------------ layout */

.pk-site { max-width: var(--pk-max); margin: 0 auto; }

main {
	padding: clamp(28px, 6vw, 52px) var(--pk-pad) 0;
}

.pk-h2 {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h2-size);
	color: var(--pk-accent);
	margin: 0 0 20px;
}

/* ----------------------------------------------------------------- gallery */

.pk-gallery { display: flex; flex-direction: column; gap: 40px; }

.pk-gallery__row {
	display: flex;
	align-items: flex-start;
	/* gap is set inline by the solver so it always matches the solved geometry */
}

.pk-gallery__item {
	display: block;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.pk-gallery__media {
	display: block;
	overflow: hidden;
	border-radius: var(--pk-radius);
	background: var(--pk-raised);
}

/* Artwork fills its solved box exactly. The box already carries the true
   aspect ratio, so `fill` here is not a distortion: it is an exact match.
   `cover` is never used anywhere on this site. */
.pk-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--pk-radius);
}

/* Wall labels: always visible, never hover-only, left-aligned to the image. */
.pk-gallery__label { display: block; padding-top: 12px; }
.pk-gallery__title {
	display: block;
	font-family: var(--pk-serif);
	font-size: var(--pk-title-size);
	line-height: 1.35;
	color: var(--pk-text);
}
.pk-gallery__meta {
	display: block;
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	margin-top: 2px;
}
.pk-gallery__price {
	display: block;
	font-size: var(--pk-meta-size);
	color: var(--pk-text);
	margin-top: 4px;
}

/* Prints page cards */
.pk-card {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 14px;
}

/* Before the solver runs, show a sane stacked fallback rather than a flash
   of full-size images. */
.pk-gallery:not(.is-laid-out) .pk-gallery__item { max-width: 100%; }
.pk-gallery:not(.is-laid-out) .pk-gallery__img { height: auto; }

/* ---------------------------------------------------------------- artwork */

.pk-artwork { padding-bottom: 64px; }

.pk-backlink {
	display: inline-block;
	font-size: var(--pk-meta-size);
	color: var(--pk-accent);
	text-decoration: none;
	margin-bottom: 24px;
}

.pk-artwork__hero { display: flex; justify-content: center; margin-bottom: 26px; }

.pk-zoom-trigger {
	border: 0;
	padding: 0;
	background: none;
	cursor: zoom-in;
	display: block;
	line-height: 0;
}
.pk-artwork__img {
	display: block;
	max-height: min(80vh, 720px);
	width: auto;
	max-width: 100%;
	border-radius: var(--pk-radius);
}

.pk-metabar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pk-rule);
	margin-bottom: 40px;
}
.pk-metabar__title {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h2-size);
	color: var(--pk-accent);
	margin: 0 0 6px;
}
.pk-metabar__meta { font-size: var(--pk-meta-size); color: var(--pk-secondary); }
.pk-metabar__price { font-size: var(--pk-meta-size); color: var(--pk-secondary); }

.pk-story { display: grid; gap: 44px; align-items: start; margin-bottom: 48px; }
.pk-story--stacked { grid-template-columns: 1fr; }
@media (min-width: 901px) {
	.pk-story--split { grid-template-columns: 1.15fr 0.85fr; }
}

.pk-story__prose p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}

.pk-quote {
	margin: 0 0 18px;
	padding-left: 24px;
	border-left: 2px solid var(--pk-accent);
}
.pk-quote__gurmukhi {
	font-family: var(--pk-gurmukhi);
	font-size: var(--pk-lede-size);
	line-height: 1.9;
	color: var(--pk-text);
}
.pk-quote__en {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-prose-size);
	color: var(--pk-secondary);
	margin-top: 10px;
}

.pk-status {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	max-width: 60ch;
}

.pk-insitu { margin: 0; }
.pk-insitu__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pk-radius);
	box-shadow: var(--pk-shadow-framed);
}
.pk-caption {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	margin-top: 12px;
}

/* --------------------------------------------------------------- purchase */

.pk-purchase {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 22px 24px;
	margin-bottom: 48px;
}
.pk-purchase__row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}
.pk-purchase__field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 280px; }
.pk-label { font-family: var(--pk-sans); font-size: var(--pk-ui-size); color: var(--pk-secondary); }
.pk-select {
	background: var(--pk-ground);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 12px 14px;
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-text);
	width: 100%;
}
.pk-purchase__price {
	font-family: var(--pk-serif);
	font-size: var(--pk-h3-size);
	color: var(--pk-text);
	white-space: nowrap;
}
/* Genuine fine print. Note this sets below the handoff's 15px floor, at
   Parnaz's request, so it reads as a footnote to the purchase rather than a
   line of body copy. */
.pk-fineprint {
	font-family: var(--pk-sans);
	font-size: var(--pk-fine-size);
	line-height: 1.5;
	color: var(--pk-secondary);
	margin-top: 12px;
}

.pk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: var(--pk-radius);
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	cursor: pointer;
	border: 0;
	text-decoration: none;
}
.pk-btn--primary {
	padding: 13px 22px;
	background: var(--pk-accent);
	color: var(--pk-raised);
}
.pk-btn--primary:hover { background: var(--pk-text); color: var(--pk-raised); }
.pk-btn--quiet {
	margin-top: 10px;
	padding: 9px 16px;
	border: 1px solid var(--pk-rule);
	background: var(--pk-ground);
	color: var(--pk-accent);
}

/* ---------------------------------------------------------- closer/related */

.pk-closer { margin-bottom: 48px; }
.pk-closer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.pk-closer__grid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pk-radius);
	box-shadow: var(--pk-shadow-photo);
}

.pk-related__row { display: flex; gap: 24px; flex-wrap: wrap; }
.pk-related__item { display: block; text-decoration: none; color: inherit; width: 200px; }
.pk-related__media { display: block; overflow: hidden; border-radius: var(--pk-radius); }
.pk-related__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pk-related__title {
	display: block;
	font-family: var(--pk-serif);
	font-size: var(--pk-meta-size);
	line-height: 1.35;
	margin-top: 10px;
}
.pk-related__meta { display: block; font-size: var(--pk-meta-size); color: var(--pk-secondary); }

/* ------------------------------------------------------------------- zoom */

.pk-zoom {
	position: fixed;
	inset: 0;
	background: rgba(31, 28, 23, 0.92);
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	cursor: zoom-out;
}
.pk-zoom[hidden] { display: none; }

/* A visible way out. Without it the only exits were Escape or a guess. */
.pk-zoom__close {
	position: absolute;
	top: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(250, 246, 238, 0.35);
	border-radius: 50%;
	background: rgba(31, 28, 23, 0.55);
	color: var(--pk-raised);
	font-family: var(--pk-sans);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.pk-zoom__close:hover {
	background: var(--pk-raised);
	color: var(--pk-text);
	border-color: var(--pk-raised);
}
.pk-zoom__close:focus-visible {
	outline: 2px solid var(--pk-raised);
	outline-offset: 3px;
}

/* The painting is not the backdrop, so clicking it does not dismiss. */
.pk-zoom__img { cursor: default; }
.pk-zoom__img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ----------------------------------------------------------------- footer */

.pk-footer {
	border-top: 1px solid var(--pk-rule);
	padding: 24px var(--pk-pad) 36px;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	max-width: var(--pk-max);
	margin: 48px auto 0;
}
.pk-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.pk-footer__links a { color: var(--pk-accent); text-decoration: none; }

/* ------------------------------------------------------------- work page */

.pk-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 24px;
	row-gap: 6px;
	flex-wrap: wrap;
	margin-bottom: clamp(20px, 2vw, 28px);
}
/* The flex gap is the spacing here. Left to itself the heading adds its own
   bottom margin on top, which opens a hole once the row wraps. */
.pk-section-head > :is(h1, h2, h3, p) { margin-bottom: 0; }
.pk-aside {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
}
.pk-work { padding-bottom: 48px; }

/* --------------------------------------------------------- page furniture */

.pk-h1 {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h1-size);
	line-height: 1.2;
	color: var(--pk-accent);
	margin: 0 0 18px;
}

.pk-pagehead { margin-bottom: 40px; }

.pk-prose-line {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}

/* The sentence under a page title introduces the page, so it sets a step
   above the body copy that follows it. */
.pk-lede {
	font-family: var(--pk-serif);
	font-size: var(--pk-lede-size);
	line-height: 1.6;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}

/* A section that opens with a hairline above it. */
.pk-ruled {
	border-top: 1px solid var(--pk-rule);
	padding-top: 40px;
	margin-top: 40px;
}

.pk-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px;
	align-items: start;
}

/* ------------------------------------------------------------------ about */

.pk-about { padding-bottom: 48px; }

.pk-about__prose p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}

.pk-panel {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 24px 26px;
	margin-top: 26px;
}
.pk-panel__label {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	margin-bottom: 12px;
}
.pk-panel p:last-child { margin-bottom: 0; }

/* Snapshots read as pinned photographs: natural proportion, soft shadow,
   a gentle tilt. Artwork is never rotated. */
.pk-photo { margin: 0 0 24px; }
.pk-photo__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pk-radius);
	box-shadow: var(--pk-shadow-photo);
}
.pk-photo--tilt-a .pk-photo__img { transform: rotate(-0.7deg); }
.pk-photo--tilt-b .pk-photo__img { transform: rotate(0.5deg); }
.pk-photo--tilt-c .pk-photo__img { transform: rotate(-0.4deg); }
.pk-photo--flat .pk-photo__img { transform: none; box-shadow: var(--pk-shadow-small); }

.pk-photo-row { display: flex; gap: 20px; flex-wrap: wrap; }
.pk-photo-row .pk-photo { flex: 1 1 200px; max-width: 280px; }

/* Explicit columns so all three end up close to equal length. Grid rather
   than flex-basis, so a column can never wrap onto its own row and stretch to
   full width. Never CSS `columns`, which fills column one first. */
.pk-classes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}
.pk-classes__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pk-classes__col .pk-photo { margin: 0; }

.pk-classes { margin-top: 48px; scroll-margin-top: 120px; }

/* ----------------------------------------------------------------- beyond */

.pk-beyond { padding-bottom: 48px; }
.pk-beyond__prose p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}

.pk-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 26px 0 40px;
}
.pk-video {
	position: relative;
	display: block;
	border-radius: var(--pk-radius);
	overflow: hidden;
	background: var(--pk-raised);
	box-shadow: var(--pk-shadow-photo);
}
.pk-video__thumb { display: block; width: 100%; height: auto; }
.pk-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(31, 28, 23, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pk-video__tri {
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--pk-raised);
}
.pk-video__pill {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 7px 14px;
	border-radius: var(--pk-radius);
	background: var(--pk-raised);
	color: var(--pk-accent);
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.pk-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pk-linkout { font-family: var(--pk-sans); font-size: var(--pk-ui-size); text-decoration: none; }

/* Small and secondary to the text: beside it where there is room, below the
   button where there is not. Capped so it never reads as a feature gallery. */
.pk-slime-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: start;
}
@media (min-width: 1000px) {
	/* A wider photo column: at 420px the four photos were small enough to
	   read as thumbnails, and the column ran out well before the three
	   paragraphs beside it did, leaving an odd gap. */
	.pk-slime-layout { grid-template-columns: minmax(0, 1fr) 520px; }
	.pk-slime-layout .pk-slime-grid {
		margin-top: 0;
		max-width: none;
	}
}

.pk-slime-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	max-width: 620px;
	margin-top: 26px;
}
.pk-slime-grid .pk-photo { margin: 0; }

/* Photographs keep their natural proportion. Never cropped, never letterboxed:
   the height follows from the width and the file's own aspect ratio. */
.pk-photo__img { object-fit: initial; }

/* ---------------------------------------------------------------- contact */

.pk-contact { padding-bottom: 48px; }
.pk-contact__prose p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	max-width: 60ch;
	margin: 0 0 1.1em;
}
.pk-contact__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--pk-sans);
	font-size: var(--pk-prose-size);
	color: var(--pk-secondary);
	margin-top: 24px;
}
.pk-contact__lines a { color: var(--pk-accent); text-decoration: none; }

/* The chah module. #C4707F appears nowhere else on the site. */
.pk-chah { margin-top: 3.5rem; }
.pk-chah__sticker { display: block; height: 270px; width: auto; margin-bottom: 18px; }
.pk-chah__hello {
	font-family: var(--pk-serif);
	font-weight: 600;
	font-size: var(--pk-h1-size);
	line-height: 1.3;
	color: var(--pk-accent);
}
.pk-chah__chah {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-h1-size);
	line-height: 1.3;
	color: var(--pk-chah);
}

.pk-form {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.pk-form__field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pk-input {
	background: var(--pk-ground);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 12px 14px;
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-text);
	width: 100%;
}
.pk-form textarea.pk-input { resize: vertical; }

/* ------------------------------------------------------------ intro panel */

/* A raised card introducing Parnaz, above the gallery hang. */
.pk-intro {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 36px 34px;
	box-shadow: var(--pk-shadow-card);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px;
	align-items: center;
	margin-bottom: 56px;
}

.pk-intro__text { max-width: 60ch; }

.pk-intro__kicker {
	font-family: var(--pk-serif);
	font-style: italic;
	font-size: var(--pk-ui-size);
	color: var(--pk-secondary);
	margin-bottom: 10px;
}

.pk-intro__title {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h1-size);
	line-height: 1.2;
	color: var(--pk-accent);
	margin: 0 0 18px;
}

.pk-intro__lede {
	font-family: var(--pk-serif);
	font-size: var(--pk-lede-size);
	line-height: 1.6;
	color: var(--pk-prose);
	margin: 0 0 1.1em;
}

.pk-intro__buttons {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* Outlined pill: quieter than the solid button beside it. */
.pk-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 9px 16px;
	border: 1px solid var(--pk-rule);
	background: var(--pk-ground);
	border-radius: var(--pk-radius);
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-accent);
	text-decoration: none;
}
.pk-pill:hover { background: var(--pk-raised); }

/* The mission statement, set off by a rule rather than a box. */
/* A rule, never a card. */
.pk-mission {
	border-left: 2px solid var(--pk-accent);
	padding: 22px 0 4px 24px;
	margin-top: 26px;
}
.pk-mission p {
	font-family: var(--pk-serif);
	font-size: var(--pk-lede-size);
	line-height: 1.55;
	color: var(--pk-text);
	margin: 0 0 14px;
}
.pk-mission p:last-child { margin-bottom: 0; }

/* Pinned-photograph treatment. Natural proportion, never cropped. */
.pk-intro__photo { margin: 0; }
.pk-intro__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pk-radius);
	box-shadow: 0 12px 32px rgba(31, 28, 23, 0.10);
	transform: rotate(-0.7deg);
}

/* The sticky header must not cover the anchor target. */
#the-paintings { scroll-margin-top: 130px; }

/* =========================================================== HOME sections */

.pk-home { padding-bottom: 0; }

.pk-h3 {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h3-size);
	color: var(--pk-accent);
	margin: 0;
}

/* --- b. Featured painting ------------------------------------------------ */

.pk-featured { margin-bottom: 8px; }

.pk-featured__card {
	display: block;
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 22px;
	box-shadow: var(--pk-shadow-card);
	text-decoration: none;
	color: inherit;
}

/* Height-capped and centred: the painting is never cropped, stretched or
   letterboxed. Expressed as max-height rather than height so that a narrow
   container reduces the height proportionally instead of leaving empty bars
   either side of the artwork. */
.pk-featured__img {
	display: block;
	margin: 0 auto;
	/* The handoff capped this at 560px and I raised it to 760px, but both
	   numbers were really working around a 1106px file. The web copy is now
	   made from the 10854px master, so the painting can simply fill the card
	   it sits in. */
	max-height: min(80vh, 900px);
	height: auto;
	width: auto;
	max-width: 100%;
	border-radius: var(--pk-radius);
}

.pk-featured__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.pk-featured__title { font-family: var(--pk-serif); font-size: var(--pk-title-size); color: var(--pk-text); }
.pk-featured__sub { font-family: var(--pk-sans); font-size: var(--pk-meta-size); color: var(--pk-secondary); margin-top: 2px; }
.pk-featured__cta { font-family: var(--pk-sans); font-size: var(--pk-ui-size); color: var(--pk-accent); }

/* --- c. On the easel right now ------------------------------------------- */

.pk-easel { padding: 64px 0; }

.pk-easel__card {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 26px 28px;
}

.pk-easel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px;
	align-items: center;
	margin-top: 20px;
}

.pk-easel__shot { margin: 0; }
.pk-easel__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pk-radius);
	box-shadow: 0 8px 22px rgba(31, 28, 23, 0.09);
}
.pk-easel__shot--a .pk-easel__img { transform: rotate(-0.8deg); }
.pk-easel__shot--b .pk-easel__img { transform: rotate(0.9deg); }

/* The ONLY sanctioned crop on the site: this is a studio snapshot, not
   artwork. Paintings are never cropped anywhere. */
.pk-easel__img--crop {
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
}

.pk-easel__text { max-width: 60ch; }
.pk-easel__text p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	margin: 0 0 1.1em;
}

/* --- d. Closing invitation ----------------------------------------------- */

.pk-closing {
	padding: 0 0 84px;
	border-top: 1px solid var(--pk-rule);
	padding-top: 40px;
}
.pk-closing__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}
.pk-closing__text { max-width: 52ch; }
.pk-closing__title {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h2-size);
	color: var(--pk-accent);
	margin: 0 0 12px;
}
.pk-closing__text p {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	margin: 0;
}
.pk-closing__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* --- Work page ----------------------------------------------------------- */

.pk-work .pk-pagehead { margin-bottom: 36px; }

/* ------------------------------------------------- prints not on sale yet */

/* Quiet, in-palette, and stated once. No banner, no countdown. */
.pk-soon-badge {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 13px 22px;
	border: 1px solid var(--pk-rule);
	background: var(--pk-ground);
	border-radius: var(--pk-radius);
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
}

/* The same statement at card scale, on the Prints page. */
.pk-soon {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
}

/* ------------------------------------------------------------ contact form */

.pk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pk-form__notice {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--pk-radius);
	border: 1px solid var(--pk-rule);
	background: var(--pk-ground);
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-text);
}
.pk-form__notice--sent { border-color: var(--pk-accent); color: var(--pk-accent); }

/* ============================================================ small screens */

/* Heading sizes are not restated here. They come from the clamps in :root,
   which already bottom out at the right size on a phone. A second scale used
   to live at this spot; its upper bounds were reached at about 600px wide,
   which froze every heading at its phone-era size on real desktops. */

@media (max-width: 767px) {
	/* The nav wraps to several rows at this width, so a sticky header would
	   sit on roughly a fifth of the screen permanently. It scrolls away
	   instead; it stays sticky on larger screens as the design specifies. */
	.pk-header {
		position: static;
		padding: 14px var(--pk-pad) 12px;
		gap: 10px;
		align-items: flex-start;
	}
	.pk-nav { width: 100%; }
	.pk-nav__list { row-gap: 8px; }
	/* No font-size overrides here: the tokens are clamps, so they already
	   bottom out at the right size on a phone. */
	.pk-cart-pill { margin-left: 0; padding: 7px 13px; }

	/* Cards and panels give back their generous desktop padding. */
	.pk-intro { padding: 24px 20px; }
	.pk-easel__card { padding: 20px 18px; }
	.pk-purchase { padding: 18px 18px; }
	.pk-form { padding: 20px 18px; }
	.pk-panel { padding: 20px 18px; }

	/* Vertical rhythm tightens so a phone is not all scrolling. */
	.pk-two-col,
	.pk-story { gap: 28px; }
	.pk-intro { gap: 28px; margin-bottom: 36px; }
	.pk-easel { padding: 40px 0; }
	.pk-closing { padding-bottom: 56px; }
	.pk-ruled { margin-top: 28px; padding-top: 28px; }

	/* The purchase row stacks instead of squeezing. */
	.pk-purchase__row { gap: 14px; }
	.pk-purchase__field { flex: 1 1 100%; }
	/* Only the buy control goes full width; CTAs elsewhere keep their shape. */
	.pk-purchase .pk-btn--primary,
	.pk-purchase .pk-soon-badge { width: 100%; justify-content: center; }

	/* Related works sit two-up rather than one giant column. */
	.pk-related__row { gap: 16px; }
	.pk-related__item { width: calc(50% - 8px); }
	.pk-related__media { width: 100% !important; height: auto !important; }
	.pk-related__media img { height: auto; }

	/* Two columns on a phone. The desktop layout has three hand-assigned
	   columns; dropping to two would strand the third column's photos all
	   under the first. So the columns dissolve here (display:contents) and the
	   photos flow into two balanced tracks instead, one after another. */
	.pk-classes__grid {
		display: block;
		columns: 2;
		column-gap: 12px;
	}
	.pk-classes__col { display: contents; }
	.pk-classes__grid .pk-photo {
		break-inside: avoid;
		margin: 0 0 12px;
	}

	/* Four fundraiser photos sit two-up rather than four full-width stacks. */
	.pk-slime-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* The chah sticker scales with the screen. */
	.pk-chah__sticker { height: auto; max-height: 210px; }

	/* Header is static here, so anchors need only a little breathing room. */
	#the-paintings,
	.pk-classes { scroll-margin-top: 20px; }
}

/* Nothing may ever push the page wider than the screen. */
html, body { max-width: 100%; overflow-x: clip; }

/* A caveat attached to one option, shown only while it is selected. */
.pk-variation-note {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	line-height: 1.6;
	color: var(--pk-secondary);
	background: var(--pk-ground);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 12px 14px;
	margin-top: 14px;
	max-width: 60ch;
}
.pk-variation-note[hidden] { display: none; }

/* Which shipping applies to the selected option, stated beside the price. */
.pk-purchase__price { display: flex; flex-direction: column; gap: 2px; }
.pk-ship-line {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	white-space: nowrap;
}

/* ------------------------------------------- Prints page: shop treatment */

/* The Prints page shares the gallery solver with Work, so the card has to do
   the work of saying "this is for sale" without changing the layout. */
.pk-gallery--card .pk-gallery__label {
	display: flex;
	flex-direction: column;
	padding-top: 14px;
}

/* These labels sit under a picture several hundred pixels wide, so wall-label
   sizes get visually swallowed. They are scaled to hold their own. */
.pk-gallery--card .pk-gallery__title {
	font-size: var(--pk-title-size);
	line-height: 1.3;
	color: var(--pk-accent);
}

.pk-gallery--card .pk-gallery__meta {
	font-size: var(--pk-meta-size);
	margin-bottom: 12px;
}

/* The price is the point of this page, so it carries weight the Work page's
   wall labels deliberately do not. */
.pk-gallery--card .pk-gallery__price {
	font-family: var(--pk-serif);
	font-size: var(--pk-h3-size);
	line-height: 1.2;
	color: var(--pk-text);
	margin: 0 0 14px;
}

/* A solid button reads as an action; the outlined one read as a wall label. */
.pk-btn--card {
	align-self: flex-start;
	font-size: var(--pk-ui-size);
	padding: 13px 24px;
}

/* Paintings without print files yet say so plainly rather than offering a
   size picker that leads nowhere. */
.pk-gallery--card .pk-soon {
	margin-top: 2px;
	font-style: italic;
	font-family: var(--pk-serif);
	font-size: var(--pk-meta-size);
}

/* Arriving from Prints lands on the sizes, so the sticky header must not
   cover them. */
#buy { scroll-margin-top: 120px; }

.pk-metabar__buy {
	color: var(--pk-accent);
	text-decoration: none;
	white-space: nowrap;
}
.pk-metabar__buy:hover { color: var(--pk-text); }

/* ------------------------------------------------ collapsible story */

/* On a painting whose prints are for sale, the story sits behind a toggle so
   the size picker is reachable without scrolling. It is still first in the
   page order; it just starts closed. */
.pk-story-fold { border-top: 1px solid var(--pk-rule); }

.pk-story-fold__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--pk-serif);
	font-size: var(--pk-ui-size);
	color: var(--pk-accent);
}
.pk-story-fold__toggle::-webkit-details-marker { display: none; }
.pk-story-fold__toggle:hover { color: var(--pk-text); }

/* A chevron that turns as it opens. */
.pk-story-fold__arrow {
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	margin-top: -4px;
}
.pk-story-fold[open] .pk-story-fold__arrow { transform: rotate(-135deg); margin-top: 2px; }

.pk-story-fold[open] .pk-story-fold__toggle { border-bottom: 1px solid var(--pk-rule); }
.pk-story-fold__body { padding-top: 20px; }
.pk-story-fold__body > p:last-child { margin-bottom: 0; }

/* ------------------------------------------- prints not yet available */

/* Sits where the purchase module would, so the page does not just end. The
   painting above it is the point; this explains the absence rather than
   leaving a gap. */
.pk-pending {
	background: var(--pk-raised);
	border: 1px solid var(--pk-rule);
	border-radius: var(--pk-radius);
	padding: 32px 30px;
	margin-bottom: 48px;
	max-width: 60ch;
}

.pk-pending__title {
	font-family: var(--pk-serif);
	font-size: clamp(26px, 5.5vw, 34px);
	line-height: 1.2;
	color: var(--pk-accent);
	margin-bottom: 12px;
}

.pk-pending__note {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
	margin: 0 0 22px;
	max-width: 52ch;
}

/* The marker on a Prints card. Reads at a glance against the buy button on
   the cards that are for sale. */
.pk-soon-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin-top: 10px;
	padding: 11px 18px;
	border: 1px dashed var(--pk-rule);
	border-radius: var(--pk-radius);
	background: var(--pk-ground);
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-secondary);
}

/* A card whose print is not ready reads a touch quieter than one that is. */
.pk-gallery--card .pk-card:has(.pk-soon-pill) { border-style: dashed; }

/* On Work the wall label stays a wall label. Only a work that can actually
   be bought invites a look at the print. */
.pk-gallery__cta {
	display: block;
	margin-top: 6px;
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-accent);
}
.pk-gallery__item:hover .pk-gallery__cta { color: var(--pk-text); }

/* ------------------------------------------------------------ notify me */

.pk-notify { margin: 22px 0 18px; }

.pk-notify__form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 8px;
	max-width: 460px;
}
.pk-notify__email { flex: 1 1 220px; }

.pk-notify__done {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.6;
	color: var(--pk-accent);
	margin: 0;
}

.pk-notify__error {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
	margin: 10px 0 0;
}

.pk-pending__alt { display: inline-block; margin-top: 4px; }

@media (max-width: 767px) {
	.pk-notify__form .pk-btn--primary { width: 100%; justify-content: center; }
}

/* The line the panel builds to. EB Garamond 600 is already loaded for the
   contact module, so this adds no font weight to the page. */
/* `.pk-about__prose p` also sets a colour, so this needs the extra
   specificity to win rather than relying on source order. */
.pk-about__prose .pk-panel__emphasis,
.pk-panel__emphasis {
	font-weight: 600;
	color: var(--pk-text);
}

/* The listed sizes cover most people; this is for everyone else. Quiet, and
   sized between the fine print and the body so it reads as an offer, not a
   footnote. */
.pk-custom-size {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	line-height: 1.6;
	color: var(--pk-secondary);
	margin: 10px 0 0;
}
.pk-custom-size a { color: var(--pk-accent); }

/* ==========================================================================
   Polish pass. Typographic and interaction detail only: no palette change,
   no layout change, no transforms on artwork.
   ========================================================================== */

/* --- type rendering ------------------------------------------------------ */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

/* EB Garamond carries real ligatures and old-style figures. Old-style numerals
   sit within the x-height, so dates like "c. 1700" and "2026" stop shouting
   in the middle of a sentence. */
.pk-intro__title,
.pk-h1,
.pk-h2,
.pk-h3,
.pk-metabar__title,
.pk-closing__title,
.pk-gallery__title,
.pk-mission p,
.pk-lede,
.pk-prose-line,
.pk-about__prose p,
.pk-beyond__prose p,
.pk-contact__prose p,
.pk-story__prose p,
.pk-intro__lede,
.pk-easel__text p {
	font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
}

/* Prices and the size picker stay lining figures: they need to align and read
   as data, not prose. */
.pk-purchase__price,
.pk-gallery__price,
.pk-select,
.pk-featured__sub {
	font-feature-settings: 'lnum' 1, 'kern' 1;
	font-variant-numeric: tabular-nums;
}

/* --- line breaking ------------------------------------------------------- */

/* Stops a heading dropping one lonely word onto its own line. */
.pk-intro__title,
.pk-h1,
.pk-h2,
.pk-h3,
.pk-metabar__title,
.pk-closing__title,
.pk-pending__title,
.pk-chah__hello,
.pk-chah__chah {
	text-wrap: balance;
	letter-spacing: -0.011em;
}

/* Avoids a single-word last line in a paragraph. */
.pk-lede,
.pk-prose-line,
.pk-about__prose p,
.pk-beyond__prose p,
.pk-contact__prose p,
.pk-story__prose p,
.pk-intro__lede,
.pk-easel__text p,
.pk-mission p,
.pk-caption,
.pk-pending__note {
	text-wrap: pretty;
}

/* Small caps-ish refinement: the italic asides read better slightly tracked. */
.pk-aside,
.pk-intro__kicker,
.pk-panel__label {
	letter-spacing: 0.005em;
}

/* --- interaction --------------------------------------------------------- */

a,
.pk-btn,
.pk-pill,
.pk-cart-pill,
.pk-gallery__item,
.pk-video,
.pk-soon-pill {
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Artwork itself never moves. Only its label responds, so the eye is drawn
   without the picture jumping. */
.pk-gallery__item:hover .pk-gallery__title { color: var(--pk-accent); }

.pk-btn--primary { box-shadow: 0 1px 2px rgba(31, 28, 23, 0.10); }
.pk-btn--primary:hover { box-shadow: 0 3px 10px rgba(31, 28, 23, 0.16); }

.pk-video:hover .pk-video__play { background: rgba(31, 28, 23, 0.85); }

/* A visible, in-palette focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.pk-gallery__item:focus-visible {
	outline: 2px solid var(--pk-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.pk-input:focus,
.pk-select:focus {
	outline: none;
	border-color: var(--pk-accent);
	box-shadow: 0 0 0 1px var(--pk-accent);
}

/* --- depth --------------------------------------------------------------- */

/* Two-layer shadows read as light falling on an object rather than a blur
   pasted underneath it. */
.pk-intro,
.pk-featured__card,
.pk-easel__card,
.pk-purchase,
.pk-form,
.pk-panel,
.pk-pending {
	box-shadow:
		0 1px 2px rgba(31, 28, 23, 0.04),
		0 12px 32px rgba(31, 28, 23, 0.05);
}

.pk-photo__img,
.pk-easel__img,
.pk-intro__img {
	box-shadow:
		0 1px 3px rgba(31, 28, 23, 0.06),
		0 10px 26px rgba(31, 28, 23, 0.10);
}

/* ==========================================================================
   Layout: measure, container and rhythm.

   This section used to be three successive attempts stacked on top of each
   other — 58ch, then 64ch, then 72ch, each one overriding the last. Only the
   final values ever applied, so the earlier ones were dead weight that made
   the file impossible to reason about. What follows is the single surviving
   pass.
   ========================================================================== */

/* --- rhythm -------------------------------------------------------------- */

.pk-pagehead { margin-bottom: clamp(32px, 3.5vw, 52px); }
.pk-ruled { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(40px, 4vw, 56px); }
.pk-gallery { gap: clamp(32px, 3.5vw, 52px); }

/* --- measure ------------------------------------------------------------- */

/* A reading column wide enough that the text is not a ribbon on the left of a
   wide screen, and narrow enough to stay comfortable to read. */
.pk-lede,
.pk-prose-line,
.pk-about__prose p,
.pk-beyond__prose p,
.pk-contact__prose p,
.pk-story__prose p,
.pk-intro__lede { max-width: 72ch; }

/* --- containers ---------------------------------------------------------- */

/* Prose-led pages sit in a narrower container than the galleries, which want
   the full width. Without this the text is set against one edge of a 1440px
   page with a void beside it. */
.pk-beyond,
.pk-contact {
	max-width: 1180px;
	margin-inline: auto;
}

/* The artwork page is a piece of writing with pictures. It sets like one. */
.pk-artwork {
	max-width: 940px;
	margin-inline: auto;
}

/* The hero is the exception: it may use the full width available. */
.pk-artwork__hero {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--pk-pad);
}
.pk-artwork__img { margin-inline: auto; }

/* On a stacked artwork page the story column fills the container instead of
   hugging the left edge. */
.pk-story--stacked .pk-story__prose { max-width: none; }
.pk-story--stacked .pk-story__prose p,
.pk-story--stacked .pk-quote,
.pk-story--stacked .pk-status { max-width: none; }

/* Beyond: the lone Dilruba paragraph fills its container rather than sitting
   in a ribbon beside empty space. */
.pk-beyond .pk-prose-line { max-width: none; }

/* Slime: the photo column sits next to the text instead of being pushed to
   the far edge by leftover space. */
@media (min-width: 1000px) {
	.pk-slime-layout {
		grid-template-columns: minmax(0, 72ch) minmax(300px, 1fr);
		gap: clamp(40px, 5vw, 72px);
		align-items: start;
	}
	.pk-slime-layout .pk-slime-grid { max-width: 520px; }
}

/* Video cards and photo columns fill the narrowed container evenly. */
.pk-videos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ==========================================================================
   Document pages (Privacy, Shipping and returns).

   Long-form reading, so: one contained column, generous leading, and enough
   structure that a reader can find the one paragraph they came for without
   reading the rest.
   ========================================================================== */

.pk-doc {
	max-width: 820px;
	margin-inline: auto;
}

.pk-doc .pk-h1 { margin-bottom: clamp(24px, 3vw, 36px); }

.pk-doc__prose {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	line-height: 1.75;
	color: var(--pk-prose);
}

.pk-doc__prose p { margin: 0 0 1.1em; text-wrap: pretty; }

.pk-doc__prose h2 {
	font-family: var(--pk-serif);
	font-weight: 400;
	font-size: var(--pk-h3-size);
	line-height: 1.25;
	color: var(--pk-accent);
	margin: clamp(36px, 4vw, 52px) 0 14px;
	text-wrap: balance;
}

.pk-doc__prose h3 {
	font-family: var(--pk-sans);
	font-weight: 500;
	font-size: var(--pk-ui-size);
	color: var(--pk-text);
	margin: clamp(24px, 2.5vw, 32px) 0 8px;
}

.pk-doc__prose ul,
.pk-doc__prose ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}
.pk-doc__prose li { margin-bottom: 0.5em; }

.pk-doc__prose a { color: var(--pk-accent); }

.pk-doc__prose strong { font-weight: 600; color: var(--pk-text); }

/* The opening summary: the whole page in three lines, for anyone who will not
   read the rest. Same treatment as the mission statement on the home page. */
.pk-doc__prose .pk-doc-summary {
	border-left: 2px solid var(--pk-accent);
	padding-left: clamp(18px, 2vw, 26px);
	margin: 0 0 clamp(32px, 3.5vw, 44px);
	font-size: var(--pk-lede-size);
	line-height: 1.6;
	color: var(--pk-text);
}
.pk-doc__prose .pk-doc-summary p:last-child { margin-bottom: 0; }

/* A plain table for the shipping rates. */
.pk-doc__prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
}
.pk-doc__prose th,
.pk-doc__prose td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--pk-rule);
}
.pk-doc__prose th {
	font-weight: 500;
	color: var(--pk-text);
}
.pk-doc__prose td { color: var(--pk-prose); }
.pk-doc__prose td + td,
.pk-doc__prose th + th { text-align: right; font-variant-numeric: tabular-nums; }

/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.pk-doc__prose .pk-table-scroll { overflow-x: auto; }

.pk-doc__updated {
	margin-top: clamp(40px, 4vw, 60px);
	padding-top: 20px;
	border-top: 1px solid var(--pk-rule);
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-secondary);
}

/* ==========================================================================
   "Not in the US" — international interest capture.

   Folded by default so it never competes with the buy button for a US
   visitor, but present for everyone rather than gated on geolocation, which
   is wrong often enough to lose the very people it exists to count.
   ========================================================================== */

.pk-intl {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--pk-rule);
}

.pk-intl__summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--pk-sans);
	font-size: var(--pk-ui-size);
	color: var(--pk-accent);
}
.pk-intl__summary::-webkit-details-marker { display: none; }
.pk-intl__summary:hover { color: var(--pk-text); }
.pk-intl__fold[open] .pk-intl__summary { margin-bottom: 14px; }

.pk-intl__blurb {
	font-family: var(--pk-serif);
	font-size: var(--pk-meta-size);
	line-height: 1.65;
	color: var(--pk-prose);
	margin: 0 0 16px;
	max-width: 56ch;
}

.pk-intl__country { width: 100%; margin-bottom: 12px; }

.pk-intl__row { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-intl__email { flex: 1 1 220px; }

.pk-intl__done {
	font-family: var(--pk-serif);
	font-size: var(--pk-prose-size);
	color: var(--pk-accent);
	margin: 0;
}

.pk-intl__error {
	font-family: var(--pk-sans);
	font-size: var(--pk-meta-size);
	color: var(--pk-chah);
	margin: 10px 0 0;
}

.pk-intl__wants { width: 100%; margin-bottom: 12px; }

.pk-intl__wants { width: 100%; margin-bottom: 12px; }