/*
Theme Name: Clear Thinking Space
Theme URI: https://clearthinkingspace.com
Author: Clear Thinking Space
Author URI: https://clearthinkingspace.com
Description: Editorial magazine theme for Clear Thinking Space, a shopping and lifestyle journal covering Tech, Travel, Fashion, Lifestyle and Beauty. Ported from the Clear Thinking Space React prototype: same palette, typography, type scale and layout. Ships editable About, Contact and legal page templates, a featured-post hero slideshow, per-category home sections, and matching category and single post layouts. No page builder required.
Version: 2.3.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clear-thinking-space
Tags: blog, news, magazine, two-columns, right-sidebar, custom-menu, featured-images, editor-style, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Palette and type scale taken from the prototype's Tailwind @theme block
   (src/index.css) plus the arbitrary values used across its components.
   ========================================================================== */

:root {
	/* Brand palette */
	--cts-dark: #00171f;   /* --color-brand-dark   */
	--cts-deep: #003459;   /* --color-brand-deep   */
	--cts-mid: #007ea7;    /* --color-brand-mid    */
	--cts-bright: #00a8e8; /* --color-brand-bright */
	--cts-deep-alt: #002436;

	/* Neutrals (Tailwind default gray ramp, as used by the prototype) */
	--cts-white: #ffffff;
	--cts-gray-50: #f9fafb;
	--cts-gray-100: #f3f4f6;
	--cts-gray-200: #e5e7eb;
	--cts-gray-300: #d1d5db;
	--cts-gray-400: #9ca3af;
	--cts-gray-500: #6b7280;
	--cts-gray-600: #4b5563;
	--cts-gray-700: #374151;

	/* Social brand colours used on the share bar */
	--cts-facebook: #1877f2;
	--cts-pinterest: #e60023;

	/* Typography */
	--cts-font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cts-font-display: "Plus Jakarta Sans", "Inter", sans-serif;
	--cts-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Type scale (Tailwind defaults; 4.5xl / 6.5xl interpolated as in prototype) */
	--cts-text-3xs: 0.5625rem;  /* text-[9px]  */
	--cts-text-2xs: 0.625rem;   /* text-[10px] */
	--cts-text-xxs: 0.6875rem;  /* text-[11px] */
	--cts-text-xs: 0.75rem;
	--cts-text-sm: 0.875rem;
	--cts-text-base: 1rem;
	--cts-text-lg: 1.125rem;
	--cts-text-xl: 1.25rem;
	--cts-text-2xl: 1.5rem;
	--cts-text-3xl: 1.875rem;
	--cts-text-4xl: 2.25rem;
	--cts-text-4-5xl: 2.5rem;
	--cts-text-5xl: 3rem;
	--cts-text-6-5xl: 48px;

	/* Weights. Plus Jakarta Sans tops out at 800, so the prototype's
	   font-black (900) resolves to 800 — matched here deliberately. */
	--cts-fw-light: 300;
	--cts-fw-normal: 400;
	--cts-fw-medium: 500;
	--cts-fw-semibold: 600;
	--cts-fw-bold: 700;
	--cts-fw-black: 800;

	/* Layout */
	--cts-container: 80rem;    /* max-w-7xl */
	--cts-container-md: 56rem; /* max-w-4xl, legal pages */

	/* Sticky sidebar offset: the 5rem sticky header plus breathing room. */
	--cts-sticky-top: 6.5rem;
	--cts-radius-xs: 0.125rem;
	--cts-radius-sm: 0.25rem;
	--cts-radius-full: 9999px;

	--cts-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--cts-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--cts-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--cts-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--cts-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cts-white);
	color: var(--cts-gray-700);
	font-family: var(--cts-font-sans);
	font-size: var(--cts-text-base);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--cts-font-display);
	color: var(--cts-dark);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

a {
	color: var(--cts-mid);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover { color: var(--cts-bright); }

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
}

input, textarea, select { font-family: inherit; font-size: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--cts-bright);
	color: var(--cts-dark);
	padding: 0.75rem 1.25rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--cts-bright);
	outline-offset: 2px;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.cts-container {
	width: 100%;
	max-width: var(--cts-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

.cts-container--narrow { max-width: var(--cts-container-md); }

@media (min-width: 640px) { .cts-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .cts-container { padding-inline: 2rem; } }

.cts-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cts-main { flex: 1 0 auto; }

/* 12-column grid: main 8 / sidebar 4, with the prototype's divider rule */
.cts-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.cts-layout { grid-template-columns: 2fr 1fr; gap: 3rem; }
	.cts-layout__main {
		padding-right: 2rem;
		border-right: 1px solid var(--cts-gray-100);
	}
}

/* The admin bar is fixed above the header, so push the sticky offset down. */
.admin-bar { --cts-sticky-top: calc(6.5rem + 32px); }

/* Sticky sidebar, opted into per template with .cts-layout--sticky.
   A grid child defaults to `align-self: stretch`, which makes it as tall as the
   row and leaves sticky nothing to travel through — hence `align-self: start`.

   The sidebar is normally taller than the viewport. Rather than capping its
   height (which makes its flex children shrink and collapses the widgets), it
   travels with the page and theme.js pins it by its bottom edge once the whole
   column has been read. No inner scrollbar, nothing clipped. */
@media (min-width: 1024px) {
	.cts-layout--sticky .cts-sidebar {
		position: sticky;
		top: var(--cts-sticky-top);
		align-self: start;
	}

	/* Widgets keep their natural height — shrinking is what collapsed the
	   newsletter card into a sliver. */
	.cts-layout--sticky .cts-sidebar > * { flex-shrink: 0; }

	/* Same behaviour for the Elementor Article Sidebar widget, which opts in
	   per instance rather than inheriting from a layout wrapper. */
	[data-cts-sticky] {
		position: sticky;
		top: var(--cts-sticky-top);
		align-self: start;
	}

	[data-cts-sticky] > * { flex-shrink: 0; }
}

/* ==========================================================================
   4. SHARED ATOMS
   ========================================================================== */

/* -- Category pill. Per-category colours from getCategoryColor(). -- */
/* Base size is the homepage grid card's 12px; the archive and Editor's Picks
   variants step down to 10px and 9px respectively, as in the prototype. */
.cts-tag {
	display: inline-block;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: var(--cts-radius-xs);
	box-shadow: var(--cts-shadow-md);
	background: var(--cts-mid);
	color: var(--cts-white);
	white-space: nowrap;
}

.cts-tag:hover { color: var(--cts-white); }

.cts-tag--tech      { background: var(--cts-bright); color: var(--cts-white); }
.cts-tag--travel    { background: var(--cts-mid); color: var(--cts-white); }
.cts-tag--fashion   { background: var(--cts-deep); color: var(--cts-bright); border: 1px solid rgb(0 126 167 / 0.3); }
.cts-tag--lifestyle { background: var(--cts-white); color: var(--cts-dark); font-weight: var(--cts-fw-bold); border: 1px solid var(--cts-gray-100); }
.cts-tag--beauty    { background: var(--cts-bright); color: var(--cts-dark); font-weight: var(--cts-fw-black); }

.cts-tag--tech:hover, .cts-tag--travel:hover { color: var(--cts-white); }
.cts-tag--fashion:hover { color: var(--cts-bright); }
.cts-tag--lifestyle:hover, .cts-tag--beauty:hover { color: var(--cts-dark); }

/* Hero slide: 11px stepping up to 12px from md. */
.cts-tag--lg {
	font-size: var(--cts-text-xxs);
	padding: 0.375rem 0.875rem;
	border-radius: var(--cts-radius-sm);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

@media (min-width: 768px) { .cts-tag--lg { font-size: var(--cts-text-xs); } }

/* Single post header: 10px stepping up to 12px from md. */
.cts-tag--post {
	font-size: var(--cts-text-2xs);
	padding: 0.375rem 0.875rem;
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-sm);
}

@media (min-width: 768px) { .cts-tag--post { font-size: var(--cts-text-xs); } }

/* Editor's Picks wide card. */
.cts-tag--sm { font-size: var(--cts-text-3xs); padding: 0.125rem 0.5rem; }

/* -- Eyebrow / kicker -- */
.cts-eyebrow {
	display: block;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	font-weight: var(--cts-fw-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-mid);
}

.cts-eyebrow--bright { color: var(--cts-bright); }

/* -- Meta line (mono, muted). 12px and sentence case on the homepage grid
      card; the archive card drops to 10px and uppercases. -- */
.cts-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
}

