/**
 * CaseTheme inner pages.
 *
 * Blog index, single posts, archives, search, 404, and the static pages.
 * Ported from the WordConfusion template system: same layout, same hover and
 * focus behaviour, recoloured to the CaseTheme teal tokens declared in
 * style.css.
 *
 * WordConfusion inlined this CSS in every template. Here it is one external
 * file so the browser caches it once and every template after the first costs
 * nothing.
 */

/* ==========================================================================
   1. Shell
   --------------------------------------------------------------------------
   GeneratePress wraps every template in #page.grid-container, capped at the
   customiser width with auto side margins. That cap turns a tinted full-width
   band into a floating box with white gutters. These templates set their own
   widths through .ct-wrap, so the cap is released.

   No 100vw breakout: 100vw includes the scrollbar and would add a horizontal
   scrollbar on desktop. Releasing the parent cap keeps the layout exactly as
   wide as the document.

   #content.site-content is a flex container in GeneratePress sidebar layouts,
   and a flex item sizes to its content, so releasing the cap alone is not
   enough. It is switched to block.
   ========================================================================== */

.ct-page #page.grid-container,
.ct-page #content.site-content {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.ct-page #content.site-content {
	display: block;
}

.ct-pg {
	--ct-page-max: 1440px;
	--ct-prose: 72ch;
	--ct-soft: #6E7C80;          /* meta text, 4.9:1 on white */
	--ct-ease: cubic-bezier(.22, .61, .36, 1);
	width: 100%;
	font-family: var(--ct-font-body);
	color: var(--ct-ink);
}

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

.ct-pg a {
	color: inherit;
	text-decoration: none;
}

.ct-pg :where(p) {
	margin: 0;
}

.ct-wrap {
	max-width: var(--ct-page-max);
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 48px);
}

.ct-wrap--narrow {
	max-width: 900px;
}

/* ==========================================================================
   2. Page header band
   ========================================================================== */

.ct-head {
	padding: clamp(28px, 4vw, 44px) 0 clamp(32px, 4vw, 44px);
	text-align: center;
	background:
		radial-gradient(680px 360px at 14% 6%, rgba(43, 122, 120, .13), transparent 62%),
		radial-gradient(540px 320px at 88% 0%, rgba(58, 175, 169, .14), transparent 60%),
		linear-gradient(180deg, var(--ct-white), var(--ct-wash));
	border-bottom: 1px solid var(--ct-wire);
}

.ct-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 7px 15px;
	border: 1px solid rgba(43, 122, 120, .22);
	border-radius: 999px;
	background: rgba(43, 122, 120, .08);
	color: var(--ct-brand-dark);
	font-family: var(--ct-font-head);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ct-h1 {
	max-width: 22ch;
	margin: 0 auto 12px;
	font-family: var(--ct-font-head);
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	font-weight: 800;
	line-height: 1.13;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.ct-h1 em {
	font-style: normal;
	color: var(--ct-brand);
}

.ct-sub {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--ct-muted);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.7;
}

.ct-body {
	padding: clamp(32px, 4.5vw, 52px) 0 clamp(52px, 6vw, 80px);
	background: var(--ct-white);
}

/* ==========================================================================
   3. Search form
   ========================================================================== */

.ct-search {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 540px;
	margin: 26px auto 0;
}

.ct-search input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 54px;
	padding: 0 18px;
	border: 1.5px solid var(--ct-wire-dark);
	border-radius: 13px;
	background: var(--ct-white);
	color: var(--ct-ink);
	font-family: var(--ct-font-body);
	font-size: 16px;      /* 16px or iOS zooms on focus */
}

.ct-search input[type="search"]:focus {
	border-color: var(--ct-brand);
	box-shadow: 0 0 0 4px rgba(43, 122, 120, .16);
	outline: none;
}

.ct-search button {
	min-height: 54px;
	padding: 0 24px;
	border: 0;
	border-radius: 13px;
	background: var(--ct-brand);
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 150ms ease, background-color 150ms ease;
}

.ct-search button:hover {
	background: var(--ct-brand-dark);
	transform: translateY(-2px);
}

.ct-search button:focus-visible {
	outline: 3px solid var(--ct-deep);
	outline-offset: 3px;
}

