/*
 * PtechBlog — Moving Champs brand layer.
 *
 * blog.css was built against a Tailwind root (the theme's previous home) and
 * reads that root's design tokens — --font-display, --color-primary,
 * --layout-max … — plus Tailwind's Preflight reset. This root is not Tailwind,
 * so neither exists here. This file supplies both, with Moving Champs values.
 *
 * Loaded AFTER blog.css (functions.php) so the :root block below also wins over
 * the handful of --ptech-* values blog.css hardcodes for the old brand (its
 * teal and apricot rgb triplets and gradients).
 *
 * The reset sits in @layer base, exactly where Preflight sat: layered rules lose
 * to every unlayered rule whatever the order, so blog.css — and chrome.css —
 * always beat it.
 */

:root {
	/* ── The tokens blog.css reads ─────────────────────────────────────── */
	/* The site's type tokens (chrome.css, loaded on every blog page through
	   /blog-chrome/), with the families as a fallback if chrome.css is missing. */
	--font-display: var(--mc-font-heading, "Space Grotesk", Arial, sans-serif);
	--font-sans: var(--mc-font-body, "DM Sans", Arial, sans-serif);

	--color-content: #120505;
	--color-content-muted: #6f6767;
	--color-primary: #ed1c24;
	--color-primary-deep: #c1151c;
	--color-surface: #faf6f5;
	--color-surface-raised: #fff;
	--color-surface-tint: #fdeceb;
	--color-border: #ece7e7;
	--color-on-dark: #fff;
	--layout-max: 1320px;

	/* ── Old-brand values blog.css hardcodes, replaced ─────────────────── */
	--ptech-primary-dark: #000;
	--ptech-primary-rgb: 18, 5, 5;
	--ptech-ink-rgb: 18, 5, 5;
	--ptech-accent-rgb: 237, 28, 36;
	--ptech-accent-ink: #120505;
	--ptech-primary-grad: linear-gradient(135deg, #120505 0%, #3a0d0f 100%);
	--ptech-accent-grad: linear-gradient(135deg, #f97e1d 0%, #ed1c24 100%);
	--ptech-radius: 14px;
	--ptech-radius-sm: 8px;

	/* The solid site header keeps its 90px nav in view while scrolling (the top
	   bar scrolls away), so sticky sidebar widgets clear that. */
	--ptech-header-h: 90px;
}

@media (max-width: 991px) {
	:root {
		--ptech-header-h: 72px;
	}
}

@layer base {
	*,
	::before,
	::after,
	::backdrop {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		border: 0 solid;
	}

	html {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		tab-size: 4;
	}

	body {
		background: #fff;
		color: var(--color-content);
		font-family: var(--font-sans);
		font-size: clamp(15px, 1.5625vw, 16px);
		line-height: 1.7;
		-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-display);
		font-size: inherit;
		font-weight: 700;
		line-height: 1.2;
		color: var(--color-content);
	}

	a {
		color: inherit;
		text-decoration: inherit;
	}

	b,
	strong {
		font-weight: 700;
	}

	ol,
	ul,
	menu {
		list-style: none;
	}

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
		vertical-align: middle;
	}

	img,
	video {
		max-width: 100%;
		height: auto;
	}

	button,
	input,
	select,
	optgroup,
	textarea {
		font: inherit;
		color: inherit;
		background-color: transparent;
		border-radius: 0;
	}

	button {
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
	}

	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}
}

/* ── Hero ───────────────────────────────────────────────────────────────────
   blog.css sized the hero for a header that FLOATED over it: the top block
   filled the viewport (100svh) and the hero padded itself down by the header's
   height to clear it. The site header here sits in the flow above the page,
   so that made a full screen of empty band. It becomes a banner the height of
   its content instead — the same dark, photographed band as the site's own
   inner pages (the bread-banner), so moving from the site into the blog does not
   change the look. */
.ptech-top {
	min-height: 0;
}