.cts-meta__item { display: inline-flex; align-items: center; gap: 0.25rem; }

.cts-icon {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	stroke-width: 2;
}

.cts-icon--bright { color: var(--cts-bright); }
.cts-icon--mid { color: var(--cts-mid); }

/* -- Buttons -- */
.cts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.875rem 1.5rem;
	border-radius: var(--cts-radius-sm);
	transition: all 0.3s ease;
}

.cts-btn--primary {
	background: var(--cts-bright);
	color: var(--cts-dark);
	box-shadow: var(--cts-shadow-lg);
}

.cts-btn--primary:hover { background: var(--cts-white); color: var(--cts-dark); }

.cts-btn--dark {
	background: var(--cts-dark);
	color: var(--cts-white);
	border: 1px solid var(--cts-deep);
	border-radius: var(--cts-radius-full);
}

.cts-btn--dark:hover {
	background: var(--cts-mid);
	border-color: var(--cts-mid);
	color: var(--cts-white);
}

.cts-btn--outline {
	border: 1px solid var(--cts-bright);
	color: var(--cts-bright);
	border-radius: var(--cts-radius-full);
	padding: 0.625rem 1.125rem;
	box-shadow: var(--cts-shadow-sm);
}

.cts-btn--outline:hover {
	background: var(--cts-bright);
	color: var(--cts-white);
	transform: translateY(-2px);
}

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

/* -- "Read article" inline link -- */
.cts-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-bright);
	transition: color 0.2s ease;
}

.cts-readmore:hover { color: var(--cts-dark); }

/* -- Section heading with accent bar (home category sections) -- */
.cts-section { margin-bottom: 4rem; }

.cts-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 2px solid var(--cts-dark);
	padding-bottom: 0.875rem;
	margin-bottom: 1.5rem;
}

.cts-section__title-wrap { display: flex; align-items: center; gap: 0.625rem; }

.cts-section__bar {
	width: 0.875rem;
	height: 1.5rem;
	display: inline-block;
	border-radius: var(--cts-radius-xs);
	background: var(--cts-bright);
	flex-shrink: 0;
}

.cts-section__bar--mid { background: var(--cts-mid); }
.cts-section__bar--deep { background: var(--cts-deep); }

.cts-section__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-2xl);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
	line-height: 1.2;
}

.cts-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	color: var(--cts-mid);
	white-space: nowrap;
}

.cts-section__link:hover { color: var(--cts-bright); }

/* Utility: clamp lines */
.cts-clamp-2,
.cts-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cts-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.cts-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.cts-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cts-dark);
	color: var(--cts-white);
	border-bottom: 1px solid var(--cts-deep);
	box-shadow: var(--cts-shadow-md);
}

.cts-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 5rem;
}

/* -- Logo -- */
.cts-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-right: auto;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xl);
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--cts-white);
	transition: color 0.2s ease;
}

.cts-logo:hover { color: var(--cts-bright); }
.cts-logo span { color: var(--cts-bright); }
.cts-logo img { max-height: 2.5rem; width: auto; }

@media (min-width: 640px) { .cts-logo { font-size: var(--cts-text-2xl); } }
@media (min-width: 1024px) { .cts-logo { margin-right: 2rem; } }
@media (min-width: 1280px) { .cts-logo { margin-right: 3rem; } }

/* -- Desktop nav -- */
.cts-nav { display: none; }

@media (min-width: 1024px) {
	.cts-nav { display: flex; align-items: center; gap: 0.25rem; margin-right: auto; }
}

@media (min-width: 1280px) { .cts-nav { gap: 0.75rem; } }

.cts-nav ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
}

@media (min-width: 1280px) { .cts-nav ul { gap: 0.75rem; } }

.cts-nav li { position: relative; }

.cts-nav a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cts-gray-300);
	white-space: nowrap;
}

.cts-nav a:hover { color: var(--cts-bright); }

.cts-nav .current-menu-item > a,
.cts-nav .current_page_item > a,
.cts-nav .current-menu-ancestor > a,
.cts-nav .current-cat > a {
	color: var(--cts-bright);
	box-shadow: inset 0 -2px 0 0 var(--cts-bright);
}

/* Submenu */
.cts-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 13rem;
	background: var(--cts-dark);
	border: 1px solid var(--cts-deep);
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-xl);
	padding: 0.5rem 0;
	list-style: none;
	z-index: 50;
}

.cts-nav li:hover > .sub-menu,
.cts-nav li:focus-within > .sub-menu {
	display: block;
	animation: cts-fade-in-down 0.2s ease both;
}

.cts-nav .sub-menu li { width: 100%; }

.cts-nav .sub-menu a {
	width: 100%;
	padding: 0.5rem 1rem;
	color: var(--cts-gray-200);
	box-shadow: none;
}

.cts-nav .sub-menu a:hover { background: var(--cts-deep); color: var(--cts-bright); }

.cts-nav .sub-menu .current-menu-item > a {
	color: var(--cts-bright);
	background: var(--cts-deep-alt);
	box-shadow: none;
}

/* Legal links inside the "About us" dropdown read one step quieter */
.cts-nav .sub-menu .cts-menu-legal > a { color: var(--cts-gray-400); }

.cts-nav__caret { width: 0.875rem; height: 0.875rem; }

/* -- Header actions -- */
.cts-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.cts-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: var(--cts-radius-full);
	color: var(--cts-gray-300);
	transition: all 0.2s ease;
}

.cts-iconbtn:hover { background: var(--cts-deep); color: var(--cts-white); }

.cts-iconbtn svg { width: 1.25rem; height: 1.25rem; }

.cts-header__newsletter { display: none; }

@media (min-width: 640px) { .cts-header__newsletter { display: inline-flex; } }

.cts-burger { display: inline-flex; }

@media (min-width: 1024px) { .cts-burger { display: none; } }

.cts-burger svg { width: 1.5rem; height: 1.5rem; }

.cts-burger__close { display: none; }
.cts-burger.is-active .cts-burger__open { display: none; }
.cts-burger.is-active .cts-burger__close { display: block; }

/* -- Search dropdown -- */
.cts-search-wrap { position: relative; }

.cts-search-panel {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 0.75rem);
	width: 18rem;
	background: var(--cts-dark);
	border: 1px solid var(--cts-deep);
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-2xl);
	padding: 0.75rem;
	z-index: 50;
}

.cts-search-panel.is-open {
	display: block;
	animation: cts-fade-in 0.2s ease both;
}

.cts-searchform { display: flex; gap: 0.5rem; }

.cts-searchform input[type="search"] {
	width: 100%;
	background: var(--cts-deep);
	color: var(--cts-white);
	border: 1px solid var(--cts-mid);
	padding: 0.375rem 0.75rem;
	font-size: var(--cts-text-sm);
	border-radius: var(--cts-radius-sm);
}

.cts-searchform input[type="search"]::placeholder { color: var(--cts-gray-400); }

.cts-searchform input[type="search"]:focus { outline: none; border-color: var(--cts-bright); }

.cts-searchform button {
	background: var(--cts-mid);
	color: var(--cts-white);
	padding-inline: 0.75rem;
	border-radius: var(--cts-radius-sm);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	transition: background 0.2s ease;
}

.cts-searchform button:hover { background: var(--cts-bright); }

/* -- Mobile drawer -- */
.cts-drawer {
	display: none;
	background: var(--cts-dark);
	border-top: 1px solid var(--cts-deep);
	padding: 1.5rem 1rem;
}

