/*
Theme Name: ViolinSchool
Theme URI: https://violinschool.com/
Author: ViolinSchool
Author URI: https://violinschool.com/
Description: The bespoke theme for ViolinSchool.com — a free, open reference for learning the violin, sponsored by StringSchool. Built to the ViolinSchool Brand Toolkit 2018 (v2.0): seven brand colours, white throughout, Avenir Next. No framework, no build step, no page builder, no external requests. The content structure lives in the ViolinSchool Core plugin, not here, so this theme can be replaced without losing a word.
Version: 1.4.1
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: violinschool
Tags: education, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ===========================================================================
   CONTENTS
   1.  Brand tokens
   2.  Reset and base
   3.  Typography
   4.  Layout
   5.  Links, buttons and focus
   6.  Header and navigation
   7.  Footer
   8.  Cards, chips and tags
   9.  The technique page (diagnostics, sections)
   10. The level page (the spine)
   11. Repertoire and answers
   12. Blog, archives, search, comments-free
   13. Forms
   14. Pagination and utilities
   14b. 1.1.0 — breadcrumbs, jump links, glossary, "you are here"
   14c. 1.2.0 — video-first: lead media, poster frames, tiles
   14d. 1.2.1 — the front page as sections, the menu button, spacing
   14e. 1.3.0 — the blog list, the editors' notice, the "not open yet" page
   14f. 1.4.0 — the blog tidied: cards, the top of a post, one footer
   14g. 1.4.1 — the front page from mockup v3, a white footer, phones and tablets
   14h. 1.4.1 — more room around everything (Simon, 22 Oct)
   15. Print
   ======================================================================== */


/* ---------------------------------------------------------------------------
   1. BRAND TOKENS

   THE SEVEN COLOURS AND NOTHING ELSE.

   Brand Toolkit 2018 (v2.0) permits exactly seven: purple, red, gold, yellow,
   grey, black and white. Every colour in this file is one of those seven or a
   neutral grey derived from black — no new hues anywhere.

   The --ink greys below are derived from black at reduced strength for body
   text and rules. They introduce no colour: they are black, softened, which is
   what makes long-form reading comfortable without breaking the palette.

   Two rules that follow from the toolkit and are enforced throughout:
     - The background is white. Everywhere. Not off-white, not tinted.
       --wash is used only for the very lightest fill on a note or a code span,
       and it is a grey, not a colour.
     - The logo is always full colour and never less than 50px.
------------------------------------------------------------------------- */

:root {
	/* The seven. */
	--vs-purple: #93278F;
	--vs-red: #bf373a;
	--vs-gold: #e69a34;
	--vs-yellow: #f9bb5a;
	--vs-grey: #808080;
	--vs-black: #000000;
	--vs-white: #ffffff;

	/* Neutrals, derived from black. No hue added. */
	--vs-ink: #111111;        /* body text */
	--vs-ink-2: #4a4a4a;      /* secondary text */
	--vs-ink-3: #6b6b6b;      /* meta text — still 4.5:1 on white */
	--vs-line: #e3e3e3;       /* hairline rules */
	--vs-line-2: #c9c9c9;     /* stronger rules and borders */
	--vs-wash: #f7f7f7;       /* the lightest possible fill */

	/*
	 * Purple at reading weight. The brand purple is a strong colour; used as
	 * link text on white it passes contrast comfortably, so links use it
	 * as-is. This darker variant is for the rare case where purple sits on
	 * the light wash.
	 */
	--vs-purple-deep: #7a1f77;

	/* Spacing scale. Everything on the page is a multiple of these. */
	--vs-s1: 4px;
	--vs-s2: 8px;
	--vs-s3: 12px;
	--vs-s4: 16px;
	--vs-s5: 24px;
	--vs-s6: 32px;
	--vs-s7: 48px;
	--vs-s8: 72px;

	--vs-r: 6px;
	--vs-r2: 10px;

	/*
	 * TYPEFACE.
	 *
	 * Avenir Next, with a fallback stack. It is not a web font and it is NOT
	 * loaded from anywhere: the page must not depend on a third party to
	 * render, and a font request to Google is both a performance cost and a
	 * privacy one. Machines that have Avenir Next get Avenir Next; everyone
	 * else gets the closest thing they already have installed, instantly.
	 */
	--vs-sans: "Avenir Next", "Avenir", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--vs-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* The measure. Long-form prose is unreadable much wider than this. */
	--vs-measure: 70ch;
	--vs-page: 1080px;
	--vs-narrow: 760px;

	/*
	 * The accent for the current section, and the ink that goes ON it.
	 *
	 * WHY THERE ARE TWO OF THESE AND NOT ONE.
	 *
	 * Measured against white, the seven brand colours do not behave the same
	 * way. Contrast ratios for white text on each:
	 *
	 *     Purple  7.17:1   passes comfortably
	 *     Red     5.49:1   passes
	 *     Grey    3.95:1   FAILS (needs 4.5:1)
	 *     Gold    2.48:1   FAILS badly
	 *     Yellow  1.71:1   effectively invisible
	 *
	 * Black text on those same three passes easily — grey 5.32:1, gold
	 * 8.46:1, yellow 12.28:1.
	 *
	 * So the ink is chosen per colour rather than assumed to be white. The
	 * palette is unchanged and every colour is still used exactly as the
	 * toolkit specifies; what changes is what is written on top of it. The
	 * theme sets both properties together wherever a section colour is
	 * applied — see vs_pillar_colour() and vs_pillar_ink() in functions.php.
	 */
	--vs-accent: var(--vs-purple);
	--vs-on-accent: var(--vs-white);
}


/* ---------------------------------------------------------------------------
   2. RESET AND BASE
------------------------------------------------------------------------- */

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

html {
	/*
	 * Smooth scrolling for the in-page section links on a technique page —
	 * but never for anyone who has asked their system for reduced motion.
	 */
	scroll-behavior: auto;
}

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

html,
body {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

body {
	background: var(--vs-white);
	color: var(--vs-ink);
	font-family: var(--vs-sans);
	/*
	 * Medium weight for body text, per the toolkit. 500 is Avenir Next
	 * Medium; systems without it fall back to their regular weight, which is
	 * correct behaviour rather than a compromise.
	 */
	font-weight: 500;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/*
	 * NOTHING SCROLLS SIDEWAYS.
	 *
	 * overflow-x: hidden on the body is a blunt instrument and it is used here
	 * as a safety net only. The real fix is that every wide thing on the site
	 * — tables, embeds, code — is inside its own scrolling container, which is
	 * done below. Both together mean the page cannot scroll sideways at any
	 * width even if an editor pastes in something enormous.
	 */
	overflow-x: hidden;
}

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

img {
	display: block;
}

figure {
	margin: var(--vs-s6) 0;
}

figcaption {
	margin-top: var(--vs-s2);
	font-size: 14px;
	color: var(--vs-ink-3);
}


/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY

   Fluid sizes with clamp(): a minimum for a phone, a maximum for a desktop,
   and a smooth ramp between the two. No breakpoint jumps in the type, and
   nothing ever gets too small to read or so large it wraps every two words.

   Weights follow the toolkit: Bold (700) for headers and titles, Demi Bold
   (600) for smaller web headers, Medium (500) for body.
------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vs-sans);
	color: var(--vs-ink);
	line-height: 1.2;
	margin: 0 0 var(--vs-s3);
	text-wrap: balance;
}

h1 {
	font-size: clamp(30px, 4.5vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
}

h2 {
	font-size: clamp(22px, 2.8vw, 29px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: var(--vs-s8);
}

h3 {
	font-size: clamp(18px, 2vw, 21px);
	font-weight: 600;
	margin-top: var(--vs-s6);
}

h4 {
	font-size: 16px;
	font-weight: 600;
	margin-top: var(--vs-s5);
}

h5,
h6 {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: var(--vs-s5);
}

/* The first heading in a region should not push itself away from the top. */
.vs-prose > :first-child,
.vs-section > :first-child {
	margin-top: 0;
}

p,
ul,
ol,
dl {
	margin: 0 0 var(--vs-s4);
}

p,
li {
	max-width: var(--vs-measure);
}

ul,
ol {
	padding-left: 1.3em;
}

li {
	margin-bottom: var(--vs-s2);
}

blockquote {
	margin: var(--vs-s6) 0;
	padding: var(--vs-s2) 0 var(--vs-s2) var(--vs-s5);
	border-left: 3px solid var(--vs-purple);
	color: var(--vs-ink-2);
	font-size: 1.05em;
}

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

cite {
	display: block;
	margin-top: var(--vs-s2);
	font-size: 14px;
	font-style: normal;
	color: var(--vs-ink-3);
}

hr {
	border: 0;
	border-top: 1px solid var(--vs-line);
	margin: var(--vs-s8) 0;
}

strong,
b {
	font-weight: 700;
}

small,
.vs-small {
	font-size: 14px;
}

.vs-muted {
	color: var(--vs-ink-2);
}

.vs-meta {
	color: var(--vs-ink-3);
	font-size: 14px;
}

.vs-lede {
	font-size: clamp(18px, 2vw, 20px);
	color: var(--vs-ink-2);
	max-width: 66ch;
	line-height: 1.6;
}

.vs-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s2);
}

code,
kbd,
samp {
	font-family: var(--vs-mono);
	font-size: 0.88em;
	background: var(--vs-wash);
	padding: 1px 5px;
	border-radius: var(--vs-r);
}