.ptech-hero,
.ptech-top .ptech-hero {
	min-height: 0;
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.ptech-hero:not(.ptech-hero--banner),
.ptech-hero--home:not(.ptech-hero--banner) {
	background:
		linear-gradient(180deg, rgba(18, 5, 5, 0.86) 0%, rgba(18, 5, 5, 0.7) 60%, rgba(58, 13, 15, 0.82) 100%),
		url("/assets/img/services/bread-bg.webp") center / cover no-repeat;
}

/* ── Accent text ────────────────────────────────────────────────────────────
   --ptech-accent-ink is "accent-coloured TEXT on a light ground" (links, the
   article's h2s, the category block titles). The old brand's accent was a pale
   apricot that needed dark ink; this one is red, which reads on white by
   itself. So text-on-light takes the deep red, and the few places that paint
   the red as a BACKGROUND on hover get white text instead of the ink. */
.ptech-single__content a,
.ptech-cat-block__viewall,
.ptech-breadcrumb a:hover,
.ptech-cats__item a:hover,
.ig-feed__name:hover {
	color: var(--color-primary-deep);
}

.ptech-single__content h2,
.ptech-cat-block__title {
	color: var(--color-content);
}

.ptech-fb__field.is-set .ptech-fb__chip,
.ptech-fb__go:hover,
.ptech-fb__tag:hover,
.ptech-fb__tag:hover .ptech-fb__tagx,
.ptech-loadmore:hover,
.ptech-gal__cta:hover,
.ptech-author__socials a:hover {
	color: #fff;
}

/* ── Headings: the site sets its heading font bold, not regular ─────────── */
body .ptech-blog :is(h1, h2, h3, h4),
body .ptech-hero :is(h1, h2),
body .ptech-fb :is(h1, h2, h3),
body .ptech-cat-block__title {
	font-weight: 700;
	letter-spacing: 0;
}

/* ── Post cards ─────────────────────────────────────────────────────────────
   The featured images here are wide 16:9 banners with the title set in them,
   so the square-ish crop blog.css gave the media column cut the words off.
   A wider column at 16:9 shows the whole image. The red 1px frame on every
   card was loud in a list of twenty; it becomes a hairline that turns red on
   hover. */
.blog-card {
	--bc-media: clamp(240px, 36%, 360px);
	align-items: center;
	border-color: var(--color-border);
	border-radius: var(--ptech-radius);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 12px 30px rgba(18, 5, 5, 0.1);
}

.blog-card__media {
	align-self: center;
	aspect-ratio: 16 / 9;
	min-height: 0;
	border-radius: calc(var(--ptech-radius) - 4px);
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Sidebar quote form: the form brings its own card ─────────────────────── */
.ptech-widget--quote {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* ── 404 (404.php) ───────────────────────────────────────────────────────── */
.ptech-404 {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 110px) 20px clamp(56px, 7vw, 90px);
	text-align: center;
}

.ptech-404__code {
	font-family: var(--font-display);
	font-size: clamp(72px, 12vw, 140px);
	font-weight: 700;
	line-height: 1;
	background: var(--ptech-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ptech-404__title {
	margin-top: 12px;
	font-size: clamp(28px, 4vw, 42px);
}

.ptech-404__lead {
	max-width: 560px;
	margin: 14px auto 0;
	color: var(--color-content-muted);
}

.ptech-404__search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 28px auto 0;
}

.ptech-404__search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
}

.ptech-404__search input:focus {
	outline: none;
	border-color: var(--color-primary);
	background: #fff;
}

.ptech-404__search button {
	min-height: 50px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--ptech-accent-grad);
	color: #fff;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
}

.ptech-404__links {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 18px;
}

.ptech-404__links a {
	color: var(--color-primary-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ptech-404__recent {
	margin-top: clamp(40px, 6vw, 64px);
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
	text-align: left;
}

.ptech-404__recent-title {
	font-size: 24px;
	margin-bottom: 16px;
}

.ptech-404__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}

.ptech-404__list a {
	display: block;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--ptech-radius-sm);
	font-weight: 700;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ptech-404__list a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary-deep);
}

