/*
Theme Name: Jazz After Hours
Theme URI: https://jazzafterhours.net
Author: Jeff Hanley
Description: Ink on paper. A block theme for Jazz After Hours — one stroke, one seal, no clutter.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: jah
*/

/* Paper: a fine grain over the whole page, drawn once as an SVG file. */
body {
	background-color: var(--wp--preset--color--paper);
	background-image: url("assets/img/paper.svg");
	background-size: 420px 420px;
	background-repeat: repeat;
}

/* Labels: the small letterspaced type used for kickers, nav and meta. */
.jah-label {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* The seal: the vermilion stamp that carries the mark. */
.jah-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	background: var(--wp--preset--color--seal);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	transform: rotate(-4deg);
}

/* The wordmark: JAZZ solid, AFTER HOURS thin. */
.jah-wordmark { font-size: 1.375rem; letter-spacing: 0.22em; white-space: nowrap; }
.jah-wordmark strong { font-weight: 500; }
.jah-wordmark span { font-weight: 200; }

/* The slash: one brushed vermilion stroke behind a line of type. */
/* A vermilion brushstroke UNDER the words — emphasis, not deletion.
   (Through the middle of the letters it read as crossed out.) */
.jah-slash { position: relative; display: inline-block; padding-bottom: 0.18em; }
.jah-slash::before {
	content: "";
	position: absolute;
	left: -0.15em; right: -0.5em;
	top: 1.02em; height: 0.16em;
	background: var(--wp--preset--color--seal);
	transform: rotate(-1.5deg);
	clip-path: polygon(0 35%, 100% 0, 98% 100%, 1% 80%);
}
.jah-slash > * { position: relative; }

/* On-air chip in the header. */
.jah-onair {
	display: inline-flex; align-items: center; gap: 0.625rem;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--seal);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
}
.jah-onair::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.jah-onair.is-off {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--rule);
}
.jah-onair.is-off::before { background: transparent; border: 1px solid currentColor; }

/* Playlist rows. */
.jah-track {
	display: grid;
	position: relative;
	grid-template-columns: 1.35fr 1fr 1.4fr 0.8fr;
	gap: 1.75rem;
	align-items: baseline;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.jah-track .jah-artist { font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
.jah-track .jah-album { font-style: italic; color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
	.jah-track { grid-template-columns: 1fr; row-gap: 0.25rem; }
	.jah-track-head { display: none; }
}

/* The ensō sits behind the hero; it never takes clicks. */
.jah-enso { pointer-events: none; }

/* Playlist, as rendered by the JAH Playlist plugin. */
.jah-playlist { margin-block: var(--wp--preset--spacing--50); }
.jah-hour {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: 1.25rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.jah-track .jah-song { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink-soft); }
.jah-track .jah-label-col { font-size: var(--wp--preset--font-size--small); letter-spacing: 0.06em; color: var(--wp--preset--color--muted); }
.jah-nowplaying { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 400; }

/* Hero */
.jah-hero-title {
	margin: 0.3em 0 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.88;
	letter-spacing: -0.025em;
}
.jah-hero-title .is-solid { font-weight: 500; }
.jah-hero-title .is-thin  { font-weight: 100; }
.jah-hero-sub {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 34rem;
	font-size: 1.5rem; font-weight: 300; line-height: 1.45;
	color: var(--wp--preset--color--ink-soft);
}
.jah-status { margin-top: var(--wp--preset--spacing--50); }
.jah-status .jah-label { margin: 0 0 0.5rem; }
.jah-status-line { margin: 0; font-size: 3.25rem; font-weight: 500; line-height: 1; }
.jah-status-sub { margin: 0.5rem 0 0; font-size: 1.125rem; font-weight: 300; color: var(--wp--preset--color--ink-soft); }
.jah-status-sub:empty { display: none; }
.jah-enso { color: var(--wp--preset--color--ink); max-width: 34rem; margin-inline: auto; }
.jah-enso svg { width: 100%; height: auto; display: block; }

/* Section heads and doors */
.jah-section-head {
	display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: baseline; justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}
.jah-section-head h2 { margin: 0; }
.jah-section-head .jah-label { margin: 0; }
.jah-door-num {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--wp--preset--color--seal);
}
.jah-more a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}

@media (max-width: 781px) {
	.jah-status-line { font-size: 2.25rem; }
	.jah-hero-sub { font-size: 1.25rem; }
}

/* The photographed ensō.
   Mirrored so the brush lands on the outside edge and the opening faces away
   from the headline. --jah-enso-flip / -tilt / -scale / -drop tune
   it per placement. No multiply blend: it would erase the gloss on the drops. */
