/*
Theme Name: Venting Cloud
Theme URI: https://example.com/venting-cloud
Author: Vijay Lakshmanan
Author URI: https://example.com
Description: A theme for personal articles, built on one idea: the page opens fogged and clears. The front page is a dark pane with real procedural vapour in it, which lifts once on load; below it the ground turns to pale glass and the writing begins. Post metadata sits out in the margin, and the rail fills with a mark as the reader moves through a piece. Self-hosted variable fonts, one accent colour, no card grids, no third-party requests, no tracking.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venting-cloud
Tags: blog, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready, full-width-template
*/

/* ==========================================================================
   0. Tokens

   The design is a cold window. "Glass" is the pale reading ground, "pane" is
   the dark ground the hero and footer sit on, and one accent -- flare -- is
   the only colour in an otherwise grey page. It is spent sparingly: the
   reading-progress mark, link underlines, the current menu item. Nothing is
   ever a large block of it.
   ========================================================================== */

:root {
	color-scheme: light dark;

	/* The reading ground: cold light, faintly green, never quite white. */
	--vc-glass:      #eceeed;
	--vc-glass-sunk: #e3e7e6;
	--vc-ink:        #16191a;
	--vc-slate:      #5a6467;
	--vc-rule:       #bfc7c7;

	/* The hero's ground: the brightest surface on the page, not the darkest.
	   Daylight coming through fogged glass rather than night behind it. It
	   is defined relative to the reading ground in both schemes, so the hero
	   always reads as the window the rest of the page is lit by. */
	--vc-dawn:        #f6f8f7;
	--vc-dawn-core:   #fefdfa;
	--vc-dawn-edge:   #d8e1de;

	/* Kept as a colour writers can still reach for in the editor. */
	--vc-pane:       #0e1518;

	/* The one accent. A cold red -- the colour of a pressure valve, not of
	   clay. Deliberately not an orange. The exact value is pinned by two
	   contrast requirements pulling opposite ways: it carries small text on
	   the glass (4.54:1) and it is the ground under a button label on hover
	   (5.30:1). --vc-flare-ink is whatever stays legible on top of it, which
	   has to flip with the scheme because the flare itself lifts in dark. */
	--vc-flare:      #c03d38;
	--vc-flare-ink:  #ffffff;
	--vc-flare-soft: rgba(192, 61, 56, 0.4);
	--vc-selection:  rgba(192, 61, 56, 0.18);

	/* Archivo carries a width axis, so display type is genuinely condensed
	   rather than transformed. Newsreader carries an optical-size axis, so
	   prose at 1.1rem and a pull quote at 2rem are drawn differently.
	   System stacks follow as fallbacks, matched for width and x-height so
	   the layout does not reflow when the webfont lands. */
	--vc-font-display: "Archivo Variable", "Archivo", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
	--vc-font-body:    "Newsreader Variable", "Newsreader", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
	--vc-font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

	/* Fluid type scale. The hero sits above the rest of the scale on
	   purpose: it is the one place the page raises its voice. */
	--vc-size-fine:  0.8125rem;
	--vc-size-small: 0.9375rem;
	--vc-size-body:  clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);
	--vc-size-lead:  clamp(1.1875rem, 1.08rem + 0.55vw, 1.4375rem);
	--vc-size-h3:    clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
	--vc-size-h2:    clamp(1.4375rem, 1.25rem + 0.95vw, 1.9375rem);
	--vc-size-h1:    clamp(1.9375rem, 1.55rem + 2.1vw, 3rem);
	--vc-size-lead-title: clamp(1.75rem, 1.35rem + 2.1vw, 2.75rem);
	--vc-size-hero:  clamp(2.75rem, 1.4rem + 6.4vw, 6.5rem);

	--vc-measure:  36rem;   /* the reading column, ~68 characters of Newsreader */
	--vc-wide:     56rem;   /* wide blocks */
	--vc-rail:     9rem;    /* the margin rail */
	--vc-gutter:   clamp(1.25rem, 4vw, 3rem);

	--vc-step-1: 0.5rem;
	--vc-step-2: 1rem;
	--vc-step-3: 1.75rem;
	--vc-step-4: 3rem;
	--vc-step-5: clamp(3.5rem, 8vw, 6rem);

	/* Images get a hair of radius. Not enough to read as a card, just
	   enough that the page is not aggressively square. */
	--vc-radius: 2px;

	--vc-progress: 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--vc-glass:      #131819;
		--vc-glass-sunk: #1a2022;
		--vc-ink:        #e6e9e8;
		--vc-slate:      #96a1a3;
		--vc-rule:       #2f3739;

		/* Still the brightest surface, just measured against a dark page. */
		--vc-dawn:      #1e2527;
		--vc-dawn-core: #2a3335;
		--vc-dawn-edge: #141a1c;

		--vc-flare:      #e0665e;
		--vc-flare-ink:  #180e0d;
		--vc-flare-soft: rgba(224, 102, 94, 0.44);
		--vc-selection:  rgba(224, 102, 94, 0.24);
	}
}