.cts-drawer.is-open {
	display: block;
	animation: cts-fade-in 0.2s ease both;
}

@media (min-width: 1024px) { .cts-drawer { display: none !important; } }

.cts-drawer ul { list-style: none; }

.cts-drawer__menu,
.cts-drawer__menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cts-drawer__menu .sub-menu { margin-top: 0.5rem; }

/* Top-level plain link — "Home" */
.cts-drawer__top > a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--cts-radius-sm);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-semibold);
	font-size: var(--cts-text-base);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-gray-200);
}

/* A group opens with a rule, then its bright-blue section label */
.cts-drawer__group {
	border-top: 1px solid var(--cts-deep);
	margin-top: 0.5rem;
	padding-top: 0.75rem;
}

.cts-drawer__label {
	display: block;
	padding-inline: 0.75rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cts-bright);
}

.cts-drawer__menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.5rem;
	border-radius: var(--cts-radius-sm);
	font-family: var(--cts-font-sans);
	font-weight: var(--cts-fw-normal);
	font-size: var(--cts-text-sm);
	letter-spacing: 0.025em;
	color: var(--cts-gray-300);
}

.cts-drawer a:hover { background: var(--cts-deep); color: var(--cts-white); }

.cts-drawer .is-current > a {
	background: var(--cts-deep);
	color: var(--cts-bright);
	font-weight: var(--cts-fw-bold);
}

/* Legal links read quieter and pull back out of the indent, cut off from the
   pages above them by a rule. */
.cts-drawer .cts-menu-legal a {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	padding-left: 0.75rem;
}

.cts-drawer .sub-menu li:not(.cts-menu-legal) + .cts-menu-legal {
	border-top: 1px solid var(--cts-deep);
	margin-top: 0.5rem;
	padding-top: 0.75rem;
}

.cts-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 1rem;
	background: var(--cts-mid);
	color: var(--cts-white);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-sm);
	text-transform: uppercase;
	padding: 0.75rem;
	border-radius: var(--cts-radius-sm);
	transition: background 0.2s ease;
}

.cts-drawer__cta:hover { background: var(--cts-bright); color: var(--cts-white); }

/* ==========================================================================
   6. HERO SLIDESHOW
   ========================================================================== */

.cts-hero {
	position: relative;
	background: var(--cts-dark);
	overflow: hidden;
}

.cts-hero__viewport {
	position: relative;
	height: 480px;
	width: 100%;
}

@media (min-width: 768px) { .cts-hero__viewport { height: 580px; } }
@media (min-width: 1024px) { .cts-hero__viewport { height: 650px; } }

.cts-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease-in-out, visibility 0.7s;
}

.cts-hero__slide.is-active { opacity: 1; visibility: visible; }

.cts-hero__bg { position: absolute; inset: 0; }

.cts-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.4);
}

.cts-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--cts-dark), rgb(0 23 31 / 0.4) 50%, rgb(0 23 31 / 0.5));
}

.cts-hero__inner {
	position: relative;
	z-index: 10;
	width: 100%;
	color: var(--cts-white);
}

.cts-hero__content {
	max-width: 48rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

@media (min-width: 768px) { .cts-hero__content { gap: 1.5rem; } }

.cts-hero__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-3xl);
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-white);
	transition: color 0.2s ease;
}

.cts-hero__title a { color: inherit; }
.cts-hero__title a:hover { color: var(--cts-bright); }

@media (min-width: 640px) { .cts-hero__title { font-size: var(--cts-text-4xl); } }
@media (min-width: 768px) { .cts-hero__title { font-size: var(--cts-text-5xl); } }
@media (min-width: 1024px) { .cts-hero__title { font-size: var(--cts-text-6-5xl); } }

.cts-hero__excerpt {
	font-size: var(--cts-text-sm);
	color: var(--cts-gray-300);
	line-height: 1.625;
	max-width: 42rem;
}

@media (min-width: 768px) { .cts-hero__excerpt { font-size: var(--cts-text-base); } }

.cts-hero__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
}

.cts-hero__cta { margin-top: 0.5rem; }

@media (min-width: 768px) { .cts-hero__cta { font-size: var(--cts-text-sm); } }

/* Controls */
.cts-hero__arrows {
	position: absolute;
	right: 1rem;
	bottom: 2rem;
	z-index: 20;
	display: flex;
	gap: 0.5rem;
}

@media (min-width: 640px) { .cts-hero__arrows { right: 2rem; } }

.cts-hero__arrow {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cts-radius-sm);
	transition: all 0.2s ease;
}

.cts-hero__arrow:active { transform: scale(0.95); }

@media (min-width: 768px) { .cts-hero__arrow { width: 3rem; height: 3rem; } }

.cts-hero__arrow--prev {
	background: rgb(255 255 255 / 0.1);
	border: 1px solid rgb(255 255 255 / 0.2);
	color: var(--cts-white);
}

.cts-hero__arrow--prev:hover { background: var(--cts-mid); border-color: var(--cts-mid); }

.cts-hero__arrow--next {
	background: var(--cts-bright);
	color: var(--cts-dark);
	box-shadow: var(--cts-shadow-lg);
}

.cts-hero__arrow--next:hover { background: var(--cts-white); color: var(--cts-dark); }

.cts-hero__arrow svg { width: 1rem; height: 1rem; }

@media (min-width: 768px) { .cts-hero__arrow svg { width: 1.25rem; height: 1.25rem; } }

.cts-hero__dots {
	position: absolute;
	left: 1rem;
	bottom: 2rem;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 640px) { .cts-hero__dots { left: 2rem; } }

.cts-hero__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--cts-radius-full);
	background: rgb(255 255 255 / 0.4);
	transition: all 0.3s ease;
}

.cts-hero__dot:hover { background: var(--cts-white); }

.cts-hero__dot.is-active { width: 2rem; background: var(--cts-bright); }

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.cts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) { .cts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cts-grid { gap: 2rem; } }

/* Wider column counts for the Category Section widget when it's placed outside
   the homepage's 8-column main area. Two columns stays the default. */
@media (min-width: 1024px) {
	.cts-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cts-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.cts-grid--archive { gap: 2rem; }

@media (min-width: 640px) { .cts-grid--archive { grid-template-columns: repeat(2, 1fr); } }

/* -- Standard card -- */
.cts-card {
	display: flex;
	flex-direction: column;
	background: var(--cts-white);
	border: 1px solid var(--cts-gray-100);
	border-radius: var(--cts-radius-sm);
	padding: 1rem;
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.cts-card:hover { box-shadow: var(--cts-shadow-lg); }

.cts-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--cts-dark);
	border: 1px solid var(--cts-gray-100);
	border-radius: var(--cts-radius-xs);
}

/* The link wrapping each thumbnail is inline by default, so `height: 100%` on
   the image had no definite parent height to resolve against — object-fit
   never engaged and a failed image collapsed the frame. */
.cts-card__media > a,
.cts-wide__media > a,
.cts-list__media > a,
.cts-hero__bg > a {
	display: block;
	width: 100%;
	height: 100%;
}

.cts-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.95);
	transition: transform 0.5s ease;
}

/* Keep a failed image inside its frame instead of spilling alt text. */
.cts-card__media img,
.cts-wide__media img,
.cts-list__media img {
	overflow: hidden;
	font-size: var(--cts-text-2xs);
	color: var(--cts-gray-400);
}

.cts-card:hover .cts-card__media img { transform: scale(1.05); }

.cts-card__tag { position: absolute; top: 0.625rem; left: 0.625rem; z-index: 2; }

.cts-card__body {
	padding-top: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
}

.cts-card__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-base);
	line-height: 1.375;
	text-transform: uppercase;
	color: var(--cts-dark);
	transition: color 0.2s ease;
}

.cts-card__title a { color: inherit; }
.cts-card:hover .cts-card__title a { color: var(--cts-mid); }

@media (min-width: 768px) { .cts-card__title { font-size: var(--cts-text-lg); } }

.cts-card__excerpt {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-500);
	line-height: 1.625;
}

