/**
 * Kaliuda catalogue page — the parts the homepage does not already have.
 *
 * Loads after the homepage plugin's homepage.css and leans on it for everything shared: the
 * palette and type tokens on .kaliuda-home, the header, buttons, section padding, display type
 * sizes and the footer. Nothing here restyles a homepage component; it only adds new ones, so a
 * change to the homepage carries through to this page for free.
 *
 * Where the homepage writes a style inline (it came out of a Figma export), the equivalent here
 * is a class, because this page is hand-built and has no export to stay faithful to.
 */

/* --- Shared bits ---------------------------------------------------------------------- */

/* The homepage's $kal_mono_label, as a class. */
.kaliuda-catalog .kal-mono {
	font-family: var(--kal-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The current page gets the hero's red square rather than a colour change, so it still reads
   as "you are here" next to the red Export link. */
.kaliuda-catalog .kal-nav a[aria-current="page"] {
	gap: 8px;
	color: var(--kal-ink);
}

.kaliuda-catalog .kal-nav a[aria-current="page"]::before {
	content: '';
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	background: var(--kal-accent);
}

.kaliuda-catalog .cat-red {
	color: var(--kal-accent);
}

/* The italic serif word that closes every section heading. */
.kaliuda-catalog .cat-serif {
	font-family: var(--kal-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--kal-accent);
	text-transform: none;
	letter-spacing: -0.015em;
}

.kaliuda-catalog .cat-serif--dark {
	color: var(--kal-accent-light);
}

.kaliuda-catalog .cat-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
}

.kaliuda-catalog .cat-eyebrow__label {
	font-family: var(--kal-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kal-accent);
	white-space: nowrap;
}

.kaliuda-catalog .cat-eyebrow__rule {
	flex: 1 1 0%;
	height: 1px;
	background: var(--kal-rule);
}

.kaliuda-catalog .cat-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 48px;
	align-items: end;
	margin-top: 32px;
}

.kaliuda-catalog .cat-h2 {
	margin: 0;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.kaliuda-catalog .cat-intro {
	margin: 0;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(23, 19, 15, 0.85);
	max-width: 46ch;
}

.kaliuda-catalog .cat-idx {
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: var(--kal-accent);
	white-space: nowrap;
	flex: 0 0 auto;
}

.kaliuda-catalog .cat-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-self: start;
}

.kaliuda-catalog .cat-btns--after {
	gap: 28px;
	margin-top: 40px;
}

/* --- Hero ------------------------------------------------------------------------------ */

.kaliuda-catalog .cat-hero-tag {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.kaliuda-catalog .cat-hero-tag__dot {
	display: block;
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	background: var(--kal-accent);
}

.kaliuda-catalog .cat-hero-tag__label {
	font-family: var(--kal-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kal-muted);
	white-space: nowrap;
}

.kaliuda-catalog .cat-hero-tag__rule {
	flex: 1 1 0%;
	min-width: 20px;
	height: 1px;
	background: var(--kal-rule);
}

.kaliuda-catalog .cat-display {
	margin: 34px 0 0;
	font-weight: 800;
	line-height: 0.84;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	max-width: 15ch;
}

.kaliuda-catalog .cat-display span {
	display: block;
}

.kaliuda-catalog .cat-hero-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 48px;
	align-items: end;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--kal-rule);
}

.kaliuda-catalog .cat-lede {
	margin: 0;
	font-family: var(--kal-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	max-width: 24ch;
}

.kaliuda-catalog .cat-hero-intro {
	margin: 0;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 42ch;
	color: var(--kal-body);
}

/* --- Cover spread ---------------------------------------------------------------------- */

/* Seven catalogues fanned out on a table, standing in for the homepage's hero photograph. The
   stage has a fixed height and hides its overflow, so the fan can never push the page wider. */
.kaliuda-catalog .cat-spread {
	position: relative;
	height: 440px;
	overflow: hidden;
	background:
		linear-gradient(to bottom, transparent 78%, rgba(23, 19, 15, 0.05) 78%),
		var(--kal-ground-alt);
}

.kaliuda-catalog .cat-spread__corner {
	position: absolute;
	top: 18px;
	z-index: 10;
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kal-muted);
}

.kaliuda-catalog .cat-spread__corner--tl { left: 22px; }
.kaliuda-catalog .cat-spread__corner--tr { right: 22px; }

.kaliuda-catalog .cat-spread__books {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 24px;
}