/* ==========================================================================
   1. Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background-color: var(--vc-glass);
	color: var(--vc-ink);
	font-family: var(--vc-font-body);
	font-size: var(--vc-size-body);
	font-variation-settings: "opsz" 16;
	line-height: 1.72;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-kerning: normal;
	overflow-wrap: break-word;
}

::selection { background: var(--vc-selection); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vc-font-display);
	font-weight: 600;
	font-stretch: 88%;
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0 0 var(--vc-step-2);
	text-wrap: balance;
}

h1 { font-size: var(--vc-size-h1); }
h2 { font-size: var(--vc-size-h2); }
h3 { font-size: var(--vc-size-h3); }
h4, h5, h6 { font-size: var(--vc-size-body); }

p, ul, ol, dl, blockquote, pre, figure, table { margin: 0 0 var(--vc-step-3); }

a {
	color: var(--vc-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--vc-flare-soft);
	transition: text-decoration-color 150ms ease, text-decoration-thickness 150ms ease;
}

a:hover,
a:focus {
	text-decoration-color: var(--vc-flare);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--vc-flare);
	outline-offset: 3px;
	border-radius: 1px;
}

img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
img { display: block; }

figcaption,
.wp-block-image figcaption {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 400;
	line-height: 1.5;
	color: var(--vc-slate);
	margin-top: 0.75rem;
	max-width: 34rem;
	text-align: left;
}

/* Sized for writers who quote often. At pull-quote size a blockquote wraps
   to four lines in a 36rem column and outshouts the headings around it, so
   these sit just above body size and lean on the italic and the rule to
   separate themselves instead. */
blockquote {
	border-left: 1px solid var(--vc-flare);
	margin-left: 0;
	padding-left: var(--vc-step-3);
	font-size: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
	font-style: italic;
	font-variation-settings: "opsz" 20;
	line-height: 1.55;
	color: var(--vc-ink);
}

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

blockquote cite {
	display: block;
	margin-top: var(--vc-step-2);
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-style: normal;
	color: var(--vc-slate);
}

blockquote cite::before { content: "— "; }

code, kbd, samp, pre {
	font-family: var(--vc-font-mono);
	font-size: 0.875em;
}

code {
	background: var(--vc-glass-sunk);
	padding: 0.15em 0.35em;
	border-radius: 2px;
}

pre {
	background: var(--vc-glass-sunk);
	border-left: 2px solid var(--vc-rule);
	padding: var(--vc-step-3);
	overflow-x: auto;
	line-height: 1.55;
}

pre code { background: none; padding: 0; }

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--vc-rule);
	margin: var(--vc-step-4) 0;
	height: 0;
}

table { width: 100%; border-collapse: collapse; font-size: var(--vc-size-small); }
th, td { border-bottom: 1px solid var(--vc-rule); padding: 0.6rem 0.75rem; text-align: left; }

th {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 600;
	color: var(--vc-ink);
}

/* The metadata voice: small Archivo, sentence case, tabular figures. Used
   for every date, byline, category and label in the theme. */
.vc-meta {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--vc-slate);
	font-variant-numeric: tabular-nums;
}

.vc-meta a {
	color: inherit;
	text-decoration-color: var(--vc-rule);
	text-decoration-thickness: 1px;
}