@media (min-width: 640px) { .cts-card__excerpt { font-size: var(--cts-text-sm); } }

.cts-card__foot {
	padding-top: 0.75rem;
	border-top: 1px solid var(--cts-gray-50);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* -- Archive card variant: image edge to edge, body padded -- */
.cts-card--archive { padding: 0; box-shadow: var(--cts-shadow-sm); }

.cts-card--archive:hover { box-shadow: var(--cts-shadow-xl); }

.cts-card--archive .cts-card__media {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 0;
}

.cts-card--archive .cts-card__tag { top: 0.75rem; left: 0.75rem; }

.cts-card--archive .cts-card__body { padding: 1.25rem; }

.cts-card--archive .cts-card__title { font-size: var(--cts-text-xl); line-height: 1.25; }

/* The archive card runs a tighter type scale than the homepage grid card. */
.cts-card--archive .cts-tag { font-size: var(--cts-text-2xs); }

.cts-card--archive .cts-meta {
	font-size: var(--cts-text-2xs);
	gap: 0.75rem;
	text-transform: uppercase;
}

/* Excerpt stays 12px at every width here — no step up at sm. */
.cts-card--archive .cts-card__excerpt { font-size: var(--cts-text-xs); }

@media (min-width: 640px) {
	.cts-card--archive .cts-card__excerpt { font-size: var(--cts-text-xs); }
}

.cts-card--archive .cts-readmore { font-size: var(--cts-text-2xs); }

/* -- Wide card (Editor's Picks) -- */
.cts-wide {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border: 1px solid var(--cts-gray-100);
	border-radius: var(--cts-radius-sm);
	padding: 1rem;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.cts-wide + .cts-wide { margin-top: 1.5rem; }

.cts-wide:hover { box-shadow: var(--cts-shadow-lg); border-color: var(--cts-gray-200); }

@media (min-width: 768px) { .cts-wide { flex-direction: row; } }

.cts-wide__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--cts-dark);
	overflow: hidden;
	border-radius: var(--cts-radius-xs);
	flex-shrink: 0;
}

@media (min-width: 768px) { .cts-wide__media { width: 14rem; } }

.cts-wide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cts-wide:hover .cts-wide__media img { transform: scale(1.05); }

.cts-wide__tag { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; }

.cts-wide__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
}

.cts-wide__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-base);
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--cts-dark);
	transition: color 0.2s ease;
}

.cts-wide__title a { color: inherit; }
.cts-wide:hover .cts-wide__title a { color: var(--cts-mid); }

.cts-wide__excerpt {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-500);
	line-height: 1.625;
}

/* Editor's Picks meta sits at 10px, sentence case. */
.cts-wide .cts-meta { font-size: var(--cts-text-2xs); gap: 0.75rem; }

.cts-wide__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 0.5rem;
	border-top: 1px solid var(--cts-gray-50);
}

.cts-wide__foot span {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-3xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-bright);
}

.cts-wide:hover .cts-wide__foot span { text-decoration: underline; }

/* Editor's Picks stream */
.cts-picks { display: flex; flex-direction: column; }

/* Contact page intro copy comes from the_content() */
.cts-contact__lede p { margin-bottom: 0.75rem; }
.cts-contact__lede p:last-child { margin-bottom: 0; }

/* ==========================================================================
   8. SIDEBAR WIDGETS
   ========================================================================== */

.cts-sidebar { display: flex; flex-direction: column; gap: 2.5rem; }

@media (min-width: 1024px) { .cts-sidebar { gap: 3rem; } }

.cts-widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-left: 4px solid var(--cts-bright);
	padding-left: 0.75rem;
	padding-bottom: 0.125rem;
	margin-bottom: 1.25rem;
}

.cts-widget__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-dark);
}

/* -- Newsletter widget -- */
.cts-widget-news {
	position: relative;
	overflow: hidden;
	background: var(--cts-dark);
	color: var(--cts-white);
	padding: 1.5rem;
	border: 1px solid var(--cts-deep);
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-xl);
}

.cts-widget-news::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 6rem;
	height: 6rem;
	background: rgb(0 168 232 / 0.1);
	border-radius: var(--cts-radius-full);
	filter: blur(20px);
}

.cts-widget-news > * { position: relative; }

.cts-widget-news__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-bright);
}

.cts-widget-news__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xl);
	line-height: 1.25;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-white);
	margin-bottom: 0.5rem;
}

.cts-widget-news__text {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-300);
	line-height: 1.625;
	margin-bottom: 1.25rem;
}

.cts-widget-news__note {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-align: center;
	margin-top: 0.75rem;
}

/* -- Recent / trending lists -- */
.cts-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
}

.cts-list--trending { gap: 1rem; }

.cts-list__item {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	padding: 0.375rem;
	border-radius: var(--cts-radius-sm);
	transition: background 0.2s ease;
}

.cts-list__item:hover { background: var(--cts-gray-50); }

.cts-list--trending .cts-list__item {
	align-items: center;
	gap: 1rem;
	padding: 0.5rem;
	border-bottom: 1px solid var(--cts-gray-100);
}

.cts-list--trending .cts-list__item:last-child { border-bottom: 0; }

.cts-list__media {
	position: relative;
	width: 5rem;
	height: 4rem;
	flex-shrink: 0;
	background: var(--cts-dark);
	overflow: hidden;
	border-radius: var(--cts-radius-xs);
}

.cts-list--trending .cts-list__media { width: 4rem; height: 4rem; }

.cts-list__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cts-list--trending .cts-list__media img { filter: brightness(0.9); }

.cts-list__item:hover .cts-list__media img { transform: scale(1.05); }

.cts-list__rank {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cts-dark);
	color: var(--cts-bright);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	border-left: 1px solid var(--cts-deep);
	border-bottom: 1px solid var(--cts-deep);
	box-shadow: var(--cts-shadow-md);
}

.cts-list__body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cts-list__cat {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-mid);
}

.cts-list--trending .cts-list__cat { color: var(--cts-bright); }

.cts-list__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--cts-dark);
	transition: color 0.2s ease;
}

.cts-list__title a { color: inherit; }
.cts-list__item:hover .cts-list__title a { color: var(--cts-mid); }

.cts-list__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-2xs);
	color: var(--cts-gray-400);
}

.cts-list__meta .cts-icon { width: 0.625rem; height: 0.625rem; }

/* Generic WP widget fallback so Appearance > Widgets stays usable */
.cts-sidebar .widget ul { list-style: none; }

.cts-sidebar .widget li {
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--cts-gray-100);
	font-size: var(--cts-text-sm);
}

.cts-sidebar .widget-title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-dark);
	border-left: 4px solid var(--cts-bright);
	padding-left: 0.75rem;
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   9. FORMS (newsletter + contact)
   ========================================================================== */

.cts-field { display: flex; flex-direction: column; gap: 0.25rem; }

.cts-label {
	display: block;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-dark);
}

.cts-input,
.cts-textarea {
	width: 100%;
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-200);
	font-size: var(--cts-text-xs);
	padding: 0.75rem 1rem;
	border-radius: var(--cts-radius-sm);
	color: var(--cts-gray-700);
	transition: all 0.2s ease;
}

.cts-input:focus,
.cts-textarea:focus {
	outline: none;
	border-color: var(--cts-bright);
	background: var(--cts-white);
}

.cts-textarea { resize: vertical; min-height: 8rem; }

/* Dark newsletter inputs */
.cts-input--dark {
	background: var(--cts-deep);
	color: var(--cts-white);
	border-color: var(--cts-mid);
}

.cts-input--dark::placeholder { color: var(--cts-gray-400); }

.cts-input--dark:focus {
	background: var(--cts-deep);
	border-color: var(--cts-bright);
	box-shadow: 0 0 0 1px var(--cts-bright);
}

.cts-newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; }

.cts-newsletter-form .cts-btn {
	background: var(--cts-bright);
	color: var(--cts-dark);
	box-shadow: var(--cts-shadow-md);
	padding-block: 0.75rem;
}

