/**
 * Shared site chrome and editorial content.
 */

html {
	scroll-behavior: smooth;
}

body.tpg-site {
	overflow-x: clip;
}

.tpg-site #main-container {
	min-height: 100vh;
}

.tpg-site #header {
	position: sticky;
	top: 0;
	z-index: 90;
	border-bottom: 1px solid var(--tpg-concrete);
	background: color-mix(in oklch, var(--tpg-porcelain) 96%, transparent);
	color: var(--tpg-nero);
	transition: background var(--tpg-ui) var(--tpg-ease), border-color var(--tpg-ui) var(--tpg-ease), box-shadow var(--tpg-ui) var(--tpg-ease);
}

.tpg-site.admin-bar #header { top: 32px; }

.tpg-site.home #header {
	position: fixed;
	inset: 0 0 auto;
	background: color-mix(in oklch, var(--tpg-porcelain) 90%, transparent);
}

.tpg-site #header.tpg-header-scrolled {
	background: color-mix(in oklch, var(--tpg-porcelain) 97%, transparent);
	box-shadow: 0 8px 28px color-mix(in oklch, var(--tpg-nero) 7%, transparent);
}

.tpg-site #header [data-row="middle"] { min-height: 82px; }

.tpg-site #header [data-row="middle"] {
	background: transparent !important;
	box-shadow: none !important;
}

.tpg-site #header .ct-container {
	width: min(100%, var(--tpg-shell));
	min-height: 82px;
	padding-inline: var(--tpg-gutter);
}

.tpg-site #header .site-branding { margin: 0; }

.tpg-site #header .site-logo-container { display: none; }

.tpg-site #header .site-title-container,
.tpg-site #header .site-title { display: block !important; }

.tpg-site #header .site-title a {
	color: currentColor;
	font-family: var(--tpg-font-serif);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.tpg-site #header [data-column="end"] > [data-items="primary"] {
	display: flex;
	align-items: center;
	gap: 18px;
}

.tpg-site #header .menu {
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
}

.tpg-site #header .ct-menu-link {
	min-height: 44px;
	padding-inline: 0;
	color: currentColor;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.tpg-site #header .ct-menu-link::after {
	position: absolute;
	right: 0;
	bottom: 7px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--tpg-ui) var(--tpg-ease);
}

.tpg-site #header .menu-item:hover > .ct-menu-link::after,
.tpg-site #header .menu-item:focus-within > .ct-menu-link::after,
.tpg-site #header .current-menu-item > .ct-menu-link::after {
	transform: scaleX(1);
	transform-origin: left;
}

.tpg-menu-utility .ct-menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}

.tpg-menu-icon {
	position: relative;
	display: inline-block;
	width: 17px;
	height: 17px;
	border: 1.5px solid currentColor;
}

.tpg-menu-icon--account {
	display: inline-flex;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 0;
}

.tpg-menu-icon--account::after {
	display: none;
}

.tpg-menu-icon--account svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tpg-menu-icon--cart {
	display: inline-flex;
	width: 18px;
	height: 18px;
	border: 0;
}

.tpg-menu-icon--cart::before,
.tpg-menu-icon--cart::after {
	display: none;
}

.tpg-menu-icon--cart svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tpg-menu-icon--search {
	border-radius: 50%;
	transform: scale(0.72);
}

.tpg-menu-icon--search::after {
	position: absolute;
	right: -6px;
	bottom: -4px;
	width: 8px;
	height: 1.5px;
	background: currentColor;
	content: "";
	transform: rotate(45deg);
	transform-origin: left center;
}

.tpg-search-toggle { border: 0; background: transparent; cursor: pointer; }

.tpg-cart-count {
	display: inline-grid;
	min-width: 18px;
	height: 18px;
	place-items: center;
	border-radius: 50%;
	background: var(--tpg-nero);
	color: var(--tpg-porcelain);
	font: 10px/1 var(--tpg-font-mono);
}

