/* Systical — Post Article (single post) */

.sys-pa {
	--pa-accent: #9afd0d;
	--pa-read: 760px;
	--pa-media: 1080px;
	--pa-rail: 230px;
	--pa-gap: 40px;
	--pa-sticky: 130px;
	/* Both rails plus the reading column plus the two gaps. */
	--pa-wide: calc(var(--pa-read) + (var(--pa-rail) * 2) + (var(--pa-gap) * 2));
	--pa-radius: 18px;
	--pa-ratio: 16 / 9;
	--pa-rule: #242424;
	--pa-body: #c7c7c7;
	--pa-body-size: 18px;
	--pa-heading: #fff;
	display: block;
	padding: 170px 40px 90px;
	background-color: #070707;
}

.sys-pa__inner {
	max-width: var(--pa-wide);
	margin: 0 auto;
}

/* The image runs wider than the text; everything else sits in the reading
   column, so line length stays comfortable regardless of screen width. */
.sys-pa__head,
.sys-pa__byline {
	max-width: var(--pa-read);
	margin-right: auto;
	margin-left: auto;
}

/* Two classes deep: the media is a <figure>, and Elementor ships
   `.elementor figure { margin: 0 }` at (0,1,1) — a single-class rule loses and
   the image ends up hard against the left edge instead of centred. */
.sys-pa .sys-pa__media {
	max-width: var(--pa-media);
	margin-right: auto;
	margin-left: auto;
}

/* ---------- three-column layout ----------
   Both rails are given the same width even though the share icons need far
   less than the contents list. That is deliberate: equal rails keep the
   article column centred on the page and aligned with the header and image
   above it, which uneven ones would not. */

.sys-pa__layout {
	display: grid;
	grid-template-columns: var(--pa-rail) minmax(0, var(--pa-read)) var(--pa-rail);
	gap: var(--pa-gap);
	/* Stretch, not start. A rail column that shrinks to its content height
	   gives its sticky child nowhere to travel, so the rails would scroll away
	   with the article instead of following it. */
	align-items: stretch;
	justify-content: center;
}

.sys-pa__layout--no-toc {
	grid-template-columns: var(--pa-rail) minmax(0, var(--pa-read));
}

.sys-pa__layout--no-share {
	grid-template-columns: minmax(0, var(--pa-read)) var(--pa-rail);
}

.sys-pa__layout--no-toc.sys-pa__layout--no-share {
	grid-template-columns: minmax(0, var(--pa-read));
}

/* Both rails park below the floating header and travel with the reader. */
.sys-pa__rail {
	position: sticky;
	top: var(--pa-sticky);
}

.sys-pa__rail-title {
	display: block;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* ---------- left rail: back + share ---------- */

.sys-pa__side {
	/* Hard against the left edge of its rail, so the buttons sit clear of the
	   text column rather than crowding it. */
	justify-self: start;
}

.sys-pa__block + .sys-pa__block {
	margin-top: 32px;
}

.sys-pa__block .sys-pa__rail-title {
	margin-bottom: 14px;
}

.sys-pa__share-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sys-pa__round {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--pa-rule);
	border-radius: 50%;
	color: #d6d6d6;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		color 200ms ease;
}

.sys-pa__round:hover,
.sys-pa__round:focus-visible {
	border-color: var(--pa-accent);
	background-color: var(--pa-accent);
	color: #070707;
}

.sys-pa__round svg {
	width: 18px;
	height: 18px;
}

/* ---------- contents ---------- */

.sys-pa__toc .sys-pa__rail {
	max-height: calc(100vh - var(--pa-sticky) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px;
	border: 1px solid var(--pa-rule);
	border-radius: 16px;
	background-color: #0e0e0e;
	scrollbar-width: thin;
}

.sys-pa__toc .sys-pa__rail-title {
	margin-bottom: 14px;
}

.sys-pa__toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sys-pa__toc-link {
	display: block;
	padding: 7px 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14.5px;
	line-height: 1.4;
	color: #9a9a9a;
	text-decoration: none;
	transition: color 180ms ease;
}

.sys-pa__toc-link:hover,
.sys-pa__toc-link:focus-visible {
	color: #fff;
}

/* Set by the scroll-spy; without the script the list is still a working set
   of anchors, just without the highlight. */
.sys-pa__toc-item.is-current > .sys-pa__toc-link {
	color: var(--pa-accent);
	font-weight: 600;
}

/* Sub-headings are stepped in and hung off a rule, so the depth reads at a
   glance rather than from indentation alone. */
.sys-pa__toc-item--h3 {
	margin-left: 4px;
	padding-left: 12px;
	border-left: 1px solid var(--pa-rule);
}

.sys-pa__toc-item--h3 .sys-pa__toc-link {
	padding: 5px 0;
	font-size: 13.5px;
}

/* ---------- head ---------- */

/* A fixed ratio, so the hero is the same shape whatever anyone uploads. */
.sys-pa .sys-pa__media {
	aspect-ratio: var(--pa-ratio);
	margin: 0 auto 40px;
	overflow: hidden;
	border-radius: var(--pa-radius);
	background-color: #111;
}

/* Two classes deep: Elementor ships `.elementor img { height: auto }` at
   (0,1,1), which would beat a single-class rule. `max-height` is restated
   because Hello Elementor caps `.post .wp-post-image` at 500px — a theme
   default that has nothing to do with this layout. */
.sys-pa .sys-pa__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

/* Categories on the left, the date on the right, on one rule-topped line. */
.sys-pa__factline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--pa-rule);
}