.vc-meta a:hover { color: var(--vc-ink); text-decoration-color: var(--vc-flare); }

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--vc-ink);
	color: var(--vc-glass);
	padding: 0.75rem 1.25rem;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus { left: var(--vc-gutter); top: 0.5rem; }

/* ==========================================================================
   2. Shell and the margin rail
   ========================================================================== */

.vc-shell {
	width: 100%;
	max-width: calc(var(--vc-rail) + var(--vc-measure) + 6rem);
	margin-inline: auto;
	padding-inline: var(--vc-gutter);
}

.vc-shell--wide { max-width: calc(var(--vc-rail) + var(--vc-wide) + 6rem); }

/* Metadata in the margin, prose in the column. */
.vc-rail-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vc-step-2);
}

@media (min-width: 60rem) {
	.vc-rail-layout {
		grid-template-columns: var(--vc-rail) minmax(0, 1fr);
		gap: 0 3rem;
	}
}

.vc-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0;
	min-width: 0;
	padding-bottom: var(--vc-step-1);
}

/* The rail is a fixed 9rem, and a byline is the one thing in it whose length
   the theme does not control: a display name left as an email address is far
   wider than the column and would otherwise spill out of the rail and across
   the margin. Items are held to the column and long tokens are allowed to
   break inside. */
.vc-rail > * {
	margin: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* A wrapped byline reads better as its own small block than as a ragged
   continuation of the line above it. */
.entry-author { line-height: 1.35; }

@media (min-width: 60rem) {
	.vc-rail {
		position: sticky;
		top: 2.5rem;
		align-self: start;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.55rem;
		padding-bottom: 0;
		padding-right: 1.5rem;
		border-right: 1px solid var(--vc-rule);
		text-align: right;
	}

	/* Signature: the rail rule fills with a brass mark as the post is read.
	   The rule is given real height so the fill has somewhere to travel. */
	.vc-rail--progress { min-height: min(26rem, 55vh); }

	.vc-rail--progress::after {
		content: "";
		position: absolute;
		top: 0;
		right: -1px;
		width: 2px;
		height: calc(var(--vc-progress) * 100%);
		background: var(--vc-flare);
		transition: height 90ms linear;
	}
}

.vc-rail__mark {
	display: none;
	width: 1.25rem;
	height: 1px;
	background: var(--vc-flare);
}

@media (min-width: 60rem) {
	.vc-rail__mark { display: block; }
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--vc-rule);
	background: var(--vc-glass);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vc-step-2);
	padding-block: var(--vc-step-3);
}

.site-branding {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	min-width: 0;
}

.site-title {
	font-family: var(--vc-font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	font-stretch: 78%;
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin: 0;
}

.site-title a { color: var(--vc-ink); text-decoration: none; }

/* The wordmark carries the site's one mark: a flare full stop, the period at
   the end of something said out loud. It is the only place the accent
   appears in the masthead. */
.site-title a::after {
	content: ".";
	color: var(--vc-flare);
}

.site-description { margin: 0; max-width: 22rem; }

.custom-logo { max-height: 2.5rem; width: auto; }

/* Navigation */
.site-header__nav { display: flex; align-items: baseline; gap: var(--vc-step-2); flex-wrap: wrap; }

.main-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--vc-slate);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--vc-ink);
	border-bottom-color: var(--vc-flare);
}

.main-navigation li { position: relative; }

.main-navigation ul ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 20;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--vc-glass);
	border: 1px solid var(--vc-rule);
	border-radius: var(--vc-radius);
	padding: 1rem 1.25rem;
	min-width: 12rem;
	text-align: left;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul { display: flex; }

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--vc-rule);
	border-radius: var(--vc-radius);
	color: var(--vc-ink);
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 500;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

.menu-toggle:hover { background: none; color: var(--vc-ink); border-color: var(--vc-flare); }

@media (max-width: 47.999rem) {
	.site-header__nav { width: 100%; flex-wrap: wrap; }
	.menu-toggle { display: block; }
	.main-navigation { width: 100%; }
	.main-navigation .menu-wrapper { display: none; }
	.main-navigation.is-open .menu-wrapper { display: block; padding-top: var(--vc-step-2); }
	.main-navigation ul { flex-direction: column; gap: 1rem; }
	.main-navigation ul ul { position: static; display: flex; border: 0; padding: 0.75rem 0 0 1rem; min-width: 0; }
}