.kaliuda-catalog .cat-spread__book {
	--w: 176px;
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--w);
	aspect-ratio: 600 / 849;
	/* Just enough overlap to read as a fan. Any more and the right-hand books lose their titles,
	   which sit top-left on every cover, under the neighbour stacked above them. */
	margin: 0 calc(var(--w) * -0.05);
	background: var(--kal-ground);
	transform: translateY(var(--y)) rotate(var(--r));
	box-shadow:
		0 22px 34px -16px rgba(23, 19, 15, 0.5),
		0 2px 5px rgba(23, 19, 15, 0.16);
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 260ms ease;
}

.kaliuda-catalog .cat-spread__book--lead {
	--w: 216px;
}

.kaliuda-catalog .cat-spread__book img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kaliuda-catalog .cat-spread__book:hover,
.kaliuda-catalog .cat-spread__book:focus-visible {
	z-index: 20 !important;
	transform: translateY(calc(var(--y) - 18px)) rotate(0deg);
	box-shadow:
		0 30px 44px -18px rgba(23, 19, 15, 0.55),
		0 2px 5px rgba(23, 19, 15, 0.16);
}

.kaliuda-catalog .cat-caption {
	margin-top: 9px;
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kal-muted);
}

/* --- Ticker ---------------------------------------------------------------------------- */

.kaliuda-catalog .cat-ticker {
	margin-top: 72px;
	padding: 13px 0;
	overflow: hidden;
	background: var(--kal-accent);
	color: var(--kal-ground);
}

.kaliuda-catalog .cat-ticker__track {
	display: flex;
	width: max-content;
	animation: cat-ticker 48s linear infinite;
}

.kaliuda-catalog .cat-ticker__seq {
	display: flex;
	gap: 22px;
	padding-right: 22px;
	font-family: var(--kal-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kaliuda-catalog .cat-ticker__seq i {
	font-style: normal;
	opacity: 0.6;
}

@keyframes cat-ticker {
	to { transform: translateX(-50%); }
}

/* --- 01 Collections -------------------------------------------------------------------- */

.kaliuda-catalog .cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px 28px;
	margin-top: 52px;
}

.kaliuda-catalog .cat-card {
	display: flex;
	flex-direction: column;
	color: var(--kal-ink);
}

.kaliuda-catalog .cat-card:hover {
	color: var(--kal-ink);
}

/* Each cover sits on a plinth instead of being cropped to fill a frame: the covers are a mix of
   portrait and landscape and carry their titles in the artwork, so cropping would cut words. */
.kaliuda-catalog .cat-plinth {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--kal-ground-alt);
	transition: background-color 200ms ease;
}

.kaliuda-catalog .cat-plinth__book {
	position: absolute;
	inset: 12% 15%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kaliuda-catalog .cat-plinth__book img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow:
		0 16px 26px -14px rgba(23, 19, 15, 0.55),
		0 1px 3px rgba(23, 19, 15, 0.18);
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 260ms ease;
}

.kaliuda-catalog .cat-card:hover .cat-plinth,
.kaliuda-catalog .cat-card:focus-visible .cat-plinth {
	background: #E6E0D4;
}

.kaliuda-catalog .cat-card:hover .cat-plinth__book img,
.kaliuda-catalog .cat-card:focus-visible .cat-plinth__book img {
	transform: translateY(-8px) rotate(-1.5deg);
	box-shadow:
		0 26px 34px -16px rgba(23, 19, 15, 0.55),
		0 1px 3px rgba(23, 19, 15, 0.18);
}

/* The export page's "Active 2026" tag, borrowed for the two catalogues that go by request. */
.kaliuda-catalog .cat-stamp {
	position: absolute;
	top: 16px;
	right: 14px;
	z-index: 2;
	padding: 5px 9px;
	transform: rotate(4deg);
	background: var(--kal-accent);
	color: var(--kal-ground);
	font-family: var(--kal-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kaliuda-catalog .cat-card__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 2px solid var(--kal-ink);
}

.kaliuda-catalog .cat-card__title {
	font-weight: 800;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	transition: color 120ms ease;
}

.kaliuda-catalog .cat-card:hover .cat-card__title {
	color: var(--kal-accent);
}

.kaliuda-catalog .cat-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kal-muted);
}

.kaliuda-catalog .cat-go {
	color: var(--kal-accent);
	white-space: nowrap;
}

/* --- 02 By piece ----------------------------------------------------------------------- */

.kaliuda-catalog .cat-pieces {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: start;
	margin-top: 52px;
}

/* A large cover that follows whichever row is hovered or focused. Purely a preview: every row
   is already a complete link, so it is hidden from assistive tech and dropped on small screens,
   where each row shows its own thumbnail instead. */
.kaliuda-catalog .cat-preview {
	position: sticky;
	top: calc(var(--kal-header-h) + 28px);
	margin: 0;
}

