/* ============================================================ *
 *  Self & System — Single Post ("Dear Leader") template
 *  Card / tag / CTA styles are inherited from blog-index.css.
 * ============================================================ */
.ss-single {
	font-family: "Lexend", "Helvetica Neue", Arial, sans-serif;
	color: #410b36;
}
.ss-single *,
.ss-single *::before,
.ss-single *::after { box-sizing: border-box; }

/* ============================================================ *
 *  HERO  (dark purple, transparent overlay header sits on top)
 * ============================================================ */
.ss-single__hero {
	position: relative;
	z-index: 2; /* whole hero (incl. the overhanging photo) paints above the body */
	background: #410b36;
	padding: 150px 40px 0;
	/* NOTE: no overflow:hidden here — it would clip the photo's overhang.
	   The rings clip themselves via their own wrapper below. */
}
/* Rings wrapper fills the hero and clips ONLY the rings (not the photo). */
.ss-single__hero-rings {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
.ss-single__hero-rings svg {
	position: absolute;
	display: block;
	width: 1374px;
	height: 1374px;
	left: calc(78% - 687px);
	top: -969px;
}

.ss-single__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1600px;
	margin: 0 auto;
	min-height: 360px; /* keeps the purple substantial even with a short title */
}

.ss-single__hero-text {
	max-width: 46%;
	padding: 20px 0 84px;
}
.ss-single__hero--no-media .ss-single__hero-text { max-width: 760px; }
.ss-single__title {
	font-size: 64px;
	line-height: 1.14;
	font-weight: 400;
	color: #fff;
	margin: 0 0 20px;
}
.ss-single__hero .ss-single__date {
	color: #fff;
	font-size: 16px;
	line-height: 1.24;
	margin: 0 0 14px;
}
.ss-single__hero .ss-blog__tags { margin: 0; }

/* The photo is pinned to the top-right of the boxed inner and spans from ABOVE
   the nav (top:-110 cancels the hero's 150px top padding → ~40px from the very
   top, sitting over the header) down PAST the purple (bottom:-64 → hangs 64px
   onto the white). This is deterministic — it overhangs no matter how long the
   title is, because it doesn't depend on the text column's height. */
.ss-single__hero-media {
	position: absolute;
	top: -110px;
	bottom: -64px;
	right: 0;
	width: 54%;
	z-index: 3;
	overflow: hidden;
	border-radius: 2px;
}
/* Absolutely fill the panel (inset:0 + top/bottom:0) so the photo ALWAYS reaches
   the panel's bottom edge and overhangs — immune to the theme's `img{height:auto}`. */
.ss-single__hero-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important; /* a global rule caps content images at max-height:500px — that was stopping the photo filling the panel */
	object-fit: cover;
	object-position: center 28%; /* keep the subjects (usually upper) in frame */
}

/* ============================================================ *
 *  BODY  (narrow centred reading strip)
 * ============================================================ */
.ss-single__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 76px 24px 84px;
	font-size: 20px;
	line-height: 1.7;
	color: #410b36;
}
.ss-single__body > *:first-child { margin-top: 0; }
.ss-single__body > *:last-child { margin-bottom: 0; }
.ss-single__body p { margin: 0 0 1.3em; }
.ss-single__body h2 { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 1.6em 0 .5em; }
.ss-single__body h3 { font-size: 26px; line-height: 1.25; font-weight: 700; margin: 1.5em 0 .5em; }
.ss-single__body h4 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 1.4em 0 .5em; }
.ss-single__body a { color: #e57b25; text-decoration: underline; }
.ss-single__body img,
.ss-single__body figure { max-width: 100%; height: auto; border-radius: 2px; }
.ss-single__body figure { margin: 1.6em 0; }
.ss-single__body figcaption { font-size: 14px; opacity: .75; margin-top: 8px; text-align: center; }
.ss-single__body ul,
.ss-single__body ol { padding-left: 1.2em; margin: 0 0 1.3em; }
.ss-single__body li { margin: 0 0 .5em; }
.ss-single__body ul li::marker { color: #e57b25; }
.ss-single__body blockquote {
	margin: 1.4em 0;
	padding: 0;
	border: 0;
	color: #e57b25;
	font-size: 30px;
	line-height: 1.24;
	font-weight: 600;
}
.ss-single__body blockquote p { margin: 0 0 .3em; }

/* ============================================================ *
 *  MORE ARTICLES
 * ============================================================ */
.ss-single__more { background: #fff; }
.ss-single__more-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 10px 40px 96px;
}
.ss-single__rule {
	border: 0;
	border-top: 1px solid #c9a9c0;
	margin: 0 0 34px;
}
.ss-single__more-title {
	font-size: 24px;
	line-height: 1.24;
	font-weight: 700;
	color: #410b36;
	margin: 0 0 34px;
}
.ss-single__index-link-wrap {
	display: flex;
	justify-content: center;
	margin-top: 52px;
}
.ss-single__index-link {
	background: #f4eaeb;
	color: #410b36;
	font-size: 16px;
	line-height: 1.24;
	padding: 11px 24px;
	border-radius: 6px;
	text-decoration: none;
	transition: filter .15s ease;
}
.ss-single__index-link:hover { filter: brightness(0.96); color: #410b36; }

/* ============================================================ *
 *  RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
	.ss-single__hero { padding: 120px 28px 0; }
	.ss-single__hero-inner { min-height: 0; }
	.ss-single__hero-text { padding-bottom: 8px; max-width: none; }
	.ss-single__title { font-size: 46px; }
	/* stacked: photo becomes a normal block below the text, natural (uncropped) */
	.ss-single__hero-media {
		position: static;
		width: auto;
		margin: 24px 0 -40px;
		border-radius: 2px;
	}
	.ss-single__hero-img { position: static; height: auto; object-position: center; }
	.ss-single__body { padding: 60px 22px 68px; font-size: 19px; }
	.ss-single__more-inner { padding: 10px 28px 72px; }
}

@media (max-width: 767px) {
	.ss-single__hero { padding: 110px 20px 0; }
	.ss-single__title { font-size: 34px; }
	.ss-single__body { font-size: 18px; }
	.ss-single__body h2 { font-size: 28px; }
	.ss-single__body blockquote { font-size: 24px; }
	.ss-single__more-inner { padding: 10px 20px 60px; }
}