/*
Theme Name: Prognado
Theme URI: https://prognado.net
Author: Built for Dr Robert Fisher
Description: A custom theme for Prognado, a home for music writing, radio and ideas on progressive music. Built from scratch: no page builder, no bundled plugins.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: prognado
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--thunder: #3b0b18;      /* oxblood: dark sections, inner-page headers */
	--squall: #1a060c;       /* deepest oxblood-black: closing band, footer */
	--hero-top: #5c1020;     /* the red at the top of the home hero */
	--chalk: #efe9e1;        /* warm paper: reading surface */
	--bone: #f3eee2;         /* warm off-white: text on dark */
	--sodium: #f2a93b;       /* street-lamp amber: accent on dark */
	--sodium-deep: #8a4f00;  /* amber for text on light (AA contrast) */
	--verdigris: #5db3a5;    /* copper green: secondary on dark */
	--verdigris-deep: #1f6f66;
	--ink: #2a1319;          /* warm near-black: text on light */

	--font-display: "Young Serif", Georgia, "Times New Roman", serif;
	--font-text: "Newsreader", Georgia, "Times New Roman", serif;

	--wrap: 1180px;
	--measure: 38rem;
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--focus: var(--sodium-deep);
}

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

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

body {
	margin: 0;
	background: var(--chalk);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1.125rem;
	line-height: 1.65;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
a { color: inherit; }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--sodium);
	color: var(--squall);
	font-family: var(--font-display);
	font-weight: 400;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */
.site-header {
	--focus: var(--sodium);
	position: relative;
	z-index: 10;
	background: var(--thunder);
	color: var(--bone);
}

.site-header__inner {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.25rem;
}

.site-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	text-decoration: none;
}

.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: .95rem;
}

.site-nav a {
	display: inline-block;
	padding: .35rem 0;
	text-decoration: none;
	background: linear-gradient(var(--sodium), var(--sodium)) 0 100% / 0 2px no-repeat;
	transition: background-size .25s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { background-size: 100% 2px; }

.nav-toggle {
	display: none;
	padding: .45rem .9rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: .95rem;
	cursor: pointer;
}

@media (max-width: 81.99rem) {
	.js .nav-toggle { display: inline-flex; }
	.js .site-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		padding: .5rem var(--gutter) 1.75rem;
		background: var(--thunder);
	}
	.js .site-nav.is-open { display: block; }
	.js .site-nav .menu { flex-direction: column; gap: .5rem; font-size: 1.35rem; }
}

/* ==========================================================================
   Hero (front page): a lit stage: backdrop screen, amp stacks, beams from three banks of lamps.
   The beams and rig are drawn by assets/js/stage.js.
   ========================================================================== */
.home .site-header,
.home .site-nav { background: var(--hero-top); }