.sys-pa__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14.5px;
	color: #8f8f8f;
}

.sys-pa__meta-label {
	color: #6f6f6f;
}

.sys-pa__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.028em;
	color: #fff;
}

.sys-pa__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sys-pa__term {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--pa-rule);
	border-radius: 999px;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	transition: border-color 200ms ease;
}

.sys-pa__term:hover,
.sys-pa__term:focus-visible {
	border-color: var(--pa-accent);
	color: var(--pa-accent);
}

/* ---------- author ---------- */

.sys-pa__author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sys-pa__author--row {
	margin-top: 26px;
}

.sys-pa__author--byline {
	align-items: flex-start;
}

/* Pushed to the far end of the author row, opposite the name. */
.sys-pa__contacts {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.sys-pa__contact {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--pa-rule);
	border-radius: 10px;
	color: #d6d6d6;
	text-decoration: none;
	transition:
		background-color 200ms ease,
		border-color 200ms ease,
		color 200ms ease;
}

.sys-pa__contact:hover,
.sys-pa__contact:focus-visible {
	border-color: var(--pa-accent);
	background-color: var(--pa-accent);
	color: #070707;
}

.sys-pa__contact svg {
	width: 17px;
	height: 17px;
}

/* `contain` rather than `cover`: a square headshot renders identically either
   way, and a logo mark used as the byline image keeps its edges instead of
   being cropped into unreadability. */
.sys-pa .sys-pa__avatar {
	display: block;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	padding: 5px;
	border-radius: 50%;
	object-fit: contain;
	background-color: #1a1a1a;
}

.sys-pa__author--byline .sys-pa__avatar {
	width: 64px;
	height: 64px;
}

.sys-pa__author-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sys-pa__author-name {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
}

/* The byline block under the article stays at the smaller size — it repeats
   information the reader has already met. */
.sys-pa__author--byline .sys-pa__author-name {
	font-size: 16px;
}

.sys-pa__author-name a {
	color: inherit;
	text-decoration: none;
}

.sys-pa__author-name a:hover {
	color: var(--pa-accent);
}

.sys-pa__author-role {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	color: #8f8f8f;
}

.sys-pa__author-bio {
	margin: 8px 0 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #9a9a9a;
}

.sys-pa__byline {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--pa-rule);
}

/* ---------- the body ----------
   These rules style markup this plugin does not write, so they are kept
   deliberately plain and scoped to .sys-pa__body. */

.sys-pa__body {
	margin-top: 40px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: var(--pa-body-size);
	line-height: 1.75;
	color: var(--pa-body);
	/* Long URLs and code in prose must not push the column wider on a phone. */
	overflow-wrap: break-word;
}

/* No header above it, so nothing to be spaced away from. */
.sys-pa__body--lead {
	margin-top: 0;
}

.sys-pa__body > *:first-child {
	margin-top: 0;
}

.sys-pa__body > *:last-child {
	margin-bottom: 0;
}

.sys-pa__body p {
	margin: 0 0 1.25em;
}

.sys-pa__body h2,
.sys-pa__body h3,
.sys-pa__body h4 {
	margin: 1.9em 0 0.6em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pa-heading);
	/* Jumped to from the contents list, so each heading has to clear the
	   floating header rather than land underneath it. */
	scroll-margin-top: calc(var(--pa-sticky) - 20px);
}

.sys-pa__body h2 {
	font-size: clamp(24px, 2.4vw, 32px);
}

.sys-pa__body h3 {
	font-size: clamp(20px, 1.9vw, 25px);
}

.sys-pa__body h4 {
	font-size: 19px;
}

/* Colour alone marks a link here — the site carries no underlines anywhere,
   and lime on near-black is well clear of the body grey. */
.sys-pa__body a {
	color: var(--pa-accent);
	text-decoration: none;
}

.sys-pa__body a:hover,
.sys-pa__body a:focus-visible {
	color: #fff;
}

.sys-pa__body ul,
.sys-pa__body ol {
	margin: 0 0 1.25em;
	padding-left: 1.3em;
}