/* ==========================================================================
   3b. The hero

   The page opens on light. The hero is the brightest surface in the theme --
   daylight through a fogged window -- and it clears once on load, so the
   first thing the site does is brighten rather than loom. Everything below
   it settles a shade back down onto the reading ground.
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--vc-ink);
	padding-block: clamp(3rem, 9vw, 7rem) clamp(3.5rem, 10vw, 7.5rem);

	/* The light source sits behind the headline and falls away to the
	   edges, which is what stops a pale block from reading as flat. */
	background:
		radial-gradient(115% 125% at 24% 30%,
			var(--vc-dawn-core) 0%,
			var(--vc-dawn) 38%,
			var(--vc-dawn-edge) 100%);
}

/* Condensation. Cool grey wisps sitting just under the ground's brightness,
   so the glass reads as breathed-on rather than dirty. */
.hero__fog {
	position: absolute;
	inset: -8% -4%;
	width: 108%;
	height: 116%;
	z-index: -1;
	/* The global svg rule caps replaced elements at the content width, which
	   would leave an unfogged strip down the right of the hero. */
	max-width: none;
	opacity: 0.72;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(58% 62% at 30% 40%, transparent 6%, rgba(0, 0, 0, 0.5) 46%, #000 78%);
	mask-image: radial-gradient(58% 62% at 30% 40%, transparent 6%, rgba(0, 0, 0, 0.5) 46%, #000 78%);
	-webkit-mask-size: 340% 340%;
	mask-size: 340% 340%;
	-webkit-mask-position: 30% 40%;
	mask-position: 30% 40%;
}

/* The hero settles into the reading ground instead of meeting it at a line,
   so the two light surfaces read as one room. */
.hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 30%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, var(--vc-glass) 0%, rgba(236, 238, 237, 0) 100%);
}

.hero__inner { position: relative; }

.hero__headline {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-hero);
	font-weight: 700;
	font-stretch: 74%;
	line-height: 0.94;
	letter-spacing: -0.022em;
	color: var(--vc-ink);
	max-width: 15ch;
	margin: 0 0 var(--vc-step-3);
	text-wrap: balance;
}

.hero__sub {
	font-family: var(--vc-font-body);
	font-size: var(--vc-size-lead);
	font-variation-settings: "opsz" 24;
	line-height: 1.5;
	color: var(--vc-slate);
	max-width: 34ch;
	margin: 0 0 var(--vc-step-4);
}

.hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-step-2) var(--vc-step-3);
}

.hero__cta {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 600;
	color: var(--vc-glass);
	background: var(--vc-ink);
	border: 1px solid var(--vc-ink);
	border-radius: var(--vc-radius);
	padding: 0.72rem 1.35rem;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.hero__cta:hover,
.hero__cta:focus {
	background: var(--vc-flare);
	border-color: var(--vc-flare);
	color: var(--vc-flare-ink);
	text-decoration: none;
}

.hero__count {
	margin: 0;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	color: var(--vc-slate);
	font-variant-numeric: tabular-nums;
}

/* The single orchestrated moment in the theme: on load the fog thins and a
   clear patch opens over the headline, once. Nothing else has an entrance. */
@media (prefers-reduced-motion: no-preference) {
	.hero__fog {
		animation: vcloud-clear 2200ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
	}

	.hero__headline,
	.hero__sub,
	.hero__foot {
		animation: vcloud-surface 1400ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
	}

	.hero__sub  { animation-delay: 140ms; }
	.hero__foot { animation-delay: 260ms; }
}

@keyframes vcloud-clear {
	from {
		-webkit-mask-size: 120% 120%;
		mask-size: 120% 120%;
		opacity: 0.95;
	}
	to {
		-webkit-mask-size: 340% 340%;
		mask-size: 340% 340%;
		opacity: 0.72;
	}
}

@keyframes vcloud-surface {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ==========================================================================
   3c. Featured articles on the front page

   One lead and two beside it. No boxes and no shadows: the lead earns its
   place through size and an image, the pair beside it through a hairline.
   ========================================================================== */

.featured { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

.featured__grid {
	display: grid;
	gap: var(--vc-step-4);
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.featured__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--vc-step-5);
		align-items: start;
	}
}

/* The pair behind the lead stack against each other, so the column does not
   inherit the lead's height and leave a hole between them. */
.featured__aside {
	display: flex;
	flex-direction: column;
	gap: var(--vc-step-4);
	min-width: 0;
}

.featured__item { min-width: 0; }

.featured__image {
	display: block;
	margin-bottom: var(--vc-step-3);
	border-radius: var(--vc-radius);
	overflow: hidden;
	background: var(--vc-glass-sunk);
}

.featured__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: filter 320ms ease, transform 320ms ease;
}