.cts-newsletter-form .cts-btn:hover { background: var(--cts-white); }

/* Inline (band) variant */
.cts-newsletter-form--inline { max-width: 28rem; margin-inline: auto; gap: 0.5rem; }

@media (min-width: 640px) {
	.cts-newsletter-form--inline { flex-direction: row; }
	.cts-newsletter-form--inline .cts-input { flex: 1; }
	.cts-newsletter-form--inline .cts-btn { flex-shrink: 0; }
}

.cts-newsletter-form--inline .cts-input {
	background: var(--cts-dark);
	border-color: var(--cts-mid);
	color: var(--cts-white);
	padding-block: 0.75rem;
}

.cts-newsletter-form--inline .cts-input::placeholder { color: var(--cts-gray-400); }

/* Success / notice panels */
.cts-notice {
	background: var(--cts-deep);
	border: 1px solid var(--cts-bright);
	color: var(--cts-white);
	padding: 1rem;
	border-radius: var(--cts-radius-sm);
	text-align: center;
	animation: cts-fade-in 0.3s ease both;
}

.cts-notice__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-bright);
}

.cts-notice__text {
	font-size: var(--cts-text-xxs);
	color: var(--cts-gray-400);
	margin-top: 0.25rem;
}

.cts-notice--error {
	background: var(--cts-white);
	border-color: var(--cts-pinterest);
	color: var(--cts-gray-700);
	text-align: left;
}

.cts-notice--error .cts-notice__title { color: var(--cts-pinterest); }
.cts-notice--error .cts-notice__text { color: var(--cts-gray-600); }

/* The success notice takes the form's place for 3s, then hands it back.
   The explicit [hidden] rule is required because .cts-newsletter-form sets
   `display: flex`, which would otherwise beat the attribute's display:none. */
.cts-newsletter-form[hidden] { display: none; }

/* Same reason: .cts-form is display:flex and would beat [hidden]. */
.cts-form[hidden] { display: none; }

.cts-newsletter-slot > .cts-notice--error { margin-bottom: 0.75rem; }

.cts-notice[data-cts-autohide] {
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.cts-notice.is-leaving {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

.cts-btn[disabled] { opacity: 0.65; cursor: default; }
.cts-btn[disabled]:hover { transform: none; }

/* Honeypot */
.cts-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
}

/* ==========================================================================
   9b. NEWSLETTER MODAL
   Opened by the header / drawer Newsletter button.
   ========================================================================== */

.cts-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.cts-modal.is-open {
	display: flex;
	animation: cts-fade-in 0.2s ease both;
}

.cts-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.cts-modal__box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 28rem;
	background: var(--cts-dark);
	border: 1px solid var(--cts-mid);
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-2xl);
	padding: 1.5rem;
	color: var(--cts-white);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	animation: cts-scale-in 0.25s ease both;
}

.cts-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: var(--cts-gray-400);
	transition: color 0.2s ease;
	line-height: 0;
}

.cts-modal__close:hover { color: var(--cts-white); }

.cts-modal__close svg { width: 1.25rem; height: 1.25rem; }

.cts-modal__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cts-bright);
	padding-right: 2rem;
}

.cts-modal__kicker .cts-icon { width: 1.25rem; height: 1.25rem; }

.cts-modal__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-2xl);
	line-height: 1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-white);
	margin-bottom: -0.75rem;
}

.cts-modal__text {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-300);
	line-height: 1.625;
}

.cts-modal__note {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-align: center;
}

/* The modal's confirmation sits centred, matching the prototype's panel. */
.cts-modal .cts-notice {
	background: transparent;
	border-color: rgb(0 168 232 / 0.3);
	padding: 1.25rem 1rem;
}

.cts-modal .cts-notice__title {
	font-size: var(--cts-text-lg);
	font-weight: var(--cts-fw-black);
	letter-spacing: 0.05em;
	color: var(--cts-white);
}

.cts-modal .cts-notice__text { color: var(--cts-gray-300); font-size: var(--cts-text-xs); }

body.cts-modal-open { overflow: hidden; }

@keyframes cts-scale-in {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   10. NEWSLETTER BAND (full width)
   ========================================================================== */

.cts-band {
	position: relative;
	overflow: hidden;
	background: var(--cts-deep);
	color: var(--cts-white);
	padding: 4rem 1rem;
}

.cts-band::before,
.cts-band::after {
	content: "";
	position: absolute;
	border-radius: var(--cts-radius-full);
	pointer-events: none;
}

.cts-band::before {
	top: 0;
	left: 25%;
	width: 500px;
	height: 500px;
	background: rgb(0 168 232 / 0.1);
	filter: blur(64px);
	transform: translateY(-50%);
}

.cts-band::after {
	bottom: 0;
	right: 25%;
	width: 400px;
	height: 400px;
	background: rgb(0 23 31 / 0.4);
	filter: blur(40px);
	transform: translateY(50%);
}

.cts-band__inner {
	position: relative;
	z-index: 10;
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cts-band__kicker {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-bright);
}

.cts-band__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-2xl);
	line-height: 1;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-white);
	max-width: 42rem;
	margin-inline: auto;
}

@media (min-width: 640px) { .cts-band__title { font-size: var(--cts-text-3xl); } }
@media (min-width: 768px) { .cts-band__title { font-size: var(--cts-text-4-5xl); } }

.cts-band__text {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-200);
	line-height: 1.625;
	max-width: 36rem;
	margin-inline: auto;
}

@media (min-width: 640px) { .cts-band__text { font-size: var(--cts-text-sm); } }

.cts-band__note { font-size: var(--cts-text-xs); color: var(--cts-gray-300); }

.cts-band .cts-notice {
	background: var(--cts-dark);
	max-width: 28rem;
	margin-inline: auto;
	padding: 1.5rem;
	box-shadow: var(--cts-shadow-xl);
}

.cts-band .cts-notice__title { font-size: var(--cts-text-base); font-weight: var(--cts-fw-black); }
.cts-band .cts-notice__text { color: var(--cts-gray-300); font-size: var(--cts-text-xs); }

/* ==========================================================================
   11. ARCHIVE / CATEGORY
   ========================================================================== */

.cts-page-pad { padding-block: 2.5rem; }

@media (min-width: 768px) { .cts-page-pad { padding-block: 4rem; } }

.cts-archive-head {
	text-align: center;
	max-width: 36rem;
	margin: 0 auto 2.5rem;
}

@media (min-width: 768px) { .cts-archive-head { margin-bottom: 3.5rem; } }

.cts-archive-head__eyebrow { margin-bottom: 0.5rem; }

.cts-archive-head__title {
	display: inline-block;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-4xl);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
	border-bottom: 4px solid var(--cts-bright);
	padding-bottom: 1rem;
	line-height: 1.1;
}

@media (min-width: 768px) { .cts-archive-head__title { font-size: var(--cts-text-5xl); } }

.cts-archive-head__desc {
	font-size: var(--cts-text-sm);
	color: var(--cts-gray-500);
	margin-top: 0.75rem;
}

.cts-empty {
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-200);
	text-align: center;
	padding: 4rem 1rem;
}

.cts-empty p {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-lg);
	text-transform: uppercase;
	color: var(--cts-gray-400);
}

.cts-empty .cts-btn { margin-top: 1rem; }

/* Pagination */
.cts-pagination { margin-top: 3rem; display: flex; justify-content: center; }

.cts-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.cts-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--cts-gray-200);
	border-radius: var(--cts-radius-sm);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	color: var(--cts-dark);
	transition: all 0.2s ease;
}

.cts-pagination .page-numbers:hover {
	background: var(--cts-dark);
	border-color: var(--cts-dark);
	color: var(--cts-white);
}

.cts-pagination .page-numbers.current {
	background: var(--cts-bright);
	border-color: var(--cts-bright);
	color: var(--cts-dark);
}

.cts-pagination .page-numbers.dots:hover {
	background: none;
	color: var(--cts-dark);
	border-color: var(--cts-gray-200);
}