.tpg-site #header .ct-header-search { display: none; }

html.tpg-search-open,
body.tpg-search-open { overflow: hidden; }

.tpg-site #search-modal.active {
	z-index: 10000;
	display: flex;
	opacity: 1;
	pointer-events: auto;
	background: color-mix(in srgb, var(--tpg-nero) 76%, transparent);
}

.tpg-site #search-modal .ct-panel-actions {
	z-index: 3;
	padding: clamp(18px, 3vw, 36px);
}

.tpg-site #search-modal .ct-toggle-close {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--tpg-porcelain) 24%, transparent);
	background: var(--tpg-nero) !important;
	color: var(--tpg-porcelain);
	transition: background var(--tpg-micro) var(--tpg-ease), border-color var(--tpg-micro) var(--tpg-ease);
}

.tpg-site #search-modal .ct-toggle-close:hover,
.tpg-site #search-modal .ct-toggle-close:focus-visible {
	border-color: var(--tpg-porcelain);
	background: var(--tpg-walnut) !important;
}

.tpg-site #search-modal .ct-panel-content {
	display: grid;
	width: 100%;
	height: 100%;
	padding: clamp(68px, 8vw, 108px) var(--tpg-gutter);
	place-items: center;
}

.tpg-site #search-modal .ct-search-form {
	width: min(720px, calc(100vw - 40px));
	max-width: 720px;
	padding: 24px;
	background: var(--tpg-porcelain);
	color: var(--tpg-nero);
}

.tpg-site #search-modal .ct-search-form-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px;
	min-height: 60px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--tpg-concrete) !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
	transition: border-color var(--tpg-micro) var(--tpg-ease);
}

.tpg-site #search-modal .ct-search-form-inner:focus-within { border-color: var(--tpg-walnut) !important; }

.tpg-site #search-modal .ct-search-form-inner::before,
.tpg-site #search-modal .ct-search-form-inner::after { display: none !important; }

.tpg-site #search-modal input[type="search"] {
	width: 100%;
	min-width: 0;
	height: 60px;
	padding: 0 20px;
	border: 0 !important;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none !important;
	color: var(--tpg-nero);
	font-family: var(--tpg-font-sans);
	font-size: clamp(18px, 1.6vw, 21px);
	font-weight: 400;
	line-height: 1.25;
}

.tpg-site #search-modal input[type="search"]::placeholder { color: color-mix(in srgb, var(--tpg-nero) 48%, transparent); opacity: 1; }

.tpg-site #search-modal .ct-search-form button[type="submit"] {
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--tpg-concrete);
	border-radius: 0;
	background: var(--tpg-walnut);
	color: var(--tpg-porcelain);
	transition: background var(--tpg-micro) var(--tpg-ease), color var(--tpg-micro) var(--tpg-ease);
}

.tpg-site #search-modal .ct-search-form button[type="submit"]:hover,
.tpg-site #search-modal .ct-search-form button[type="submit"]:focus-visible {
	background: var(--tpg-nero);
	color: var(--tpg-porcelain);
}

.tpg-footer {
	padding: 76px 0 34px;
	border-top: 0;
	background: var(--tpg-nero);
	color: var(--tpg-porcelain);
}

.tpg-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr);
	gap: 36px;
	padding-bottom: 74px;
}

.tpg-footer__brand { max-width: 430px; }