.hero {
	--focus: var(--sodium);
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	overflow: hidden;
	height: min(88vh, 46rem);
	min-height: 34rem;
	background: linear-gradient(180deg, var(--hero-top) 0%, #34091a 34%, #0d0308 70%, #030102 100%);
	color: var(--bone);
	text-align: center;
}

.hero__set,
.hero__beams,
.hero__rig,
.hero__glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero__set { z-index: 0; }
.hero__beams { z-index: 1; mix-blend-mode: screen; }
.hero__rig { z-index: 3; }
.hero__glow { z-index: 4; mix-blend-mode: screen; }

.beam {
	transform-box: fill-box;
	transform-origin: 50% 0;
	animation: sweep 9s ease-in-out infinite alternate;
	animation-delay: var(--d, 0s);
	animation-play-state: var(--beam-state, running);
}
.flare {
	animation: breathe 5s ease-in-out infinite alternate;
	animation-delay: var(--d, 0s);
}
@keyframes sweep { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes breathe { from { opacity: .72; } to { opacity: 1; } }

.hero__text {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding: 2.5rem var(--gutter) 1.5rem;
	transform: translateY(-12%);
}

.hero__title {
	margin: 0;
	padding-bottom: .04em;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(3.4rem, 14vw, 10.5rem);
	line-height: 1.16;
	letter-spacing: -.01em;
	color: transparent;
	background: linear-gradient(180deg, #fffaf0 0%, #f3e3cf 45%, #b59c86 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 0 22px rgba(255, 236, 214, .35));
}

.hero__lede {
	margin: .25rem 0 0;
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	font-style: italic;
	font-weight: 300;
	color: #e9d6c2;
}

.hero__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 2rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
}
.hero__links a {
	color: var(--sodium);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
}
.hero__links a:hover { color: var(--bone); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--chalk { background: var(--chalk); color: var(--ink); }
.section--thunder { --focus: var(--sodium); background: var(--thunder); color: var(--bone); }
.section--squall { --focus: var(--sodium); background: var(--squall); color: var(--bone); }

.section__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -.015em;
}

/* Recent writing: a list of entries, whole row clickable */
.entries {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.entry {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	grid-template-areas:
		"thumb date"
		"thumb main"
		"thumb cat";
	align-content: start;
	gap: .3rem 1.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(42, 19, 25, .18);
}
.entry:last-child { border-bottom: 1px solid rgba(42, 19, 25, .18); }

@media (min-width: 48rem) {
	.entry {
		grid-template-columns: 9.5rem 6.5rem minmax(0, 1fr) 10rem;
		grid-template-areas: "date thumb main cat";
		gap: .4rem 1.75rem;
		align-items: center;
	}
}

.entry__thumb { grid-area: thumb; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--thunder); }
.entry__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.entry:hover .entry__thumb img { transform: scale(1.05); }
/* No featured image yet: a small record, in the site's colours */
.entry__thumb--empty {
	background:
		radial-gradient(circle at 50% 50%, var(--sodium) 0 9%, var(--squall) 9% 12%, transparent 12%),
		repeating-radial-gradient(circle at 50% 50%, #3b0b18 0 3px, #4b1121 3px 4px);
}
.entry__date { grid-area: date; }
.entry__main { grid-area: main; }
.entry__cat { grid-area: cat; }

.entry__date {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 400;
	opacity: .78;
}

.entry__main { transition: transform .2s ease; }

.entry__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	transition: color .2s ease;
}

.entry__link { text-decoration: none; }
.entry__link::after { content: ""; position: absolute; inset: 0; }

.entry__excerpt {
	max-width: 60ch;
	margin: .5rem 0 0;
}

.entry__cat {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 400;
	color: var(--verdigris-deep);
}
@media (min-width: 48rem) {
	.entry__cat { text-align: right; }
}

.entry:hover .entry__title,
.entry:focus-within .entry__title { color: var(--sodium-deep); }
.entry:hover .entry__main { transform: translateX(.35rem); }

.more-link {
	display: inline-block;
	margin-top: 2rem;
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--sodium-deep);
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
}

.empty-note {
	max-width: 44ch;
	margin: 2.5rem 0 0;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var(--sodium);
	background: rgba(255, 255, 255, .55);
}

/* Latest covers: a quiet row beneath the writing list */
.covers-band { margin-top: clamp(3rem, 7vw, 4.5rem); }
.covers-band__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
}
.covers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .6rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 56rem) {
	.covers { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.covers a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 2px;
	background: var(--squall);
	text-decoration: none;
}
.covers img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.covers span {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem .6rem .55rem;
	background: linear-gradient(to top, rgba(26, 6, 12, .92), rgba(26, 6, 12, 0));
	color: var(--bone);
	font-family: var(--font-display);
	font-size: .85rem;
	line-height: 1.25;
	opacity: 0;
	transform: translateY(.4rem);
	transition: opacity .25s ease, transform .25s ease;
}
.covers a:hover img { transform: scale(1.05); }
.covers a:hover span,
.covers a:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) {
	.covers span { opacity: 1; transform: none; font-size: .75rem; }
}

/* Ongoing work: stacked rows, big names on the left */
.strands {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3rem);
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

.strand { display: grid; gap: 1rem 3rem; }
@media (min-width: 48rem) {
	.strand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}

.strand__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -.015em;
}

.strand__text { max-width: 44ch; margin: 0 0 .75rem; }

.strand__link {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--sodium);
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
}
.strand__link:hover { color: var(--bone); }

/* About */
.about { display: grid; gap: 2rem 5rem; }
@media (min-width: 56rem) {
	.about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.about__text p { max-width: var(--measure); margin: 0 0 1.25rem; font-size: 1.25rem; }

.also { margin: 2.5rem 0 0; }
.also--first { margin-top: 0; }
.also--first dt:first-child { margin-top: 0; }

/* Coaching & Editing continues the About section, under a rule */
.section--continued { padding-top: 0; }
.services {
	padding-top: clamp(3rem, 7vw, 4.5rem);
	border-top: 1px solid rgba(42, 19, 25, .18);
}
.also dt {
	margin-top: 1.25rem;
	font-family: var(--font-display);
	font-weight: 400;
}
.also dd { margin: .15rem 0 0; }

/* Closing band */
.contact__link {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--sodium);
	text-decoration-thickness: .06em;
	text-underline-offset: .12em;
}
.contact__link:hover { color: var(--bone); }
.contact__note { max-width: 40ch; margin: 1.5rem 0 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	--focus: var(--sodium);
	padding-block: 2.5rem;
	background: var(--squall);
	color: var(--bone);
	font-size: 1rem;
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(243, 238, 226, .2);
}
.site-footer .menu {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 400;
}
.site-footer p { margin: 0; opacity: .8; }

/* Closing band sits directly above the footer, so drop the double spacing */
.section--squall + .site-footer { padding-top: 0; }
.section--squall + .site-footer .site-footer__inner { padding-top: 2rem; }

/* ==========================================================================
   Posts, pages and listings
   ========================================================================== */
.page-hero {
	--focus: var(--sodium);
	padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
	background: var(--thunder);
	color: var(--bone);
}