/* ==========================================================================
   12. SINGLE POST
   ========================================================================== */

.cts-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) { .cts-breadcrumb { margin-bottom: 2rem; } }

.cts-breadcrumb a { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }

.cts-breadcrumb a:hover { color: var(--cts-bright); }

.cts-breadcrumb__sep { color: var(--cts-gray-400); flex-shrink: 0; }

.cts-breadcrumb__cat { color: var(--cts-gray-400); font-weight: var(--cts-fw-semibold); }

.cts-breadcrumb__current,
.cts-breadcrumb__sep--last { display: none; }

@media (min-width: 640px) {
	.cts-breadcrumb__current {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: var(--cts-gray-600);
		font-weight: var(--cts-fw-medium);
		max-width: 20rem;
	}
	.cts-breadcrumb__sep--last { display: inline; }
}

.cts-single__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.cts-single__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-2xl);
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
}

@media (min-width: 640px) { .cts-single__title { font-size: var(--cts-text-3xl); } }
@media (min-width: 768px) { .cts-single__title { font-size: var(--cts-text-4-5xl); } }

.cts-single__byline {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-block: 0.75rem;
	border-top: 1px solid var(--cts-gray-100);
	border-bottom: 1px solid var(--cts-gray-100);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-500);
}

.cts-author { display: flex; align-items: center; gap: 0.75rem; }

.cts-author__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--cts-radius-full);
	object-fit: cover;
	border: 1px solid var(--cts-gray-100);
	flex-shrink: 0;
}

.cts-author__name {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--cts-dark);
}

.cts-author__name a { color: inherit; }

.cts-author__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.125rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-2xs);
	color: var(--cts-gray-400);
}

.cts-author__meta .cts-icon { width: 0.75rem; height: 0.75rem; }

/* -- Share bar -- */
.cts-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	padding-top: 0.5rem;
}

.cts-share__label {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-dark);
	margin-right: 0.375rem;
}

.cts-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--cts-text-xs);
	font-weight: var(--cts-fw-semibold);
	padding: 0.5rem 0.75rem;
	border-radius: var(--cts-radius-full);
	border: 1px solid;
	box-shadow: var(--cts-shadow-sm);
	transition: all 0.3s ease;
}

.cts-share__btn:hover { transform: translateY(-2px); }

.cts-share__btn span { display: none; }

@media (min-width: 640px) { .cts-share__btn span { display: inline; } }

.cts-share__btn svg { width: 0.875rem; height: 0.875rem; }

.cts-share__btn--fb { border-color: rgb(24 119 242 / 0.3); color: var(--cts-facebook); }
.cts-share__btn--fb:hover { border-color: var(--cts-facebook); background: rgb(24 119 242 / 0.05); color: var(--cts-facebook); }
.cts-share__btn--fb svg { fill: var(--cts-facebook); }

.cts-share__btn--x { border-color: rgb(0 0 0 / 0.3); color: #000; }
.cts-share__btn--x:hover { border-color: #000; background: rgb(0 0 0 / 0.05); color: #000; }
.cts-share__btn--x svg { width: 0.75rem; height: 0.75rem; fill: #000; }

.cts-share__btn--pin { border-color: rgb(230 0 35 / 0.3); color: var(--cts-pinterest); }
.cts-share__btn--pin:hover { border-color: var(--cts-pinterest); background: rgb(230 0 35 / 0.05); color: var(--cts-pinterest); }
.cts-share__btn--pin b { font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: var(--cts-text-xs); line-height: 1; }

.cts-share__btn--copy {
	padding: 0.625rem;
	border-color: var(--cts-gray-300);
	color: var(--cts-gray-500);
}

.cts-share__btn--copy:hover {
	border-color: var(--cts-dark);
	color: var(--cts-dark);
	background: var(--cts-gray-50);
}

.cts-share__toast {
	display: none;
	margin-top: 0.5rem;
	background: var(--cts-deep);
	border: 1px solid var(--cts-bright);
	color: var(--cts-white);
	font-size: var(--cts-text-xs);
	padding: 0.5rem 1rem;
	border-radius: var(--cts-radius-sm);
}

.cts-share__toast.is-visible {
	display: inline-block;
	animation: cts-fade-in 0.3s ease both;
}

.cts-share__toast b { color: var(--cts-bright); }

/* -- Featured image -- */
.cts-single__figure {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--cts-radius-sm);
	background: var(--cts-dark);
	box-shadow: var(--cts-shadow-xl);
	margin-block: 2rem;
}

.cts-single__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.cts-single__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
	padding: 1rem;
	color: rgb(255 255 255 / 0.9);
	font-size: var(--cts-text-xs);
	margin: 0;
}

/* -- Article body (the_content) -- */
.cts-prose {
	color: var(--cts-gray-700);
	font-size: var(--cts-text-sm);
	line-height: 1.625;
}

@media (min-width: 768px) { .cts-prose { font-size: var(--cts-text-base); } }

.cts-prose p { margin-bottom: 1rem; color: var(--cts-gray-700); line-height: 1.625; }

/* The prototype's lead paragraph treatment. The imported articles carry
   `cts-lead`; `lead` is accepted too for hand-written content. */
.cts-prose p.lead,
.cts-prose p.cts-lead {
	font-size: var(--cts-text-lg);
	font-weight: var(--cts-fw-light);
	color: rgb(0 52 89 / 0.8);
	line-height: 1.625;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.cts-prose p.lead,
	.cts-prose p.cts-lead { font-size: var(--cts-text-xl); }
}

.cts-prose h2 {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-2xl);
	letter-spacing: -0.025em;
	color: var(--cts-dark);
	margin-top: 2rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

@media (min-width: 768px) { .cts-prose h2 { font-size: var(--cts-text-3xl); } }

.cts-prose h3 {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xl);
	color: var(--cts-dark);
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.cts-prose a { color: var(--cts-mid); text-decoration: underline; }
.cts-prose a:hover { color: var(--cts-bright); }

.cts-prose ul, .cts-prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.cts-prose ul { list-style: disc; }
.cts-prose ol { list-style: decimal; }
.cts-prose li { margin-bottom: 0.5rem; }

.cts-prose blockquote {
	border-left: 4px solid var(--cts-bright);
	padding-left: 1.25rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--cts-gray-600);
}

.cts-prose img { border-radius: var(--cts-radius-sm); margin-block: 1.5rem; }

.cts-prose figure { margin: 1.5rem 0; }

.cts-prose figcaption {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-align: center;
	margin-top: 0.5rem;
}

.cts-prose code {
	font-family: var(--cts-font-mono);
	font-size: 0.9em;
	background: var(--cts-gray-100);
	padding: 0.125rem 0.375rem;
	border-radius: var(--cts-radius-xs);
}

.cts-prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }

.cts-prose th, .cts-prose td {
	border: 1px solid var(--cts-gray-200);
	padding: 0.625rem 0.875rem;
	text-align: left;
	font-size: var(--cts-text-sm);
}

.cts-prose th {
	background: var(--cts-gray-50);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	text-transform: uppercase;
	font-size: var(--cts-text-xs);
	letter-spacing: 0.05em;
}

/* -- Editorial synergy panel -- */
.cts-synergy {
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-100);
	padding: 1.5rem;
	border-radius: var(--cts-radius-sm);
	margin-block: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cts-synergy__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-dark);
}

.cts-synergy__text { font-size: var(--cts-text-xs); color: var(--cts-gray-600); line-height: 1.625; }

.cts-synergy__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-top: 0.5rem;
}

@media (min-width: 640px) { .cts-synergy__grid { grid-template-columns: repeat(2, 1fr); } }

.cts-synergy__cell {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--cts-gray-200);
}

.cts-synergy__cell img { width: 100%; height: 100%; object-fit: cover; }

.cts-synergy__cap {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	background: rgb(0 23 31 / 0.8);
	color: var(--cts-white);
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-2xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.5rem;
}