.tpg-footer__brand h2 {
	margin: 0;
	color: inherit;
	font-size: clamp(26px, 2.5vw, 36px);
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.tpg-footer__brand > p {
	max-width: 34ch;
	margin: 18px 0 0;
	color: color-mix(in oklch, var(--tpg-porcelain) 66%, transparent);
}

.tpg-footer__navigation {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
}

.tpg-footer__group h3 {
	margin: 0;
	color: var(--tpg-porcelain);
	font: 600 11px/1.2 var(--tpg-font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tpg-footer__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpg-footer__group li { margin-top: 13px; }

.tpg-footer__group a {
	color: color-mix(in oklch, var(--tpg-porcelain) 70%, transparent);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--tpg-micro) ease;
}

.tpg-footer__group a:hover { color: var(--tpg-porcelain); }

.tpg-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 28px;
	border-top: 1px solid color-mix(in oklch, var(--tpg-porcelain) 20%, transparent);
	color: color-mix(in oklch, var(--tpg-porcelain) 54%, transparent);
	font-size: 12px;
}

.tpg-footer__bottom p { margin: 0; }

.tpg-site:not(.home) .hero-section .page-title {
	max-width: 16ch;
	font-size: clamp(2.8rem, 6vw, 6.2rem);
	line-height: 0.98;
}

.tpg-site .entry-content > :where(p, h2, h3, h4, ul, ol, blockquote):not(.alignwide):not(.alignfull) {
	max-width: 760px;
}

.tpg-site .entry-content blockquote {
	margin-block: 54px;
	padding: 24px 0 24px 32px;
	border-left: 2px solid var(--tpg-walnut);
	font-family: var(--tpg-font-serif);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.tpg-content-page {
	padding-block: clamp(72px, 10vw, 150px);
}

.tpg-content-page__header {
	max-width: 920px;
	padding-bottom: clamp(60px, 8vw, 112px);
}

.tpg-content-page__header h1,
.tpg-collection__intro h1,
.tpg-content-section > h1 {
	max-width: 13ch;
	margin: 0;
	font-size: clamp(3.1rem, 7.2vw, 7.2rem);
	line-height: 0.94;
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: normal;
}

.tpg-content-page__header > p:last-child,
.tpg-collection__intro > p:last-child {
	max-width: 58ch;
	margin: 30px 0 0;
	color: color-mix(in srgb, var(--tpg-nero) 68%, transparent);
	font-size: clamp(1.08rem, 2vw, 1.35rem);
	line-height: 1.75;
}

.page-privacy-policy .tpg-content-page__header h1,
.page-personal-data .tpg-content-page__header h1 {
	max-width: 18ch;
	font-size: clamp(2.15rem, 5.2vw, 5.5rem);
}

.tpg-content-section {
	display: grid;
	grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
	gap: clamp(32px, 8vw, 128px);
	padding-block: clamp(48px, 7vw, 92px);
	border-top: 1px solid var(--tpg-rule);
}

.tpg-content-section h2 {
	max-width: 13ch;
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3.25rem);
	line-height: 1.04;
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: normal;
}

.tpg-content-page,
.tpg-content-page__header,
.tpg-content-section,
.tpg-collection,
.tpg-collection__hero,
.tpg-collection__intro { min-width: 0; }

.tpg-content-section p {
	max-width: 62ch;
	margin: 0;
	line-height: 1.8;
}

.tpg-collection__hero {
	display: grid;
	grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
	min-height: min(860px, 90svh);
	background: var(--tpg-oat);
}

.tpg-collection__media { min-height: 620px; overflow: hidden; }

.tpg-collection__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-dogs .tpg-collection__image { object-position: 52% 38%; }
.page-cats .tpg-collection__image { object-position: 50% 32%; }

.tpg-collection__intro {
	display: flex;
	width: auto;
	margin: 0;
	padding: clamp(52px, 7vw, 108px);
	flex-direction: column;
	justify-content: flex-end;
	background: var(--tpg-nero);
	color: var(--tpg-porcelain);
}

.tpg-collection__intro .tpg-kicker { color: var(--tpg-oat); }
.tpg-collection__intro h1,
.tpg-collection__intro > p:last-child { color: inherit; }
.tpg-collection__catalog-link { margin-top: clamp(24px, 4vw, 48px); color: var(--tpg-porcelain); }

.tpg-collection__discovery { padding-block: var(--tpg-section); }

.tpg-collection__discovery-header {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	align-items: end;
	gap: clamp(32px, 8vw, 128px);
	margin-bottom: clamp(40px, 5vw, 64px);
}

.tpg-collection__discovery-header h2 {
	max-width: 12ch;
	margin: 0;
	font-size: var(--tpg-fs-title);
	line-height: 0.98;
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: normal;
}

.tpg-collection__discovery-header > p {
	max-width: 42ch;
	margin: 0;
	color: color-mix(in srgb, var(--tpg-nero) 68%, transparent);
	line-height: 1.75;
}

.tpg-collection__categories {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-block: 1px solid var(--tpg-rule);
}

.tpg-collection__categories a {
	display: flex;
	min-width: 0;
	min-height: 160px;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	border-right: 1px solid var(--tpg-rule);
	color: var(--tpg-nero);
	font-family: var(--tpg-font-serif);
	font-size: clamp(1.25rem, 1.8vw, 1.7rem);
	line-height: 1.05;
	text-decoration: none;
	transition: background var(--tpg-ui) var(--tpg-ease), color var(--tpg-ui) var(--tpg-ease);
}

.tpg-collection__categories a:last-child { border-right: 0; }
.tpg-collection__categories a > span:first-child { overflow-wrap: normal; word-break: normal; }
.tpg-collection__categories a > span:last-child { flex: none; font-family: var(--tpg-font-sans); font-size: 1rem; transition: transform var(--tpg-micro) var(--tpg-ease); }
.tpg-collection__categories a:hover,
.tpg-collection__categories a:focus-visible { background: var(--tpg-nero); color: var(--tpg-porcelain); }
.tpg-collection__categories a:hover > span:last-child,
.tpg-collection__categories a:focus-visible > span:last-child { transform: translate(3px, -3px); }

.tpg-empty-state {
	max-width: 760px;
	padding: clamp(48px, 8vw, 100px);
	border-block: 1px solid var(--tpg-rule);
}

.tpg-empty-state h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
.tpg-empty-state p { max-width: 56ch; line-height: 1.75; }
.tpg-empty-state .button { margin-top: 24px; border-radius: 0; }

.tpg-site.blog .entries,
.tpg-site.archive.category .entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(50px, 7vw, 96px) clamp(20px, 3vw, 42px);
}