.kaliuda-catalog.admin-bar .cat-preview {
	top: calc(var(--kal-header-h) + 60px);
}

.kaliuda-catalog .cat-preview__frame {
	position: relative;
	width: min(100%, calc((100vh - var(--kal-header-h) - 140px) * 600 / 849));
	aspect-ratio: 600 / 849;
	background: rgba(23, 19, 15, 0.06);
	box-shadow:
		0 28px 44px -24px rgba(23, 19, 15, 0.55),
		0 2px 5px rgba(23, 19, 15, 0.14);
}

.kaliuda-catalog .cat-preview__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 160ms ease;
}

.kaliuda-catalog .cat-preview__img.is-swapping {
	opacity: 0;
}

.kaliuda-catalog .cat-preview__cap {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	width: min(100%, calc((100vh - var(--kal-header-h) - 140px) * 600 / 849));
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(23, 19, 15, 0.18);
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kal-muted);
}

.kaliuda-catalog .cat-preview__name {
	color: var(--kal-accent);
}

.kaliuda-catalog .cat-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--kal-ink);
}

.kaliuda-catalog .cat-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 15px 4px 15px 0;
	border-bottom: 1px solid rgba(23, 19, 15, 0.18);
	color: var(--kal-ink);
	transition: padding 200ms cubic-bezier(0.2, 0.7, 0.2, 1), color 120ms ease;
}

.kaliuda-catalog .cat-row__idx {
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	color: var(--kal-accent);
	white-space: nowrap;
}

.kaliuda-catalog .cat-row__thumb {
	display: none;
}

.kaliuda-catalog .cat-row__name {
	font-weight: 800;
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	transition: color 120ms ease;
}

.kaliuda-catalog .cat-row__meta {
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kal-muted);
	white-space: nowrap;
	transition: color 120ms ease;
}

.kaliuda-catalog .cat-row--request .cat-row__meta {
	padding: 4px 8px;
	background: var(--kal-accent);
	color: var(--kal-ground);
}

.kaliuda-catalog .cat-row:hover,
.kaliuda-catalog .cat-row:focus-visible,
.kaliuda-catalog .cat-row.is-active {
	padding-left: 10px;
	color: var(--kal-ink);
}

.kaliuda-catalog .cat-row:hover .cat-row__name,
.kaliuda-catalog .cat-row:focus-visible .cat-row__name,
.kaliuda-catalog .cat-row.is-active .cat-row__name {
	color: var(--kal-accent);
}

.kaliuda-catalog .cat-row:hover .cat-row__meta,
.kaliuda-catalog .cat-row.is-active .cat-row__meta {
	color: var(--kal-accent);
}

.kaliuda-catalog .cat-row--request:hover .cat-row__meta,
.kaliuda-catalog .cat-row--request.is-active .cat-row__meta {
	background: var(--kal-ink);
	color: var(--kal-ground);
}

/* --- 03 How it works ------------------------------------------------------------------- */

/* The export page's "Enquiry to container" grid: outlined numerals in hairline cells. */
.kaliuda-catalog .cat-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 52px 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(23, 19, 15, 0.18);
}

.kaliuda-catalog .cat-step {
	position: relative;
	padding: 28px 24px 30px;
	border-left: 1px solid rgba(23, 19, 15, 0.18);
}

.kaliuda-catalog .cat-step:first-child {
	border-left: 0;
}

.kaliuda-catalog .cat-step__num {
	display: block;
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1.2px var(--kal-accent);
}

.kaliuda-catalog .cat-step__arrow {
	position: absolute;
	top: 22px;
	right: 20px;
	font-family: var(--kal-mono);
	font-size: 12px;
	color: rgba(23, 19, 15, 0.4);
}