/* ==========================================================================
   4. Filter and topic chips
   ========================================================================== */

.ct-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	padding-top: 22px;
}

.ct-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;      /* touch target */
	padding: 0 18px;
	border: 1px solid var(--ct-wire-dark);
	border-radius: 999px;
	background: var(--ct-white);
	color: var(--ct-ink);
	font-family: var(--ct-font-head);
	font-size: 14.5px;
	font-weight: 600;
	transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.ct-chip:hover {
	border-color: var(--ct-brand);
	transform: translateY(-2px);
}

.ct-chip:focus-visible {
	outline: 3px solid var(--ct-brand);
	outline-offset: 2px;
}

.ct-chip b {
	color: var(--ct-brand-dark);
	font-variant-numeric: tabular-nums;
}

.ct-chip.is-on {
	border-color: var(--ct-brand);
	background: var(--ct-brand);
	color: var(--ct-white);
}

.ct-chip.is-on b {
	color: var(--ct-white);
}

/* ==========================================================================
   5. Featured lead card
   ========================================================================== */

.ct-feat {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	margin-bottom: 38px;
	overflow: hidden;
	border: 1px solid var(--ct-wire);
	border-radius: 20px;
	background: var(--ct-white);
	transition: transform 260ms var(--ct-ease), box-shadow 260ms var(--ct-ease), border-color 200ms ease;
}

.ct-feat:hover {
	border-color: var(--ct-accent);
	box-shadow: 0 26px 52px -34px rgba(23, 37, 42, .55);
	transform: translateY(-4px);
}

.ct-feat:focus-within {
	outline: 3px solid var(--ct-brand);
	outline-offset: 3px;
}

@media (max-width: 899px) {

	.ct-feat {
		grid-template-columns: 1fr;
	}
}

.ct-feat__img {
	position: relative;
	display: block;
	min-height: 260px;
	overflow: hidden;
	background: var(--ct-tint);
}

.ct-feat__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ct-ease);
}

.ct-feat:hover .ct-feat__img img {
	transform: scale(1.04);
}

.ct-feat__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 34px;
}

@media (max-width: 599px) {

	.ct-feat__body {
		padding: 22px 20px;
	}

	.ct-feat__img {
		min-height: 200px;
	}
}

.ct-tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--ct-accent);
	color: var(--ct-deep);
	font-family: var(--ct-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ct-feat__body h2 {
	margin: 0 0 12px;
	font-family: var(--ct-font-head);
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.02em;
}

.ct-feat__body h2 a:hover {
	color: var(--ct-brand-dark);
}

.ct-feat__ex {
	color: var(--ct-muted);
	font-size: 15.5px;
	line-height: 1.68;
}

/* ==========================================================================
   6. Post grid and cards
   ========================================================================== */

.ct-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

@media (max-width: 959px) {

	.ct-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 599px) {

	.ct-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ct-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ct-wire);
	border-radius: 18px;
	background: var(--ct-white);
	transition: transform 260ms var(--ct-ease), box-shadow 260ms var(--ct-ease), border-color 200ms ease;
}

.ct-pcard:hover {
	border-color: var(--ct-accent);
	box-shadow: 0 22px 44px -30px rgba(23, 37, 42, .55);
	transform: translateY(-5px);
}

.ct-pcard:focus-within {
	outline: 3px solid var(--ct-brand);
	outline-offset: 3px;
}

.ct-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;    /* reserves space, keeps CLS at 0 */
	overflow: hidden;
	background: var(--ct-tint);
}

.ct-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ct-ease);
}

.ct-pcard:hover .ct-thumb img {
	transform: scale(1.05);
}

.ct-thumb__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(254, 255, 255, .95);
	color: var(--ct-brand-dark);
	font-family: var(--ct-font-head);
	font-size: 11.5px;
	font-weight: 700;
	box-shadow: 0 4px 12px -6px rgba(23, 37, 42, .4);
}

.ct-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 22px;
}

.ct-pcard__body h2,
.ct-pcard__body h3 {
	margin: 0 0 8px;
	font-family: var(--ct-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.01em;
}

.ct-pcard__body h2 a:hover,
.ct-pcard__body h3 a:hover {
	color: var(--ct-brand-dark);
}

.ct-pcard__ex {
	flex: 1;
	color: var(--ct-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.ct-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	color: var(--ct-soft);
	font-size: 12.5px;
}

.ct-meta .ct-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ct-wire-dark);
}