.cts-synergy__note { font-size: var(--cts-text-xs); color: var(--cts-gray-400); text-align: center; }

/* -- Tags + author box -- */
.cts-single__footer {
	padding-top: 2rem;
	border-top: 1px solid var(--cts-gray-100);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cts-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.cts-tags__label {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-dark);
	padding-block: 0.375rem;
	margin-right: 0.5rem;
}

.cts-tags a {
	background: var(--cts-gray-100);
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-600);
	padding: 0.25rem 0.75rem;
	border-radius: var(--cts-radius-sm);
	transition: all 0.2s ease;
}

.cts-tags a:hover { background: rgb(0 126 167 / 0.1); color: var(--cts-mid); }

.cts-authorbox {
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-100);
	padding: 1.25rem;
	border-radius: var(--cts-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

@media (min-width: 640px) { .cts-authorbox { flex-direction: row; align-items: center; } }

.cts-authorbox__avatar {
	width: 4rem;
	height: 4rem;
	border-radius: var(--cts-radius-full);
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--cts-gray-200);
}

.cts-authorbox__name {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--cts-dark);
	margin-bottom: 0.25rem;
}

.cts-authorbox__bio { font-size: var(--cts-text-xs); color: var(--cts-gray-500); line-height: 1.625; }

/* -- Related posts -- */
.cts-related { margin-top: 3rem; }

/* -- Comments -- */
.cts-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--cts-gray-100); }

.cts-comments__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-lg);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-dark);
	margin-bottom: 1.5rem;
}

.cts-comments .comment-list { list-style: none; }

.cts-comments .comment-list li { margin-bottom: 1.5rem; }

.cts-comments .comment-body {
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-100);
	padding: 1.25rem;
	border-radius: var(--cts-radius-sm);
}

.cts-comments .comment-author {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-sm);
	text-transform: uppercase;
	color: var(--cts-dark);
}

.cts-comments .comment-metadata {
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-2xs);
	color: var(--cts-gray-400);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.cts-comments .comment-respond { margin-top: 2rem; }

.cts-comments .comment-reply-title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-base);
	text-transform: uppercase;
	color: var(--cts-dark);
	margin-bottom: 1rem;
}

.cts-comments input[type="text"],
.cts-comments input[type="email"],
.cts-comments input[type="url"],
.cts-comments textarea {
	width: 100%;
	background: var(--cts-gray-50);
	border: 1px solid var(--cts-gray-200);
	padding: 0.75rem 1rem;
	border-radius: var(--cts-radius-sm);
	font-size: var(--cts-text-sm);
	margin-bottom: 0.75rem;
}

.cts-comments .submit {
	background: var(--cts-dark);
	color: var(--cts-white);
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.875rem 1.5rem;
	border-radius: var(--cts-radius-full);
	transition: background 0.3s ease;
}

.cts-comments .submit:hover { background: var(--cts-mid); }

/* ==========================================================================
   13. ABOUT PAGE
   ========================================================================== */

.cts-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 1024px) { .cts-about { grid-template-columns: 7fr 5fr; gap: 4rem; } }

.cts-about__text { display: flex; flex-direction: column; gap: 2.5rem; }

.cts-about__intro { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.cts-about__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-4xl);
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
}

.cts-about__title span { color: var(--cts-bright); }

@media (min-width: 768px) { .cts-about__title { font-size: var(--cts-text-5xl); } }
@media (min-width: 1024px) { .cts-about__title { font-size: var(--cts-text-6-5xl); } }

.cts-about__rule { width: 5rem; height: 0.375rem; background: var(--cts-bright); }

.cts-about__block { display: flex; flex-direction: column; gap: 0.75rem; }

.cts-about__block-head { display: flex; align-items: center; gap: 0.625rem; }

.cts-about__block-head .cts-icon { width: 1.25rem; height: 1.25rem; }

.cts-about__block-title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-lg);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cts-dark);
}

.cts-about__block p {
	color: var(--cts-gray-600);
	line-height: 1.625;
	font-size: var(--cts-text-sm);
}

@media (min-width: 768px) { .cts-about__block p { font-size: var(--cts-text-base); } }

/* Editor-authored sections: each heading is wrapped with its accent icon by
   template-about.php, the paragraph that follows keeps the block rhythm. */
.cts-about__body .cts-about__block-head { margin-bottom: 0.75rem; }

.cts-about__body p {
	color: var(--cts-gray-600);
	line-height: 1.625;
	font-size: var(--cts-text-sm);
	margin-bottom: 2.5rem;
}

@media (min-width: 768px) { .cts-about__body p { font-size: var(--cts-text-base); } }

.cts-about__body p:last-child { margin-bottom: 0; }

.cts-about__body ul, .cts-about__body ol {
	padding-left: 1.5rem;
	margin-bottom: 2.5rem;
	color: var(--cts-gray-600);
}

.cts-about__body ul { list-style: disc; }
.cts-about__body ol { list-style: decimal; }
.cts-about__body li { margin-bottom: 0.5rem; line-height: 1.625; }
.cts-about__body a { color: var(--cts-mid); text-decoration: underline; }

/* Image showcase */
.cts-about__media { display: flex; flex-direction: column; gap: 1.5rem; }

.cts-shot {
	position: relative;
	overflow: hidden;
	border-radius: var(--cts-radius-sm);
	background: var(--cts-dark);
	border: 1px solid var(--cts-gray-100);
	box-shadow: var(--cts-shadow-xl);
	transition: transform 0.3s ease;
}

.cts-shot:hover { transform: translateY(-4px); }

.cts-shot img { width: 100%; height: 12rem; object-fit: cover; filter: brightness(0.95); }

@media (min-width: 768px) { .cts-shot img { height: 14rem; } }

.cts-shot__cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
	padding: 0.75rem;
	color: var(--cts-white);
}

.cts-shot__cap strong {
	display: block;
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-bright);
}

.cts-shot__cap span { font-size: var(--cts-text-xs); color: var(--cts-gray-200); }

.cts-about__subgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.cts-shot--sm { box-shadow: var(--cts-shadow-lg); }

.cts-shot--sm img { height: 9rem; filter: none; }

@media (min-width: 768px) { .cts-shot--sm img { height: 11rem; } }

.cts-shot--sm .cts-shot__cap {
	background: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent);
	padding: 0.5rem;
}

.cts-shot--sm .cts-shot__cap strong { font-weight: var(--cts-fw-bold); letter-spacing: 0.05em; }

.cts-shot--mid .cts-shot__cap strong { color: var(--cts-mid); }

/* ==========================================================================
   14. CONTACT PAGE
   ========================================================================== */

.cts-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) { .cts-contact { grid-template-columns: 5fr 7fr; gap: 4rem; } }

.cts-contact__aside { display: flex; flex-direction: column; gap: 2rem; }

.cts-contact__intro { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }

.cts-contact__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-3xl);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
	line-height: 1.05;
}

@media (min-width: 640px) { .cts-contact__title { font-size: var(--cts-text-4xl); } }
@media (min-width: 768px) { .cts-contact__title { font-size: var(--cts-text-5xl); } }

.cts-contact__lede { font-size: var(--cts-text-sm); color: var(--cts-gray-500); line-height: 1.625; }

.cts-contact__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	width: 100%;
	border-radius: var(--cts-radius-sm);
	overflow: hidden;
	background: var(--cts-dark);
	box-shadow: var(--cts-shadow-xl);
	border: 1px solid var(--cts-gray-100);
	display: none;
}

@media (min-width: 768px) { .cts-contact__photo { display: block; } }

.cts-contact__photo img { width: 100%; height: 100%; object-fit: cover; }

.cts-contact__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent 50%);
}

.cts-contact__photo-cap {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
	color: var(--cts-white);
}

.cts-contact__photo-cap strong {
	display: block;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	font-weight: var(--cts-fw-normal);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cts-bright);
}

.cts-contact__photo-cap span { font-size: var(--cts-text-xs); color: var(--cts-gray-200); }