.tpg-site.blog .entry-card,
.tpg-site.archive.category .entry-card {
	background: transparent;
	box-shadow: none;
}

.tpg-site.blog .entry-card .ct-media-container,
.tpg-site.archive.category .entry-card .ct-media-container {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.tpg-site.blog .entry-card img,
.tpg-site.archive.category .entry-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--tpg-ease);
}

.tpg-site.blog .entry-card:hover img,
.tpg-site.archive.category .entry-card:hover img { transform: scale(1.025); }

.tpg-site.blog .entry-title,
.tpg-site.archive.category .entry-title { font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.05; }

.tpg-site.single-post .entry-header .page-title {
	max-width: 15ch;
	font-size: clamp(3rem, 7vw, 7rem);
	line-height: 0.96;
}

.tpg-site.single-post .entry-content {
	font-size: clamp(1.04rem, 1.4vw, 1.16rem);
	line-height: 1.85;
}

.tpg-journal { background: var(--tpg-porcelain); }

.tpg-journal__header { padding-block: clamp(82px, 10vw, 150px) clamp(58px, 8vw, 108px); }

.tpg-journal__header h1 {
	max-width: 10ch;
	margin: 0;
	font-size: clamp(3.2rem, 7vw, 7rem);
	line-height: 0.94;
	text-wrap: balance;
}

.tpg-journal__header > p:last-child {
	max-width: 46ch;
	margin: 28px 0 0;
	color: var(--tpg-muted);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.tpg-journal__content { padding-bottom: var(--tpg-section); }

.tpg-journal__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(52px, 7vw, 96px) clamp(20px, 3vw, 42px);
}