pre {
	background: var(--vs-wash);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	padding: var(--vs-s4);
	/* A long line of code scrolls inside its own box, never the page. */
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}

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

/*
 * TABLES.
 *
 * Wrapped in a scrolling container by the theme so a wide table on a phone
 * scrolls within itself. tabindex is added by the small JS file so the
 * scrolling region is reachable by keyboard; without JS the table simply
 * shrinks and stays readable.
 */
.vs-table-wrap {
	overflow-x: auto;
	margin: 0 0 var(--vs-s5);
	-webkit-overflow-scrolling: touch;
}

.vs-table-wrap:focus-visible {
	outline: 3px solid var(--vs-purple);
	outline-offset: 2px;
}

table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
	margin: 0 0 var(--vs-s5);
}

th,
td {
	text-align: left;
	padding: var(--vs-s3);
	border-bottom: 1px solid var(--vs-line);
	vertical-align: top;
}

thead th {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vs-ink-3);
	border-bottom: 2px solid var(--vs-line-2);
}


/* ---------------------------------------------------------------------------
   4. LAYOUT
------------------------------------------------------------------------- */

.vs-wrap {
	width: 100%;
	max-width: var(--vs-page);
	margin: 0 auto;
	padding: 0 var(--vs-s4);
}

@media (min-width: 700px) {
	.vs-wrap {
		padding: 0 var(--vs-s5);
	}
}

.vs-wrap--narrow {
	max-width: var(--vs-narrow);
}

.vs-main {
	display: block;
	padding: var(--vs-s7) 0 var(--vs-s8);
	min-height: 50vh;
}

/*
 * The two-column split used on technique and level pages.
 *
 * Mobile first: one column by default, two only when there is genuinely room.
 * The second column carries the diagnostics table and the outcomes list, which
 * are supporting material — so on a phone they fall below the main content,
 * which is the right reading order.
 */
.vs-two {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s6);
}

@media (min-width: 860px) {
	.vs-two {
		grid-template-columns: 1.15fr 1fr;
		gap: var(--vs-s7);
	}
}

.vs-section {
	margin: 0 0 var(--vs-s7);
	scroll-margin-top: var(--vs-s6);
}

/*
 * The brand bar: the five brand colours as a rule across the top of the page.
 * Purely decorative, so it is hidden from screen readers — a screen reader
 * announcing "five coloured blocks" helps nobody.
 */
.vs-brandbar {
	display: flex;
	height: 6px;
	width: 100%;
}

.vs-brandbar span {
	flex: 1;
}

.vs-brandbar span:nth-child(1) { background: var(--vs-purple); }
.vs-brandbar span:nth-child(2) { background: var(--vs-red); }
.vs-brandbar span:nth-child(3) { background: var(--vs-gold); }
.vs-brandbar span:nth-child(4) { background: var(--vs-yellow); }
.vs-brandbar span:nth-child(5) { background: var(--vs-grey); }


/* ---------------------------------------------------------------------------
   5. LINKS, BUTTONS AND FOCUS
------------------------------------------------------------------------- */

a {
	color: var(--vs-purple);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/*
 * FOCUS.
 *
 * A visible focus ring on everything that can be focused, always. This is not
 * negotiable: it is how anybody navigating by keyboard knows where they are,
 * and removing it is the single most common accessibility failure on the web.
 *
 * :focus-visible means a mouse click does not leave a ring behind, but the
 * keyboard always does.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--vs-purple);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Older browsers with no :focus-visible support still get a ring. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus {
		outline: 3px solid var(--vs-purple);
		outline-offset: 2px;
	}
}

/*
 * The skip link. Visually hidden until focused, then it appears at the top
 * left — the first thing a keyboard user reaches on every page.
 */
.vs-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--vs-purple);
	color: var(--vs-white);
	padding: var(--vs-s3) var(--vs-s4);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--vs-r) 0;
}

.vs-skip-link:focus {
	left: 0;
	outline: 3px solid var(--vs-gold);
	outline-offset: -3px;
}

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

.screen-reader-text:focus {
	background-color: var(--vs-white);
	clip-path: none;
	color: var(--vs-purple);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: var(--vs-s2);
	padding: var(--vs-s3) var(--vs-s4);
	text-decoration: none;
	top: var(--vs-s2);
	width: auto;
	z-index: 100000;
}

.vs-button,
.vs-nav-cta {
	display: inline-block;
	background: var(--vs-purple);
	color: var(--vs-white);
	padding: var(--vs-s3) var(--vs-s5);
	border: 2px solid var(--vs-purple);
	border-radius: var(--vs-r);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.vs-button:hover,
.vs-nav-cta:hover,
.vs-button:focus,
.vs-nav-cta:focus {
	background: var(--vs-purple-deep);
	border-color: var(--vs-purple-deep);
	color: var(--vs-white);
	text-decoration: none;
}

.vs-button--ghost {
	background: var(--vs-white);
	color: var(--vs-purple);
}

.vs-button--ghost:hover,
.vs-button--ghost:focus {
	background: var(--vs-purple);
	color: var(--vs-white);
}


/* ---------------------------------------------------------------------------
   6. HEADER AND NAVIGATION
------------------------------------------------------------------------- */

.vs-header {
	border-bottom: 1px solid var(--vs-line);
	background: var(--vs-white);
}

.vs-header-inner {
	display: flex;
	align-items: center;
	gap: var(--vs-s4);
	padding: var(--vs-s4) 0;
	flex-wrap: wrap;
}

/*
 * THE LOGO.
 *
 * Toolkit rules, enforced here: always full colour, never below 50px, and
 * given generous clear space. The 26px of padding around it is that clear
 * space, and the min-width guarantees the minimum size even on the narrowest
 * phone.
 */
.vs-logo {
	display: inline-block;
	line-height: 0;
	padding: var(--vs-s2) 0;
	margin-right: auto;
	text-decoration: none;
}

.vs-logo img {
	display: block;
	width: 190px;
	min-width: 130px;
	height: auto;
}

@media (min-width: 700px) {
	.vs-logo img {
		width: 220px;
	}
}

/* If no logo image is available at all, the site name still reads correctly. */
.vs-logo-text {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--vs-s2);
	background: var(--vs-white);
	color: var(--vs-ink);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r);
	padding: var(--vs-s2) var(--vs-s3);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/*
 * The toggle button is hidden by default and revealed by JavaScript.
 *
 * WHY: with JavaScript off, the button would do nothing, so it must not be
 * there. Instead the menu is simply always visible — which works perfectly
 * well, it just takes more vertical space. This is what "progressive
 * enhancement" means in practice: the plain version is complete, and the
 * script only makes it tidier.
 */
.vs-nav-toggle[hidden] {
	display: none;
}

.vs-nav {
	width: 100%;
}

.vs-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vs-nav li {
	margin: 0;
	max-width: none;
	border-top: 1px solid var(--vs-line);
}

.vs-nav a {
	display: block;
	padding: var(--vs-s3) 0;
	color: var(--vs-ink-2);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.vs-nav a:hover,
.vs-nav a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

/*
 * THE CURRENT SECTION.
 *
 * Marked with weight, colour AND a rule beneath it. Never colour alone —
 * somebody who cannot distinguish purple from grey still sees the bold weight
 * and the underline, and a screen reader gets aria-current from the markup.
 */
.vs-nav .current-menu-item > a,
.vs-nav .current-menu-ancestor > a,
.vs-nav .current_page_item > a,
.vs-nav [aria-current="page"] {
	color: var(--vs-purple);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

@media (min-width: 900px) {
	.vs-header-inner {
		flex-wrap: nowrap;
	}

	.vs-nav {
		width: auto;
	}

	.vs-nav ul {
		flex-direction: row;
		align-items: center;
		gap: var(--vs-s5);
		flex-wrap: wrap;
	}

	.vs-nav li {
		border-top: 0;
	}

	.vs-nav a {
		padding: var(--vs-s2) 0;
		font-size: 15px;
	}
}

/* Sub-menus: shown as an indented list rather than a hover dropdown.
   A hover dropdown is unusable on a touchscreen and awkward with a keyboard;
   an indented list is neither. */
.vs-nav .sub-menu {
	display: block;
	padding-left: var(--vs-s4);
}

@media (min-width: 900px) {
	.vs-nav .sub-menu {
		display: none;
	}

	.vs-nav li:hover > .sub-menu,
	.vs-nav li:focus-within > .sub-menu {
		display: block;
		position: absolute;
		background: var(--vs-white);
		border: 1px solid var(--vs-line);
		border-radius: var(--vs-r);
		padding: var(--vs-s2) var(--vs-s4);
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
		z-index: 20;
		min-width: 200px;
	}

	.vs-nav > ul > li {
		position: relative;
	}
}


/* ---------------------------------------------------------------------------
   7. FOOTER
------------------------------------------------------------------------- */

.vs-footer {
	border-top: 1px solid var(--vs-line);
	margin-top: var(--vs-s8);
	padding: var(--vs-s7) 0 var(--vs-s7);
	background: var(--vs-white);
}

.vs-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s6);
}

@media (min-width: 760px) {
	.vs-footer-grid {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--vs-s8);
	}
}

.vs-footer h2 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s3);
}

.vs-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--vs-s5);
}

.vs-footer li {
	margin: 0 0 var(--vs-s2);
	break-inside: avoid;
}