.kaliuda-catalog .cat-step__title {
	margin: 26px 0 0;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.kaliuda-catalog .cat-step__body {
	margin: 10px 0 0;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(23, 19, 15, 0.8);
}

/* --- Trade band and visit band --------------------------------------------------------- */

.kaliuda-catalog .cat-fact {
	margin: 0 -1px -1px 0;
	padding: 14px 16px;
	border: 1px solid var(--kal-ink-rule);
}

.kaliuda-catalog .cat-fact__label {
	font-family: var(--kal-mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(247, 244, 238, 0.7);
}

.kaliuda-catalog .cat-fact__value {
	margin-top: 7px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.015em;
}

.kaliuda-catalog .cat-contact-row {
	display: grid;
	grid-template-columns: minmax(90px, 116px) minmax(0, 1fr);
	gap: 6px 28px;
	padding: 12px 0;
	border-top: 1px solid rgba(247, 244, 238, 0.45);
}

.kaliuda-catalog .cat-contact-row__label {
	font-family: var(--kal-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kaliuda-catalog .cat-contact-row__value {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.55;
}

.kaliuda-catalog .cat-on-accent {
	color: var(--kal-ground);
	border-bottom: 1px solid rgba(247, 244, 238, 0.6);
	padding-bottom: 2px;
}

.kaliuda-catalog .cat-on-accent:hover {
	color: var(--kal-ink);
	border-bottom-color: var(--kal-ink);
}

/* --- Responsive ------------------------------------------------------------------------ */

/* Between the homepage's compact breakpoint (780px) and ~960px the full header row is wider
   than the window, and the last nav link slides under the WhatsApp button. The live homepage
   has the same fault (about 60px at 781px); this page's extra Catalogue link makes it ~90px.
   Tightening the spacing wins back ~125px without touching the type. */
@media (min-width: 781px) and (max-width: 960px) {
	.kaliuda-catalog .kal-logo {
		padding-left: 20px;
		padding-right: 20px;
	}

	.kaliuda-catalog .kal-nav {
		gap: 14px;
		padding: 0 16px;
	}

	.kaliuda-catalog .kal-header-cta {
		padding-left: 18px;
		padding-right: 18px;
	}
}

@media (max-width: 1080px) {
	.kaliuda-catalog .cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kaliuda-catalog .cat-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kaliuda-catalog .cat-step:nth-child(3) {
		border-left: 0;
	}

	.kaliuda-catalog .cat-step:nth-child(n + 3) {
		border-top: 1px solid rgba(23, 19, 15, 0.18);
	}
}

@media (max-width: 900px) {
	.kaliuda-catalog .cat-spread {
		height: 320px;
	}

	.kaliuda-catalog .cat-spread__book { --w: 104px; }
	.kaliuda-catalog .cat-spread__book--lead { --w: 128px; }

	.kaliuda-catalog .cat-grid {
		gap: 36px 20px;
	}

	.kaliuda-catalog .cat-pieces {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.kaliuda-catalog .cat-preview {
		display: none;
	}

	.kaliuda-catalog .cat-row {
		grid-template-columns: 40px 52px minmax(0, 1fr) auto;
		gap: 14px;
		padding: 10px 0;
	}

	.kaliuda-catalog .cat-row__thumb {
		display: block;
		width: 52px;
		aspect-ratio: 600 / 849;
		overflow: hidden;
		background: rgba(23, 19, 15, 0.06);
		box-shadow: 0 6px 12px -8px rgba(23, 19, 15, 0.6);
	}

	.kaliuda-catalog .cat-row__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 700px) {
	.kaliuda-catalog .cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.kaliuda-catalog .cat-spread {
		height: 250px;
	}

	.kaliuda-catalog .cat-spread__corner--tr {
		display: none;
	}

	.kaliuda-catalog .cat-spread__book { --w: 80px; }
	.kaliuda-catalog .cat-spread__book--lead { --w: 104px; }

	/* Five books fit a phone; seven just turn into a smear. */
	.kaliuda-catalog .cat-spread__book:first-child,
	.kaliuda-catalog .cat-spread__book:last-child {
		display: none;
	}

	.kaliuda-catalog .cat-grid {
		gap: 32px 14px;
	}

	.kaliuda-catalog .cat-plinth__book {
		inset: 10% 12%;
	}

	.kaliuda-catalog .cat-stamp {
		top: 10px;
		right: 8px;
		font-size: 8px;
	}

	.kaliuda-catalog .cat-card__title {
		font-size: 16px;
	}

	.kaliuda-catalog .cat-card__meta {
		flex-direction: column;
		gap: 4px;
	}

	.kaliuda-catalog .cat-row {
		grid-template-columns: 44px minmax(0, 1fr) auto;
	}

	.kaliuda-catalog .cat-row__idx {
		display: none;
	}

	.kaliuda-catalog .cat-row__thumb {
		width: 44px;
	}

	.kaliuda-catalog .cat-row__name {
		font-size: 20px;
	}

	.kaliuda-catalog .cat-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.kaliuda-catalog .cat-step {
		border-left: 0;
	}

	.kaliuda-catalog .cat-step:nth-child(n + 2) {
		border-top: 1px solid rgba(23, 19, 15, 0.18);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kaliuda-catalog .cat-ticker__track {
		animation: none;
	}

	.kaliuda-catalog .cat-spread__book,
	.kaliuda-catalog .cat-plinth__book img,
	.kaliuda-catalog .cat-row,
	.kaliuda-catalog .cat-preview__img {
		transition: none;
	}
}