.featured__title {
	font-size: var(--vc-size-h3);
	font-stretch: 88%;
	margin-bottom: 0.6rem;
}

.featured__title a { color: var(--vc-ink); text-decoration: none; }

.featured__title a:hover,
.featured__title a:focus {
	text-decoration: underline;
	text-decoration-color: var(--vc-flare);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.featured__item--lead .featured__title {
	font-size: var(--vc-size-lead-title);
	font-stretch: 80%;
	letter-spacing: -0.018em;
	line-height: 1.04;
	margin-bottom: var(--vc-step-2);
}

.featured__excerpt {
	color: var(--vc-slate);
	max-width: 46ch;
	margin-bottom: var(--vc-step-2);
}

.featured__excerpt p:last-child { margin-bottom: 0; }

.featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin: 0;
}

/* The two beside the lead: a small image alongside the headline, divided by
   a hairline rather than boxed. */
.featured__aside .featured__item {
	display: grid;
	grid-template-columns: clamp(5rem, 20vw, 7rem) minmax(0, 1fr);
	gap: var(--vc-step-2) clamp(1rem, 3vw, 1.75rem);
	align-items: start;
}

.featured__aside .featured__item .featured__image { margin-bottom: 0; }
.featured__aside .featured__item .featured__image img { aspect-ratio: 1 / 1; }

.featured__aside .featured__item + .featured__item {
	padding-top: var(--vc-step-4);
	border-top: 1px solid var(--vc-rule);
}

/* The pane's fog in miniature: an image sits slightly cooled and clears on
   approach. Motion that answers the reader rather than announcing itself. */
@media (hover: hover) {
	.featured__image img { filter: saturate(0.82) contrast(1.02); }

	.featured__item:hover .featured__image img,
	.featured__item:focus-within .featured__image img {
		filter: saturate(1) contrast(1);
		transform: scale(1.014);
	}
}

.front-archive { padding-block: var(--vc-step-5) 0; }

/* Rail plus gutter plus measure. Capping the list rather than narrowing the
   shell keeps this section's left edge flush with the featured block above,
   which would otherwise step inwards for no reason the reader can see. */
.front-archive__title,
.front-archive .entry-list,
.front-archive__more { max-width: calc(var(--vc-rail) + 3rem + var(--vc-measure)); }

.front-archive__title {
	font-size: var(--vc-size-small);
	font-weight: 600;
	font-stretch: 100%;
	color: var(--vc-slate);
	padding-bottom: var(--vc-step-2);
	margin-bottom: var(--vc-step-4);
	border-bottom: 1px solid var(--vc-rule);
}

.front-archive__more { margin: var(--vc-step-4) 0 0; }

/* The front page opens flush against the masthead: the hero supplies its own
   space, so the main element must not add more above it. */
.vc-has-hero .site-main { padding-top: 0; }

/* ==========================================================================
   4. Post list: index, archive, search
   ========================================================================== */

.site-main { padding-block: var(--vc-step-5); }

.page-header { margin-bottom: var(--vc-step-5); }
.page-header__eyebrow { margin-bottom: 0.75rem; }
.page-title { margin-bottom: var(--vc-step-2); }
.archive-description { color: var(--vc-slate); max-width: var(--vc-measure); }
.archive-description p:last-child { margin-bottom: 0; }

.entry-list { display: flex; flex-direction: column; }

.entry-list .entry {
	padding-block: var(--vc-step-4);
	border-top: 1px solid var(--vc-rule);
}