/* ── Filter bar ─────────────────────────────────────────────────────────────
   Redesigned: no brand marks in the side lanes (the two logos) and no
   "Plan · Pack · Move" motto — the header already says who we are, twice on one
   screen was once too many. The bar becomes a single white card, lifted over
   the foot of the hero, with soft rounded fields and a red search button. */
.ptech-fb::before,
.ptech-fb::after,
.ptech-fb__motto {
	display: none !important;
}

.ptech-fb {
	padding: 0 0 clamp(8px, 1.5vw, 16px);
	background: transparent;
}

.ptech-fb > .ptech-container {
	padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px) 4px;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(18, 5, 5, 0.1);
}

/* Lift the card over the hero wherever it directly follows one. The hero gets
   the same amount back at its foot so its text keeps its breathing room. */
.ptech-top .ptech-hero {
	padding-bottom: calc(clamp(40px, 5vw, 64px) + 44px);
}

.ptech-top .ptech-fb {
	margin-top: -44px;
}

.ptech-top .ptech-fb > .ptech-container {
	width: calc(100% - 32px);
}

/* Head row */
.ptech-fb__head {
	align-items: flex-end;
	margin-bottom: 18px;
}

.ptech-fb__eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--color-surface-tint);
	color: var(--color-primary-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.ptech-fb__heading {
	font-size: clamp(26px, 2.8vw, 34px);
}

.ptech-fb__lead {
	max-width: 46ch;
	margin-bottom: 4px;
	padding-left: 16px;
	border-left: 3px solid var(--color-primary);
}

/* Controls */
.ptech-fb__form {
	gap: 12px;
}

.ptech-fb__field,
.ptech-fb__group {
	border: 1.5px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ptech-fb__field:hover,
.ptech-fb__group:hover,
.ptech-fb__field:focus-within,
.ptech-fb__group:focus-within {
	border-color: rgba(237, 28, 36, 0.45);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.08);
}

.ptech-fb__group--search .ptech-fb__field,
.ptech-fb__group--search .ptech-fb__field:hover,
.ptech-fb__group--search .ptech-fb__field:focus-within {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.ptech-fb__trigger {
	padding: 11px 14px;
	border-radius: 14px;
	background: transparent;
}

.ptech-fb__trigger:hover {
	background: transparent;
}

.ptech-fb__chip {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #fff;
	color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(18, 5, 5, 0.08);
}

.ptech-fb__label {
	color: var(--color-content-muted);
}

.ptech-fb__value,
.ptech-fb__trigger--search input {
	font-weight: 700;
	color: var(--color-content);
}

.ptech-fb__go {
	margin: 6px;
	border-radius: 11px;
	background: var(--ptech-accent-grad);
	color: #fff;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 8px 18px rgba(237, 28, 36, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ptech-fb__go:hover {
	background: var(--ptech-accent-grad);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(237, 28, 36, 0.36);
}

/* The dropdown lists */
.ptech-fb__panel {
	top: calc(100% + 8px);
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(18, 5, 5, 0.14);
}

/* Result line under the controls */
.ptech-fb__state {
	padding: 14px 0 16px;
}

.ptech-fb__result {
	color: var(--color-content-muted);
}

@media (max-width: 767px) {
	.ptech-top .ptech-fb > .ptech-container {
		width: calc(100% - 24px);
		border-radius: 16px;
	}

	.ptech-fb__lead {
		padding-left: 12px;
	}
}

/* The 3px accent rule along the hero's foot would peek out either side of the
   lifted card; the card itself is the edge now. */
.ptech-top .ptech-hero::after {
	display: none;
}

/* Selected option in the category / month lists: brand red, not black. */
.ptech-fb__opt:hover {
	background: var(--color-surface-tint);
}

.ptech-fb__opt.is-active {
	background: var(--color-primary);
	color: #fff;
}

/* ── Page texture ───────────────────────────────────────────────────────────
   The site's seamless moving pattern behind the whole blog, painted in the
   brand gradient: the tile is used as a MASK, so only its shape shows and the
   colour comes from the red→orange gradient under it. Fixed to the viewport,
   so it stays put while the page scrolls, and 8% so it never fights the text.

   Root-relative url on purpose: the file is in the blog's own media library on
   live, so the mask is same-origin (a mask fetched from another origin needs
   CORS and silently fails). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(135deg, #ed1c24 0%, #f97e1d 100%);
	-webkit-mask: url("/blog/wp-content/uploads/2026/09/seamless.webp") repeat top left / 300px auto;
	mask: url("/blog/wp-content/uploads/2026/09/seamless.webp") repeat top left / 300px auto;
	opacity: 0.08;
}

/* The content wrapper painted its own white over the texture; let it through.
   Cards, the sidebar widgets and the filter card keep their own white, so the
   pattern shows in the gaps between them, not under the text. */
.ptech-blog {
	background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POST PAGE (single.php)
   The article sits on a white sheet so the page texture never runs under the
   text; the type is set for long reading — 17px body font at 1.85, headings in
   bold heading font with a red gradient bar — and every in-article element
   (lists, images, quotes, tables, the contents box) gets the brand treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Head: title, meta chips ─────────────────────────────────────────────── */
.ptech-posthead__title {
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ptech-posthead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 2px;
	border-top: 0;
}

.ptech-posthead .ptech-single__metaitem,
.ptech-posthead .ptech-single__metaitem:first-child {
	padding: 7px 13px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
	font-size: 11.5px !important;
	color: var(--color-content);
}

.ptech-posthead .ptech-single__author-link {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* ── The article sheet ───────────────────────────────────────────────────── */
.ptech-single__main {
	padding: clamp(20px, 3vw, 44px);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(18, 5, 5, 0.06);
}

.ptech-single__hero {
	margin-bottom: clamp(24px, 3vw, 36px);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(18, 5, 5, 0.12);
}

/* ── Body type ───────────────────────────────────────────────────────────── */
.ptech-single__content {
	font-size: 17px;
	line-height: 1.85;
	color: #3a3434;
}

.ptech-single__content > * {
	margin-bottom: 1.1em;
}

/* The opening paragraph as a standfirst: a touch larger, full width. */
.ptech-single__content > p:first-child {
	max-width: none;
	font-size: clamp(18px, 1.6vw, 20px);
	line-height: 1.7;
	color: var(--color-content);
}

.ptech-single__content strong,
.ptech-single__content b {
	color: var(--color-content);
}

.ptech-single__content a {
	color: var(--color-primary-deep);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.ptech-single__content a:hover {
	color: var(--color-primary);
}

/* ── Headings ────────────────────────────────────────────────────────────── */
.ptech-single__content h2 {
	position: relative;
	margin: 1.8em 0 0.6em;
	padding-left: 18px;
	font-size: clamp(24px, 2.6vw, 31px);
	line-height: 1.2;
	color: var(--color-content);
}

.ptech-single__content h2::before {
	top: 0.12em;
	bottom: 0.12em;
	left: 0;
	width: 5px;
	height: auto;
	border-radius: 4px;
	background: var(--ptech-accent-grad);
}

.ptech-single__content h3 {
	margin: 1.5em 0 0.5em;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.25;
	color: #2a1d1d;
}

.ptech-single__content h4 {
	margin: 1.3em 0 0.4em;
	font-size: 18px;
}

/* ── Lists: red ticks, numbered discs ────────────────────────────────────── */
.ptech-single__content ul {
	padding-left: 2em !important;
}

.ptech-single__content ul > li::before {
	left: -1.75em;
	top: 0.32em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--color-surface-tint)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 62% no-repeat;
}

.ptech-single__content ul ul > li::before {
	left: -1.2em;
	top: 0.72em;
	width: 0.45em;
	height: 0.45em;
	background: none;
	border: 2px solid var(--color-primary);
}

.ptech-single__content ol {
	padding-left: 2.4em !important;
}

.ptech-single__content ol > li {
	margin-bottom: 0.6em;
}

.ptech-single__content ol > li::before {
	content: counter(ptech-ol);
	left: -2.2em;
	top: 0.2em;
	display: grid;
	place-items: center;
	width: 1.6em;
	min-width: 0;
	height: 1.6em;
	border-radius: 50%;
	background: var(--ptech-accent-grad);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.8em;
	line-height: 1;
	text-align: center;
}

/* ── Images and captions ─────────────────────────────────────────────────── */
.ptech-single__content img {
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(18, 5, 5, 0.12);
}

.ptech-single__content figure {
	margin: 1.8em 0;
}

.ptech-single__content figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--color-content-muted);
	text-align: center;
}

/* ── Quotes and call-outs ("Also Read") ──────────────────────────────────── */
.ptech-single__content blockquote {
	margin: 1.8em 0;
	padding: 22px 26px 22px 66px;
	border: 0;
	border-left: 5px solid var(--color-primary);
	border-radius: 14px;
	background: linear-gradient(135deg, #fff3f2 0%, #fff 100%);
	box-shadow: 0 10px 26px rgba(237, 28, 36, 0.08);
}

.ptech-single__content blockquote::before {
	left: 18px;
	top: 8px;
	font-size: 72px;
	color: var(--color-primary);
	opacity: 0.45;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.ptech-single__content table {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 14px;
	font-size: 15px;
}

.ptech-single__content table td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--color-border);
}

.ptech-single__content table tr:last-child td {
	border-bottom: 0;
}

.ptech-single__content table tr:first-child td {
	background: var(--color-content);
	color: #fff;
	font-weight: 700;
}

/* ── Share row ───────────────────────────────────────────────────────────── */
.ptech-single__share {
	margin-top: 40px;
	padding: 18px 22px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
}

.ptech-single__share-label {
	font-weight: 700;
}

/* ── Author card ─────────────────────────────────────────────────────────── */
.ptech-author {
	border-radius: 20px;
	overflow: hidden;
}

.ptech-author__photo {
	border-radius: 16px;
	overflow: hidden;
}

.ptech-author__photo img {
	border-radius: 12px;
}

.ptech-author__name {
	font-weight: 700;
}

@media (max-width: 767px) {
	.ptech-single__main {
		padding: 18px;
		border-radius: 16px;
	}

	.ptech-single__content {
		font-size: 16px;
		line-height: 1.8;
	}
}

/* ── Table of contents (Proponent All In One, <details class="rst-toc">) ──
   The plugin paints the summary with --ptech-primary, which here is the ink,
   so it came out as a black slab. It becomes a full-width, light panel with a
   red icon tile, and the open list reads as a numbered index. */
.ptech-single__content .rst-toc {
	width: 100%;
	margin: 0 0 2em;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: var(--color-surface);
	font-size: 15px;
}

.ptech-single__content .rst-toc-title {
	gap: 12px;
	padding: 14px 18px;
	background: none;
	color: var(--color-content);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
}

.ptech-single__content .rst-toc-title::before {
	order: 2;
	margin-left: auto;
	opacity: 1;
	color: var(--color-primary);
}

.ptech-single__content .rst-toc-title::after {
	content: "";
	order: -1;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E") center / 18px no-repeat,
		var(--ptech-accent-grad);
}

.ptech-single__content .rst-toc[open] .rst-toc-title {
	border-bottom: 1px solid var(--color-border);
}

.ptech-single__content .rst-toc .rst-toc-list {
	padding: 10px 18px 16px !important;
}

.ptech-single__content .rst-toc a {
	color: var(--color-content);
	text-decoration: none;
}

.ptech-single__content .rst-toc a:hover {
	color: var(--color-primary-deep);
}

.ptech-single__content .rst-toc .rst-toc-item::before {
	background: var(--color-primary) !important;
}

.ptech-single__content .rst-toc .rst-toc-level-3 {
	margin-left: 1.1em !important;
	font-size: 0.95em;
	color: var(--color-content-muted);
}

/* ── Author card, inside the sheet: flat, no second shadow ───────────────── */
.ptech-single__main .ptech-author {
	margin-top: 36px;
	border: 1px solid var(--color-border);
	border-left: 5px solid var(--color-primary);
	background: var(--color-surface);
	box-shadow: none;
}

.ptech-single__main .ptech-author::after {
	display: none;
}

.ptech-single__main .ptech-author__photo {
	max-width: 150px;
	box-shadow: 0 10px 22px rgba(18, 5, 5, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTHOR PAGE (author.php)
   A compact photographed banner (same as the blog hero), a white profile card
   that overlaps it, stat tiles, the story on a white sheet, and the author's
   articles underneath. Everything is optional in the markup — a section with
   no data simply is not printed — so each block stands on its own.
   ═══════════════════════════════════════════════════════════════════════════ */
.ptech-author-page {
	padding-top: 0;
	padding-bottom: clamp(40px, 5vw, 64px);
}

.ptech-author-hero__banner,
.ptech-author-hero__banner--default {
	height: clamp(150px, 18vw, 260px);
	background-color: #120505;
}

.ptech-author-hero__banner--default {
	background-image:
		linear-gradient(180deg, rgba(18, 5, 5, 0.82) 0%, rgba(18, 5, 5, 0.66) 55%, rgba(58, 13, 15, 0.85) 100%),
		url("/assets/img/services/bread-bg.webp");
	background-position: center;
	background-size: cover;
}

.ptech-author-layout {
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 32px;
}

/* ── Profile card ────────────────────────────────────────────────────────── */
.ptech-author-side {
	position: relative;
	margin-top: -110px;
	padding: 0 26px 28px;
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-primary);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(18, 5, 5, 0.1);
	text-align: center;
}

.ptech-author-side__photo {
	width: 132px;
	margin: -66px auto 16px;
	border: 5px solid #fff;
	box-shadow: 0 14px 30px rgba(18, 5, 5, 0.22);
}

.ptech-author-side__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ptech-author-side__name {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
}

.ptech-author-side__job {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary-deep);
}

.ptech-author-side__tags {
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.ptech-author-side__tags li,
.ptech-author-side__tags li:nth-child(3n + 2),
.ptech-author-side__tags li:nth-child(3n + 3) {
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--color-surface-tint);
	color: var(--color-primary-deep);
	font-size: 12px;
	font-weight: 700;
}

.ptech-author-side__rule {
	margin: 22px 0;
	border: 0;
	border-top: 1px dashed var(--color-border);
}

.ptech-author-side__contact {
	display: grid;
	gap: 10px;
	text-align: left;
}

.ptech-author-side__contact a,
.ptech-author-side__contact li {
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-content);
}

.ptech-author-side__contact a:hover {
	color: var(--color-primary-deep);
}

.ptech-author-side__contact-ico {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--color-surface-tint);
	color: var(--color-primary);
}