.jah-enso {
	--jah-enso-flip: -1;
	--jah-enso-tilt: -4deg;
	--jah-enso-scale: 0.95;
	--jah-enso-drop: 1.5rem;
	color: var(--wp--preset--color--ink);
	max-width: 42rem;
	margin-inline: auto;
}
.jah-enso-img {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(var(--jah-enso-drop)) scale(var(--jah-enso-scale)) scaleX(var(--jah-enso-flip)) rotate(var(--jah-enso-tilt));
	transform-origin: center;
}


/* Hero rhythm — the first screen has to end below the buttons, not above them. */
.jah-hero-title { font-size: clamp(2.75rem, 5.6vw, 5rem); }
.jah-hero-sub { margin-top: 1.4rem; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); max-width: 30rem; }
.jah-status { margin-top: 2.25rem; }
.jah-status-line { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.wp-block-buttons { margin-top: 2rem; }

@media (min-width: 782px) {
	.jah-enso { max-width: min(46vw, 42rem); }
}
@media (max-width: 781px) {
	.jah-enso { max-width: min(78vw, 22rem); margin-top: var(--wp--preset--spacing--40); }
}

/* Stations */
.jah-stations { margin-block: var(--wp--preset--spacing--40); }
.jah-station-find { display: block; margin: 1.25rem 0 var(--wp--preset--spacing--50); }
.jah-station-find input {
	width: min(24rem, 100%);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	font-family: inherit; font-size: var(--wp--preset--font-size--medium); font-weight: 300;
	color: var(--wp--preset--color--ink);
}
.jah-station-find input:focus { outline: 2px solid var(--wp--preset--color--seal); outline-offset: 2px; }
.jah-state { margin-top: var(--wp--preset--spacing--50); }
.jah-state-name {
	margin: 0 0 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: 1.125rem; font-weight: 600; letter-spacing: 0.22em;
}
.jah-station {
	display: grid;
	grid-template-columns: 8rem 1fr 14rem;
	gap: 1.25rem;
	align-items: baseline;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.jah-call { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.04em; }
.jah-market { font-weight: 300; }
.jah-slot { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.jah-stations-note { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
@media (max-width: 781px) {
	.jah-station { grid-template-columns: 6.5rem 1fr; }
	.jah-slot { grid-column: 2; }
}

/* About — portrait beside the story */
.jah-about {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	margin-block: var(--wp--preset--spacing--40);
}
.jah-portrait { position: relative; margin: 0; }
.jah-portrait img {
	display: block;
	width: 100%;
	height: auto;
}
/* The chop. In the ensō tradition the red seal signs the work, so it sits on
   the print rather than beside it. The portrait is a duotone in the palette's
   own ink and paper, which makes the seal the only colour on the page. */
.jah-portrait-seal {
	position: absolute;
	right: -0.85rem;
	bottom: 2.6rem;
	z-index: 1;
}
.jah-portrait figcaption { margin-top: 0.75rem; }
.jah-about-body > p { max-width: 34rem; }
p.is-style-jah-lede,
.jah-about-lede {
	margin: 0.5rem 0 1.5rem;
	max-width: 30rem;
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 200;
	line-height: 1.22;
}
p.is-style-jah-pull,
.jah-pull {
	margin: 1.75rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--wp--preset--color--seal);
	font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
	font-weight: 300;
	line-height: 1.4;
}
@media (max-width: 781px) {
	.jah-about { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.jah-portrait { max-width: 16rem; }
}


/* The playlist page: dated head, hours as tabs, four columns of record.
   No clock column — the show airs at a different hour in every market, so a
   time here would be precise and wrong. The hour is the only honest unit. */
.jah-playlist-head { margin-bottom: var(--wp--preset--spacing--50); }
.jah-playlist-date {
	margin: 0.35rem 0 0;
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	font-weight: 200;
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.jah-hours { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.75rem; }
.jah-hour-tab {
	height: 3rem;
	padding: 0 1.6rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}
.jah-hour-tab.is-on {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-weight: 500;
}
.jah-hour-tab:focus-visible { outline: 2px solid var(--wp--preset--color--seal); outline-offset: 2px; }
.jah-hour-meta { margin: 0 0 0.75rem; text-align: right; }

.jah-track-head {
	padding-top: 0;
	padding-bottom: 0.85rem;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}



/* The Playlist page directory: recent shows, each a link to its own night. */
.jah-earlier-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}
.jah-earlier-item {
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-decoration: none;
}
.jah-earlier-item:hover { border-bottom-color: var(--wp--preset--color--seal); }
.jah-earlier-date { font-size: 1.75rem; font-weight: 300; line-height: 1.1; }
.jah-back { margin-top: var(--wp--preset--spacing--60); }

/* The hero's playlist button scrolls down the page rather than jumping. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Player — live stream and this week's hours */
.jah-player { margin-block: var(--wp--preset--spacing--50); }
.jah-sc { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.jah-play {
	flex-shrink: 0;
	width: 4.5rem; height: 4.5rem;
	display: grid; place-items: center;
	padding: 0; border: none; border-radius: 50%;
	background: var(--wp--preset--color--seal);
	cursor: pointer;
	transition: transform 120ms ease;
}
.jah-play:hover { transform: scale(1.04); }
.jah-play:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.jah-play-icon {
	width: 0; height: 0;
	margin-left: 0.35em;
	border-left: 1.15em solid #FFFFFF;
	border-top: 0.72em solid transparent;
	border-bottom: 0.72em solid transparent;
}
.jah-play.is-playing .jah-play-icon {
	width: 1.05em; height: 1.2em;
	margin-left: 0;
	border: none;
	background: linear-gradient(to right, #FFF 0 35%, transparent 35% 65%, #FFF 65% 100%);
}
.jah-play-sm { width: 2.75rem; height: 2.75rem; }
.jah-play-sm .jah-play-icon { font-size: 0.62em; }

.jah-live { display: flex; align-items: center; gap: 1.5rem; }
.jah-live.is-off .jah-play { background: var(--wp--preset--color--muted); }
.jah-live-state { margin: 0 0 0.35rem; }
.jah-live.is-on .jah-live-state { color: var(--wp--preset--color--seal); }
.jah-np { margin: 0; line-height: 1.2; }
.jah-np-title { display: block; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 400; }
.jah-np-artist { display: block; font-weight: 300; color: var(--wp--preset--color--muted); }
.jah-np-artist:empty { display: none; }

/* You just heard — the back-announce, on screen. */
.jah-heard { margin-top: var(--wp--preset--spacing--50); max-width: 34rem; }
.jah-heard .jah-label { margin: 0 0 0.5rem; }
.jah-heard-list { margin: 0; padding: 0; list-style: none; }
.jah-heard-list li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.jah-heard-artist { font-weight: 500; }
.jah-heard-title { font-weight: 300; color: var(--wp--preset--color--ink-soft); }
.jah-heard-title:not(:empty)::before { content: " \2014  "; }

.jah-ondemand { margin-top: var(--wp--preset--spacing--60); }

/* This week's hours, folded by night. The live player is the main event;
   the replays wait behind two quiet rows until asked for. */
.jah-night { border-bottom: 1px solid var(--wp--preset--color--rule); }
.jah-night-name {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.9rem 0; cursor: pointer; list-style: none;
	font-size: 1.25rem; font-weight: 400;
}
.jah-night-name::-webkit-details-marker { display: none; }
.jah-night-name::after {
	content: ""; width: 0.5em; height: 0.5em; margin-right: 0.3rem;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
	color: var(--wp--preset--color--muted);
}
.jah-night details[open] > .jah-night-name::after { transform: translateY(0.1em) rotate(-135deg); }
.jah-night-name:hover::after { color: var(--wp--preset--color--ink); }
.jah-night-name:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.jah-night-hours { margin: 0 0 0.6rem; padding: 0; list-style: none; }
.jah-night-hours .jah-week-row:last-child { border-bottom: 0; }
.jah-week { margin: 1rem 0 0; padding: 0; list-style: none; max-width: 34rem; }
.jah-week-loading { padding: 0.9rem 0; font-weight: 300; color: var(--wp--preset--color--muted); }
.jah-week-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.1rem;
	align-items: center;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.jah-week-name { font-size: 1.25rem; font-weight: 300; }

/* An hour's tracks, folded under it. Each one jumps the hour to that record. */
.jah-week-toggle {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.4rem 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: var(--wp--preset--font-size--label);
	font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.jah-week-toggle::after {
	content: ""; width: 0.45em; height: 0.45em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}
.jah-week-toggle[aria-expanded="true"]::after { transform: translateY(0.1em) rotate(-135deg); }
.jah-week-toggle:hover, .jah-week-toggle[aria-expanded="true"] { color: var(--wp--preset--color--ink); }
.jah-week-tracks {
	grid-column: 1 / -1;
	margin: 0 0 0.5rem; padding: 0 0 0 calc(2.75rem + 1.1rem);
	list-style: none;
}
.jah-week-tracks[hidden] { display: none; }
.jah-jump {
	display: block; width: 100%; padding: 0.45rem 0;
	border: 0; background: none; cursor: pointer; text-align: left;
	font: inherit; color: var(--wp--preset--color--ink);
}
.jah-jump-artist { font-weight: 500; }
.jah-jump-song { font-weight: 300; color: var(--wp--preset--color--ink-soft); }
.jah-jump-song::before { content: " \2014  "; }
.jah-jump:hover .jah-jump-artist,
.jah-jump:focus-visible .jah-jump-artist { color: var(--wp--preset--color--seal); }
.jah-jump:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
/* The record under the playhead: a vermilion tick, nothing louder. */
.jah-week-tracks li { position: relative; }
.jah-week-tracks li.is-current::before {
	content: ""; position: absolute; left: -1.1rem; top: 50%;
	width: 0.55rem; height: 2px; background: var(--wp--preset--color--seal);
}
.jah-week-tracks li.is-current .jah-jump-artist { color: var(--wp--preset--color--seal); }
@media (max-width: 781px) {
	.jah-week-tracks { padding-left: 0; }
	.jah-week-tracks li.is-current::before { left: -0.8rem; }
}
.jah-week-fallback { font-weight: 300; }

@media (max-width: 781px) {
	.jah-play { width: 3.5rem; height: 3.5rem; }
	/* Hour buttons stay smaller than the live one on phones too. */
	.jah-play-sm { width: 2.5rem; height: 2.5rem; }
	.jah-live { gap: 1rem; }
}

/* The stream takes a few seconds to arrive; say so rather than looking dead. */
.jah-play.is-loading { animation: jah-pulse 1.1s ease-in-out infinite; }
.jah-play.is-loading .jah-play-icon { opacity: 0.45; }
@keyframes jah-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
	.jah-play.is-loading { animation: none; opacity: 0.6; }
}

/* Off air but audible: the control has to look live even when the show isn't. */
.jah-live.is-off.is-playing .jah-play { background: var(--wp--preset--color--seal); }
.jah-live.is-playing .jah-live-state { color: var(--wp--preset--color--seal); }

/* Contact Form 7 — dressed to match the rest of the site.
   CF7 supplies its own markup; these rules only restyle it, so the plugin
   can update without taking the design with it. */
.wpcf7 { margin-top: var(--wp--preset--spacing--50); max-width: 34rem; }
/* Pin the contact form flush left. The block theme's constrained layout sets
   margin-left/right: auto with !important on every child, so !important is the
   only thing that overrides it -- specificity alone will not do it. */
.is-layout-constrained > .wpcf7 {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.wpcf7 label {
	display: block;
	margin-bottom: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.9rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}
.wpcf7 textarea { min-height: 7rem; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--seal);
	outline-offset: 2px;
}
.wpcf7 input[type="submit"] {
	margin-top: 0.5rem;
	padding: 0.9rem 2.2rem;
	border: none;
	background: var(--wp--preset--color--seal);
	color: #FFFFFF;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { filter: brightness(1.08); }
.wpcf7-not-valid-tip { color: var(--wp--preset--color--seal); font-size: var(--wp--preset--font-size--small); font-weight: 400; letter-spacing: normal; text-transform: none; }
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--seal);
	font-weight: 300;
}
.wpcf7-spinner { display: block; margin: 0.75rem 0 0; }
.jah-form-note { margin-top: 1.25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* CF7 injects the Turnstile widget as the first element in the form, which
   asks people to verify before they have typed anything. Reorder with flex so
   it sits where it belongs: after the fields, just above the send button.
   Everything defaults to order 0, so only the tail end needs numbering. */
form.wpcf7-form { display: flex; flex-direction: column; }
.wpcf7-turnstile { order: 2; margin-top: 1.25rem; }
form.wpcf7-form > p:last-of-type { order: 3; }
.wpcf7 .wpcf7-response-output { order: 4; }
.wpcf7-spinner { order: 5; }

/* Flex stops <p> margins from collapsing, so the fields drifted apart.
   Zero them and let the label's own margin set the rhythm, as before. */
form.wpcf7-form { gap: 0; }
form.wpcf7-form > p { margin: 0; }
form.wpcf7-form > p:last-of-type { margin-top: 1.25rem; }

/* Photo credits: attached to the figure, sized to stay out of the way. */
.jah-portrait figcaption,
.wp-block-image figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* Between shows: no player, just when it comes back and what you can play now. */
.jah-between { margin-bottom: var(--wp--preset--spacing--50); }
.jah-between-line {
	margin: 0.35rem 0 0;
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 200;
	line-height: 1.2;
}
.jah-between-sub { margin: 0.6rem 0 0; font-weight: 300; color: var(--wp--preset--color--muted); }