/* ==========================================================================
   7. Pagination, counts, empty state
   ========================================================================== */

.ct-count {
	margin-bottom: 26px;
	color: var(--ct-soft);
	font-size: 14px;
	text-align: center;
}

.ct-pag {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 46px;
}

.ct-pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ct-wire-dark);
	border-radius: 12px;
	background: var(--ct-white);
	color: var(--ct-muted);
	font-family: var(--ct-font-head);
	font-size: 15px;
	font-weight: 700;
	transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ct-pag .page-numbers:hover {
	border-color: var(--ct-brand);
	color: var(--ct-brand-dark);
	transform: translateY(-2px);
}

.ct-pag .page-numbers.current {
	border-color: var(--ct-brand);
	background: var(--ct-brand);
	color: var(--ct-white);
}

.ct-pag .page-numbers.dots {
	border: 0;
	background: transparent;
}

.ct-empty {
	padding: 50px 20px;
	border: 1px dashed var(--ct-wire-dark);
	border-radius: 18px;
	background: var(--ct-white);
	text-align: center;
}

.ct-empty h2 {
	margin: 0 0 10px;
	font-family: var(--ct-font-head);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ct-empty p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--ct-muted);
	line-height: 1.7;
}

/* ==========================================================================
   8. Pill button
   ========================================================================== */

.ct-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--ct-brand);
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 20px -6px rgba(43, 122, 120, .55);
	transition: transform 150ms ease, box-shadow 220ms ease, background-color 150ms ease;
}

.ct-pill:hover {
	background: var(--ct-brand-dark);
	box-shadow: 0 12px 28px -8px rgba(43, 122, 120, .6);
	transform: translateY(-2px);
}

.ct-pill:focus-visible {
	outline: 3px solid var(--ct-deep);
	outline-offset: 3px;
}

.ct-pill--ghost {
	background: var(--ct-white);
	color: var(--ct-brand-dark);
	box-shadow: none;
	border: 1px solid var(--ct-accent);
}

.ct-pill--ghost:hover {
	border-color: var(--ct-brand);
	background: var(--ct-tint);
	color: var(--ct-brand-dark);
}

/* ==========================================================================
   9. Closing CTA band
   ========================================================================== */

.ct-cta {
	margin-top: 56px;
	padding: 38px 34px;
	border-radius: 22px;
	color: var(--ct-white);
	text-align: center;
	background:
		radial-gradient(620px 320px at 14% 0%, rgba(43, 122, 120, .55), transparent 62%),
		linear-gradient(135deg, var(--ct-deep), #10343A);
}

.ct-cta h2 {
	margin: 0 0 10px;
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

.ct-cta p {
	max-width: 54ch;
	margin: 0 auto 24px;
	color: #B9D6D4;
	line-height: 1.65;
}

.ct-cta .ct-pill {
	background: var(--ct-white);
	color: var(--ct-deep);
	box-shadow: none;
}

.ct-cta .ct-pill:hover {
	background: var(--ct-tint);
	color: var(--ct-deep);
	box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5);
}

@media (max-width: 767px) {

	.ct-cta {
		padding: 28px 20px;
	}

	.ct-cta .ct-pill {
		width: 100%;
	}
}

/* ==========================================================================
   10. Author card
   ========================================================================== */

.ct-author {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 22px;
	max-width: 820px;
	margin-inline: auto;
	padding: 26px;
	border: 1px solid var(--ct-wire);
	border-radius: 20px;
	background: var(--ct-white);
	box-shadow: 0 22px 46px -34px rgba(23, 37, 42, .5);
	text-align: left;
}

.ct-author img {
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ct-tint);
}

.ct-author__info {
	flex: 1 1 320px;
}