.vs-footer a {
	color: var(--vs-ink-2);
	text-decoration: none;
	font-size: 15px;
}

.vs-footer a:hover,
.vs-footer a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-colophon {
	margin-top: var(--vs-s7);
	padding-top: var(--vs-s4);
	border-top: 1px solid var(--vs-line);
	font-size: 14px;
	color: var(--vs-ink-3);
}

.vs-colophon p {
	margin: 0 0 var(--vs-s2);
	max-width: none;
}

.vs-sponsor {
	font-weight: 600;
	color: var(--vs-ink-2);
}


/* ---------------------------------------------------------------------------
   8. CARDS, CHIPS AND TAGS
------------------------------------------------------------------------- */

.vs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s5);
	margin: var(--vs-s5) 0 var(--vs-s7);
	list-style: none;
	padding: 0;
}

@media (min-width: 560px) {
	.vs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 880px) {
	.vs-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.vs-grid > li {
	margin: 0;
	max-width: none;
}

.vs-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r2);
	overflow: hidden;
	background: var(--vs-white);
}

/*
 * The coloured band at the top of a card carries the section name in words.
 * The colour is a signal, never the message — the label is always there.
 */
.vs-card-band {
	background: var(--vs-accent);
	/* See the note on --vs-on-accent in the tokens above: white is not
	   readable on gold, yellow or grey, so the ink is chosen per colour. */
	color: var(--vs-on-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: var(--vs-s2) var(--vs-s4);
}

.vs-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--vs-wash);
}

.vs-card-body {
	padding: var(--vs-s4) var(--vs-s5) var(--vs-s5);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.vs-card-body h3,
.vs-card-body h2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--vs-s2);
}

.vs-card-body h3 a,
.vs-card-body h2 a {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-card-body h3 a:hover,
.vs-card-body h2 a:hover,
.vs-card-body h3 a:focus,
.vs-card-body h2 a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-card-body p {
	font-size: 15px;
	color: var(--vs-ink-2);
	margin: 0 0 var(--vs-s3);
	max-width: none;
}

.vs-card-meta {
	margin-top: auto;
	font-size: 13px;
	color: var(--vs-ink-3);
}

/* Chips: the level filters and the "where are you" router on the home page. */
.vs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s2);
	list-style: none;
	margin: var(--vs-s4) 0 var(--vs-s6);
	padding: 0;
}

.vs-chips li {
	margin: 0;
	max-width: none;
}

.vs-chip {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding: var(--vs-s2) var(--vs-s4);
	border: 1px solid var(--vs-line-2);
	border-radius: 999px;
	color: var(--vs-ink-2);
	background: var(--vs-white);
	text-decoration: none;
	line-height: 1.4;
}

.vs-chip:hover,
.vs-chip:focus {
	border-color: var(--vs-purple);
	color: var(--vs-purple);
	text-decoration: none;
}

/*
 * The current chip.
 *
 * Filled purple AND carrying aria-current in the markup, so the state is
 * announced as well as seen.
 */
.vs-chip--on,
.vs-chip[aria-current="page"] {
	background: var(--vs-purple);
	border-color: var(--vs-purple);
	color: var(--vs-white);
	font-weight: 700;
}

.vs-chip--on:hover,
.vs-chip[aria-current="page"]:hover,
.vs-chip--on:focus,
.vs-chip[aria-current="page"]:focus {
	background: var(--vs-purple-deep);
	border-color: var(--vs-purple-deep);
	color: var(--vs-white);
}

.vs-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--vs-wash);
	border: 1px solid var(--vs-line);
	color: var(--vs-ink-2);
	text-decoration: none;
}

a.vs-tag:hover,
a.vs-tag:focus {
	border-color: var(--vs-purple);
	color: var(--vs-purple);
	text-decoration: none;
}

/*
 * A note box. Purple rule on the left, lightest grey fill.
 * The heading inside it carries the meaning; the colour is decoration.
 */
.vs-note {
	background: var(--vs-wash);
	border-left: 4px solid var(--vs-purple);
	padding: var(--vs-s4) var(--vs-s5);
	margin: var(--vs-s5) 0;
	border-radius: 0 var(--vs-r) var(--vs-r) 0;
	color: var(--vs-ink-2);
}

.vs-note > :last-child {
	margin-bottom: 0;
}

.vs-note--task {
	border-left-color: var(--vs-gold);
}

.vs-note--rights {
	border-left-color: var(--vs-grey);
}

/* The page intro block: eyebrow, title, lede, meta line. */
.vs-page-head {
	margin: 0 0 var(--vs-s6);
	padding-bottom: var(--vs-s5);
	border-bottom: 1px solid var(--vs-line);
}

.vs-page-head h1 {
	margin-bottom: var(--vs-s3);
}

.vs-dot-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s2) 0;
	margin: var(--vs-s3) 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--vs-ink-3);
}

.vs-dot-list li {
	margin: 0;
	max-width: none;
}

.vs-dot-list li + li::before {
	content: "·";
	margin: 0 var(--vs-s2);
	color: var(--vs-line-2);
}


/* ---------------------------------------------------------------------------
   9. THE TECHNIQUE PAGE
------------------------------------------------------------------------- */

/*
 * THE DIAGNOSTICS TABLE.
 *
 * The most distinctive thing on the site, so it is given a real visual
 * identity: a red rule (the "what goes wrong" colour), a proper two-column
 * table with real headers, and enough room to breathe.
 *
 * It is a real <table> with real <th scope="col"> headers, because it is real
 * tabular data: a screen reader announces "What you hear: it sounds like a
 * wobble. Usually: too slow, too wide." That is only possible with a proper
 * table, which is why this is not a series of divs.
 */
.vs-diagnostics {
	border-top: 3px solid var(--vs-red);
	padding-top: var(--vs-s4);
	margin: 0 0 var(--vs-s6);
}

.vs-diagnostics h2,
.vs-diagnostics h3 {
	margin-top: 0;
	font-size: 20px;
}

.vs-diagnostics .vs-diagnostics-intro {
	font-size: 15px;
	color: var(--vs-ink-2);
	margin-bottom: var(--vs-s4);
}

.vs-diagnostics table {
	font-size: 15px;
}

.vs-diagnostics thead th {
	color: var(--vs-red);
	border-bottom-color: var(--vs-red);
}

.vs-diagnostics tbody th {
	font-weight: 600;
	color: var(--vs-ink);
	width: 55%;
}

.vs-diagnostics tbody td {
	color: var(--vs-ink-2);
}

/*
 * The in-page section jump links on a technique page.
 *
 * These are ordinary anchor links to headings further down the page. They work
 * with JavaScript off, they work with the keyboard, and they give the page a
 * table of contents without any script at all.
 */
.vs-jump {
	margin: var(--vs-s5) 0 var(--vs-s6);
	padding: var(--vs-s4) 0;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-jump h2 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s3);
}

/* 1.1.0 — the list itself: a numbered run of links, wrapping on a phone. */
.vs-jump ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s2) var(--vs-s5);
	counter-reset: vs-jump;
}

.vs-jump li {
	margin: 0;
	max-width: none;
	font-size: 15px;
	font-weight: 600;
	counter-increment: vs-jump;
}

.vs-jump li::before {
	content: counter(vs-jump) " ";
	color: var(--vs-ink-3);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.vs-jump a {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-jump a:hover,
.vs-jump a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

/* A heading arrived at from a jump link sits clear of the top of the screen. */
.vs-prose h2,
.vs-prose h3 {
	scroll-margin-top: var(--vs-s5);
}

/* A list of related content: pieces, lessons, answers. */
.vs-related {
	margin: 0 0 var(--vs-s6);
}

.vs-related h2,
.vs-related h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s3);
}

.vs-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vs-related li {
	margin: 0;
	border-bottom: 1px solid var(--vs-line);
	max-width: none;
}

.vs-related li:last-child {
	border-bottom: 0;
}

.vs-related a {
	display: block;
	padding: var(--vs-s3) 0;
	color: var(--vs-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.vs-related a:hover,
.vs-related a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-related .vs-related-note {
	display: block;
	font-weight: 500;
	font-size: 13px;
	color: var(--vs-ink-3);
	margin-top: 2px;
}


/* ---------------------------------------------------------------------------
   10. THE LEVEL PAGE — THE SPINE
------------------------------------------------------------------------- */

/*
 * A row in a lesson list. Number, title, duration.
 *
 * The whole row is not a link — only the title is. A link whose text is the
 * entire row reads terribly in a screen reader's list of links, and copying
 * text out of it is a nuisance.
 */
.vs-lessons {
	list-style: none;
	margin: 0 0 var(--vs-s6);
	padding: 0;
	border-top: 1px solid var(--vs-line);
}

.vs-lessons li {
	margin: 0;
	max-width: none;
	border-bottom: 1px solid var(--vs-line);
}

.vs-lesson-row {
	display: flex;
	align-items: baseline;
	gap: var(--vs-s4);
	padding: var(--vs-s3) 0;
	flex-wrap: wrap;
}

.vs-lesson-num {
	font-size: 13px;
	font-weight: 700;
	color: var(--vs-ink-3);
	min-width: 2.2em;
	font-variant-numeric: tabular-nums;
}

.vs-lesson-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--vs-ink);
	text-decoration: none;
	flex: 1 1 12ch;
}