.cts-contact__lines {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-top: 1px solid var(--cts-gray-100);
	padding-top: 1.5rem;
	font-size: var(--cts-text-sm);
	color: var(--cts-gray-600);
}

.cts-contact__line { display: flex; align-items: center; gap: 0.75rem; }

.cts-contact__line a { color: inherit; }
.cts-contact__line a:hover { color: var(--cts-mid); }

/* Form panel */
.cts-contact__panel {
	background: var(--cts-white);
	border: 1px solid var(--cts-gray-100);
	padding: 1.5rem;
	border-radius: var(--cts-radius-sm);
	box-shadow: var(--cts-shadow-xl);
}

@media (min-width: 640px) { .cts-contact__panel { padding: 2rem; } }

.cts-contact__panel-title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xl);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-dark);
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--cts-gray-100);
	padding-bottom: 0.75rem;
}

@media (min-width: 640px) { .cts-contact__panel-title { font-size: var(--cts-text-2xl); } }

.cts-form { display: flex; flex-direction: column; gap: 1.25rem; }

.cts-form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 640px) { .cts-form__row { grid-template-columns: repeat(2, 1fr); } }

.cts-contact__secure {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--cts-gray-50);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Contact success panel matches the prototype's dark confirmation card */
.cts-contact__success {
	background: var(--cts-deep);
	border: 1px solid var(--cts-bright);
	color: var(--cts-white);
	padding: 2rem;
	border-radius: var(--cts-radius-sm);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	box-shadow: var(--cts-shadow-lg);
	animation: cts-fade-in 0.3s ease both;
}

.cts-contact__success-mark {
	width: 3rem;
	height: 3rem;
	background: rgb(0 168 232 / 0.1);
	color: var(--cts-bright);
	border-radius: var(--cts-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--cts-text-xl);
	font-weight: var(--cts-fw-bold);
}

.cts-contact__success h3 {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-lg);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cts-white);
}

.cts-contact__success p {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-300);
	line-height: 1.625;
	max-width: 24rem;
}

/* ==========================================================================
   15. LEGAL PAGES
   ========================================================================== */

.cts-legal { display: flex; flex-direction: column; gap: 2rem; }

@media (min-width: 768px) { .cts-legal { gap: 3rem; } }

.cts-legal__header {
	border-bottom: 2px solid var(--cts-dark);
	padding-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cts-legal__head-row { display: flex; align-items: center; gap: 0.75rem; }

.cts-legal__icon { width: 2rem; height: 2rem; flex-shrink: 0; color: var(--cts-bright); }
.cts-legal__icon--mid { color: var(--cts-mid); }

.cts-legal__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-3xl);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
	line-height: 1.1;
}

@media (min-width: 768px) { .cts-legal__title { font-size: var(--cts-text-4-5xl); } }

.cts-legal__updated {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.25rem;
	font-family: var(--cts-font-mono);
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.cts-legal__intro { font-size: var(--cts-text-sm); color: var(--cts-gray-700); line-height: 1.625; }

@media (min-width: 768px) { .cts-legal__intro { font-size: var(--cts-text-base); } }

/* Section list rendered from the page's own editor content */
.cts-legal__body { display: flex; flex-direction: column; }

.cts-legal__body h2 {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-lg);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cts-dark);
	margin-bottom: 0.75rem;
}

@media (min-width: 640px) { .cts-legal__body h2 { font-size: var(--cts-text-xl); } }

.cts-legal__body h2 + p { margin-top: 0; }

.cts-legal__body p {
	color: var(--cts-gray-600);
	line-height: 1.625;
	font-size: var(--cts-text-sm);
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.cts-legal__body p { font-size: var(--cts-text-base); margin-bottom: 2.5rem; }
}

.cts-legal__body p:last-child { margin-bottom: 0; }

.cts-legal__body ul, .cts-legal__body ol {
	padding-left: 1.5rem;
	margin-bottom: 2rem;
	color: var(--cts-gray-600);
}

.cts-legal__body ul { list-style: disc; }
.cts-legal__body ol { list-style: decimal; }
.cts-legal__body li { margin-bottom: 0.5rem; line-height: 1.625; }

.cts-legal__body a { color: var(--cts-mid); text-decoration: underline; }

/* ==========================================================================
   16. DEFAULT PAGE / 404
   ========================================================================== */

.cts-page__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-3xl);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cts-dark);
	border-bottom: 2px solid var(--cts-dark);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	line-height: 1.1;
}

@media (min-width: 768px) { .cts-page__title { font-size: var(--cts-text-4-5xl); } }

.cts-404 { text-align: center; padding-block: 5rem; }

.cts-404__code {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-6-5xl);
	color: var(--cts-bright);
	line-height: 1;
}

.cts-404__title {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-2xl);
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--cts-dark);
	margin-block: 1rem;
}

.cts-404__text { color: var(--cts-gray-500); font-size: var(--cts-text-sm); margin-bottom: 2rem; }

.cts-404__search { max-width: 24rem; margin-inline: auto; }

.cts-404__search .cts-searchform input[type="search"] {
	background: var(--cts-gray-50);
	color: var(--cts-gray-700);
	border-color: var(--cts-gray-200);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.cts-footer {
	background: var(--cts-dark);
	color: var(--cts-white);
	border-top: 1px solid var(--cts-deep);
	padding-top: 4rem;
	padding-bottom: 2rem;
}

.cts-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--cts-deep);
}

@media (min-width: 768px) { .cts-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cts-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.cts-footer__col { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.cts-footer__brand {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-black);
	font-size: var(--cts-text-xl);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-white);
}

.cts-footer__brand:hover { color: var(--cts-bright); }
.cts-footer__brand span { color: var(--cts-bright); }

.cts-footer__about {
	color: var(--cts-gray-400);
	font-size: var(--cts-text-sm);
	line-height: 1.625;
	max-width: 24rem;
}

.cts-footer__heading {
	font-family: var(--cts-font-display);
	font-weight: var(--cts-fw-bold);
	font-size: var(--cts-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cts-bright);
}

.cts-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.cts-footer__links a { font-size: var(--cts-text-sm); color: var(--cts-gray-400); }

.cts-footer__links a:hover { color: var(--cts-white); text-decoration: underline; }

/* Legal links render one step smaller, matching the prototype */
.cts-footer__links .cts-menu-legal a { font-size: var(--cts-text-xs); }

.cts-social { display: flex; gap: 0.75rem; padding-top: 0.5rem; }

.cts-social a {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cts-radius-sm);
	background: var(--cts-deep);
	color: var(--cts-gray-300);
	transition: all 0.3s ease;
	overflow: hidden;
}

.cts-social a:hover {
	background: var(--cts-bright);
	color: var(--cts-white);
	transform: translateY(-4px);
}

.cts-social svg { width: 1.125rem; height: 1.125rem; }

.cts-social img { width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; }

.cts-trust {
	background: var(--cts-white);
	padding: 0.75rem;
	border-radius: var(--cts-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cts-gray-200);
	box-shadow: var(--cts-shadow-sm);
	transition: box-shadow 0.3s ease;
	width: 100%;
}

.cts-trust:hover { box-shadow: var(--cts-shadow-md); }

.cts-trust img { width: 100%; max-width: 200px; height: auto; object-fit: contain; }

.cts-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 2rem;
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-500);
}

@media (min-width: 640px) { .cts-footer__bottom { flex-direction: row; gap: 0; } }

.cts-footer__bottom p { display: flex; align-items: center; gap: 0.25rem; }

.cts-footer__bottom svg {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--cts-bright);
	fill: var(--cts-bright);
}

/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */

@keyframes cts-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cts-fade-in-down {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   19. WORDPRESS CORE CLASSES
   ========================================================================== */

.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; }

.wp-caption-text {
	font-size: var(--cts-text-xs);
	color: var(--cts-gray-400);
	text-align: center;
	margin-top: 0.5rem;
}

.sticky, .gallery-caption, .bypostauthor { display: block; }

.admin-bar .cts-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .cts-header { top: 46px; }
}