.entry-list .entry:first-child { border-top: 0; padding-top: 0; }

/* The lead entry on page one takes the display size; the rest stay quiet. */
.entry--lead .entry-title { font-size: var(--vc-size-lead-title); }
.entry--lead .entry-excerpt { font-size: var(--vc-size-lead); }

.entry-title { margin-bottom: 0.75rem; }
.entry-title a { color: var(--vc-ink); text-decoration: none; }

.entry-title a:hover,
.entry-title a:focus {
	color: var(--vc-ink);
	text-decoration: underline;
	text-decoration-color: var(--vc-flare);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

.entry-excerpt {
	color: var(--vc-slate);
	max-width: var(--vc-measure);
	margin-bottom: var(--vc-step-2);
}

.entry-excerpt p:last-child { margin-bottom: 0; }

.entry-thumbnail { margin-bottom: var(--vc-step-3); display: block; }
.entry-thumbnail img { width: 100%; border-radius: var(--vc-radius); }

/* Terms are spaced rather than punctuated. Without a separator character the
   links need real distance between them, or two categories read as one. */
.entry-terms { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: var(--vc-step-2); }
.entry-footer .entry-terms { margin-top: 0; }

.entry-categories,
.entry-tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

.entry-tags a::before { content: "#"; color: var(--vc-rule); }

.read-more {
	display: inline-block;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 500;
	text-decoration: none;
	color: var(--vc-ink);
	border-bottom: 2px solid var(--vc-flare-soft);
	padding-bottom: 2px;
}

.read-more:hover { border-bottom-color: var(--vc-flare); }

.entry-rail__pin { color: var(--vc-flare); font-weight: 600; }

/* ==========================================================================
   5. Single posts and pages
   ========================================================================== */

.entry-header--single { margin-bottom: var(--vc-step-4); }
.entry-header--single .entry-title { margin-bottom: var(--vc-step-2); }

.entry-standfirst {
	font-size: var(--vc-size-lead);
	line-height: 1.5;
	color: var(--vc-slate);
	max-width: var(--vc-measure);
	margin-bottom: 0;
}

.post-thumbnail--single { margin-bottom: var(--vc-step-4); }

.entry-content > * { max-width: var(--vc-measure); }

.entry-content > .alignwide,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-table { max-width: var(--vc-wide); }

.entry-content > .alignfull { max-width: none; }

.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin-top: calc(var(--vc-step-4) * 1.25); }
.entry-content h3 { margin-top: calc(var(--vc-step-3) * 1.5); }

.entry-content ul,
.entry-content ol { padding-left: 1.25rem; }

.entry-content li { margin-bottom: 0.5rem; }
.entry-content li > ul,
.entry-content li > ol { margin-top: 0.5rem; margin-bottom: 0; }

.entry-footer {
	margin-top: var(--vc-step-5);
	padding-top: var(--vc-step-3);
	border-top: 1px solid var(--vc-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-step-2) var(--vc-step-3);
	justify-content: space-between;
	align-items: baseline;
}

.entry-footer > * { margin: 0; }

.author-bio {
	display: flex;
	gap: var(--vc-step-3);
	margin-top: var(--vc-step-4);
	padding-top: var(--vc-step-3);
	border-top: 1px solid var(--vc-rule);
	max-width: var(--vc-measure);
}

.author-bio__avatar img { border-radius: 50%; }
.author-bio__name { font-size: var(--vc-size-body); margin-bottom: 0.35rem; }
.author-bio__text { font-size: var(--vc-size-small); color: var(--vc-slate); margin-bottom: 0; }

/* Post-to-post navigation */
.post-navigation { margin-top: var(--vc-step-5); border-top: 1px solid var(--vc-rule); }

.post-navigation .nav-links {
	display: grid;
	gap: var(--vc-step-3);
	padding-top: var(--vc-step-3);
}

@media (min-width: 40rem) {
	.post-navigation .nav-links { grid-template-columns: 1fr 1fr; gap: var(--vc-step-4); }
	.post-navigation .nav-next { text-align: right; }
}

.post-navigation a { text-decoration: none; display: block; }
.post-navigation .nav-label { display: block; margin-bottom: 0.5rem; }

