/*
Theme Name: Wave Grinder
Theme URI: https://wavegrinder.com
Author: Wave Grinder
Author URI: https://wavegrinder.com
Description: Phase 1 block theme for Wave Grinder, an audio experience and audio technology studio based in Edinburgh.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: wave-grinder
*/

:root {
	--wg-paper: #f0edee;
	--wg-paper-soft: #e7e0d8;
	--wg-teal: #2c666e;
	--wg-sky: #90ddf0;
	--wg-leaf: #6ab547;
	--wg-soil: #472c1b;
	--wg-ink: #07110f;
	--wg-graphite: #102221;
	--wg-muted: #b9c9c7;
	--wg-line: rgba(240, 237, 238, 0.18);
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		linear-gradient(180deg, rgba(240, 237, 238, 0.035), transparent 28rem),
		radial-gradient(circle at 82% 12%, rgba(144, 221, 240, 0.13), transparent 30rem),
		radial-gradient(circle at 18% 16%, rgba(106, 181, 71, 0.09), transparent 22rem),
		radial-gradient(circle at 86% 84%, rgba(71, 44, 27, 0.56), transparent 26rem),
		var(--wg-ink);
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wg-site-header {
	backdrop-filter: blur(16px);
	background: rgba(7, 17, 15, 0.72) !important;
	border-bottom: 1px solid rgba(240, 237, 238, 0.11);
	position: sticky;
	top: 0;
	z-index: 20;
}

.wg-site-header > .wp-block-group {
	max-width: 1520px !important;
}

.wg-brand a {
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.wg-nav a {
	opacity: 0.76;
	text-decoration: none;
}

.wg-nav a:hover,
.wg-brand a:hover {
	color: var(--wp--preset--color--sky);
	opacity: 1;
}

.wg-button .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	border-radius: 999px;
	box-shadow: none;
	min-height: 46px;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.wg-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wg-hero {
	min-height: min(780px, 86vh);
	overflow: hidden;
	padding-top: clamp(2rem, 5vh, 4rem) !important;
	position: relative;
}

.wg-hero::before {
	background:
		linear-gradient(90deg, rgba(240, 237, 238, 0.045) 1px, transparent 1px),
		linear-gradient(0deg, rgba(144, 221, 240, 0.035) 1px, transparent 1px);
	background-size: 6vw 6vw;
	content: "";
	inset: 0;
	mask-image: linear-gradient(180deg, black, transparent 88%);
	pointer-events: none;
	position: absolute;
}

.wg-hero::after {
	background:
		linear-gradient(135deg, transparent 0 58%, rgba(106, 181, 71, 0.17) 58% 62%, transparent 62%),
		linear-gradient(135deg, transparent 0 70%, rgba(144, 221, 240, 0.14) 70% 73%, transparent 73%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wg-hero-grid {
	gap: clamp(2rem, 6vw, 7rem) !important;
	position: relative;
	z-index: 1;
}

.wg-sound-visual {
	--wg-angle: -18deg;
	--wg-energy: 0;
	--wg-x: 50%;
	--wg-y: 50%;
	aspect-ratio: 1;
	background:
		radial-gradient(circle at var(--wg-x) var(--wg-y), rgba(240, 237, 238, 0.92), rgba(144, 221, 240, 0.34) 10%, transparent 23%),
		radial-gradient(circle at 50% 50%, rgba(7, 17, 15, 0.16), transparent 16%),
		var(--wg-teal);
	border: 1px solid rgba(144, 221, 240, 0.42);
	border-radius: 50%;
	box-shadow:
		0 0 0 calc(14px + var(--wg-energy) * 18px) rgba(106, 181, 71, 0.08),
		0 0 92px rgba(44, 102, 110, 0.42),
		inset 0 0 42px rgba(7, 17, 15, 0.44);
	cursor: grab;
	isolation: isolate;
	overflow: hidden;
	position: relative;
	touch-action: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	user-select: none;
}

.wg-sound-visual::selection,
.wg-wave-recorder::selection {
	background: transparent;
}

.wg-hero h1 {
	font-size: clamp(3rem, 5.15vw, 5.65rem) !important;
	letter-spacing: -0.028em !important;
	line-height: 0.88 !important;
	max-width: 13.2ch;
	text-wrap: balance;
}

.wg-hero .has-large-font-size {
	font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
	line-height: 1.52;
	max-width: 58rem;
}

.wg-hero-proof {
	gap: 0.55rem !important;
	margin-top: 0.95rem;
}

.wg-hero-proof p {
	background: rgba(240, 237, 238, 0.07);
	border: 1px solid rgba(240, 237, 238, 0.16);
	border-radius: 999px;
	color: var(--wg-paper-soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	margin: 0;
	padding: 0.4rem 0.68rem;
	text-transform: uppercase;
}

.wg-sound-visual::before,
.wg-sound-visual::after {
	content: "";
	inset: 7%;
	position: absolute;
}

.wg-sound-visual::before {
	background:
		repeating-radial-gradient(circle at center, transparent 0 18px, rgba(144, 221, 240, 0.25) 19px 20px),
		conic-gradient(from var(--wg-angle), rgba(71, 44, 27, 0.94), rgba(44, 102, 110, 0.82), rgba(144, 221, 240, 0.84), rgba(106, 181, 71, 0.9), rgba(71, 44, 27, 0.94));
	border-radius: inherit;
	filter: saturate(calc(1.05 + var(--wg-energy) * 0.8)) brightness(calc(0.92 + var(--wg-energy) * 0.24));
	opacity: 0.78;
	transform: rotate(calc(var(--wg-angle) * 0.08));
	transition: filter 100ms linear, transform 100ms linear;
}

.wg-sound-visual::after {
	background:
		linear-gradient(90deg, transparent 0 7%, rgba(240, 237, 238, 0.78) 7% 8%, transparent 8% 15%),
		linear-gradient(90deg, transparent 0 15%, rgba(144, 221, 240, 0.64) 15% 16%, transparent 16% 27%),
		linear-gradient(90deg, transparent 0 31%, rgba(106, 181, 71, 0.74) 31% 32%, transparent 32% 44%),
		linear-gradient(90deg, transparent 0 50%, rgba(240, 237, 238, 0.5) 50% 51%, transparent 51% 64%),
		linear-gradient(90deg, transparent 0 72%, rgba(71, 44, 27, 0.88) 72% 73%, transparent 73% 100%);
	border-radius: inherit;
	mix-blend-mode: screen;
	transform: rotate(calc(var(--wg-angle) - 18deg)) scale(calc(1 + var(--wg-energy) * 0.025));
	transition: transform 80ms linear;
	z-index: 2;
}

.wg-sound-visual.is-playing {
	border-color: rgba(240, 237, 238, 0.72);
	box-shadow:
		0 0 0 calc(18px + var(--wg-energy) * 30px) rgba(106, 181, 71, 0.14),
		0 0 118px rgba(144, 221, 240, 0.38),
		inset 0 0 50px rgba(7, 17, 15, 0.32);
	cursor: grabbing;
	transform: scale(1.015);
}

.wg-sound-visual.is-pulsing .wg-turntable-status::before {
	animation: wg-pulse 520ms ease-out;
}

.wg-turntable-label,
.wg-turntable-status {
	margin: 0;
	pointer-events: none;
	position: absolute;
	z-index: 4;
}

.wg-turntable-label {
	color: var(--wg-paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.72rem, 1.2vw, 0.9rem);
	font-weight: 700;
	left: 50%;
	line-height: 1.25;
	opacity: 0.82;
	text-align: center;
	text-transform: uppercase;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 160ms ease, transform 160ms ease;
}

.wg-sound-visual.is-playing .wg-turntable-label {
	opacity: 0.22;
	transform: translate(-50%, -50%) scale(0.92);
}

.wg-turntable-status {
	background: rgba(7, 17, 15, 0.72);
	border: 1px solid rgba(240, 237, 238, 0.18);
	border-radius: 999px;
	bottom: 12%;
	color: var(--wg-sky);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	left: 50%;
	padding: 0.34rem 0.72rem;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}

.wg-turntable-status::before {
	background: radial-gradient(circle, rgba(144, 221, 240, 0.62), transparent 62%);
	border-radius: 999px;
	content: "";
	inset: -0.25rem;
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.wg-wave-recorder {
	background:
		linear-gradient(90deg, rgba(240, 237, 238, 0.06) 1px, transparent 1px) 0 0 / 38px 100%,
		rgba(240, 237, 238, 0.055);
	border: 1px solid rgba(144, 221, 240, 0.22);
	border-radius: 8px;
	margin-top: 1rem;
	overflow: hidden;
	padding: 0.85rem;
	position: relative;
}

.wg-wave-recorder::before {
	background: radial-gradient(circle at 20% 0%, rgba(144, 221, 240, 0.16), transparent 42%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wg-wave-recorder__top,
.wg-wave-help,
.wg-wave-canvas {
	position: relative;
	z-index: 1;
}

.wg-wave-recorder__top {
	align-items: center;
	margin-bottom: 0.65rem;
}

.wg-wave-title,
.wg-wave-status,
.wg-wave-help {
	font-family: var(--wp--preset--font-family--mono);
	margin: 0;
}

.wg-wave-title {
	color: var(--wg-paper);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
}

.wg-wave-status {
	color: var(--wg-sky);
	font-size: 0.68rem;
	text-align: right;
	text-transform: uppercase;
}

.wg-wave-canvas {
	background: rgba(7, 17, 15, 0.52);
	border: 1px solid rgba(240, 237, 238, 0.14);
	border-radius: 8px;
	cursor: crosshair;
	display: block;
	height: 126px;
	touch-action: none;
	width: 100%;
}

.wg-wave-help {
	color: var(--wg-muted);
	font-size: 0.72rem;
	line-height: 1.35;
	margin-top: 0.62rem;
}

.wg-wave-recorder.is-recording {
	border-color: rgba(106, 181, 71, 0.54);
	box-shadow: 0 0 30px rgba(106, 181, 71, 0.12);
}

.wg-wave-recorder.is-scrubbing {
	border-color: rgba(144, 221, 240, 0.58);
	box-shadow: 0 0 36px rgba(144, 221, 240, 0.14);
}

@keyframes wg-pulse {
	0% {
		opacity: 0.9;
		transform: scale(0.92);
	}

	100% {
		opacity: 0;
		transform: scale(1.9);
	}
}

.wg-kicker {
	color: var(--wp--preset--color--leaf);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wg-section {
	border-top: 1px solid var(--wg-line);
	position: relative;
}

.wg-section > .wp-block-group,
.wg-section > .wp-block-columns {
	position: relative;
	z-index: 1;
}

.wg-pillars-section {
	background:
		linear-gradient(180deg, rgba(240, 237, 238, 0.025), rgba(44, 102, 110, 0.08)),
		linear-gradient(90deg, transparent 0 70%, rgba(71, 44, 27, 0.42) 70% 100%);
}

.wg-pillars-section::before {
	background: var(--wg-paper);
	content: "";
	height: 2.5rem;
	left: clamp(1rem, 4vw, 3rem);
	position: absolute;
	top: -1.25rem;
	width: min(28rem, 42vw);
}

.wg-pillars-section .alignwide:first-child {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(160px, 0.35fr);
	gap: 2rem;
}

.wg-pillars-section .alignwide:first-child::after {
	align-self: end;
	color: rgba(240, 237, 238, 0.62);
	content: "01 / paths";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	justify-self: end;
	text-transform: uppercase;
}

.wg-pillars-section h2,
.wg-featured-section h2 {
	font-size: clamp(2.4rem, 5vw, 5.7rem) !important;
	letter-spacing: -0.03em !important;
	line-height: 0.88 !important;
	max-width: 11ch;
}

.wg-pillar-grid {
	align-items: stretch !important;
	display: grid !important;
	gap: clamp(0.85rem, 1.8vw, 1.3rem) !important;
	grid-template-columns: 1.15fr 0.95fr 0.95fr 0.95fr;
}

.wg-card {
	background: var(--wg-paper);
	border: 0;
	border-radius: 8px;
	color: var(--wg-ink);
	min-height: 100%;
	padding: clamp(20px, 3vw, 32px);
	position: relative;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.wg-card:hover {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	transform: translateY(-4px);
}

.wg-card h3,
.wg-card h2 {
	color: var(--wg-ink);
}

.wg-card p {
	color: rgba(7, 17, 15, 0.78);
}

.wg-card a {
	color: var(--wg-ink);
	font-weight: 700;
}

.wg-card.is-primary {
	background: var(--wg-sky);
	color: var(--wg-ink);
	transform: translateY(-1.15rem);
}

.wg-card.is-primary:hover {
	transform: translateY(-1.45rem);
}

.wg-tag {
	background: transparent;
	border: 1px solid rgba(7, 17, 15, 0.34);
	border-radius: 999px;
	color: var(--wg-ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	padding: 0.3rem 0.62rem;
	text-transform: uppercase;
}

.wg-meta {
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.84rem;
}

.wg-rule-list {
	border-top: 1px solid rgba(240, 237, 238, 0.16);
}

.wg-rule-list > * {
	border-bottom: 1px solid rgba(240, 237, 238, 0.16);
	margin: 0;
	padding: 1.25rem 0;
}

.wg-rule-list strong {
	color: var(--wg-paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.3vw, 2.4rem);
	font-weight: 650;
	line-height: 1;
}

.wg-featured-section {
	background:
		linear-gradient(90deg, rgba(44, 102, 110, 0.22), transparent 48%),
		radial-gradient(circle at 80% 22%, rgba(144, 221, 240, 0.09), transparent 26rem);
}

.wg-featured-section::after {
	background: var(--wg-leaf);
	border-radius: 999px;
	content: "";
	height: clamp(7rem, 12vw, 13rem);
	position: absolute;
	right: clamp(1rem, 5vw, 5rem);
	top: clamp(2rem, 7vw, 5rem);
	width: clamp(7rem, 12vw, 13rem);
	z-index: 0;
}

.wg-editorial-cta {
	background:
		linear-gradient(135deg, var(--wg-sky), rgba(144, 221, 240, 0.74) 52%, var(--wg-leaf));
	border-radius: 8px;
	color: var(--wg-ink);
	overflow: hidden;
	position: relative;
}

.wg-editorial-cta::before {
	background:
		linear-gradient(90deg, rgba(7, 17, 15, 0.12) 1px, transparent 1px),
		linear-gradient(0deg, rgba(7, 17, 15, 0.1) 1px, transparent 1px);
	background-size: 42px 42px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wg-editorial-cta > * {
	position: relative;
	z-index: 1;
}

.wg-editorial-cta h2,
.wg-editorial-cta p,
.wg-editorial-cta .wg-kicker {
	color: var(--wg-ink) !important;
}

.wg-contact-form {
	display: grid;
	gap: 1rem;
}

.wg-contact-form label {
	color: var(--wp--preset--color--mist);
	display: grid;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	gap: 0.44rem;
	text-transform: uppercase;
}

.wg-contact-form input,
.wg-contact-form select,
.wg-contact-form textarea {
	background: rgba(244, 239, 228, 0.08);
	border: 1px solid rgba(244, 239, 228, 0.22);
	border-radius: 8px;
	color: var(--wp--preset--color--paper);
	font: inherit;
	min-height: 3rem;
	padding: 0.78rem 0.9rem;
	width: 100%;
}

.wg-contact-form textarea {
	min-height: 11rem;
	resize: vertical;
}

.wg-contact-form button {
	background: var(--wp--preset--color--acid);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88rem;
	font-weight: 700;
	padding: 0.88rem 1.2rem;
	width: fit-content;
}

.wg-contact-form button:hover {
	background: var(--wg-teal);
	color: var(--wg-paper);
}

.wg-footer {
	background: var(--wg-paper);
	border-top: 0;
	color: var(--wg-ink);
}

.wg-footer a,
.wg-footer h2,
.wg-footer p {
	color: var(--wg-ink);
}

/* ── Hamburger button (desktop: hidden) ───────────────────────────────── */

.wg-hamburger {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(240, 237, 238, 0.22);
	border-radius: 6px;
	cursor: pointer;
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px 10px;
	transition: border-color 160ms ease;
	z-index: 30;
}

.wg-hamburger:hover {
	border-color: rgba(240, 237, 238, 0.52);
}

.wg-hamburger-bar {
	background: var(--wg-paper);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform 220ms ease, opacity 220ms ease, width 220ms ease;
	width: 20px;
}

.wg-hamburger[aria-expanded="true"] .wg-hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.wg-hamburger[aria-expanded="true"] .wg-hamburger-bar:nth-child(2) {
	opacity: 0;
	width: 0;
}

.wg-hamburger[aria-expanded="true"] .wg-hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Nav active state ─────────────────────────────────────────────────── */

.wg-nav a[aria-current="page"] {
	color: var(--wp--preset--color--sky);
	opacity: 1;
}

/* ── Turntable idle glow pulse ────────────────────────────────────────── */

@keyframes wg-idle-glow {
	0%, 100% {
		box-shadow:
			0 0 0 14px rgba(106, 181, 71, 0.06),
			0 0 92px rgba(44, 102, 110, 0.42),
			inset 0 0 42px rgba(7, 17, 15, 0.44);
	}

	50% {
		box-shadow:
			0 0 0 28px rgba(106, 181, 71, 0.14),
			0 0 118px rgba(44, 102, 110, 0.58),
			inset 0 0 42px rgba(7, 17, 15, 0.44);
	}
}

.wg-sound-visual:not(.is-playing) {
	animation: wg-idle-glow 3s ease-in-out infinite;
}

/* ── Scroll entrance animations ───────────────────────────────────────── */

.wg-animations-enabled .wg-section,
.wg-animations-enabled .wg-pillar-grid .wg-card,
.wg-animations-enabled .wg-rule-list > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.52s ease, transform 0.52s ease;
}

.wg-animations-enabled .wg-section.is-visible,
.wg-animations-enabled .wg-pillar-grid .wg-card.is-visible,
.wg-animations-enabled .wg-rule-list > *.is-visible {
	opacity: 1;
	transform: none;
}

.wg-animations-enabled .wg-pillar-grid .wg-card:nth-child(2) { transition-delay: 0.08s; }
.wg-animations-enabled .wg-pillar-grid .wg-card:nth-child(3) { transition-delay: 0.16s; }
.wg-animations-enabled .wg-pillar-grid .wg-card:nth-child(4) { transition-delay: 0.24s; }

.wg-animations-enabled .wg-rule-list > *:nth-child(2) { transition-delay: 0.07s; }
.wg-animations-enabled .wg-rule-list > *:nth-child(3) { transition-delay: 0.14s; }
.wg-animations-enabled .wg-rule-list > *:nth-child(4) { transition-delay: 0.21s; }

/* ══════════════════════════════════════════════════════════════════
   NEW SECTIONS — appended for content v2
   ══════════════════════════════════════════════════════════════════ */

/* ── Footer v2 ────────────────────────────────────────────────── */

.wg-footer-brand a {
	color: var(--wg-ink);
	text-decoration: none;
}

.wg-footer-nav a {
	color: rgba(7, 17, 15, 0.72);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.84rem;
	text-decoration: none;
}

.wg-footer-nav a:hover {
	color: var(--wg-ink);
}

.wg-footer-social {
	gap: 1rem !important;
}

.wg-social-link a {
	color: rgba(7, 17, 15, 0.56);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wg-social-link a:hover {
	color: var(--wg-ink);
}

.wg-footer-legal {
	border-top: 1px solid rgba(7, 17, 15, 0.14);
	padding-top: 1.25rem;
}

.wg-footer-legal a {
	color: rgba(7, 17, 15, 0.54);
	font-size: 0.8rem;
	text-decoration: none;
}

.wg-footer-legal a:hover {
	color: var(--wg-ink);
}

/* ── Homepage: upcoming workshops ────────────────────────────── */

.wg-upcoming-section {
	background:
		linear-gradient(90deg, rgba(44, 102, 110, 0.14), transparent 52%);
}

.wg-upcoming-empty p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.92rem;
}

/* ── Homepage: featured tool ─────────────────────────────────── */

.wg-featured-tool-section {
	background:
		linear-gradient(135deg, rgba(7, 17, 15, 0.04), rgba(44, 102, 110, 0.18));
}

.wg-featured-tool-card {
	background:
		linear-gradient(135deg, rgba(44, 102, 110, 0.32), rgba(106, 181, 71, 0.14));
	border: 1px solid rgba(144, 221, 240, 0.22);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.wg-featured-tool-card::before {
	background:
		linear-gradient(90deg, rgba(240, 237, 238, 0.06) 1px, transparent 1px),
		linear-gradient(0deg, rgba(240, 237, 238, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wg-featured-tool-card > * {
	position: relative;
	z-index: 1;
}

.wg-tool-badge {
	background: rgba(106, 181, 71, 0.18);
	border: 1px solid rgba(106, 181, 71, 0.42);
	border-radius: 999px;
	color: var(--wp--preset--color--leaf);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0.5rem 1rem;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── Homepage: podcast preview ───────────────────────────────── */

.wg-podcast-preview-section {
	background:
		radial-gradient(circle at 80% 50%, rgba(44, 102, 110, 0.18), transparent 40rem);
}

.wg-podcast-coming-card {
	background: rgba(240, 237, 238, 0.06);
	border: 1px solid rgba(240, 237, 238, 0.14);
	border-radius: 10px;
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* ── Homepage: newsletter form ───────────────────────────────── */

.wg-newsletter-form {
	margin-top: 1.5rem;
}

.wg-newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.wg-newsletter-row input[type="email"] {
	background: rgba(7, 17, 15, 0.28);
	border: 1px solid rgba(7, 17, 15, 0.42);
	border-radius: 999px;
	color: var(--wg-ink);
	flex: 1 1 220px;
	font: inherit;
	font-size: 0.92rem;
	min-height: 46px;
	padding: 0 1.1rem;
}

.wg-newsletter-row input[type="email"]::placeholder {
	color: rgba(7, 17, 15, 0.54);
}

.wg-newsletter-row button {
	background: var(--wg-ink);
	border: 0;
	border-radius: 999px;
	color: var(--wg-paper);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88rem;
	font-weight: 700;
	min-height: 46px;
	padding: 0 1.4rem;
	transition: background 160ms ease;
}

.wg-newsletter-row button:hover {
	background: var(--wg-graphite);
}

.wg-newsletter-success {
	color: var(--wg-ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

/* ── Tools page ──────────────────────────────────────────────── */

.wg-tool-row {
	gap: clamp(2rem, 5vw, 5rem) !important;
}

.wg-tool-row--reversed .wp-block-column:first-child {
	order: 1;
}

.wg-tool-row--reversed .wp-block-column:last-child {
	order: 0;
}

.wg-tool-preview {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: rgba(240, 237, 238, 0.05);
	border: 1px solid rgba(240, 237, 238, 0.14);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 2rem;
	position: relative;
	text-align: center;
}

.wg-tool-preview--gibberish {
	background:
		radial-gradient(circle at 30% 40%, rgba(106, 181, 71, 0.18), transparent 55%),
		radial-gradient(circle at 72% 68%, rgba(44, 102, 110, 0.24), transparent 45%),
		rgba(7, 17, 15, 0.42);
}

.wg-tool-preview--soundmap {
	background:
		radial-gradient(circle at 65% 35%, rgba(144, 221, 240, 0.2), transparent 50%),
		radial-gradient(circle at 28% 72%, rgba(71, 44, 27, 0.32), transparent 45%),
		rgba(7, 17, 15, 0.42);
}

.wg-tool-preview-label {
	color: var(--wg-paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.4rem;
	text-transform: uppercase;
}

.wg-tool-preview-sub {
	font-size: 0.78rem;
	line-height: 1.45;
	margin: 0;
}

.wg-tool-suited {
	border-left: 2px solid rgba(144, 221, 240, 0.3);
	padding-left: 1rem;
}

.wg-tool-divider {
	border: 0;
	border-top: 1px solid var(--wg-line);
	margin: 0 auto;
}

.wg-more-tools-card {
	background: rgba(240, 237, 238, 0.05);
	border: 1px dashed rgba(240, 237, 238, 0.2);
}

.wg-tech-details summary {
	color: var(--wp--preset--color--mist);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	margin-top: 1rem;
	user-select: none;
}

/* ── FoggyMoss page ──────────────────────────────────────────── */

.wg-platforms {
	gap: 0.75rem !important;
}

.wg-platform-link a {
	background: rgba(240, 237, 238, 0.08);
	border: 1px solid rgba(240, 237, 238, 0.18);
	border-radius: 999px;
	color: var(--wg-paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	padding: 0.42rem 0.9rem;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease;
}

.wg-platform-link a:hover {
	background: rgba(240, 237, 238, 0.14);
	border-color: rgba(240, 237, 238, 0.38);
}

.wg-threads-section {
	background:
		linear-gradient(135deg, rgba(44, 102, 110, 0.14), transparent 55%);
}

.wg-thread-card {
	border-left: 3px solid var(--wg-teal);
	padding-left: clamp(1rem, 2.5vw, 1.75rem);
}

.wg-tag-thread-a {
	border-color: rgba(44, 102, 110, 0.6);
	color: var(--wp--preset--color--sky);
}

.wg-tag-thread-b {
	border-color: rgba(106, 181, 71, 0.5);
	color: var(--wp--preset--color--leaf);
}

.wg-episodes-empty {
	max-width: 720px;
}

/* ── Sonic Branding page ─────────────────────────────────────── */

.wg-services-section {
	background:
		linear-gradient(180deg, rgba(44, 102, 110, 0.1), transparent 60%);
}

.wg-pioneer-note {
	background: rgba(240, 237, 238, 0.05);
	border: 1px solid rgba(240, 237, 238, 0.12);
	border-radius: 8px;
}

.wg-reason-card {
	border-top: 2px solid var(--wg-teal);
	padding-top: 1.25rem;
}

/* ── Workshops page ──────────────────────────────────────────── */

.wg-workshop-feature {
	background:
		radial-gradient(circle at 85% 20%, rgba(144, 221, 240, 0.08), transparent 35rem),
		linear-gradient(180deg, rgba(44, 102, 110, 0.12), transparent);
}

.wg-workshop-meta {
	border-top: 1px solid var(--wg-line);
	border-bottom: 1px solid var(--wg-line);
	padding: 0.85rem 0;
}

.wg-workshop-meta p {
	margin: 0.2rem 0;
}

.wg-steps-list {
	color: var(--wg-ink);
	font-size: 0.9rem;
	line-height: 1.65;
	padding-left: 1.2rem;
}

.wg-takeaway-note {
	background: rgba(240, 237, 238, 0.06);
	border: 1px solid rgba(240, 237, 238, 0.12);
	border-radius: 8px;
}

.wg-coming-soon-card {
	background: rgba(240, 237, 238, 0.04);
	border: 1px dashed rgba(240, 237, 238, 0.2) !important;
}

/* ── About page ──────────────────────────────────────────────── */

.wg-founder-card {
	background: rgba(240, 237, 238, 0.05);
	border-left: 3px solid var(--wg-teal);
	border-radius: 0 8px 8px 0;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.wg-founder-role {
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.84rem;
	font-weight: 400;
}

/* ── Contact page ────────────────────────────────────────────── */

.wg-contact-wrap {
	max-width: 860px;
	margin: 0 auto;
}

.wg-contact-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.wg-contact-tab-btn {
	background: transparent;
	border: 1px solid rgba(240, 237, 238, 0.2);
	border-radius: 999px;
	color: var(--wp--preset--color--mist);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	padding: 0.52rem 1.1rem;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.wg-contact-tab-btn:hover {
	border-color: rgba(240, 237, 238, 0.48);
	color: var(--wg-paper);
}

.wg-contact-tab-btn.is-active {
	background: var(--wg-paper);
	border-color: var(--wg-paper);
	color: var(--wg-ink);
}

.wg-contact-panel {
	display: none;
}

.wg-contact-panel.is-active {
	display: block;
}

.wg-contact-panel-intro {
	color: var(--wp--preset--color--mist);
	font-size: 1rem;
	margin-bottom: 2rem;
}

.wg-contact-panel .wg-contact-form {
	display: grid;
	gap: 1.15rem;
	max-width: 640px;
}

.wg-contact-panel .wg-contact-form label {
	color: var(--wp--preset--color--mist);
	display: grid;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.82rem;
	gap: 0.44rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wg-contact-panel .wg-contact-form input,
.wg-contact-panel .wg-contact-form select,
.wg-contact-panel .wg-contact-form textarea {
	background: rgba(240, 237, 238, 0.07);
	border: 1px solid rgba(240, 237, 238, 0.2);
	border-radius: 8px;
	color: var(--wg-paper);
	font: inherit;
	font-size: 0.95rem;
	min-height: 3rem;
	padding: 0.78rem 0.9rem;
	transition: border-color 160ms ease;
	width: 100%;
}

.wg-contact-panel .wg-contact-form input:focus,
.wg-contact-panel .wg-contact-form select:focus,
.wg-contact-panel .wg-contact-form textarea:focus {
	border-color: rgba(144, 221, 240, 0.52);
	outline: none;
}

.wg-contact-panel .wg-contact-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.wg-contact-panel .wg-contact-form select option {
	background: var(--wg-graphite);
	color: var(--wg-paper);
}

.wg-contact-panel .wg-contact-form button {
	background: var(--wp--preset--color--sky);
	border: 0;
	border-radius: 999px;
	color: var(--wg-ink);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88rem;
	font-weight: 700;
	min-height: 46px;
	padding: 0 1.4rem;
	transition: background 160ms ease, transform 160ms ease;
	width: fit-content;
}

.wg-contact-panel .wg-contact-form button:hover {
	background: var(--wg-teal);
	color: var(--wg-paper);
	transform: translateY(-2px);
}

.wg-contact-panel .wg-contact-form button:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.wg-optional {
	color: rgba(185, 201, 199, 0.52);
	font-size: 0.78rem;
	text-transform: none;
}

.wg-form-msg {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
}

.wg-form-msg.is-success {
	background: rgba(106, 181, 71, 0.14);
	border: 1px solid rgba(106, 181, 71, 0.38);
	color: var(--wp--preset--color--leaf);
}

.wg-form-msg.is-error {
	background: rgba(220, 60, 60, 0.12);
	border: 1px solid rgba(220, 60, 60, 0.3);
	color: #f87171;
}

/* ── Tag accent variant ───────────────────────────────────────── */

.wg-tag-accent {
	background: rgba(106, 181, 71, 0.14);
	border-color: rgba(106, 181, 71, 0.42);
	color: var(--wp--preset--color--leaf);
}

/* ── Mobile responsive additions ─────────────────────────────── */

@media (max-width: 760px) {
	.wg-tool-row--reversed .wp-block-column:first-child { order: 0; }
	.wg-tool-row--reversed .wp-block-column:last-child  { order: 1; }

	.wg-contact-tabs {
		gap: 0.4rem;
	}

	.wg-contact-tab-btn {
		font-size: 0.76rem;
		padding: 0.44rem 0.85rem;
	}

	.wg-newsletter-row {
		flex-direction: column;
	}

	.wg-newsletter-row input[type="email"],
	.wg-newsletter-row button {
		width: 100%;
	}

	.wg-thread-card {
		border-left-width: 2px;
	}
}

@media (max-width: 760px) {
	.wg-site-header .wp-block-group {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Hamburger: visible on mobile */
	.wg-hamburger {
		bottom: auto;
		display: flex;
		position: absolute;
		right: clamp(1.1rem, 4vw, 3rem);
		top: 50%;
		transform: translateY(-50%);
	}

	/* Nav: collapsed by default on mobile */
	.wg-nav {
		display: none !important;
	}

	/* Nav: expanded state */
	.wg-nav.is-open {
		align-items: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1.25rem !important;
		padding-top: 0.25rem;
		width: 100%;
	}

	.wg-nav.is-open > .wp-block-buttons {
		margin-top: 0.25rem;
	}

	.wg-hero {
		min-height: auto;
	}

	.wg-hero h1 {
		font-size: clamp(2.75rem, 13.5vw, 3.55rem) !important;
		line-height: 0.92 !important;
		max-width: 100%;
		overflow-wrap: normal;
	}

	.wg-sound-visual {
		max-width: 78vw;
	}

	.wg-turntable-status {
		bottom: 9%;
	}

	.wg-wave-canvas {
		height: 80px;
	}

	.wg-wave-status {
		text-align: left;
	}

	.wg-pillars-section .alignwide:first-child {
		display: block;
	}

	.wg-pillars-section .alignwide:first-child::after {
		display: none;
	}

	.wg-pillar-grid {
		display: grid !important;
		grid-template-columns: 1fr;
	}

	.wg-card.is-primary,
	.wg-card.is-primary:hover {
		transform: none;
	}

	.wg-featured-section::after {
		display: none;
	}
}