.sys-pa__body li {
	margin-bottom: 0.5em;
}

.sys-pa__body li::marker {
	color: var(--pa-accent);
}

.sys-pa__body blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--pa-accent);
	font-size: 1.1em;
	line-height: 1.55;
	color: #fff;
}

.sys-pa__body blockquote p:last-child {
	margin-bottom: 0;
}

.sys-pa__body img,
.sys-pa__body video,
.sys-pa__body iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.8em 0;
	border-radius: 12px;
}

.sys-pa__body figure {
	margin: 1.8em 0;
}

.sys-pa__body figure img {
	margin: 0;
}

.sys-pa__body figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: #8f8f8f;
	text-align: center;
}

.sys-pa__body code {
	padding: 2px 6px;
	border-radius: 5px;
	background-color: #161616;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	color: #e6e6e6;
}

.sys-pa__body pre {
	margin: 1.6em 0;
	padding: 18px 20px;
	overflow-x: auto;
	border-radius: 12px;
	background-color: #101010;
}

.sys-pa__body pre code {
	padding: 0;
	background: none;
}

/* A wide table must scroll inside its own box rather than widening the page. */
.sys-pa__body table {
	display: block;
	width: 100%;
	margin: 1.6em 0;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.95em;
}

.sys-pa__body th,
.sys-pa__body td {
	padding: 10px 14px;
	border: 1px solid var(--pa-rule);
	text-align: left;
}

.sys-pa__body th {
	color: #fff;
}

.sys-pa__body hr {
	margin: 2.2em 0;
	border: 0;
	border-top: 1px solid var(--pa-rule);
}

/* ---------- responsive ---------- */

/* Below this the two rails plus a readable column no longer fit, so both fold
   into the flow above the article: contents first, then the share row. */
@media (max-width: 1180px) {
	/* A flex column rather than plain block, only so the contents list can be
	   ordered above the article — in source order it sits after the body,
	   where a table of contents is no use to anyone. */
	.sys-pa__layout,
	.sys-pa__layout--no-toc,
	.sys-pa__layout--no-share {
		display: flex;
		flex-direction: column;
		/* The column gap was sized for the space between the rails and the
		   text. Stacked, it lands on top of each block's own margin and the
		   spacing doubles up. */
		gap: 0;
		grid-template-columns: none;
		/* The grid set `align-items: start`, which in a flex column means the
		   cross axis — every block would shrink to its content width and the
		   contents card would stop short of the text it sits above. */
		align-items: stretch;
		max-width: var(--pa-read);
		margin: 28px auto 0;
	}

	.sys-pa__side {
		order: -2;
		margin-bottom: 26px;
	}

	.sys-pa__toc {
		order: -1;
		margin-bottom: 30px;
	}

	/* The block above it now sets the gap. */
	.sys-pa__body,
	.sys-pa__body--lead {
		margin-top: 0;
	}

	.sys-pa__rail {
		position: static;
	}

	/* Back and Share sit side by side rather than stacked — stacked they cost
	   two screenfuls before the article has started. */
	.sys-pa__side .sys-pa__rail {
		display: flex;
		align-items: flex-start;
		gap: 32px;
	}

	.sys-pa__block + .sys-pa__block {
		margin-top: 0;
	}

	.sys-pa__share-list {
		flex-direction: row;
	}

	.sys-pa__toc {
		margin-bottom: 32px;
	}

	.sys-pa__toc .sys-pa__rail {
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 767px) {
	.sys-pa {
		padding: 108px 18px 52px;
	}

	.sys-pa .sys-pa__media {
		margin-bottom: 26px;
		border-radius: 14px;
	}

	.sys-pa__title {
		font-size: clamp(26px, 7.6vw, 34px);
	}

	.sys-pa__body {
		line-height: 1.7;
	}

	.sys-pa__author--row {
		margin-top: 20px;
	}

	.sys-pa .sys-pa__avatar {
		width: 46px;
		height: 46px;
	}

	.sys-pa__author-name {
		font-size: 17px;
	}

	.sys-pa__contact {
		width: 34px;
		height: 34px;
	}

	.sys-pa__factline {
		margin-top: 18px;
		padding-top: 16px;
	}

	.sys-pa__meta {
		font-size: 13.5px;
	}

	.sys-pa__side {
		margin-bottom: 22px;
	}

	.sys-pa__toc {
		margin-bottom: 26px;
	}

	.sys-pa__side .sys-pa__rail {
		gap: 24px;
	}

	.sys-pa__round {
		width: 42px;
		height: 42px;
	}

	.sys-pa__toc .sys-pa__rail {
		padding: 18px;
	}

	.sys-pa__byline {
		margin-top: 36px;
		padding-top: 24px;
	}

	.sys-pa__author--byline {
		flex-direction: column;
		gap: 12px;
	}
}