.ptech-author-side__socials {
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.ptech-author-side__socials a {
	width: 38px;
	height: 38px;
	background: var(--color-content);
	color: #fff;
}

.ptech-author-side__socials a:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Both buttons on this page: the brand pill. */
.ptech-author-page .ptech-btn,
.ptech-author-posts .ptech-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--ptech-accent-grad);
	color: #fff;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(237, 28, 36, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ptech-author-page .ptech-btn:hover,
.ptech-author-posts .ptech-btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(237, 28, 36, 0.36);
}

.ptech-author-side__cta {
	width: 100%;
	margin-top: 22px;
}

/* ── Main column ─────────────────────────────────────────────────────────── */
.ptech-author-main {
	padding-top: 28px;
}

.ptech-author-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.ptech-author-stat {
	padding: 20px 22px;
	border: 1px solid var(--color-border);
	border-left: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(18, 5, 5, 0.06);
}

.ptech-author-stat__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 700;
	line-height: 1;
	background: var(--ptech-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ptech-author-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-content-muted);
}

.ptech-author-about,
.ptech-author-bio {
	padding: clamp(22px, 3vw, 40px);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(18, 5, 5, 0.06);
}

.ptech-author-about__eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--color-surface-tint);
	color: var(--color-primary-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ptech-author-about__heading {
	margin: 12px 0 14px;
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 700;
	line-height: 1.15;
}

.ptech-author-about__story,
.ptech-author-bio {
	font-size: 16.5px;
	line-height: 1.85;
	color: #3a3434;
}

.ptech-author-about__story p + p {
	margin-top: 1em;
}

.ptech-author-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin-top: 22px;
}

