/* =========================================================
   VIKAND — single article DESIGN.
   Every value here is measured from live vikand.com
   (articles/vikander-profile-louis-conradie/ at 1440px), not
   estimated. Live wraps its content at 1200px with no gutter at
   1440, so the inners are max-width 1240 + 20px padding.
   ========================================================= */

/* Nothing in this theme sets border-box globally, so every max-width +
   padding inner has to say so or it renders 40px wide. */
.vk-article__titleband h1,
.vk-recent__inner { box-sizing: border-box; }



/* ---- Hero (full bleed, 37px of white below the header on live) -- */
.vk-article__hero { margin: 37px 0 0; }
.vk-article__hero img { display: block; width: 100%; height: auto; }

/* ---- Title band (live: #596985, 45px 0, inner 1200, and it rides
   6px up over the bottom of the hero) --------------------------- */
.vk-article__titleband { background: #596985; padding: 45px 0; margin-top: -6px; }
.vk-article__titleband h1 {
	/* Live's box is 1200 wide with no gutter at 1440. 1240 + 20px padding
	   renders the same there but measures 40px wider, which showed up as a
	   difference on all 832 articles; the gutter is added back only when the
	   viewport is actually narrow enough to need it. */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	font-size: 30.85px;
	font-weight: 700;
	letter-spacing: -1.08px;
	line-height: 43.19px;
	text-align: center;
}

/* The other treatment, on posts whose band heading kept Cornerstone's
   post-title/entry-title classes. */
.vk-article__titleband--tight h1 { font-size: 30.6px; line-height: 33.66px; }

/* Some articles carry a byline under the heading ("By Peter Hult, VIKAND
   Chief Executive Officer") — live sets it bold italic white, 14px. */
.vk-article__titleband h1.has-byline { margin-bottom: 15.43px; }
.vk-article__byline {
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	line-height: 19.6px;
	text-align: center;
}

/* ---- Body (live: 14px/19.6, #808080, 21px paragraph gap; 81px
   below the title band, 46px above RECENT ARTICLES) -------------- */
.vk-article__body { padding: 81px 0 46px; }
.vk-article__body p {
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	color: #808080;
	margin: 0 0 21px;
}
.vk-article__body p:last-child { margin-bottom: 0; }
/* Live marks the interview questions with <strong>, same size and
   colour as the answers. */
.vk-article__body strong,
.vk-article__body b { font-weight: 700; color: #808080; }
.vk-article__body a { color: #4d5c75; }
.vk-article__body img { height: auto; }
/* Live floats some body images and centres others with inline styles rather
   than classes, so the converter carries those declarations through instead of
   this stylesheet guessing. The clearfix stays: a floated image at the end of
   the body would otherwise hang into the section below. */
.vk-article__body::after { content: ""; display: table; clear: both; }
/* Stacked body images (the press posts are a column of screenshots). Live's
   spacing came from hand-placed Cornerstone gap elements and varies from post
   to post, 27px being the common one. */
.vk-article__body figure.wp-block-image { margin: 27px 0 0; }
.vk-article__body figure.wp-block-image:first-child { margin-top: 0; }
/* Lists (live: 18px/25.2 — bigger than the body copy, and that is what live
   does — #808080, 27px below, items starting 30px in from the body edge,
   marker outside). Nothing set these before, so a list took the theme's
   18/32.4 #999 with 24px above and nothing below. */
.vk-article__body ul,
.vk-article__body ol {
	font-size: 18px;
	line-height: 25.2px;
	color: #808080;
	margin: 0 0 27px;
	padding: 0 0 0 30px;
}
.vk-article__body li { margin: 0; padding: 0; }

/* ---- RECENT ARTICLES (live: #3D4050, 4 x 264 / 48px gap; the live
   section is 458px tall, which is 45px above the heading and 120px
   below the cards). The heading is the same type as the article title,
   not a bigger letter-spaced one — measured, not assumed. -------- */
.vk-recent { background: #3d4050; padding: 45px 0 120px; }
.vk-recent__inner { max-width: 1200px; margin: 0 auto; padding: 0; }
.vk-recent__title {
	color: #fff;
	font-size: 30.852px;
	font-weight: 700;
	letter-spacing: -1.08px;
	line-height: 43.19px;
	text-align: center;
	margin: 0 0 36px;
}
/* The older treatment, on posts whose source wording is "Recent Articles". */
.vk-recent__title--wide {
	font-size: 41.13px;
	letter-spacing: 8.226px;
	line-height: 53.469px;
	text-transform: uppercase;
}
/* The cards themselves live with the framework/posts-row block, which
   renders them here and on the news and press-room listings. */

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 1239px) {
	.vk-article__titleband h1,
	.vk-article__byline,
	.vk-recent__inner { padding: 0 20px; }
}

@media (max-width: 979px) {
	.vk-recent__title { font-size: 24px; letter-spacing: -0.6px; line-height: 1.3; }
	.vk-recent__title--wide { font-size: 30px; letter-spacing: 5px; }
	.vk-article__titleband h1 { font-size: 24px; line-height: 1.3; letter-spacing: -0.6px; }
}