.post-navigation .nav-headline {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-h3);
	line-height: 1.2;
	color: var(--vc-ink);
}

.post-navigation a:hover .nav-headline { color: var(--vc-flare); }

/* Pagination */
.pagination {
	margin-top: var(--vc-step-5);
	padding-top: var(--vc-step-3);
	border-top: 1px solid var(--vc-rule);
}

.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }

.pagination .page-numbers {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 500;
	text-decoration: none;
	color: var(--vc-slate);
	padding: 0.35rem 0.6rem;
	border: 1px solid transparent;
	font-variant-numeric: tabular-nums;
}

.pagination .page-numbers:hover { color: var(--vc-ink); border-color: var(--vc-rule); }
.pagination .page-numbers.current { color: var(--vc-ink); border-color: var(--vc-flare); }

.page-links {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 500;
	margin-top: var(--vc-step-3);
}

/* ==========================================================================
   6. Comments
   ========================================================================== */

.comments-area { margin-top: var(--vc-step-5); max-width: var(--vc-measure); }

.comments-title,
.comment-reply-title { font-size: var(--vc-size-h3); margin-bottom: var(--vc-step-3); }

.comment-list { list-style: none; margin: 0 0 var(--vc-step-4); padding: 0; }

.comment-list ol.children {
	list-style: none;
	margin: var(--vc-step-3) 0 0;
	padding-left: var(--vc-step-3);
	border-left: 1px solid var(--vc-rule);
}

.comment-body { padding-block: var(--vc-step-3); border-top: 1px solid var(--vc-rule); }
.comment-list > li:first-child > .comment-body { border-top: 0; padding-top: 0; }

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-bottom: var(--vc-step-2);
}

.comment-author { display: flex; align-items: center; gap: 0.6rem; }

.comment-author .fn {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 500;
	font-style: normal;
	color: var(--vc-ink);
}

.comment-author img { border-radius: 50%; }
.comment-content { font-size: var(--vc-size-small); }
.comment-content p:last-child { margin-bottom: 0; }
.comment-awaiting-moderation { display: block; margin-top: 0.5rem; color: var(--vc-flare); }
.reply { margin-top: 0.75rem; }

.comment-reply-link {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 500;
	text-decoration: none;
	color: var(--vc-ink);
	border-bottom: 2px solid var(--vc-flare-soft);
}

.comment-reply-link:hover { border-bottom-color: var(--vc-flare); }

/* The site owner is worth marking in a comment thread: it is a fact about
   who is speaking, not decoration. */
.bypostauthor > .comment-body .fn::after {
	content: "Author";
	margin-left: 0.5rem;
	font-size: var(--vc-size-fine);
	font-weight: 500;
	color: var(--vc-flare);
}

.comment-form { display: grid; gap: var(--vc-step-2); }

.comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-fine);
	font-weight: 500;
	color: var(--vc-slate);
}

.comment-form p { margin: 0; }
.comment-notes { font-size: var(--vc-size-small); color: var(--vc-slate); }

.comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; }
.comment-form-cookies-consent input { width: auto; }

.comment-form-cookies-consent label,
.comment-form-cookies-consent + p label {
	margin: 0;
	font-family: var(--vc-font-body);
	font-size: var(--vc-size-small);
}

.no-comments { color: var(--vc-slate); font-size: var(--vc-size-small); }

/* ==========================================================================
   7. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	color: var(--vc-ink);
	background: transparent;
	border: 1px solid var(--vc-rule);
	border-radius: var(--vc-radius);
	padding: 0.65rem 0.8rem;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--vc-flare);
	outline: 2px solid var(--vc-flare-soft);
	outline-offset: 1px;
}

textarea { min-height: 9rem; resize: vertical; }

button,
input[type="submit"],
.wp-block-button__link,
.wp-block-search__button {
	display: inline-block;
	width: auto;
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--vc-glass);
	background: var(--vc-ink);
	border: 1px solid var(--vc-ink);
	border-radius: var(--vc-radius);
	padding: 0.72rem 1.35rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	background: var(--vc-flare);
	border-color: var(--vc-flare);
	color: var(--vc-flare-ink);
}

.search-form { display: flex; gap: 0.5rem; max-width: 26rem; }
.search-form label { flex: 1 1 auto; margin: 0; }
.search-form .search-field { width: 100%; }

/* ==========================================================================
   8. Footer
   ========================================================================== */

