/* ==========================================================================
   VANE — Single post template
   Child theme: css/post-template.css
   Pairs with vane-single-post.php
   ========================================================================== */

.vane-post {
	--vp-navy:    var(--vane-navy, #00385E);
	--vp-mint:    var(--vane-mint, #ABE2C7);
	--vp-accent:  #00385E;
	--vp-ink:     #3D4B57;
	--vp-muted:   #5A6B7A;
	--vp-band:    #F9F9F8;
	--vp-rule:    #E4E8EC;
	--vp-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
	--vp-max: 880px;
	max-width: var(--vp-max);
	margin: 0 auto;
	background: #fff;
}

.vane-post__article {
	padding: 56px 96px 48px;
}

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

.vane-post__eyebrow {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vane-post--members .vane-post__eyebrow {
	color: var(--vp-accent);
}

.vane-post__title {
	margin: 0;
	font-family: var(--vp-display);
	font-weight: 500;
	font-size: 46px;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--vp-navy);
	text-wrap: pretty;
}

.vane-post__meta {
	margin: 20px 0 34px;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

/* --------------------------------------------------------------------------
   Body — the_content() output, block editor and classic
   -------------------------------------------------------------------------- */

.vane-post__body {
	font-size: 17px;
	line-height: 1.75;
	color: var(--vp-ink);
}

.vane-post__body > p {
	margin: 0 0 22px;
	text-wrap: pretty;
}

.vane-post__body > *:last-child {
	margin-bottom: 0;
}

.vane-post__body h2,
.vane-post__body h3,
.vane-post__body h4 {
	font-family: var(--vp-display);
	font-weight: 500;
	line-height: 1.2;
	color: var(--vp-navy);
	text-wrap: pretty;
}

.vane-post__body h2 { margin: 38px 0 14px; font-size: 30px; }
.vane-post__body h3 { margin: 32px 0 12px; font-size: 23px; }
.vane-post__body h4 { margin: 28px 0 10px; font-size: 19px; }

.vane-post__body a {
	color: var(--vp-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vane-post__body a:hover,
.vane-post__body a:focus {
	color: var(--vp-navy);
}

.vane-post__body ul,
.vane-post__body ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.vane-post__body li {
	margin-bottom: 8px;
	text-wrap: pretty;
}

/* Quote — core/quote and core/pullquote both land here */
.vane-post__body blockquote,
.vane-post__body .wp-block-quote,
.vane-post__body .wp-block-pullquote {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: 3px solid var(--vp-mint);
	border-top: 0;
	border-bottom: 0;
	background: none;
	text-align: left;
}

.vane-post__body blockquote p {
	margin: 0;
	font-family: var(--vp-display);
	font-style: italic;
	font-size: 25px;
	line-height: 1.4;
	color: var(--vp-navy);
	text-wrap: pretty;
}

.vane-post__body blockquote cite,
.vane-post__body .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

/* Media */
.vane-post__body img {
	max-width: 100%;
	height: auto;
}

.vane-post__body figure,
.vane-post__body .wp-block-image,
.vane-post__body .wp-block-embed {
	margin: 32px 0;
}

.vane-post__body figcaption,
.vane-post__body .wp-element-caption {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--vp-muted);
}

/* Separator */
.vane-post__body hr,
.vane-post__body .wp-block-separator {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--vp-rule);
}

/* Full/wide alignment inside a boxed column — clamp rather than break out */
.vane-post__body .alignwide,
.vane-post__body .alignfull {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* --------------------------------------------------------------------------
   End band — shared shell
   -------------------------------------------------------------------------- */

.vane-endband {
	padding: 40px 96px 52px;
	background: var(--vp-band);
	border-top: 1px solid var(--vp-rule);
}

.vane-endband__label {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vane-post--members .vane-endband__label {
	margin-bottom: 16px;
	color: var(--vp-navy);
}

.vane-endband__intro {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--vp-muted);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Public: membership CTA
   -------------------------------------------------------------------------- */

.vane-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 30px 34px;
	background: var(--vp-navy);
	border-radius: 10px;
}

.vane-cta__title {
	margin: 0 0 6px;
	font-family: var(--vp-display);
	font-size: 26px;
	line-height: 1.25;
	color: #fff;
}

.vane-cta__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}

.vane-cta__btn {
	flex: none;
	padding: 14px 22px;
	background: var(--vp-mint);
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vp-navy);
	transition: background .15s ease;
}

.vane-cta__btn:hover,
.vane-cta__btn:focus {
	background: #fff;
	color: var(--vp-navy);
}

/* --------------------------------------------------------------------------
   Members: latest members-only posts
   -------------------------------------------------------------------------- */

.vane-memberlist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--vp-rule);
}

.vane-memberlist__item {
	margin: 0;
}

.vane-memberlist__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	border-top: 1px solid var(--vp-rule);
	text-decoration: none;
}

.vane-memberlist__title {
	font-size: 16px;
	line-height: 1.4;
	color: var(--vp-navy);
}

.vane-memberlist__link:hover .vane-memberlist__title,
.vane-memberlist__link:focus .vane-memberlist__title {
	color: var(--vp-accent);
}

.vane-memberlist__date {
	flex: none;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vane-portal-link {
	display: inline-flex;
	gap: 6px;
	padding-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--vp-accent);
	border-bottom: 2px solid var(--vp-accent);
}

.vane-portal-link:hover,
.vane-portal-link:focus {
	color: var(--vp-navy);
	border-bottom-color: var(--vp-navy);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.vane-post__article { padding: 48px 56px 40px; }
	.vane-endband       { padding: 36px 56px 44px; }
	.vane-post__title   { font-size: 38px; }
}

@media (max-width: 767px) {
	.vane-post__article { padding: 32px 24px 28px; }
	.vane-endband       { padding: 28px 24px 36px; }

	.vane-post__title { font-size: 31px; }
	.vane-post__meta  { margin: 16px 0 26px; }

	.vane-post__body                  { font-size: 16px; }
	.vane-post__body h2               { margin-top: 32px; font-size: 25px; }
	.vane-post__body h3               { font-size: 20px; }
	.vane-post__body blockquote p     { font-size: 21px; }

	.vane-cta {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 26px 24px;
	}

	.vane-cta__title { font-size: 23px; text-align: center;}

	.vane-cta__btn {
		width: 60;
		text-align: center;
	}

	.vane-memberlist__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* Wave spacer — full-bleed, sits flush on top of the footer */
.vane-wave {
	margin-top: 140px;
	margin-bottom: -1px; /* kills the subpixel seam against the footer */
	line-height: 0;
	font-size: 0;
}

.vane-wave img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.vane-wave { margin-top: 80px; }
}