.ptech-author-highlights li {
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--color-surface);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--color-content);
}

.ptech-author-highlights svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
}

.ptech-author-quote {
	margin-top: 24px;
	padding: 34px 32px 28px;
	border: 0;
	border-radius: 20px;
	background: linear-gradient(135deg, #120505 0%, #3a0d0f 100%);
	color: #fff;
	box-shadow: 0 18px 44px rgba(18, 5, 5, 0.2);
}

.ptech-author-quote::before {
	color: var(--color-primary);
	opacity: 0.9;
}

.ptech-author-quote p {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.ptech-author-quote cite {
	display: block;
	margin-top: 12px;
	color: #ff9f3d;
	font-style: normal;
	font-weight: 700;
}

/* ── The author's articles ───────────────────────────────────────────────── */
.ptech-author-posts {
	padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 6vw, 80px);
}

.ptech-author-posts__more {
	margin-top: 28px;
	text-align: center;
}

@media (max-width: 991px) {
	.ptech-author-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ptech-author-side {
		margin-top: -80px;
	}

	.ptech-author-main {
		padding-top: 0;
	}
}

/* blog.css pushed every page without a hero down by the header's height, which
   only made sense for a header that FLOATED over the page. The site header here
   sits in the flow, so that became an empty band (author, search, plain pages). */
.ptech-blog {
	padding-top: 0;
}

/* Stat tiles stay three across on phones instead of leaving one alone. */
@media (max-width: 575px) {
	.ptech-author-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.ptech-author-stat {
		padding: 14px 8px;
		text-align: center;
	}

	.ptech-author-stat__num {
		font-size: 24px;
	}

	.ptech-author-stat__label {
		font-size: 10px;
		letter-spacing: 0.04em;
	}
}

/* blog.css drops the first stat's left padding (it was a divider list). */
.ptech-author-stat:first-child {
	padding-left: 22px;
}

@media (max-width: 575px) {
	.ptech-author-stat:first-child {
		padding-left: 8px;
	}
}

/* ── Type sizes from the site's tokens ──────────────────────────────────────
   The blog uses the same text and heading sizes as the site. The values live
   once, as --mc-* variables in the site's chrome.css (which the blog loads
   through /blog-chrome/); this block only maps the blog's classes onto them.
   It sits last in the last stylesheet, so it overrides blog.css and the rules
   above, including their breakpoints. The fallbacks apply only if chrome.css
   fails to load. */
body,
.ptech-single__content,
.ptech-single__content > p:first-child,
.ptech-single__content blockquote,
.blog-card__excerpt,
.ptech-fb__lead,
.ptech-gal__lead,
.ptech-hero__subtitle,
.ptech-cat-header__desc,
.ptech-noresults__text,
.ptech-author__bio,
.ptech-author-about__story,
.ptech-author-bio,
.ptech-author-quote p {
	font-size: var(--mc-text, clamp(13px, 1.4vw, 14px));
}

.section-heading,
.ptech-hero__title,
.ptech-page__title,
.ptech-single__title,
.ptech-archive-head__title,
.ptech-posthead__title,
.ptech-404__title,
.ptech-cat-header__title,
.ptech-fb__heading,
.ptech-gal__title,
.ptech-related__title,
.ptech-trending__title,
.ptech-author-about__heading {
	font-size: var(--mc-h-lg, clamp(22px, 2.2vw, 30px));
}

.sub-heading,
.ptech-single__content h2,
.ptech-cat-block__title,
.ptech-widget__title,
.sidebar-heading,
.ptech-comments__title,
.ptech-noresults__title,
.ptech-author__name,
.ptech-author-side__name,
.ptech-404__recent-title {
	font-size: var(--mc-h-md, clamp(17px, 1.6vw, 20px));
}

.card-heading,
.blog-card__title,
.ptech-related .blog-card__title,
.ptech-single__content h3,
.ptech-single__content h4,
.ptech-single__content .rst-toc-title {
	font-size: var(--mc-h-sm, clamp(15px, 1.2vw, 17px));
}