.tpg-journal-card,
.tpg-journal-card__body { min-width: 0; }

.tpg-journal-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tpg-oat);
}

.tpg-journal-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tpg-journal-card__body { padding-top: 22px; }

.tpg-journal-card h2 {
	font-size: clamp(1.65rem, 3vw, 2.8rem);
	line-height: 1.06;
	text-wrap: balance;
}

.tpg-journal-card h2 a { color: inherit; text-decoration: none; }
.tpg-journal-card__excerpt { max-width: 58ch; margin-top: 16px; color: var(--tpg-muted); }

.tpg-journal__empty {
	padding-block: clamp(60px, 10vw, 120px);
	border-block: 1px solid var(--tpg-rule);
}

.tpg-journal__empty h2 {
	max-width: 18ch;
	font-size: clamp(2.2rem, 5vw, 4.8rem);
	line-height: 1;
	text-wrap: balance;
}

.tpg-journal__empty p { margin-top: 20px; color: var(--tpg-muted); }

@media (max-width: 1100px) {
	.tpg-site.admin-bar #header { top: 46px; }
	.tpg-site #header [data-device="desktop"] { display: none; }
	.tpg-site #header [data-device="mobile"] { display: block; }
	.tpg-site #header .ct-container,
	.tpg-site #header [data-row="middle"] { min-height: 72px; }
	.tpg-site #header .ct-header-trigger { color: currentColor; }
	.tpg-footer__grid { grid-template-columns: 1.4fr 2fr; }
	.tpg-footer__navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpg-site.blog .entries,
	.tpg-site.archive.category .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.tpg-footer__grid { grid-template-columns: 1fr; }
	.tpg-footer__brand { max-width: 520px; }
	.tpg-footer__bottom { flex-direction: column; }
	.tpg-content-section { grid-template-columns: 1fr; }
	.tpg-collection__hero { grid-template-columns: 1fr; min-height: 0; }
	.tpg-collection__intro { order: 1; }
	.tpg-collection__media { order: 2; }
	.tpg-collection__media { min-height: 62svh; }
	.page-dogs .tpg-collection__image { object-position: 56% 34%; }
	.page-cats .tpg-collection__image { object-position: 48% 28%; }
	.tpg-collection__discovery-header { grid-template-columns: 1fr; }
	.tpg-collection__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpg-collection__categories a:nth-child(2n) { border-right: 0; }
	.tpg-collection__categories a:last-child { border-top: 1px solid var(--tpg-rule); }
	.tpg-site.blog .entries,
	.tpg-site.archive.category .entries { grid-template-columns: 1fr; }
	.tpg-journal__grid { grid-template-columns: 1fr; }
}

/* Keep the off-canvas device variants aligned with the compact child header. */
@media (min-width: 1000px) and (max-width: 1100px) {
	.tpg-site #offcanvas .ct-panel-content[data-device="desktop"] { display: none; }
	.tpg-site #offcanvas .ct-panel-content[data-device="mobile"] { display: flex; }
}

@media (max-width: 560px) {
	.tpg-site #header .ct-container,
	.tpg-site #header [data-row="middle"] { min-height: 68px; }
	.tpg-footer { padding-top: 64px; }
	.tpg-footer__navigation { grid-template-columns: 1fr; gap: 34px; }
	.tpg-site #search-modal .ct-panel-content { padding-inline: 18px; }
	.tpg-site #search-modal .ct-search-form { padding: 14px; }
	.tpg-site #search-modal .ct-search-form-inner { grid-template-columns: minmax(0, 1fr) 56px; min-height: 56px; }
	.tpg-site #search-modal input[type="search"] { height: 56px; padding-inline: 16px; font-size: 18px; }
	.tpg-site #search-modal .ct-search-form button[type="submit"] { width: 56px; height: 56px; }
}