.ct-author__name {
	margin: 0 0 3px;
	font-family: var(--ct-font-head);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ct-author__role {
	margin-bottom: 10px;
	color: var(--ct-brand-dark);
	font-size: 14.5px;
	font-weight: 700;
}

.ct-author__bio {
	margin-bottom: 14px;
	color: var(--ct-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* ==========================================================================
   11. Single post
   ========================================================================== */

.ct-crumbs {
	padding: 16px 0 0;
	color: var(--ct-soft);
	font-size: 13.5px;
}

.ct-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-crumbs a:hover {
	color: var(--ct-brand-dark);
	text-decoration: underline;
}

.ct-crumbs [aria-current] {
	color: var(--ct-ink);
	font-weight: 600;
}

.ct-post-head {
	padding: 22px 0 34px;
	text-align: center;
	background: linear-gradient(180deg, var(--ct-wash), var(--ct-white));
	border-bottom: 1px solid var(--ct-wire);
}

.ct-post-head .ct-cat {
	display: inline-flex;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ct-tint);
	color: var(--ct-brand-dark);
	font-family: var(--ct-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ct-post-title {
	max-width: 24ch;
	margin: 0 auto 16px;
	font-family: var(--ct-font-head);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.ct-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--ct-soft);
	font-size: 13.5px;
}

.ct-post-meta a {
	color: var(--ct-brand-dark);
	font-weight: 600;
}

.ct-post-meta a:hover {
	text-decoration: underline;
}

.ct-post-meta img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ct-tint);
}

.ct-figure {
	max-width: 1040px;
	margin: 32px auto 0;
	overflow: hidden;
	border-radius: var(--ct-radius);
	background: var(--ct-tint);
}

.ct-figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Three column reading layout: sticky contents, article, sidebar. */
.ct-post-grid {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
	padding-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 1199px) {

	.ct-post-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 32px;
	}

	.ct-toc {
		display: none;
	}
}