.vs-lesson-title:hover,
.vs-lesson-title:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-lesson-dur {
	font-size: 13px;
	color: var(--vs-ink-3);
	margin-left: auto;
	white-space: nowrap;
}

/*
 * The outcomes list — "by the end you can".
 *
 * Each item is prefixed with a tick drawn in CSS. It is decorative, marked
 * aria-hidden by being a CSS ::before (which assistive technology ignores),
 * and the meaning is entirely in the words.
 */
.vs-outcomes {
	list-style: none;
	margin: 0 0 var(--vs-s5);
	padding: 0;
}

.vs-outcomes li {
	position: relative;
	padding: var(--vs-s3) 0 var(--vs-s3) var(--vs-s6);
	border-bottom: 1px solid var(--vs-line);
	font-size: 16px;
	max-width: none;
	margin: 0;
}

.vs-outcomes li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.35em;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--vs-purple);
	border-bottom: 2px solid var(--vs-purple);
	transform: rotate(-45deg);
}

/* The row of level chips that runs across the top of every Learn page. */
.vs-level-nav {
	margin: 0 0 var(--vs-s6);
}


/* ---------------------------------------------------------------------------
   11. REPERTOIRE AND ANSWERS
------------------------------------------------------------------------- */

/* The facts panel on a piece: composer, key, level, rights. */
.vs-facts {
	margin: 0 0 var(--vs-s6);
	border-top: 1px solid var(--vs-line-2);
}

.vs-facts div {
	display: flex;
	gap: var(--vs-s4);
	padding: var(--vs-s3) 0;
	border-bottom: 1px solid var(--vs-line);
	font-size: 15px;
	flex-wrap: wrap;
}

.vs-facts dt {
	font-weight: 700;
	color: var(--vs-ink-3);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	min-width: 9em;
	padding-top: 3px;
}

.vs-facts dd {
	margin: 0;
	flex: 1 1 12ch;
	color: var(--vs-ink);
}

/*
 * THE SHORT ANSWER BOX.
 *
 * On an answer page this comes before everything else, because somebody who
 * arrives from a search has one question and should not have to read four
 * paragraphs to find out whether they are in the right place.
 *
 * Gold rule: the "here is the thing you came for" colour on this site.
 */
.vs-short-answer {
	border-left: 4px solid var(--vs-gold);
	background: var(--vs-wash);
	padding: var(--vs-s5);
	margin: 0 0 var(--vs-s6);
	border-radius: 0 var(--vs-r) var(--vs-r) 0;
	font-size: 18px;
	line-height: 1.6;
}

.vs-short-answer h2 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s2);
}

.vs-short-answer p:last-child {
	margin-bottom: 0;
}

.vs-traps {
	list-style: none;
	margin: 0 0 var(--vs-s5);
	padding: 0;
}

.vs-traps li {
	position: relative;
	padding: var(--vs-s3) 0 var(--vs-s3) var(--vs-s6);
	border-bottom: 1px solid var(--vs-line);
	max-width: none;
	margin: 0;
}

/* A short red rule, not an icon. Meaning is in the heading above the list. */
.vs-traps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.5em;
	width: 14px;
	height: 2px;
	background: var(--vs-red);
}


/* ---------------------------------------------------------------------------
   12. BLOG, ARCHIVES, SEARCH
------------------------------------------------------------------------- */

/*
 * The ordinary WordPress blog is kept, complete and unchanged in behaviour.
 * News and general writing still go in Posts, with categories and tags, and
 * they get the same typography as everything else.
 */
.vs-entry {
	padding: 0 0 var(--vs-s7);
	margin: 0 0 var(--vs-s7);
	border-bottom: 1px solid var(--vs-line);
}

.vs-entry:last-child {
	border-bottom: 0;
}

.vs-entry-title {
	font-size: clamp(21px, 2.4vw, 26px);
	margin: 0 0 var(--vs-s2);
}

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

.vs-entry-title a:hover,
.vs-entry-title a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-entry-meta {
	font-size: 14px;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s3);
}

.vs-entry-meta a {
	color: var(--vs-ink-3);
}

.vs-archive-head {
	margin: 0 0 var(--vs-s7);
	padding-bottom: var(--vs-s5);
	border-bottom: 2px solid var(--vs-line-2);
}

.vs-empty-state {
	padding: var(--vs-s7) 0;
	border-top: 1px solid var(--vs-line);
}

/* The prose body of an article, from the block editor. */
.vs-prose > * {
	max-width: var(--vs-measure);
}

.vs-prose > .alignwide,
.vs-prose > .alignfull,
.vs-prose > figure,
.vs-prose > .wp-block-image,
.vs-prose > .wp-block-embed,
.vs-prose > .vs-table-wrap,
.vs-prose > table,
.vs-prose > pre {
	max-width: none;
}

.vs-prose h2 {
	scroll-margin-top: var(--vs-s5);
}

/* WordPress's standard image alignment classes. */
.alignleft {
	float: left;
	margin: 0 var(--vs-s5) var(--vs-s4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--vs-s4) var(--vs-s5);
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 560px) {
	/* On a phone a floated image squeezes the text into a column two words
	   wide. Below this width, floats are dropped entirely. */
	.alignleft,
	.alignright {
		float: none;
		margin: var(--vs-s5) 0;
	}
}

.wp-caption {
	max-width: 100%;
}

.sticky .vs-entry-title::after {
	content: " (pinned)";
	font-size: 14px;
	font-weight: 500;
	color: var(--vs-ink-3);
}


/* ---------------------------------------------------------------------------
   12b. BLOCKS

   WordPress's own block stylesheet is removed in functions.php, so the blocks
   an editor actually uses are styled here instead. This is a short list on
   purpose: prose, images, video, quotes, lists, tables, columns, buttons and
   separators cover essentially everything a long-form article needs.

   If a block ever looks wrong, the fix is to add a rule here — not to put
   WordPress's 100KB stylesheet back.
------------------------------------------------------------------------- */

.wp-block-image {
	margin: var(--vs-s6) 0;
}

.wp-block-image img {
	border-radius: var(--vs-r);
}

.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption {
	margin-top: var(--vs-s2);
	font-size: 14px;
	color: var(--vs-ink-3);
	text-align: left;
}

/*
 * Video and other embeds.
 *
 * aspect-ratio keeps the box the right shape while the video loads, so the
 * page does not jump about as things arrive — which matters most on a phone
 * on a slow connection, which is where a lot of this site will be read.
 */
.wp-block-embed__wrapper,
.wp-block-video {
	margin: var(--vs-s6) 0;
}

.wp-block-embed iframe,
.wp-block-video video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--vs-r);
	background: var(--vs-wash);
}

.wp-block-quote {
	margin: var(--vs-s6) 0;
	padding: var(--vs-s2) 0 var(--vs-s2) var(--vs-s5);
	border-left: 3px solid var(--vs-purple);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--vs-line);
	margin: var(--vs-s8) 0;
	max-width: none;
}

.wp-block-button__link {
	display: inline-block;
	background: var(--vs-purple);
	color: var(--vs-white);
	padding: var(--vs-s3) var(--vs-s5);
	border-radius: var(--vs-r);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--vs-purple-deep);
	color: var(--vs-white);
}

.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s6);
	margin: var(--vs-s6) 0;
}

@media (min-width: 760px) {
	.wp-block-columns {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

.wp-block-column > :first-child {
	margin-top: 0;
}

.wp-block-table table {
	width: 100%;
}

.wp-block-group > :first-child {
	margin-top: 0;
}

.wp-block-list {
	padding-left: 1.3em;
}

/* An embed or image marked "wide" is allowed past the reading measure. */
.alignwide {
	max-width: min(100%, 1000px);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: 100%;
}

/*
 * The seven brand colours as block-editor classes.
 *
 * WordPress normally generates these from the palette declared in
 * functions.php, in the stylesheet that is removed above — so they are
 * written out here by hand. If a colour is ever added to the palette (it
 * should not be), it needs a pair of rules here too.
 */
.has-vs-purple-color { color: var(--vs-purple); }
.has-vs-red-color { color: var(--vs-red); }
.has-vs-gold-color { color: var(--vs-gold); }
.has-vs-yellow-color { color: var(--vs-yellow); }
.has-vs-grey-color { color: var(--vs-grey); }
.has-vs-black-color { color: var(--vs-black); }
.has-vs-white-color { color: var(--vs-white); }

.has-vs-purple-background-color { background-color: var(--vs-purple); }
.has-vs-red-background-color { background-color: var(--vs-red); }
.has-vs-gold-background-color { background-color: var(--vs-gold); }
.has-vs-yellow-background-color { background-color: var(--vs-yellow); }
.has-vs-grey-background-color { background-color: var(--vs-grey); }
.has-vs-black-background-color { background-color: var(--vs-black); }
.has-vs-white-background-color { background-color: var(--vs-white); }

/* A coloured background needs padding, or the text sits on the edge. */
[class*="-background-color"] {
	padding: var(--vs-s4) var(--vs-s5);
	border-radius: var(--vs-r);
}

.has-small-font-size { font-size: 15px; }
.has-normal-font-size { font-size: 17px; }
.has-large-font-size { font-size: 20px; }
.has-heading-font-size { font-size: 27px; }

/* The optional footer widget area. (1.4.1: no longer drawn — see footer.php.
   Kept, unused, in case it is ever drawn again.) */
.vs-footer-widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s6);
	margin-bottom: var(--vs-s7);
}