.page-hero__title {
	max-width: 26ch;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	overflow-wrap: break-word;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.75rem;
	margin: 1.5rem 0 0;
	font-family: var(--font-display);
	font-weight: 400;
}
.page-hero__meta a { color: var(--sodium); }

.page-hero__intro { max-width: 52ch; margin: 1.25rem 0 0; font-size: 1.25rem; font-style: italic; }
.page-hero__intro p { margin: 0; }

/* Featured image: sharp in the middle, its own blurred glow behind */
.figure-frame {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	overflow: hidden;
	height: clamp(17rem, 44vw, 32rem);
	padding: 1.5rem 0 2.25rem;
	margin: 0;
	background: var(--squall);
}
.figure-frame__bg {
	position: absolute;
	inset: -12%;
	z-index: -1;
	background-size: cover;
	background-position: center;
	filter: blur(30px) saturate(1.15) brightness(.7);
}
.figure-frame__img {
	display: block;
	width: auto;
	max-width: calc(100% - 2 * var(--gutter));
	height: 100%;
	object-fit: contain;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
}
.figure-frame__caption {
	position: absolute;
	right: var(--gutter);
	bottom: .6rem;
	max-width: 60%;
	font-family: var(--font-display);
	font-size: .8rem;
	color: rgba(243, 238, 226, .85);
	text-align: right;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.listing { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.listing .entries { margin-top: 0; }

.prose {
	width: min(100% - 2 * var(--gutter), var(--measure));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
	font-size: 1.25rem;
	line-height: 1.7;
}

.prose > * { margin-block: 0 1.4em; }
.prose a { color: var(--sodium-deep); text-underline-offset: .2em; }
.prose a:hover { color: var(--ink); }

.prose h2, .prose h3, .prose h4 {
	margin-block: 2.2em .6em;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
}
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.2rem; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }

.prose blockquote {
	margin-inline: 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 4px solid var(--sodium);
	font-size: 1.35rem;
	font-style: italic;
}
.prose blockquote p { margin: 0 0 .75em; }
.prose blockquote cite { font-family: var(--font-display); font-size: 1rem; font-style: normal; }

.prose figure { margin-inline: 0; }
.prose figcaption,
.prose .wp-caption-text {
	margin-top: .6rem;
	font-family: var(--font-display);
	font-size: .9rem;
	opacity: .8;
}
.prose img { border-radius: 4px; }
/* Italic overhang: keeps a closing italic quote from touching the next word */
.prose em, .prose i { padding-right: .08em; }

.prose hr {
	width: 6rem;
	height: 4px;
	margin: 3rem 0;
	border: 0;
	background: var(--sodium);
}

.prose pre {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	background: var(--thunder);
	color: var(--bone);
	font-size: 1rem;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: .6rem .75rem; border-bottom: 1px solid rgba(42, 19, 25, .2); text-align: left; }

.prose .alignwide {
	position: relative;
	left: 50%;
	width: min(78rem, 100vw - 2 * var(--gutter));
	max-width: none;
	transform: translateX(-50%);
}
.prose .alignleft { float: left; margin: .3em 1.5rem 1rem 0; }
.prose .alignright { float: right; margin: .3em 0 1rem 1.5rem; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose iframe, .prose video { max-width: 100%; }

.post-nav {
	width: min(100% - 2 * var(--gutter), var(--measure));
	margin: 0 auto 4rem;
	font-family: var(--font-display);
	font-weight: 400;
}
.post-nav .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.post-nav a { color: var(--sodium-deep); text-underline-offset: .25em; }
.post-nav .nav-subtitle { display: block; opacity: .75; }

.pagination { margin-top: 3rem; font-family: var(--font-display); font-weight: 400; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.pagination a { color: var(--sodium-deep); }
.pagination .current { border-bottom: 3px solid var(--sodium); }

/* Comments */
.comments {
	width: min(100% - 2 * var(--gutter), var(--measure));
	margin: 0 auto 5rem;
	font-size: 1.05rem;
}
.comments__title, .comment-reply-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.6rem;
}
.comment-list { padding-left: 0; list-style: none; }
.comment-list .children { padding-left: 1.5rem; list-style: none; }
.comment-body { margin-bottom: 1.5rem; }
.comment-meta { font-family: var(--font-display); font-size: .95rem; }
.comment-form label { display: block; font-family: var(--font-display); font-weight: 400; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .65rem .8rem;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}

/* Search form */
.search-form { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 34rem; margin-top: 1.5rem; }
.search-form label { flex: 1 1 14rem; }
.search-field {
	width: 100%;
	padding: .7rem .9rem;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}
.search-submit,
.comment-form .submit {
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: 4px;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1rem;
	cursor: pointer;
}
.search-submit:hover,
.comment-form .submit:hover { background: var(--sodium-deep); }

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
	.entry:hover .entry__main { transform: none; }
	.entry:hover .entry__thumb img { transform: none; }
	.covers a:hover img { transform: none; }
	.covers span { transition: none; }
	.beam, .flare { animation: none; }
}