@media (max-width: 899px) {

	.ct-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ct-toc {
	position: sticky;
	top: calc(var(--ct-header-h, 72px) + 20px);
}

.ct-toc__h {
	margin: 0 0 12px;
	color: var(--ct-soft);
	font-family: var(--ct-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ct-toc__list {
	max-height: calc(100vh - 200px);
	margin: 0;
	padding: 0 0 0 1px;
	overflow-y: auto;
	list-style: none;
	border-left: 2px solid var(--ct-wire);
}

.ct-toc__list a {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--ct-muted);
	font-size: 14px;
	line-height: 1.45;
	transition: color 160ms ease, border-color 160ms ease;
}

.ct-toc__list a:hover {
	color: var(--ct-brand-dark);
}

.ct-toc__list a.on {
	border-left-color: var(--ct-brand);
	color: var(--ct-brand-dark);
	font-weight: 700;
}

.ct-toc__list .lvl-3 a {
	padding-left: 26px;
	font-size: 13.5px;
}

/* Mobile contents, as a disclosure above the article. */
.ct-toc-m {
	margin-bottom: 26px;
	border: 1px solid var(--ct-wire);
	border-radius: var(--ct-radius);
	background: var(--ct-wash);
}

@media (min-width: 1200px) {

	.ct-toc-m {
		display: none;
	}
}

.ct-toc-m summary {
	padding: 14px 18px;
	cursor: pointer;
	font-family: var(--ct-font-head);
	font-size: 15px;
	font-weight: 700;
}

.ct-toc-m ol {
	margin: 0;
	padding: 0 18px 16px 34px;
}

.ct-toc-m a {
	display: block;
	padding: 6px 0;
	color: var(--ct-muted);
	font-size: 14.5px;
}

.ct-toc-m a:hover {
	color: var(--ct-brand-dark);
}

/* ==========================================================================
   12. Article prose
   --------------------------------------------------------------------------
   Left aligned on purpose. Centring a long article is unreadable: the eye
   loses the start of each line. Headers, cards and meta rows centre, prose
   does not. This matches the WordConfusion templates.
   ========================================================================== */

.ct-prose {
	max-width: var(--ct-prose);
	color: var(--ct-ink);
	font-size: 1.0625rem;
	line-height: 1.78;
}

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

.ct-prose h2 {
	margin-top: 1.9em;
	margin-bottom: .55em;
	font-family: var(--ct-font-head);
	font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	scroll-margin-top: calc(var(--ct-header-h, 72px) + 20px);
}

.ct-prose h3 {
	margin-top: 1.6em;
	margin-bottom: .45em;
	font-family: var(--ct-font-head);
	font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
	scroll-margin-top: calc(var(--ct-header-h, 72px) + 20px);
}

.ct-prose a {
	color: var(--ct-brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ct-prose a:hover {
	color: var(--ct-brand);
}

.ct-prose ul,
.ct-prose ol {
	padding-left: 1.3em;
}

.ct-prose li + li {
	margin-top: .45em;
}

.ct-prose li::marker {
	color: var(--ct-brand);
}

.ct-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ct-radius);
}

.ct-prose blockquote {
	margin-inline: 0;
	padding: 18px 22px;
	border-left: 3px solid var(--ct-accent);
	border-radius: 0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
	background: var(--ct-tint);
	color: var(--ct-ink);
	font-size: 1.05rem;
}

.ct-prose code {
	padding: .15em .4em;
	border-radius: 5px;
	background: var(--ct-tint);
	color: var(--ct-brand-dark);
	font-size: .92em;
}

.ct-prose pre {
	padding: 18px;
	overflow-x: auto;
	border-radius: var(--ct-radius);
	background: var(--ct-deep);
	color: #DEF2F1;
	font-size: .9rem;
	line-height: 1.6;
}

.ct-prose pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.ct-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.ct-prose th,
.ct-prose td {
	padding: 11px 14px;
	border: 1px solid var(--ct-wire);
	text-align: left;
}

.ct-prose th {
	background: var(--ct-tint);
	font-family: var(--ct-font-head);
	font-weight: 700;
}

.ct-prose td:not(:first-child) {
	font-variant-numeric: tabular-nums;
}

.ct-table-scroll {
	overflow-x: auto;
}

/* ==========================================================================
   13. Prev / next, comments, sidebar
   ========================================================================== */

.ct-pn {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 48px;
}

@media (max-width: 599px) {

	.ct-pn {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ct-pn a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--ct-wire);
	border-radius: var(--ct-radius);
	background: var(--ct-white);
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ct-pn a:hover {
	border-color: var(--ct-accent);
	box-shadow: 0 18px 36px -28px rgba(23, 37, 42, .55);
	transform: translateY(-3px);
}

.ct-pn .ct-pn__dir {
	display: block;
	margin-bottom: 6px;
	color: var(--ct-soft);
	font-family: var(--ct-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ct-pn .ct-pn__t {
	color: var(--ct-ink);
	font-family: var(--ct-font-head);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.ct-pn a:last-child {
	text-align: right;
}

@media (max-width: 599px) {

	.ct-pn a,
	.ct-pn a:last-child {
		text-align: center;
	}
}

.ct-side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

@media (max-width: 899px) {

	.ct-side {
		margin-top: 44px;
	}
}

.ct-scard {
	padding: 22px;
	border: 1px solid var(--ct-wire);
	border-radius: var(--ct-radius);
	background: var(--ct-white);
}

.ct-scard__h {
	margin: 0 0 14px;
	color: var(--ct-soft);
	font-family: var(--ct-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ct-latest {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ct-latest a {
	display: block;
	color: var(--ct-ink);
	font-family: var(--ct-font-head);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

.ct-latest a:hover {
	color: var(--ct-brand-dark);
}

.ct-latest time {
	display: block;
	margin-top: 3px;
	color: var(--ct-soft);
	font-family: var(--ct-font-body);
	font-size: 12.5px;
	font-weight: 400;
}

.ct-comments {
	max-width: var(--ct-prose);
	margin-top: 52px;
	padding-top: 32px;
	border-top: 1px solid var(--ct-wire);
}

.ct-comments .comment-reply-title,
.ct-comments .comments-title {
	font-family: var(--ct-font-head);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ct-comments input[type="text"],
.ct-comments input[type="email"],
.ct-comments input[type="url"],
.ct-comments textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--ct-wire-dark);
	border-radius: var(--ct-radius-sm);
	background: var(--ct-white);
	font-family: var(--ct-font-body);
	font-size: 16px;
}

.ct-comments input:focus,
.ct-comments textarea:focus {
	border-color: var(--ct-brand);
	box-shadow: 0 0 0 4px rgba(43, 122, 120, .14);
	outline: none;
}

.ct-comments .submit {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--ct-radius-sm);
	background: var(--ct-brand);
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-weight: 700;
	cursor: pointer;
}

.ct-comments .submit:hover {
	background: var(--ct-brand-dark);
}

/* ==========================================================================
   14. Static pages: legal, about, sitemap, contact
   ========================================================================== */

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

.ct-doc .ct-prose {
	max-width: none;
}

.ct-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	padding: 8px 15px;
	border: 1px solid var(--ct-wire);
	border-radius: 999px;
	background: var(--ct-wash);
	color: var(--ct-muted);
	font-size: 13.5px;
}

.ct-notice {
	margin: 28px 0;
	padding: 16px 18px;
	border: 1px dashed var(--ct-accent);
	border-radius: var(--ct-radius);
	background: var(--ct-tint);
	color: var(--ct-ink);
	font-size: 14.5px;
	line-height: 1.65;
}

.ct-toc-doc {
	margin-bottom: 34px;
	padding: 20px 24px;
	border: 1px solid var(--ct-wire);
	border-radius: var(--ct-radius);
	background: var(--ct-wash);
}

.ct-toc-doc h2 {
	margin: 0 0 12px;
	font-family: var(--ct-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ct-soft);
}

.ct-toc-doc ol {
	columns: 2;
	column-gap: 28px;
	margin: 0;
	padding-left: 1.2em;
}

@media (max-width: 599px) {

	.ct-toc-doc ol {
		columns: 1;
	}
}

.ct-toc-doc a {
	color: var(--ct-brand-dark);
	font-size: 14.5px;
	line-height: 2;
}

.ct-toc-doc a:hover {
	text-decoration: underline;
}

/* Sitemap */
/* Explicit columns rather than auto-fit: auto-fit adds an empty trailing
   track whose gap pushes the row off centre when the item count is short. */
.ct-sm {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

@media (min-width: 620px) {

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

@media (min-width: 1000px) {

	.ct-sm {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ct-sm__col {
	padding: 24px;
	border: 1px solid var(--ct-wire);
	border-radius: var(--ct-radius);
	background: var(--ct-white);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ct-sm__col:hover {
	border-color: var(--ct-accent);
	box-shadow: 0 18px 38px -30px rgba(23, 37, 42, .5);
}

.ct-sm__h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ct-wire);
	font-family: var(--ct-font-head);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.ct-sm__h svg {
	width: 18px;
	height: 18px;
	color: var(--ct-brand);
}

.ct-sm__h b {
	margin-left: auto;
	color: var(--ct-soft);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ct-sm__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-sm__list li + li {
	margin-top: 9px;
}

.ct-sm__list a {
	color: var(--ct-muted);
	font-size: 14.5px;
	line-height: 1.5;
}

.ct-sm__list a:hover {
	color: var(--ct-brand-dark);
	text-decoration: underline;
}

/* Contact, including Contact Form 7 */
.ct-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

@media (max-width: 899px) {

	.ct-contact {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ct-formcard {
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--ct-wire);
	border-radius: 20px;
	background: var(--ct-white);
	box-shadow: 0 22px 46px -36px rgba(23, 37, 42, .5);
	text-align: left;
}

.ct-pg .wpcf7-form label,
.ct-formcard label {
	display: block;
	margin-bottom: 16px;
	font-family: var(--ct-font-head);
	font-size: 14.5px;
	font-weight: 700;
}

.ct-pg .wpcf7-form input[type="text"],
.ct-pg .wpcf7-form input[type="email"],
.ct-pg .wpcf7-form input[type="tel"],
.ct-pg .wpcf7-form input[type="url"],
.ct-pg .wpcf7-form select,
.ct-pg .wpcf7-form textarea {
	width: 100%;
	margin-top: 7px;
	padding: 12px 14px;
	border: 1.5px solid var(--ct-wire-dark);
	border-radius: var(--ct-radius-sm);
	background: var(--ct-white);
	color: var(--ct-ink);
	font-family: var(--ct-font-body);
	font-size: 16px;
	font-weight: 400;
}

.ct-pg .wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

.ct-pg .wpcf7-form input:focus,
.ct-pg .wpcf7-form select:focus,
.ct-pg .wpcf7-form textarea:focus {
	border-color: var(--ct-brand);
	box-shadow: 0 0 0 4px rgba(43, 122, 120, .14);
	outline: none;
}

.ct-pg .wpcf7-form .wpcf7-submit {
	width: 100%;
	min-height: 52px;
	margin-top: 6px;
	border: 0;
	border-radius: var(--ct-radius-sm);
	background: var(--ct-brand);
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}

.ct-pg .wpcf7-form .wpcf7-submit:hover {
	background: var(--ct-brand-dark);
	transform: translateY(-2px);
}

.ct-pg .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #B3261E;
	font-size: 13.5px;
	font-weight: 600;
}

.ct-pg .wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 14px 16px !important;
	border-width: 1px !important;
	border-radius: var(--ct-radius-sm) !important;
	font-size: 14.5px;
}

.ct-pg .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ct-brand) !important;
	background: var(--ct-tint);
	color: var(--ct-brand-dark);
}

.ct-pg .wpcf7-spinner {
	margin-left: 10px;
}

.ct-infocard {
	padding: 26px;
	border: 1px solid var(--ct-wire);
	border-radius: 20px;
	background: var(--ct-wash);
	text-align: left;
}

.ct-infocard h2 {
	margin: 0 0 14px;
	font-family: var(--ct-font-head);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.ct-infolist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-infolist li {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ct-wire);
	color: var(--ct-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

.ct-infolist li:last-child {
	border-bottom: 0;
}

.ct-infolist svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--ct-brand);
}

.ct-infolist strong {
	display: block;
	color: var(--ct-ink);
	font-family: var(--ct-font-head);
	font-size: 14px;
}

/* 404 */
.ct-404 {
	padding: clamp(48px, 7vw, 92px) 0;
	text-align: center;
}

.ct-404__code {
	margin: 0 auto 10px;
	color: var(--ct-accent);
	font-family: var(--ct-font-head);
	font-size: clamp(4.5rem, 14vw, 9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
}

/* ==========================================================================
   15. Mobile: centre everything
   --------------------------------------------------------------------------
   On a narrow screen every card spans the full width, so left aligned text
   reads as ragged against the centred page header. text-align alone is not
   enough: a flex container positions its children with justify-content and
   align-items, and text-align does not move a flex item. Each flex row
   therefore gets its own rule.
   ========================================================================== */

@media (max-width: 767px) {

	.ct-pcard,
	.ct-feat,
	.ct-empty,
	.ct-cta,
	.ct-count {
		text-align: center;
	}

	.ct-pcard__body,
	.ct-feat__body {
		align-items: center;
		text-align: center;
	}

	.ct-meta,
	.ct-post-meta,
	.ct-crumbs ol,
	.ct-chips,
	.ct-pag,
	.ct-search {
		justify-content: center;
	}

	.ct-tag {
		align-self: center;
	}

	.ct-thumb__chip {
		left: 50%;
		transform: translateX(-50%);
	}

	.ct-search input[type="search"] {
		text-align: center;
	}

	/* Author card: stack the avatar above the text. .ct-author__info carries
	   flex: 1 1 320px, and in a column container a flex-basis is a HEIGHT, so
	   it is reset rather than inherited. */
	.ct-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ct-author__info {
		flex: 0 1 auto;
		width: 100%;
	}

	.ct-sm__h {
		justify-content: center;
		text-align: center;
	}

	.ct-sm__h b {
		margin-left: 0;
	}

	.ct-sm__list,
	.ct-sm__list a {
		text-align: center;
	}

	.ct-formcard,
	.ct-infocard,
	.ct-infolist li {
		text-align: center;
	}

	.ct-infolist li {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	.ct-updated {
		margin-inline: auto;
	}
}

/* ==========================================================================
   16. Motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ct-pg *,
	.ct-pg *::before,
	.ct-pg *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	.ct-pcard:hover,
	.ct-feat:hover,
	.ct-pn a:hover,
	.ct-chip:hover,
	.ct-pill:hover,
	.ct-search button:hover {
		transform: none;
	}

	.ct-pcard:hover .ct-thumb img,
	.ct-feat:hover .ct-feat__img img {
		transform: none;
	}
}