@media (min-width: 760px) {
	.vs-footer-widgets {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

.vs-widget-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vs-ink-3);
	margin: 0 0 var(--vs-s3);
}

/* Pagination inside an article split over several pages. */
.vs-page-links {
	margin: var(--vs-s6) 0 0;
	padding-top: var(--vs-s4);
	border-top: 1px solid var(--vs-line);
	font-size: 15px;
}

.vs-page-links a,
.vs-page-links > span > span {
	display: inline-block;
	min-width: 2.2em;
	padding: var(--vs-s1) var(--vs-s2);
	text-align: center;
}

/* (The home page hero and router were removed in 1.2.1 — see 14d.) */


/* ---------------------------------------------------------------------------
   13. FORMS
------------------------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming in when a field is focused. */
	color: var(--vs-ink);
	background: var(--vs-white);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r);
	padding: var(--vs-s3);
	width: 100%;
	max-width: 100%;
}

label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: var(--vs-s2);
}

.vs-search-form {
	display: flex;
	gap: var(--vs-s2);
	max-width: 520px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.vs-search-form p {
	flex: 1 1 14ch;
	margin: 0;
	max-width: none;
}

.vs-search-form .vs-button {
	flex: 0 0 auto;
}


/* ---------------------------------------------------------------------------
   14. PAGINATION AND UTILITIES
------------------------------------------------------------------------- */

.vs-pagination {
	margin: var(--vs-s7) 0 0;
	padding-top: var(--vs-s5);
	border-top: 1px solid var(--vs-line);
}

.vs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s2);
	align-items: center;
}

.vs-pagination .page-numbers {
	display: inline-block;
	min-width: 2.6em;
	padding: var(--vs-s2) var(--vs-s3);
	text-align: center;
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.vs-pagination .page-numbers.current {
	background: var(--vs-purple);
	border-color: var(--vs-purple);
	color: var(--vs-white);
}

.vs-pagination .page-numbers.dots {
	border-color: transparent;
}

.vs-post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s4);
	margin: var(--vs-s7) 0 0;
	padding-top: var(--vs-s5);
	border-top: 1px solid var(--vs-line);
}

@media (min-width: 640px) {
	.vs-post-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.vs-post-nav a {
	display: block;
	padding: var(--vs-s4);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r2);
	text-decoration: none;
	color: var(--vs-ink);
}

.vs-post-nav a:hover,
.vs-post-nav a:focus {
	border-color: var(--vs-purple);
}

.vs-post-nav .vs-post-nav-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vs-ink-3);
	margin-bottom: var(--vs-s1);
}

.vs-post-nav .vs-post-nav-title {
	font-weight: 600;
}

.vs-post-nav--next {
	text-align: right;
}


/* ---------------------------------------------------------------------------
   14b. 1.1.0 — BREADCRUMBS, GLOSSARY, "YOU ARE HERE"
------------------------------------------------------------------------- */

/*
 * The breadcrumb trail. Small, quiet, and above everything: it says where a
 * page sits before the page says what it is. The separator is drawn in CSS so
 * a screen reader hears a list, not a row of chevrons.
 */
.vs-crumbs {
	margin: var(--vs-s4) 0 0;
	font-size: 13px;
	color: var(--vs-ink-3);
}

.vs-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s1) 0;
}

.vs-crumbs li {
	margin: 0;
	max-width: none;
}

.vs-crumbs li + li::before {
	content: "\203A";
	margin: 0 var(--vs-s2);
	color: var(--vs-line-2);
}

.vs-crumbs a {
	color: var(--vs-ink-2);
	text-decoration: none;
}

.vs-crumbs a:hover,
.vs-crumbs a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-crumbs [aria-current] {
	color: var(--vs-ink);
	font-weight: 600;
}

/* The lesson being read, in the list of its level. Weight and a rule, never
   colour alone. */
.vs-lessons .vs-lesson--here .vs-lesson-title {
	font-weight: 700;
	color: var(--vs-purple);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* The glossary: a letter row, then definition lists. */
.vs-letters {
	margin: 0 0 var(--vs-s6);
	padding: var(--vs-s3) 0;
	border-top: 1px solid var(--vs-line);
	border-bottom: 1px solid var(--vs-line);
}

.vs-letters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-s1);
}

.vs-letters li {
	margin: 0;
	max-width: none;
}

.vs-letters a {
	display: inline-block;
	min-width: 2.2em;
	padding: var(--vs-s1) var(--vs-s2);
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--vs-ink);
	text-decoration: none;
	border-radius: var(--vs-r);
}

.vs-letters a:hover,
.vs-letters a:focus {
	background: var(--vs-purple);
	color: var(--vs-white);
}

.vs-glossary-letter {
	margin: 0 0 var(--vs-s6);
}

.vs-glossary-letter h2 {
	scroll-margin-top: var(--vs-s5);
	font-size: 22px;
	color: var(--vs-purple);
	border-bottom: 2px solid var(--vs-purple);
	padding-bottom: var(--vs-s1);
}

.vs-glossary {
	margin: 0;
}

.vs-glossary-entry {
	padding: var(--vs-s3) 0;
	border-bottom: 1px solid var(--vs-line);
}

.vs-glossary-entry:last-child {
	border-bottom: 0;
}

.vs-glossary dt {
	font-weight: 700;
	font-size: 17px;
}

.vs-glossary dt a {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-glossary dt a:hover,
.vs-glossary dt a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-glossary-also {
	font-weight: 500;
	font-size: 13px;
	color: var(--vs-ink-3);
	margin-left: var(--vs-s2);
}

.vs-glossary dd {
	margin: var(--vs-s1) 0 0;
	color: var(--vs-ink-2);
	max-width: var(--vs-measure);
}

.vs-definition {
	font-size: 18px;
}



/* ---------------------------------------------------------------------------
   14c. 1.2.0 — VIDEO-FIRST: the lead media, the poster frame, the hero,
        the section tiles, the start strip.

   THE RULES THIS SECTION KEEPS
   The palette is still the seven colours on white. The only dark ground on
   the site is a film or a picture — the hero and the frames are black only
   because footage is; the page around them stays white. Type sizes and
   weights are the ones already set above; nothing here introduces a new
   scale. And every frame is 16:9, so a card, a row and a page opening all
   share one shape.
------------------------------------------------------------------------- */

/* The film or picture that opens a page. */
.vs-lead {
	margin: 0 0 var(--vs-s6);
	max-width: none;
}

.vs-lead-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 100%;
	background: var(--vs-black);
	border-radius: var(--vs-r2);
	overflow: hidden;
}

.vs-lead-frame > video,
.vs-lead-frame > iframe,
.vs-lead-frame > img,
.vs-lead-cover,
.vs-lead-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.vs-lead-frame > img,
.vs-lead-cover img {
	object-fit: cover;
}

.vs-lead-cover {
	text-decoration: none;
}

.vs-lead-cover:focus-visible {
	outline: 3px solid var(--vs-yellow);
	outline-offset: -3px;
}

.vs-lead figcaption {
	font-size: 14px;
	color: var(--vs-ink-3);
	margin-top: var(--vs-s2);
}

/* The play mark: white disc, black triangle. Decorative — the link or
   button it sits on carries the words. */
.vs-play {
	position: absolute;
	right: var(--vs-s4);
	bottom: var(--vs-s4);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vs-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-play::after {
	content: "";
	display: block;
	margin-left: 4px;
	border-left: 18px solid var(--vs-black);
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}

.vs-lead-cover:hover .vs-play,
.vs-lead-cover:focus .vs-play,
.vs-card:hover .vs-play,
.vs-card:focus-within .vs-play {
	background: var(--vs-yellow);
}

.vs-play--small {
	width: 36px;
	height: 36px;
	right: var(--vs-s3);
	bottom: var(--vs-s3);
}

.vs-play--small::after {
	margin-left: 3px;
	border-left-width: 12px;
	border-top-width: 7px;
	border-bottom-width: 7px;
}

/* The transcript folds under the film. */
.vs-transcript {
	margin: 0 0 var(--vs-s6);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r);
	padding: var(--vs-s3) var(--vs-s4);
	max-width: var(--vs-measure);
}

.vs-transcript summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
}

.vs-transcript-body {
	padding-top: var(--vs-s3);
	font-size: 15px;
	color: var(--vs-ink-2);
}

/* The poster frame on cards and lesson rows. */
.vs-frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--vs-black);
	overflow: hidden;
}

.vs-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* No picture yet: the section's colour, so the shape holds. */
.vs-frame--empty {
	background: var(--vs-accent, var(--vs-purple));
	opacity: 0.85;
}