/* The footer sinks a shade below the reading ground rather than going dark,
   so the page ends quietly instead of hitting a wall. */
.site-footer {
	margin-top: var(--vc-step-5);
	border-top: 1px solid var(--vc-rule);
	background: var(--vc-glass-sunk);
	padding-block: var(--vc-step-5) var(--vc-step-4);
}

.footer-widgets { display: grid; gap: var(--vc-step-4); margin-bottom: var(--vc-step-5); }

@media (min-width: 48rem) {
	.footer-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.widget { font-size: var(--vc-size-small); }
.widget:last-child { margin-bottom: 0; }

.widget-title {
	font-family: var(--vc-font-display);
	font-size: var(--vc-size-small);
	font-weight: 600;
	font-stretch: 100%;
	color: var(--vc-ink);
	margin-bottom: var(--vc-step-2);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding-block: 0.4rem; border-bottom: 1px solid var(--vc-rule); }
.widget li:last-child { border-bottom: 0; }
.widget li ul { padding-left: 1rem; border-top: 1px solid var(--vc-rule); margin-top: 0.4rem; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; text-decoration-color: var(--vc-flare); }

.site-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-step-2) var(--vc-step-3);
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--vc-step-3);
	border-top: 1px solid var(--vc-rule);
}

.site-info p { margin: 0; }

.footer-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.footer-navigation a { text-decoration: none; }
.footer-navigation a:hover { color: var(--vc-ink); }

/* ==========================================================================
   9. Blocks and alignment
   ========================================================================== */

.alignleft { float: left; margin: 0.35rem var(--vc-step-3) var(--vc-step-2) 0; }
.alignright { float: right; margin: 0.35rem 0 var(--vc-step-2) var(--vc-step-3); }
.aligncenter { margin-inline: auto; }
.entry-content::after { content: ""; display: table; clear: both; }

.wp-block-pullquote {
	border-top: 1px solid var(--vc-flare);
	border-bottom: 1px solid var(--vc-flare);
	padding: var(--vc-step-3) 0;
	text-align: left;
}

.wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.wp-block-quote { border-left: 2px solid var(--vc-flare); }
.wp-block-code { background: var(--vc-glass-sunk); border: 0; border-left: 2px solid var(--vc-rule); padding: var(--vc-step-3); }
.wp-block-table figcaption { text-align: left; }
.wp-block-calendar table th { background: transparent; }
.wp-block-search__inside-wrapper { gap: 0.5rem; }

.has-ink-color { color: var(--vc-ink); }
.has-slate-color { color: var(--vc-slate); }
.has-flare-color { color: var(--vc-flare); }
.has-glass-color { color: var(--vc-glass); }
.has-pane-color { color: var(--vc-pane); }
.has-ink-background-color { background-color: var(--vc-ink); }
.has-slate-background-color { background-color: var(--vc-slate); }
.has-flare-background-color { background-color: var(--vc-flare); }
.has-glass-background-color { background-color: var(--vc-glass); }
.has-glass-sunk-background-color { background-color: var(--vc-glass-sunk); }
.has-pane-background-color { background-color: var(--vc-pane); color: var(--vc-glass); }
.has-dawn-background-color { background-color: var(--vc-dawn); }

/* Required WordPress core classes */
.wp-caption { margin-bottom: var(--vc-step-3); }
.wp-caption-text { font-family: var(--vc-font-display); font-size: var(--vc-size-fine); color: var(--vc-slate); }
.gallery-caption { display: block; }

/* ==========================================================================
   10. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ==========================================================================
   11. Print
   ========================================================================== */

@media print {
	.site-header__nav,
	.site-footer,
	.post-navigation,
	.comments-area,
	.pagination,
	.skip-link { display: none; }

	body { background: #fff; color: #000; font-size: 11pt; }
	.vc-rail { border: 0; position: static; }
	.vc-rail-layout { display: block; }
	a { text-decoration: none; color: #000; }
	.entry-content > * { max-width: none; }
}