.vs-frame-badge {
	position: absolute;
	left: var(--vs-s3);
	bottom: var(--vs-s3);
	font-size: 12px;
	font-weight: 700;
	color: var(--vs-white);
	background: rgba(0, 0, 0, 0.65);
	padding: 2px var(--vs-s2);
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

.vs-card-frame {
	order: -1; /* above the band: the picture first, then the section name */
}

.vs-card-band {
	max-width: none; /* a card can be wider than the prose measure now */
}

.vs-card-thumb {
	display: none; /* superseded by the frame in 1.2.0 */
}

/* Lesson rows carry a small frame at the left. */
.vs-lesson-row {
	align-items: center;
}

.vs-lesson-frame {
	flex: 0 0 96px;
	width: 96px;
	border-radius: 4px;
}

.vs-lesson-frame .vs-play--small {
	width: 22px;
	height: 22px;
	right: 6px;
	bottom: 6px;
}

.vs-lesson-frame .vs-play--small::after {
	margin-left: 2px;
	border-left-width: 8px;
	border-top-width: 5px;
	border-bottom-width: 5px;
}

.vs-lesson-frame .vs-frame-badge {
	display: none;
}

/* (1.2.1 — the hero is gone; the front page is sections. See 14d.) */

/* The start strip: the first lesson large, the next few as rows. */
.vs-start {
	margin: 0 0 var(--vs-s8);
}

.vs-start-strip {
	display: grid;
	gap: var(--vs-s5);
	margin: var(--vs-s5) 0;
	align-items: start;
}

@media (min-width: 880px) {
	.vs-start-strip {
		grid-template-columns: 1.3fr 1fr;
	}
}

.vs-grid--1 {
	grid-template-columns: 1fr;
}

.vs-start .vs-lessons {
	margin-bottom: 0;
}

/* The seven sections as tiles. */
.vs-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-r2);
	overflow: hidden;
	background: var(--vs-white);
	text-decoration: none;
	color: var(--vs-ink);
}

.vs-tile:hover,
.vs-tile:focus {
	text-decoration: none;
	border-color: var(--vs-accent);
}

.vs-tile:focus-visible {
	outline: 3px solid var(--vs-purple);
	outline-offset: 2px;
}

.vs-tile-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--vs-black);
	overflow: hidden;
}

.vs-tile-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vs-tile-media--empty {
	background: var(--vs-accent);
	opacity: 0.85;
}

.vs-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.vs-tile-body .vs-card-band {
	display: block;
}

.vs-tile-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--vs-s4) var(--vs-s4) var(--vs-s5);
	gap: var(--vs-s3);
}

.vs-tile-desc {
	font-size: 15px;
	color: var(--vs-ink-2);
}

.vs-tile .vs-card-meta {
	margin-top: auto;
}

/* Placeholder content announces itself. */
.vs-placeholder-banner {
	border-left: 6px solid var(--vs-yellow);
	background: var(--vs-wash);
	padding: var(--vs-s3) var(--vs-s4);
	font-size: 15px;
}


/* ---------------------------------------------------------------------------
   14d. 1.2.1 — THE FRONT PAGE AS SECTIONS, THE MENU BUTTON, SPACING.

   Air goes INSIDE the pieces (tile text, lesson rows, the run from rule to
   heading to lede) and the gaps BETWEEN sections are one steady size, so the
   page reads as a sequence of rooms rather than furniture on a lawn.
------------------------------------------------------------------------- */

.vs-front-intro {
	max-width: var(--vs-measure);
	padding-block: var(--vs-s5) 0;
	margin: 0;
}

.vs-front-intro h1 {
	margin: 0 0 var(--vs-s3);
}

.vs-front-intro .vs-lede,
.vs-front-intro .vs-prose {
	margin: 0;
}

.vs-front-section {
	padding-block: var(--vs-s7) 0;
	margin: 0;
}

.vs-front-section:last-of-type {
	margin-bottom: var(--vs-s7);
}

.vs-front-head {
	max-width: var(--vs-measure);
	margin: 0 0 var(--vs-s5);
}

.vs-front-head::before {
	content: "";
	display: block;
	width: 56px;
	height: 6px;
	border-radius: 3px;
	background: var(--vs-accent);
	margin-bottom: var(--vs-s4);
}

.vs-front-head .vs-eyebrow {
	display: block;
	color: var(--vs-accent);
	margin-bottom: var(--vs-s2);
}

/* Grey is the one accent that reads as "meta" rather than a colour, so the
   eyebrow over a grey section uses the ordinary meta ink. */
.vs-front-section[style*="--vs-grey"] .vs-front-head .vs-eyebrow {
	color: var(--vs-ink-3);
}

.vs-front-head h2 {
	margin: 0 0 var(--vs-s2);
}

.vs-front-head .vs-lede {
	margin: 0;
}

.vs-front-more {
	margin: var(--vs-s5) 0 0;
}

.vs-front-sample {
	max-width: var(--vs-measure);
	margin-top: var(--vs-s6);
}

.vs-front-sample .vs-small {
	margin-top: var(--vs-s3);
}

.vs-front-word {
	display: grid;
	gap: var(--vs-s6);
	align-items: start;
}

@media (min-width: 880px) {
	.vs-front-word {
		grid-template-columns: 1fr 1fr;
	}
}

.vs-front-term {
	margin: 0;
}

.vs-front-term dt {
	font-weight: 700;
	font-size: 20px;
}

.vs-front-term dt a {
	color: var(--vs-ink);
	text-decoration: none;
}

.vs-front-term dt a:hover,
.vs-front-term dt a:focus {
	color: var(--vs-purple);
	text-decoration: underline;
}

.vs-front-term dd {
	margin: var(--vs-s2) 0 0;
	color: var(--vs-ink-2);
}

.vs-grid--4 {
	grid-template-columns: repeat(2, 1fr);
}

.vs-grid--5 {
	grid-template-columns: 1fr;
}

/* On a phone, five tiles two-across leave one alone at the bottom. So they
   are rows: the picture on the left, the words on the right. */
@media (max-width: 699px) {
	.vs-grid--5 .vs-tile {
		flex-direction: row;
	}

	.vs-grid--5 .vs-tile-media {
		flex: 0 0 38%;
		aspect-ratio: auto;
		min-height: 120px;
	}

	.vs-grid--5 .vs-tile-body {
		min-width: 0;
	}

	.vs-grid--5 .vs-tile-text {
		padding: var(--vs-s3) var(--vs-s4) var(--vs-s4);
		gap: var(--vs-s2);
	}
}

@media (min-width: 700px) {
	.vs-grid--5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 880px) {
	.vs-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1000px) {
	.vs-grid--5 {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--vs-s4);
	}
}

/* The level tile: the level is the name (band); the learner's phrase is the
   subtitle. */
.vs-tile-sub {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--vs-ink);
}

/* The short answer on an answer card. */
.vs-card-short {
	border-left: 4px solid var(--vs-accent);
	padding-left: var(--vs-s3);
}

/* Lesson rows get a little more air with a picture beside them. */
.vs-lesson-row {
	padding-block: var(--vs-s4);
}

.vs-start-strip {
	margin-top: 0;
}

/* The menu button is three lines, and an X when open. The word stays in the
   button for screen readers; it is hidden only from sight. */
.vs-nav-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}

.vs-nav-toggle::before,
.vs-nav-toggle::after {
	content: "";
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	background: var(--vs-ink);
	border-radius: 1px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vs-nav-toggle::before {
	top: 14px;
	box-shadow: 0 7px 0 var(--vs-ink);
}

.vs-nav-toggle::after {
	top: 28px;
}

.vs-nav-toggle[aria-expanded="true"]::before {
	transform: translateY(7px) rotate(45deg);
	box-shadow: 0 0 0 transparent;
}

.vs-nav-toggle[aria-expanded="true"]::after {
	transform: translateY(-7px) rotate(-45deg);
}

.vs-nav-toggle:focus-visible {
	outline: 3px solid var(--vs-purple);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vs-nav-toggle::before,
	.vs-nav-toggle::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   14e. 1.3.0 — THE BLOG LIST, THE EDITORS' NOTICE, "NOT OPEN YET".

   While visitors see the blog only, the blog is the site, so its list gets
   the same care as the front page: a picture when the post has one, the
   title, one line, then date · category · reading time.
------------------------------------------------------------------------- */

.vs-blog-head h1 {
	margin-bottom: 0;
}

/* The visitor's menu, Blog and Search, sits beside the logo at every width. */
.vs-nav--blog {
	width: auto;
}

.vs-nav--blog ul {
	flex-direction: row;
	align-items: center;
	gap: var(--vs-s5);
}

.vs-nav--blog li {
	border-top: 0;
}

.vs-nav--blog a {
	padding: var(--vs-s2) 0;
	font-size: 15px;
}

.vs-blog-list .vs-entry--post:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

.vs-entry--post {
	display: grid;
	gap: var(--vs-s4);
	padding-bottom: var(--vs-s6);
	margin-bottom: var(--vs-s6);
}

.vs-entry--post .vs-entry-title {
	margin-bottom: var(--vs-s2);
}

.vs-entry-excerpt {
	margin: 0 0 var(--vs-s3);
	color: var(--vs-ink-2);
}

.vs-entry--post .vs-entry-meta {
	margin: 0;
}

.vs-entry-thumb {
	display: block;
	border-radius: var(--vs-r2);
	overflow: hidden;
	background: var(--vs-wash);
	aspect-ratio: 16 / 9;
}

.vs-entry-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 640px) {
	.vs-entry--thumb {
		grid-template-columns: 220px 1fr;
		gap: var(--vs-s5);
		align-items: start;
	}
}

.vs-older-newer {
	display: flex;
	justify-content: space-between;
	gap: var(--vs-s4);
	margin: var(--vs-s5) 0 0;
	padding-top: var(--vs-s5);
	border-top: 1px solid var(--vs-line);
	font-weight: 600;
}

.vs-older-newer .vs-older {
	margin-left: auto;
	text-align: right;
}

/* The single post's picture sits under the title, full width, rounded. */
.single-post .vs-page-head + figure img,
.vs-page-head + figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vs-r2);
}

/*
 * The thin line at the top for signed-in editors: what the public sees. It
 * sits under the admin bar (WordPress pushes the page down for that itself).
 */
.vs-gate-notice {
	padding: var(--vs-s2) var(--vs-s4);
	background: var(--vs-wash);
	border-bottom: 1px solid var(--vs-line);
	font-size: 14px;
	line-height: 1.5;
	color: var(--vs-ink-2);
	text-align: center;
}

.vs-gate-notice a {
	font-weight: 600;
	white-space: nowrap;
}

.vs-gate-notice--preview {
	background: var(--vs-yellow);
	border-bottom-color: var(--vs-gold);
	color: var(--vs-ink);
}

.vs-gate-notice--preview a {
	color: var(--vs-ink);
}

/* "This part of ViolinSchool isn't open yet." */
.vs-page-head.vs-gated {
	padding-top: var(--vs-s6);
}

#vs-site-search {
	scroll-margin-top: var(--vs-s6);
}


/* ---------------------------------------------------------------------------
   14f. 1.4.0 — THE BLOG, TIDIED (Simon, 22 Oct).

   A. The list: the newest post leads, large; the rest are cards two across
      (one on a phone), every card the same shape — picture, film poster or
      the marque at 16:9, then category, title, a line, date · reading time.
   B. The top of a post: the film or the picture, at the text's width.
   C. The standfirst. D is in functions.php (vs_post_opening).
   E. The head of a post: breadcrumb, category and title on one left edge,
      the title at the full column width, no large gap before the text.
   F. One footer everywhere.

   Still the seven colours on white. The only fills are --vs-wash (the soft
   ground behind the marque; the footer until 1.4.1) and the black of footage.
------------------------------------------------------------------------- */

/* A. The list. */
.vs-blog-head {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: var(--vs-s6);
}

.vs-blog-list .vs-entry--card,
.vs-blog-list .vs-entry--card:last-child {
	display: block;
	padding: 0;
	margin: 0;
	border-bottom: 0;
}

.vs-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vs-s6);
}

/* 1.4.1 — two and three across: see 14g. */

.vs-entry-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--vs-r2);
	overflow: hidden;
	background: var(--vs-wash);
}

.vs-entry-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Neither a picture nor a poster: the marque, small, on the soft ground. */
.vs-entry-media--none {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vs-entry-media--none img.vs-entry-marque {
	position: static;
	width: 22%;
	max-width: 96px;
	height: auto;
	object-fit: contain;
}

/* "▶ Video", bottom left, as the duration badge on the lesson cards. */
.vs-entry-tag {
	position: absolute;
	left: var(--vs-s3);
	bottom: var(--vs-s3);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--vs-white);
	background: rgba(0, 0, 0, 0.65);
	padding: 1px var(--vs-s2);
	border-radius: 4px;
}

/*
 * The play mark on the blog sits in the middle of the picture: a dark disc,
 * a white triangle. Decorative, as everywhere — the words say "film".
 */
.vs-play--centre,
.vs-post-lead .vs-play {
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: none;
}

.vs-play--centre::after,
.vs-post-lead .vs-play::after {
	margin-left: 6px;
	border-left: 24px solid var(--vs-white);
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

/* On a card, and on a phone, the smaller mark. */
.vs-play--centre.vs-play--small {
	width: 52px;
	height: 52px;
}

.vs-play--centre.vs-play--small::after {
	margin-left: 4px;
	border-left-width: 16px;
	border-top-width: 10px;
	border-bottom-width: 10px;
}

@media (max-width: 759px) {
	.vs-play--centre,
	.vs-post-lead .vs-play {
		width: 52px;
		height: 52px;
	}

	.vs-play--centre::after,
	.vs-post-lead .vs-play::after {
		margin-left: 4px;
		border-left-width: 16px;
		border-top-width: 10px;
		border-bottom-width: 10px;
	}
}

.vs-entry-media:hover .vs-play--centre,
.vs-entry--card:focus-within .vs-play--centre,
.vs-post-lead .vs-lead-cover:hover .vs-play,
.vs-post-lead .vs-lead-cover:focus .vs-play {
	background: var(--vs-purple);
}

.vs-entry--card .vs-entry-body {
	padding-top: var(--vs-s4);
}

.vs-entry-eyebrow {
	margin: 0 0 var(--vs-s1);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.vs-entry-eyebrow a {
	color: var(--vs-purple);
	text-decoration: none;
}

.vs-entry-eyebrow a:hover,
.vs-entry-eyebrow a:focus {
	text-decoration: underline;
}

.vs-entry--card .vs-entry-title {
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 var(--vs-s2);
	text-wrap: pretty;
}

.vs-entry--card .vs-entry-excerpt {
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 var(--vs-s2);
}

.vs-entry--card .vs-entry-meta {
	margin: 0;
}

/* The lead, the 2nd and 3rd, and a post on its own: 1.4.1, see 14g. */

/* "Older posts →": a button, centred. */
.vs-older-newer {
	justify-content: center;
	margin: var(--vs-s7) 0 0;
	padding-top: 0;
	border-top: 0;
}

.vs-older-newer .vs-older {
	margin-left: 0;
}

.vs-older-newer a {
	display: inline-block;
	padding: var(--vs-s3) var(--vs-s5);
	border: 1px solid var(--vs-line-2);
	border-radius: var(--vs-r);
	color: var(--vs-ink);
	text-decoration: none;
	font-size: 15px;
}

.vs-older-newer a:hover,
.vs-older-newer a:focus {
	border-color: var(--vs-purple);
	color: var(--vs-purple);
}

/* E. The head of a post. */
.vs-crumbs-wrap--post .vs-crumbs {
	margin-bottom: var(--vs-s4);
}

.vs-post-head {
	margin: 0 0 var(--vs-s5);
	padding-bottom: 0;
	border-bottom: 0;
}

/* The title takes the whole column, rather than being balanced into three
   short lines. */
.vs-post-head h1 {
	text-wrap: pretty;
	margin-bottom: var(--vs-s2);
}

.vs-post-head .vs-meta {
	margin: 0;
}

.vs-post-head .vs-eyebrow a {
	color: var(--vs-purple);
	text-decoration: none;
}

.vs-post-head .vs-eyebrow a:hover,
.vs-post-head .vs-eyebrow a:focus {
	text-decoration: underline;
}

/* B. The film or picture at the top of a post: the text's width, never
   wider. */
.vs-post-lead {
	margin: 0 0 var(--vs-s5);
}

.vs-post-lead .vs-lead {
	margin: 0;
}

.vs-post-lead .vs-transcript {
	margin: var(--vs-s4) 0 0;
}

/* C. The standfirst: a little larger and softer; no box, no indent. */
.vs-prose--post > .vs-standfirst {
	font-size: 21px;
	line-height: 1.55;
	color: var(--vs-ink-2);
	margin-bottom: var(--vs-s5);
}

/* F. One footer everywhere. (1.4.1: white, see 14g.) */

@media (min-width: 760px) {
	.vs-footer-grid {
		grid-template-columns: 1.2fr 1fr 1.2fr;
		gap: var(--vs-s6);
	}
}

.vs-footer ul {
	columns: 1;
}

.vs-footer-links nav + h2 {
	margin-top: var(--vs-s5);
}

.vs-footer-about .vs-logo {
	padding: 0;
	margin: 0 0 var(--vs-s3);
}

.vs-footer-about .vs-logo img {
	width: 150px;
}

.vs-footer-about p {
	margin: 0;
	max-width: 30ch;
	font-size: 15px;
	color: var(--vs-ink-2);
}

.vs-colophon {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--vs-s2) var(--vs-s5);
	margin-top: var(--vs-s6);
	padding-top: var(--vs-s4);
	color: var(--vs-ink-2);
}

.vs-colophon p {
	margin: 0;
}

.vs-sponsor {
	font-weight: 500;
}

.vs-colophon a {
	color: var(--vs-purple);
	font-size: 14px;
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   14g. 1.4.1 — THE FRONT PAGE FROM MOCKUP V3 (Simon, 22 Oct).

   "The 'news' category tag is still too close to the bottom of the image ...
   On a smaller screen, the blog previews need to stack right — please make
   sure everything is optimised for tablet and mobile."

   A. Wide (1024px and up), first page of the blog: the newest post on the
      left half, picture on top; the 2nd and 3rd one above the other on the
      right, each a small picture beside its words. Older posts three across.
   B. One post on the site: picture left, words right, centred.
   C. A clear gap (24px) between every picture and its category label.
   E. The footer white, with a hairline above, like the header.

   Three widths, the same markup:
     Phone   (under 720px)   one column; every picture on top of its words.
     Tablet  (720–1023px)    the lead full width; the 2nd and 3rd two across
                             beneath it as ordinary cards; older cards two
                             across; the one-post layout side by side.
     Wide    (1024px and up) as A.
------------------------------------------------------------------------- */

/* C. The gap between a picture and the category under it. */
.vs-entry--card .vs-entry-body {
	padding-top: var(--vs-s5);
}

/* The category link: a taller tap area, without moving anything. */
.vs-entry-eyebrow a {
	display: inline-block;
	padding: 6px 0;
	margin: -6px 0;
}

/* The cards: one, two, then three across. */
.vs-blog-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vs-s6);
}

@media (min-width: 720px) {
	.vs-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vs-s7) var(--vs-s5);
	}
}

@media (min-width: 1024px) {
	.vs-blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vs-s7) var(--vs-s6);
	}
}

/* A. The top of the first page: the lead, then the 2nd and 3rd. */
.vs-blog-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vs-s6);
	padding-bottom: var(--vs-s6);
	margin-bottom: var(--vs-s6);
	border-bottom: 1px solid var(--vs-line);
}

/* Nothing after the top (two or three posts in all): no rule under it. */
.vs-blog-top:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.vs-blog-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vs-s6);
}

.vs-entry--lead .vs-entry-title,
.vs-entry--solo .vs-entry-title {
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.15;
}

@media (min-width: 720px) {
	.vs-blog-top {
		gap: var(--vs-s7);
		padding-bottom: var(--vs-s7);
		margin-bottom: var(--vs-s7);
	}

	/* Tablet: the 2nd and 3rd two across, as ordinary cards. */
	.vs-blog-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vs-s5);
	}

	.vs-entry--lead .vs-entry-excerpt,
	.vs-entry--solo .vs-entry-excerpt {
		font-size: 18px;
	}
}

@media (min-width: 1024px) {
	/* Wide: half and half. */
	.vs-blog-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vs-s6);
		align-items: start;
	}

	.vs-entry--lead .vs-entry-title {
		font-size: 28px;
	}

	/* The 2nd and 3rd, one above the other, each a mini card. */
	.vs-blog-side {
		display: flex;
		flex-direction: column;
		gap: var(--vs-s5);
	}

	.vs-blog-list .vs-entry--card.vs-entry--mini {
		display: grid;
		grid-template-columns: 44% minmax(0, 1fr);
		gap: var(--vs-s4);
		align-items: start;
	}

	.vs-blog-list .vs-entry--card.vs-entry--mini + .vs-entry--card.vs-entry--mini {
		padding-top: var(--vs-s5);
		border-top: 1px solid var(--vs-line);
	}

	/* Beside the picture, the words start level with its top. */
	.vs-entry--mini .vs-entry-body {
		padding-top: 0;
	}

	.vs-entry--mini .vs-entry-title {
		font-size: 18px;
		line-height: 1.35;
		margin-bottom: var(--vs-s1);
	}

	.vs-entry--mini .vs-entry-excerpt {
		font-size: 15px;
	}
}

/* B. One post on the site: never a full-width picture. (".vs-entry--card"
   twice over, to outrank 14f's ".vs-entry--card:last-child".) */
@media (min-width: 720px) {
	.vs-blog-list .vs-entry--card.vs-entry--solo,
	.vs-blog-top--alone .vs-entry--card.vs-entry--lead {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: var(--vs-s6);
		align-items: center;
	}

	.vs-entry--solo .vs-entry-body,
	.vs-blog-top--alone .vs-entry--lead .vs-entry-body {
		padding-top: 0;
	}
}

@media (min-width: 720px) and (max-width: 1023px) {
	.vs-blog-list .vs-entry--card.vs-entry--solo,
	.vs-blog-top--alone .vs-entry--card.vs-entry--lead {
		gap: var(--vs-s5);
	}

	.vs-entry--solo .vs-entry-title {
		font-size: 24px;
	}

	.vs-entry--solo .vs-entry-excerpt {
		font-size: 17px;
	}
}

/* "Older posts →": a comfortable button on a phone too. */
.vs-older-newer {
	flex-wrap: wrap;
}

.vs-older-newer a {
	min-height: 44px;
}

/* E. The footer: white, with a hairline above (section 7), like the header.
   Simon would later like it black or grey, once there is a logo with a
   see-through background — not yet. */
.vs-footer {
	background: var(--vs-white);
}

/* Phones and tablets: the footer's links as comfortable tap targets. */
.vs-footer li {
	margin: 0;
}

.vs-footer li a {
	display: inline-block;
	padding: var(--vs-s1) 0;
}

@media (max-width: 719px) {
	.vs-footer {
		margin-top: var(--vs-s7);
		padding: var(--vs-s6) 0;
	}

	/* Two columns of links, each a full 40px row. */
	.vs-footer ul {
		columns: 2;
		column-gap: var(--vs-s4);
	}

	.vs-footer li a {
		display: block;
		padding: 10px 0;
	}

	.vs-colophon {
		flex-direction: column;
	}
}

/* Tablet: the footer in two columns — the about and the links side by side,
   the search across the bottom, so no column is squeezed. */
@media (min-width: 720px) and (max-width: 1023px) {
	.vs-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vs-s6);
	}

	.vs-footer-search {
		grid-column: 1 / -1;
		max-width: 480px;
	}
}

/* On a phone, the last crumb (the page you are on, which the title below
   repeats) stays on the line it starts on and is cut short with "…",
   rather than wrapping under "Home" with its separator alone at the start
   of a line. */
@media (max-width: 719px) {
	.vs-crumbs li:last-child {
		flex: 1 1 8em;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* Breadcrumbs, and the category above a post's title: a taller tap area,
   without moving anything. */
.vs-crumbs a,
.vs-post-head .vs-eyebrow a {
	display: inline-block;
	padding: 6px 0;
	margin: -6px 0;
}


/* ---------------------------------------------------------------------------
   15. PRINT

   Practice plans and lesson pages get printed and taken to the music stand.
   That is a real use of this site, so the print stylesheet is not an
   afterthought: navigation, footers and anything interactive come off, the
   type goes to a comfortable serif-free size, and every link's destination is
   printed after it so a paper copy is still useful.
------------------------------------------------------------------------- */

@media print {
	.vs-header,
	.vs-footer,
	.vs-skip-link,
	.vs-nav,
	.vs-nav-toggle,
	.vs-jump,
	.vs-pagination,
	.vs-older-newer,
	.vs-gate-notice,
	.vs-post-nav,
	.vs-brandbar,
	.vs-chips,
	.vs-crumbs,
	.vs-letters,
	.vs-no-print,
	.vs-lead-frame,
	.vs-frame,
	.vs-tile-media {
		display: none !important; /* 1.2.0 — a film does not print; its transcript does */
	}

	.vs-transcript[open] .vs-transcript-body,
	.vs-transcript-body {
		display: block;
	}


	body {
		font-size: 11.5pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	.vs-wrap {
		max-width: none;
		padding: 0;
	}

	.vs-main {
		padding: 0;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	/* Print where a link goes, so a paper copy still leads somewhere. */
	.vs-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #444;
		word-break: break-all;
	}

	.vs-two {
		display: block;
	}

	table,
	.vs-diagnostics,
	.vs-note,
	li {
		break-inside: avoid;
	}

	h2,
	h3 {
		break-after: avoid;
	}
}


/* ---------------------------------------------------------------------------
   REDUCED MOTION

   Anybody who has told their operating system they do not want animation gets
   none. There is very little here to begin with, and this makes sure nothing
   added later slips through.
------------------------------------------------------------------------- */

@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;
	}
}


/* -------------------------------------------------------------------------
   14h. 1.4.1 — MORE ROOM AROUND EVERYTHING.
   Simon, 22 Oct: "Make sure there is enough padding / space around
   everything, even in that mockup it's still not perfect." One pass of
   spacing only: no colours, no words, no layout changes.
------------------------------------------------------------------------- */

/* Room under the header, and between the breadcrumb and the title. */
.vs-main > .vs-wrap > .vs-crumbs {
	margin: var(--vs-s6) 0 var(--vs-s3);
}

.vs-blog-head {
	margin-bottom: var(--vs-s7);
}

.vs-blog-head h1 {
	margin: 0;
}

/* Wider screens get wider side margins. */
@media (min-width: 1024px) {
	.vs-wrap {
		padding: 0 var(--vs-s6);
	}
}

/* Inside every card: title, excerpt and date each get their own room. */
.vs-entry--card .vs-entry-title {
	margin: var(--vs-s2) 0 var(--vs-s3);
}

.vs-entry--card .vs-entry-excerpt {
	margin: 0 0 var(--vs-s3);
}

/* The space after the list, before "Older posts" and the footer. */
.vs-blog-list {
	margin-bottom: var(--vs-s8);
}

@media (min-width: 720px) {
	.vs-blog-side {
		gap: var(--vs-s6);
	}
}

@media (min-width: 1024px) {
	/* The two halves stand further apart. */
	.vs-blog-top {
		gap: var(--vs-s7);
		padding-bottom: var(--vs-s7);
		margin-bottom: var(--vs-s7);
	}

	.vs-blog-side {
		gap: var(--vs-s6);
	}

	/* The 2nd and 3rd: more room beside the picture and between the two. */
	.vs-blog-list .vs-entry--card.vs-entry--mini {
		gap: var(--vs-s5);
	}

	.vs-blog-list .vs-entry--card.vs-entry--mini + .vs-entry--card.vs-entry--mini {
		padding-top: var(--vs-s6);
	}

	.vs-entry--mini .vs-entry-title {
		margin: var(--vs-s2) 0 var(--vs-s2);
	}

	.vs-blog-grid {
		gap: var(--vs-s7) var(--vs-s7);
	}
}

/* The footer: more air above and below, and between its columns. */
.vs-footer {
	padding: var(--vs-s8) 0 var(--vs-s7);
}

@media (min-width: 1024px) {
	.vs-footer-grid {
		column-gap: var(--vs-s8);
	}
}

.vs-footer-about .vs-logo {
	margin-bottom: var(--vs-s4);
}