/*
Theme Name: Cutthroat Kelly
Theme URI: https://cutthroatkelly.com
Author: Fullon
Author URI: https://fullon.life
Description: Block theme for the Sydney rock band Cutthroat Kelly. Anton headings, Archivo body, ember accent against near-black, with a print-zine treatment of grain, grayscale and hard offset shadows.
Version: 0.2.5
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cutthroat-kelly
Tags: block-theme, full-site-editing, one-column, dark-mode-support
*/

/*
 * Tokens live in theme.json. This file carries the art direction that global
 * styles cannot express: layered photo treatments, grain, offset shadows and
 * the cover-art crosshatch.
 */

/* ---------------------------------------------------------------- Base ---- */

/* Anton ships only weight 400, so headings must never be synthetically bolded. */
h1, h2, h3, h4, h5, h6 {
	font-synthesis-weight: none;
}

/* Footer navigation reads as a link list, not a bulleted list. */
.ck-footer__links {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.ck-footer__links li + li {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------ Elements ---- */

/*
 * Section eyebrow: the small ember-light label above each section heading.
 */
.ck-eyebrow {
	color: var(--wp--preset--color--ember-light);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

/*
 * Hard offset shadow buttons. The shadow colour changes with the section
 * behind it, so it is set per variant. Hover lifts the button up and left and
 * lengthens the shadow, which is the whole gesture — no colour change.
 */
.ck-btn .wp-block-button__link {
	box-shadow: 4px 4px 0 var(--ck-btn-shadow, var(--wp--preset--color--bone));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ck-btn .wp-block-button__link:hover,
.ck-btn .wp-block-button__link:focus-visible {
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--ck-btn-shadow, var(--wp--preset--color--bone));
}

.ck-btn--shadow-bone { --ck-btn-shadow: var(--wp--preset--color--bone); }
.ck-btn--shadow-ember { --ck-btn-shadow: var(--wp--preset--color--ember); }
.ck-btn--shadow-dark { --ck-btn-shadow: var(--wp--preset--color--neutral-darkest); }

/*
 * Haze is the interaction colour across the site, so a filled button shifts to
 * it on hover as well as lifting. Buttons sitting on the ember-darkest ground
 * keep their own colours — Haze against that red would fight it — and rely on
 * the lift alone.
 */
.ck-btn .wp-block-button__link:hover,
.ck-btn .wp-block-button__link:focus {
	background-color: var(--ck-btn-hover-bg, var(--wp--preset--color--haze));
	color: var(--ck-btn-hover-fg, var(--wp--preset--color--white));
}

.ck-btn--invert .wp-block-button__link {
	--ck-btn-hover-bg: var(--wp--preset--color--white);
	--ck-btn-hover-fg: var(--wp--preset--color--ember-darkest);
}

.ck-btn--outline .wp-block-button__link {
	--ck-btn-hover-bg: transparent;
	--ck-btn-hover-fg: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	background-color: transparent;
}

/* Underlined quiet link, used beside a primary button. */
.ck-link-rule a {
	color: var(--wp--preset--color--bone);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 236, 225, 0.5);
	padding-bottom: 3px;
}

.ck-link-rule a:hover {
	color: var(--wp--preset--color--white);
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------- Hero ---- */

/*
 * The hero sits as a mounted plate inside a larger frame, with the street
 * footage running behind and showing as a border around it.
 *
 * Percentage padding resolves against the inline size, so 10% gives an even
 * margin on all four sides rather than a wider one left and right.
 */
.ck-hero-frame {
	position: relative;
	min-height: 92vh;
	display: flex;
	padding: 6%;
	overflow: hidden;
	background-color: var(--wp--preset--color--neutral-darkest);
}

/*
 * Wrapper the lamp switches. Both video layers live inside it, so the tube can
 * cut the whole background without touching the crossfade that is rewriting
 * each layer's opacity every frame.
 */
.ck-hero-frame__lamp {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ck-hero-frame__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The frame is decoration — never let it swallow the viewport on a phone. */
@media (max-width: 767px) {
	.ck-hero-frame {
		padding: 6%;
	}
}

.ck-hero {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ck-hero > * {
	position: relative;
	z-index: 1;
}

/*
 * Layer 1 — the photograph, desaturated and pushed to high contrast so the
 * ember wash above it does the colouring.
 */
.ck-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--neutral-darker);
	/*
	 * Contrast a little above the design's setting so highlights carry into the
	 * multiplied falloff at the edges rather than dissolving with everything
	 * else.
	 */
	filter: grayscale(1) contrast(1.3) brightness(1.05);
}

/*
 * The photograph is two identical panels side by side rather than one image.
 * Sliding the track right by exactly one panel width and wrapping means the
 * copy arriving from the left is pixel-identical to the one leaving, so the
 * loop has no seam. At rest the track sits at zero and panel one simply fills
 * the frame, which is why the static variants look unchanged.
 */
.ck-hero__pan {
	display: flex;
	width: 200%;
	height: 100%;
	will-change: transform;
}

.ck-hero__pan-panel {
	flex: 0 0 50%;
	height: 100%;
	background-image: var(--ck-hero-image, none);
	background-size: cover;
	background-position: center 30%;
}

/*
 * Mirroring the second panel was tried here to make the join seamless. It works
 * geometrically and looks terrible: the reflection lands mid-frame and reads as
 * a kaleidoscope, with the guitarist doubled nose to nose. A single photograph
 * cannot loop without either a visible cut or a visible symmetry, and the cut
 * is by far the lesser of the two.
 */

/*
 * Layer 2 — vertical fade so the type at the bottom always has ground.
 *
 * Eased back from the design's 0.15/0.55/0.95. Those values were set for a
 * hero filling the viewport; inside the video frame the plate is roughly half
 * that height, so the same stops compress and bury the band. This keeps the
 * type legible while letting the photograph read.
 */
.ck-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(8, 8, 8, 0.05) 0%, rgba(8, 8, 8, 0.4) 50%, rgba(8, 8, 8, 0.88) 100%);
	mix-blend-mode: multiply;
}

/*
 * The three treatment layers sit over the photograph and would otherwise
 * swallow the pointer, so the hover that slows the pan would never reach it.
 * They are decoration and should be invisible to input either way.
 */
.ck-hero__wash,
.ck-hero__tint,
.ck-hero__grain {
	pointer-events: none;
}

/* Layer 3 — ember tint recolouring the grayscale photo. */
.ck-hero__tint {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(76, 23, 8, 0.28);
	mix-blend-mode: color;
}

/* Layer 4 — film grain. */
.ck-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.15;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}

.ck-hero__content {
	flex: 1;
	display: flex;
	align-items: flex-end;
	padding: 40px 0 90px;
}

/* ------------------------------------------------ Hero variants ---------- */

/*
 * Three ways of stopping the type from eating the photograph. Each keeps the
 * same markup and only moves the layers around, so switching is one class.
 */

/*
 * A — Tight overlay. Type still sits on the photograph, but the fade is held
 * off until well down the frame instead of starting at the top, so the band
 * stays untouched and only the floor under the type darkens.
 */
.ck-hero--tight .ck-hero__wash {
	background:
		linear-gradient(180deg, transparent 0%, transparent 46%, rgba(8, 8, 8, 0.72) 78%, rgba(8, 8, 8, 0.94) 100%);
}

/*
 * B — Split. The photograph takes the left and the type moves onto solid
 * ground beside it, so nothing is laid over the band at all.
 */
.ck-hero--split {
	background-color: var(--wp--preset--color--neutral-darkest);
}

/*
 * The photograph runs the full width and keeps panning underneath the copy,
 * rather than being cut off at the column edge. What separates the two halves
 * is the veil below, not a boundary in the image.
 */

/*
 * The wash becomes that veil: transparent across the photograph, ramping to
 * near-solid before the copy starts. Normal blend rather than multiply here —
 * the type needs genuinely dark ground, not a proportional darkening that
 * would let a stage light punch through a headline.
 */
.ck-hero--split .ck-hero__wash {
	mix-blend-mode: normal;
	background: linear-gradient(
		90deg,
		rgba(8, 8, 8, 0) 44%,
		rgba(8, 8, 8, 0.45) 51%,
		rgba(8, 8, 8, 0.88) 57%,
		rgba(8, 8, 8, 0.96) 64%,
		rgba(8, 8, 8, 0.96) 100%
	);
}

/*
 * Opaque falloff at both edges of the photograph, a tenth of the width each
 * side. It does two jobs: it hides the seam where the looping pan wraps, since
 * the join always happens inside the darkness, and it stops the photo butting
 * hard against the street footage on one side and the copy on the other.
 */
.ck-hero--split .ck-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/*
	 * Multiplied, not laid over. A semi-transparent black overlay lifts the
	 * blacks toward grey and mutes the whole falloff — the milky, washed-out
	 * look. Under multiply, white is the identity value, so the ramp darkens
	 * proportionally instead: a stage light or a pale shirt stays the brightest
	 * thing in the zone and the musicians keep reading right into the edge,
	 * while the shadows around them go properly black.
	 */
	mix-blend-mode: multiply;
	background: linear-gradient(
		90deg,
		#050505 0%,
		#4d4d4d 5%,
		#c4c4c4 10%,
		#ffffff 14%,
		#ffffff 86%,
		#c4c4c4 90%,
		#4d4d4d 95%,
		#050505 100%
	);
}

.ck-hero--split .ck-hero__content {
	align-items: center;
	margin-left: 58%;
	padding: 40px 0;
}

/*
 * C — Stacked. The photograph is a full-width band across the top and the type
 * sits beneath it. The most generous to the photograph, and the only one where
 * nothing overlaps at all.
 */
/* Solid ground under the type, or the street footage shows through it. */
.ck-hero--stacked {
	background-color: var(--wp--preset--color--neutral-darkest);
}

.ck-hero--stacked .ck-hero__media,
.ck-hero--stacked .ck-hero__tint,
.ck-hero--stacked .ck-hero__grain {
	bottom: 38%;
}

.ck-hero--stacked .ck-hero__wash {
	bottom: 38%;
	background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 8, 0.5) 100%);
}

.ck-hero--stacked .ck-hero__content {
	align-items: flex-end;
	padding: 32px 0 8px;
}

.ck-hero__kicker {
	color: var(--wp--preset--color--ember-light);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 18px;
}

/* The lede breaks earlier than the headline, so it stays a tighter column. */
.ck-hero__lede {
	max-width: 520px;
}

.ck-hero h1 {
	font-size: clamp(38px, 6.5vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	margin: 0 0 24px;
}

/*
 * With the tube out, the headline goes with it — the fill drops away and a
 * 0.75px hairline is left standing. Switched by the same class as the footage,
 * so the two blink as one thing rather than two effects that happen to agree.
 *
 * No transition: a tube does not dim, and neither should this. Note that the
 * marquee further down also outlines its type, with a 0.3s colour transition.
 * That is a separate component and deliberately unhurried — do not let the two
 * drift into sharing a rule, because this one has to stay instant.
 */
.ck-hero-frame.is-dark .ck-hero h1 {
	color: transparent;
	-webkit-text-stroke: 0.75px var(--wp--preset--color--bone);
	text-stroke: 0.75px var(--wp--preset--color--bone);
	paint-order: stroke fill;

	/*
	 * drop-shadow, not text-shadow. text-shadow casts from the solid glyph, so
	 * with a hollow letterform it floods the counters with blue and the type
	 * stops reading as an outline at all. drop-shadow works off the rendered
	 * alpha — which here is only the stroke — so the light comes off the edge
	 * and the counters stay empty.
	 *
	 * Two passes: a tight cold halo tracking the stroke, and a wider violet
	 * bloom past it. One alone reads as a shadow sitting behind the text.
	 *
	 * Cold on purpose. The rest of the page is ember, so the only moment
	 * anything on it turns blue is the moment the tube gives out.
	 */
	filter:
		drop-shadow( 0 0 2px rgba( 150, 180, 255, 0.55 ) )
		drop-shadow( 0 0 9px rgba( 122, 92, 255, 0.32 ) );
}

/* ------------------------------------------------------------ Releases ---- */

.ck-release-row {
	display: flex;
	gap: 48px;
	justify-content: center;
	flex-wrap: wrap;
}

.ck-release-card {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 260px;
}

.ck-release-art {
	width: 260px;
	height: 330px;
	position: relative;
	background-color: var(--wp--preset--color--neutral-darker);
	background-size: cover;
	background-position: center;
	box-shadow: 0 24px 34px -10px rgba(0, 0, 0, 0.7);
	transition: transform 0.1s ease-out;
	transform-style: preserve-3d;
	filter: saturate(0.95) contrast(1.05);
}

/* Crosshatch, so flat cover art reads as printed stock. */
.ck-release-art::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px);
}

.ck-release-art::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55);
}

.ck-release-card h3 {
	font-size: 20px;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	margin: 24px 0 6px;
	text-align: center;
}

.ck-release-meta {
	color: var(--wp--preset--color--neutral);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
	text-align: center;
}

/* ---------------------------------------------------- Closing marquee ---- */

/*
 * The section closing the home page. The two clicks stop being buttons and
 * become the loudest thing on the page: two bars of scrolling type, each one a
 * link, running in opposite directions. Touching a bar stops it and fills the
 * type solid. The copy sandwiched between them is the only quiet part, which is
 * what makes it read.
 *
 * Flat colour and grain, nothing else. An earlier pass screened the ground and
 * ran a second impression of every line in ember a few pixels out of register;
 * both were dropped as noise competing with the type they sat behind.
 */

:root {
	/*
	 * Same noise field the hero uses, lifted to a custom property so the
	 * marquee can share it rather than carrying a second copy of the data URI.
	 */
	--ck-grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}

.ck-marquee {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Grain only. The halftone screen that used to sit under this read as a field
 * of pin spots rather than as ink, so the ground is flat colour now and the
 * grain is the single texture — overlay at a fifth opacity, gentle enough to
 * cross type without touching legibility, the same way the hero's does.
 */
.ck-marquee__grain {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: overlay;
	background-image: var(--ck-grain);
}

/*
 * Lifted explicitly rather than with a blanket `> *` rule, which would also
 * catch the grain layer and override the absolute positioning it depends on.
 */
.ck-marquee__mid {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------- The bars -- */

.ck-mq {
	display: block;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-decoration: none;
	padding: 22px 0;
	border-block: 1px solid rgba(255, 219, 209, 0.3);
	background: rgba(8, 8, 8, 0.14);
	transition: background-color 0.3s ease;
}

/* The top bar butts against the section above it, so it needs no rule there. */
.ck-mq--top { border-top: 0; }

.ck-mq:hover,
.ck-mq:focus-visible {
	background: rgba(8, 8, 8, 0.4);
	outline: none;
}

.ck-mq__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: ck-mq-run 34s linear infinite;
}

.ck-mq--bottom .ck-mq__track { animation-direction: reverse; }

.ck-mq:hover .ck-mq__track,
.ck-mq:focus-visible .ck-mq__track { animation-play-state: paused; }

@keyframes ck-mq-run {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/*
 * Flex rather than inline text, so the gap either side of each star is one
 * declaration instead of literal spaces baked into the string. It also keeps
 * both halves of the track deterministically equal, which is what makes the
 * wrap seamless.
 */
.ck-mq__item {
	display: flex;
	align-items: center;
	gap: 0.34em;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(34px, 5.6vw, 74px);
	line-height: 1.08;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--ember-lighter);
	transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

.ck-mq__phrase { flex: none; }

/*
 * Solid ember, and small enough to punctuate rather than compete. It sets its
 * own colour and clears the stroke, so it stays filled red while the words
 * around it are outlined — and stays red when they fill bone on hover.
 *
 * Nudged up because the glyph is centred on its own em box, which sits low
 * against the cap height of the Anton beside it.
 */
.ck-mq__star {
	flex: none;
	font-size: 0.4em;
	color: var(--wp--preset--color--ember);
	-webkit-text-stroke: 0;
	transform: translateY(-0.12em);
}

.ck-mq:hover .ck-mq__item,
.ck-mq:focus-visible .ck-mq__item {
	color: var(--wp--preset--color--bone);
	-webkit-text-stroke-color: var(--wp--preset--color--bone);
}

.ck-mq__cue {
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--ember-darkest);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.ck-mq:hover .ck-mq__cue,
.ck-mq:focus-visible .ck-mq__cue { opacity: 1; }

/* ----------------------------------------------------------- The middle -- */

.ck-mq__reasons {
	display: grid;
	gap: 16px;
	text-align: left;
	max-width: 620px;
	margin: 34px auto 0;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 219, 209, 0.24);
}

.ck-mq__reasons p {
	position: relative;
	margin: 0;
	padding-left: 30px;
	color: var(--wp--preset--color--neutral-lightest);
	font-size: 15px;
	line-height: 1.6;
}

.ck-mq__reasons p::before {
	content: attr(data-n);
	position: absolute;
	left: 0;
	top: 0.1em;
	color: var(--wp--preset--color--ember-light);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.ck-mq__reasons b {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

/*
 * The third ask is stamped rather than scrolled, and deliberately does not look
 * like the bars. It is a different kind of request — it costs money and it is
 * not about the band — so making it share their treatment would flatten that
 * distinction into "here are three things".
 */
.ck-mq__stamp {
	display: block;
	max-width: 560px;
	margin: 44px auto 0;
	padding: 26px 30px 28px;
	text-align: left;
	text-decoration: none;
	border: 3px solid var(--wp--preset--color--bone);
	background: rgba(8, 8, 8, 0.2);
	box-shadow: 8px 8px 0 rgba(8, 8, 8, 0.55);
	transform: rotate(-1deg);
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

/* Only a stamp that goes somewhere behaves like something you can press. */
a.ck-mq__stamp:hover,
a.ck-mq__stamp:focus-visible {
	background: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--bone);
	box-shadow: 13px 13px 0 rgba(8, 8, 8, 0.6);
	transform: rotate(-1deg) translate(-5px, -5px);
	outline: none;
}

.ck-mq__stamp-kicker {
	display: block;
	margin-bottom: 12px;
	color: var(--wp--preset--color--ember-light);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 0.16s ease;
}

.ck-mq__stamp-title {
	display: block;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(24px, 3vw, 34px);
	line-height: 0.96;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
	transition: color 0.16s ease;
}

.ck-mq__stamp-why {
	display: block;
	color: var(--wp--preset--color--ember-lighter);
	font-size: 15px;
	line-height: 1.55;
	transition: color 0.16s ease;
}

.ck-mq__stamp-go {
	display: inline-block;
	margin-top: 18px;
	color: var(--wp--preset--color--bone);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(242, 236, 225, 0.45);
	padding-bottom: 4px;
	transition: color 0.16s ease, border-color 0.16s ease;
}

a.ck-mq__stamp:hover .ck-mq__stamp-kicker,
a.ck-mq__stamp:focus-visible .ck-mq__stamp-kicker { color: var(--wp--preset--color--ember-dark); }

a.ck-mq__stamp:hover .ck-mq__stamp-title,
a.ck-mq__stamp:focus-visible .ck-mq__stamp-title { color: var(--wp--preset--color--ember-darkest); }

a.ck-mq__stamp:hover .ck-mq__stamp-why,
a.ck-mq__stamp:focus-visible .ck-mq__stamp-why { color: var(--wp--preset--color--ember-darker); }

a.ck-mq__stamp:hover .ck-mq__stamp-go,
a.ck-mq__stamp:focus-visible .ck-mq__stamp-go {
	color: var(--wp--preset--color--ember-darkest);
	border-bottom-color: currentColor;
}

.ck-mq__foot {
	margin: 30px 0 0;
	color: rgba(255, 219, 209, 0.6);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	/* The rotation reads as a mistake once the stamp is the full column width. */
	.ck-mq__stamp {
		transform: none;
		padding: 22px 22px 24px;
	}

	a.ck-mq__stamp:hover,
	a.ck-mq__stamp:focus-visible { transform: translate(-4px, -4px); }
}

/* --------------------------------------------------------- Rule bands ---- */

/*
 * The hairline-bounded band used for the empty "next show" state. It reads as
 * a slot deliberately left open rather than something missing.
 */
.ck-rule-band {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding: 56px 0;
	text-align: center;
}

.ck-rule-band__lead {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	font-size: 22px;
	color: var(--wp--preset--color--white);
	margin: 0 0 12px;
}

/* A booked show reuses the band, with the date leading above the venue. */
.ck-next-show__date {
	color: var(--wp--preset--color--ember-light);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 10px;
}

.ck-next-show__bill {
	color: var(--wp--preset--color--neutral);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 46rem;
}

.ck-next-show__cta {
	margin: 26px 0 0;
}

.ck-next-show__tickets,
.ck-hard-btn {
	display: inline-block;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--white);
	padding: 14px 28px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--wp--preset--color--bone);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ck-next-show__tickets:hover,
.ck-next-show__tickets:focus-visible,
.ck-hard-btn:hover,
.ck-hard-btn:focus-visible {
	background: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--white);
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--wp--preset--color--bone);
}

/* ----------------------------------------------------- Page heroes ------- */

/*
 * The interior-page hero. Simpler than the home hero — a flat veil rather than
 * the gradient-and-grain stack, because these pages are read rather than
 * arrived at.
 */
.ck-page-hero {
	position: relative;
	overflow: hidden;
}

.ck-page-hero > * {
	position: relative;
	z-index: 1;
}

/*
 * Decorative layers must span the whole section. A constrained layout applies
 * max-width and auto margins to every direct child, which would otherwise
 * shrink these to the content column and centre them — leaving the background
 * as a floating panel rather than a full-bleed ground. Child selectors keep
 * this specific enough to win without !important.
 */
.ck-hero > .ck-hero__media,
.ck-hero > .ck-hero__wash,
.ck-hero > .ck-hero__tint,
.ck-hero > .ck-hero__grain,
.ck-page-hero > .ck-page-hero__media,
.ck-page-hero > .ck-page-hero__veil {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.ck-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--neutral-darker);
	background-size: cover;
	background-position: center;
	filter: grayscale(1) contrast(1.25);
}

.ck-page-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(8, 8, 8, 0.6);
}

/* ---------------------------------------------------------- Media -------- */

/*
 * A fixed-ratio image block. The ratio is passed in so the same class serves
 * the 4:3 portrait beside the bio and the 21:9 full-bleed strip.
 */
.ck-media {
	width: 100%;
	aspect-ratio: var(--ck-ratio, 4 / 3);
	overflow: hidden;
	background-color: var(--wp--preset--color--neutral-darker);
	background-size: cover;
	background-position: center;
	filter: contrast(1.1) saturate(0.9);
}

.ck-media--wide {
	--ck-ratio: 21 / 9;
	filter: none;
}

.ck-media--portrait {
	--ck-ratio: 3 / 4;
	filter: none;
}

.ck-media--square {
	--ck-ratio: 1;
	filter: none;
}

/* ----------------------------------------------------- Spotlights -------- */

/*
 * The two-column release spotlight on Music. Sections alternate which side the
 * cover sits on, so a run of them reads as a spread rather than a list.
 */
.ck-spotlight {
	padding: 96px 5%;
}

.ck-spotlight--dark {
	background: var(--wp--preset--color--neutral-darkest);
}

.ck-spotlight--mid {
	background: var(--wp--preset--color--neutral-darker);
}

.ck-spotlight__grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.ck-spotlight--flip .ck-spotlight__media {
	order: 2;
}

.ck-spotlight__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(30px, 3.8vw, 44px);
	line-height: 1;
	color: var(--wp--preset--color--white);
	margin: 0 0 24px;
}

.ck-spotlight__note {
	color: var(--wp--preset--color--neutral-light);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 32px;
	max-width: 440px;
}

/* Stacking makes the flip meaningless — cover always leads on a phone. */
@media (max-width: 900px) {
	.ck-spotlight__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ck-spotlight--flip .ck-spotlight__media {
		order: 0;
	}
}

/* --------------------------------------------------- Track rows ---------- */

/*
 * A back-catalogue entry: thumbnail cover, title, format and year, and an
 * optional note. Becomes the render for a Release record.
 */
.ck-track-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	flex-wrap: wrap;
}

.ck-track-row:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ck-track-row__art {
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--neutral-darker);
	background-size: cover;
	background-position: center;
}

.ck-track-row__body {
	flex: 1;
	min-width: 220px;
}

.ck-track-row__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	margin: 0 0 4px;
}

.ck-track-row__meta {
	color: var(--wp--preset--color--neutral);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}

.ck-track-row__note {
	color: var(--wp--preset--color--neutral-light);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.ck-track-row__link {
	color: var(--wp--preset--color--ember-light);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	margin-top: 6px;
}

.ck-track-row__link:hover {
	color: var(--wp--preset--color--haze-light);
}

/* ------------------------------------------------ Inline link row -------- */

.ck-inline-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 15px;
}

.ck-inline-links a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 700;
}

.ck-inline-links a:hover {
	color: var(--wp--preset--color--haze-light);
}

.ck-inline-links span {
	color: var(--wp--preset--color--neutral-dark);
}

/* ------------------------------------------------------- Gallery --------- */

.ck-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 991px) {
	.ck-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Portrait frames side by side get too narrow to read on a phone. */
@media (max-width: 599px) {
	.ck-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------- Shows --------- */

/*
 * A played show: venue and date on one baseline, who else was on the bill
 * underneath. Becomes the render for a Show record once the post type exists.
 */
.ck-show-row {
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ck-show-row:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ck-show-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ck-show-row__venue {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	margin: 0;
}

.ck-show-row__date {
	color: var(--wp--preset--color--neutral);
	font-size: 14px;
	flex-shrink: 0;
}

.ck-show-row__bill {
	color: var(--wp--preset--color--neutral-light);
	font-size: 14px;
	margin: 0;
}

/* ------------------------------------------------------ Spec rows -------- */

/*
 * Label-and-value rows separated by hairlines, used for the press kit. Reads
 * as a spec sheet rather than a list of links.
 */
.ck-spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ck-spec-row:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ck-spec-row__label {
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 700;
}

.ck-spec-row__value {
	color: var(--wp--preset--color--neutral);
	font-size: 14px;
	text-align: right;
}

.ck-spec-row__value a {
	color: var(--wp--preset--color--ember-light);
	text-decoration: none;
}

.ck-spec-row__value a:hover {
	color: var(--wp--preset--color--haze-light);
}

/* ---------------------------------------------------------- Forms -------- */

/*
 * Field styling lives on the wrapper rather than on a form element, so Bit Form
 * inherits it by rendering inside .ck-form without needing its own theme.
 */
.ck-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ck-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ck-field__label,
.ck-form label {
	color: var(--wp--preset--color--neutral-lightest);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ck-form input[type="text"],
.ck-form input[type="email"],
.ck-form input[type="tel"],
.ck-form input[type="url"],
.ck-form select,
.ck-form textarea {
	background: var(--wp--preset--color--neutral-darker);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	color: var(--wp--preset--color--white);
	padding: 14px 16px;
	font-size: 15px;
	font-family: var(--wp--preset--font-family--body);
	width: 100%;
}

.ck-form textarea {
	resize: vertical;
}

.ck-form input:focus,
.ck-form select:focus,
.ck-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 1px;
}

/* Name and email share a row on desktop, stack on a phone. */
.ck-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 767px) {
	.ck-field-row {
		grid-template-columns: 1fr;
	}
}

.ck-form__note {
	color: var(--wp--preset--color--neutral);
	font-size: 13px;
	margin: 16px 0 0;
}

.ck-form__submit {
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 0;
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--wp--preset--color--white);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ck-form__submit:hover:not(:disabled),
.ck-form__submit:focus-visible:not(:disabled) {
	background: var(--wp--preset--color--haze);
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--wp--preset--color--white);
}

.ck-form__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------- Bit Form ------- */

/*
 * The Contact page renders Bit Form inside .ck-form. Bit Form paints its own
 * theme from the database, so the art direction has to be reasserted here —
 * and it is written against Bit Form's stable bf-* element classes rather than
 * the per-form atomic ones (.b1-fld and friends), which are regenerated every
 * time the form is rebuilt.
 *
 * Bit Form writes every one of its own declarations as a single-class rule
 * carrying !important — .bC { border-radius: 4px !important } and forty more
 * like it. The only way past that is !important of our own, which then wins on
 * specificity because two classes beat one. Hence the shouting below: it is
 * not belt and braces, it is the minimum that lands.
 */
.ck-form .bf-form-wrapper,
.ck-form .bf-form,
.ck-form .bf-form-container,
.ck-form .bf-field-wrapper,
.ck-form .bf-input-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.ck-form .bf-label-wrapper {
	margin-bottom: 8px;
}

.ck-form .bf-label {
	color: var(--wp--preset--color--neutral-lightest) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.05em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
}

/* The asterisk is the only thing marking a field required, so it has to read. */
.ck-form .bf-asterisk-symbol {
	color: var(--wp--preset--color--ember) !important;
	font-weight: 800 !important;
}

.ck-form .bf-field {
	background-color: var(--wp--preset--color--neutral-darker) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	border-radius: 0 !important;
	border-style: solid !important;
	border-width: 1px !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 15px !important;
	height: auto !important;
	line-height: 1.5 !important;
	max-width: 100%;
	padding: 14px 16px !important;
	width: 100% !important;
}

.ck-form .bf-field::placeholder {
	color: var(--wp--preset--color--neutral) !important;
	opacity: 1 !important;
}

/*
 * A native select on a dark ground draws a light system arrow, so the control
 * is taken over completely and given a chevron in bone.
 */
.ck-form select.bf-field {
	appearance: none !important;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2ECE1' stroke-width='2'/%3E%3C/svg%3E" ) !important;
	background-position: right 16px center !important;
	background-repeat: no-repeat !important;
	padding-right: 46px !important;
}

/* The dropdown itself is drawn by the OS, which does not inherit any of this. */
.ck-form select.bf-field option {
	background: var(--wp--preset--color--neutral-darker);
	color: var(--wp--preset--color--white);
}

.ck-form textarea.bf-field {
	min-height: 168px !important;
	resize: vertical !important;
}

/*
 * Never the browser default: on this ground a thin blue ring is close to
 * invisible. Offset by a pixel so the ember sits clear of the field border.
 */
.ck-form .bf-field:focus,
.ck-form .bf-field:focus-visible {
	border-color: var(--wp--preset--color--ember) !important;
	outline: 2px solid var(--wp--preset--color--ember) !important;
	outline-offset: 1px !important;
}

.ck-form .bf-field[aria-invalid="true"] {
	border-color: var(--wp--preset--color--ember) !important;
}

.ck-form .bf-button {
	background-color: var(--wp--preset--color--ember) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 var(--wp--preset--color--bone) !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	height: auto !important;
	letter-spacing: 0.05em !important;
	padding: 16px 32px !important;
	text-transform: uppercase !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	width: auto !important;
}

/*
 * The same gesture as every other button on the site: lift up and left, and
 * let the shadow lengthen behind it. No colour change.
 */
.ck-form .bf-button:hover,
.ck-form .bf-button:focus-visible {
	background-color: var(--wp--preset--color--ember) !important;
	box-shadow: 7px 7px 0 var(--wp--preset--color--bone) !important;
	transform: translate( -3px, -3px );
}

/*
 * An ember ring on an ember button would disappear, so it is pushed out onto
 * the near-black behind, where it reads clearly.
 */
.ck-form .bf-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ember) !important;
	outline-offset: 4px !important;
}

/*
 * Errors arrive as text in a live region, so they are already announced. Ember
 * light rather than ember: at 13px the brighter tint is the legible one, and
 * colour is never carrying the message on its own.
 */
.ck-form .bf-error-text,
.ck-form .bf-error-messages-container {
	color: var(--wp--preset--color--ember-light) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.4 !important;
}

/*
 * Failures that belong to the whole form rather than to one field — a rejected
 * submission, a server that did not answer — are dropped into this wrapper as
 * bare text carrying no class of its own. Left alone it renders near-black on
 * near-black and collapses to a ten-pixel strip, which is worse than silence:
 * the visitor presses Send it and nothing appears to happen at all.
 */
.ck-form [id^="bf-form-msg-wrp"] {
	color: var(--wp--preset--color--ember-light) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: auto !important;
	line-height: 1.5 !important;
	overflow: visible !important;
}

.ck-form [id^="bf-form-msg-wrp"]:not( :empty ) {
	margin-top: 20px;
}

/*
 * The box Bit Form builds inside that wrapper, which ships as pale pink on the
 * assumption of a white page. Same treatment as a field: dark ground, square
 * corners, ember edge.
 */
.ck-form .bf-form-msg {
	background-color: var(--wp--preset--color--neutral-darker) !important;
	border: 1px solid rgba( 255, 255, 255, 0.2 ) !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--white) !important;
	padding: 14px 16px !important;
	text-align: left !important;
}

.ck-form .bf-form-msg.error {
	border-color: var(--wp--preset--color--ember) !important;
	color: var(--wp--preset--color--ember-light) !important;
}

/* The confirmation, which Bit Form drops in below the form once it has saved. */
.ck-form .bf-msg-content {
	background-color: var(--wp--preset--color--neutral-darker) !important;
	border: 1px solid var(--wp--preset--color--ember) !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 var(--wp--preset--color--ember) !important;
	color: var(--wp--preset--color--white) !important;
}

.ck-form .bf-msg-content .msg-content,
.ck-form .bf-msg-content .msg-content p,
.ck-form .bf-msg-content .msg-content strong,
.ck-form .bf-msg-content .msg-content span {
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--body) !important;
}

.ck-form .bf-msg-close {
	color: var(--wp--preset--color--bone-dim);
}

.ck-form .bf-msg-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 2px;
}

/*
 * The honeypot. Taken off screen rather than display:none — a field that is
 * not rendered at all is one the simpler scrapers know to skip, and the point
 * is for them to fill it in. aria-hidden and tabindex -1 on the markup keep it
 * away from anyone using the page for real.
 */
.ck-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* -------------------------------------------------- Reduced motion ------- */

@media (prefers-reduced-motion: reduce) {
	/*
	 * Hide the loop rather than pausing it. A paused first frame is just a
	 * worse still than the poster, and the poster is what shows underneath.
	 */
	.ck-hero-frame__video {
		display: none;
	}

	.ck-btn .wp-block-button__link,
	.ck-release-art,
	.ck-mq__stamp {
		transition: none;
	}

	/*
	 * Stop the movement, keep the look. The outlined bar is the resting state of
	 * the design, not a side effect of the animation — swapping it for something
	 * solid here would hand reduced-motion visitors a different section rather
	 * than the same one held still. Parked at zero, both bars read from the left
	 * edge.
	 */
	.ck-mq__track {
		animation: none;
	}

	.ck-mq__stamp:hover,
	.ck-mq__stamp:focus-visible {
		transform: rotate(-1deg);
	}

	.ck-btn .wp-block-button__link:hover,
	.ck-btn .wp-block-button__link:focus-visible {
		transform: none;
	}

	.ck-release-art {
		transform: none !important;
	}
}

/* --------------------------------------------------------- Home audio ---
 * A floating pill, bottom right. Sits above everything, clears the mobile
 * safe area, and never moves the page around it.
 */
.ck-audio {
	position: fixed;
	right: clamp(12px, 3vw, 28px);
	bottom: calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index: 90;
}

.ck-audio__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 14px;
	border: 1px solid rgba(242, 236, 225, 0.35);
	border-radius: 999px;
	background: rgba(8, 8, 8, 0.72);
	backdrop-filter: blur(6px);
	color: #f2ece1;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ck-audio__pill:hover,
.ck-audio__pill:focus-visible {
	border-color: var(--wp--preset--color--ember, #ff4d1c);
	background: rgba(8, 8, 8, 0.9);
	transform: translateY(-2px);
}

.ck-audio__pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--ember, #ff4d1c);
	outline-offset: 3px;
}

/* Triangle at rest, two bars while playing. */
.ck-audio__icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

.ck-audio.is-playing .ck-audio__icon {
	width: 10px;
	height: 12px;
	border: 0;
	background: linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
}

@media (prefers-reduced-motion: reduce) {
	.ck-audio__pill { transition: none; }
	.ck-audio__pill:hover, .ck-audio__pill:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------ Coming soon gate
 *
 * Reuses the hero's frame, plate, wash, tint and grain so the holding page is the same
 * photograph the site opens with. Everything below the stage is plain: one heading, one
 * field, one link. The poster is painted on the frame as well as set on the <video>, so a
 * blocked, absent or motion-reduced video still leaves an image rather than a black band.
 */

.ck-gate-body {
	margin: 0;
	background: var(--wp--preset--color--neutral-darkest, #080808);
}

.ck-gate__preview {
	margin: 0;
	padding: 10px 16px;
	background: var(--wp--preset--color--ember, #ff4d1c);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.ck-gate__preview a { color: #fff; }

.ck-gate__stage {
	position: relative;
	min-height: min(58vh, 520px);
	background-color: var(--wp--preset--color--neutral-darkest, #080808);
	background-image: var(--ck-gate-poster, none);
	background-size: cover;
	background-position: center 30%;
}

.ck-gate__hero { min-height: min(58vh, 520px); }

.ck-gate__mark {
	position: absolute;
	inset: auto auto 7% 6%;
	z-index: 3;
	max-width: min(62vw, 300px);
}

.ck-gate__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.ck-gate__content {
	padding: 40px 6% 72px;
}

.ck-gate__title {
	margin: 8px 0 18px;
	text-transform: uppercase;
	line-height: 0.95;
}

.ck-gate__signup { margin: 28px 0 0; }

.ck-gate__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone-dim, #c9c0b2);
}

.ck-gate__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ck-gate__input {
	flex: 1 1 220px;
	min-height: 52px;
	padding: 12px 14px;
	background: rgba(8, 8, 8, 0.75);
	border: 1px solid rgba(242, 236, 225, 0.35);
	border-radius: 0;
	color: var(--wp--preset--color--bone, #f2ece1);
	font-family: inherit;
	font-size: 16px;
}

.ck-gate__input:focus {
	outline: 2px solid var(--wp--preset--color--ember, #ff4d1c);
	outline-offset: 2px;
	border-color: transparent;
}

.ck-gate__submit { flex: 0 0 auto; }

.ck-gate__consent,
.ck-gate__thanks,
.ck-gate__error {
	margin: 14px 0 0;
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--bone-dim, #c9c0b2);
}

.ck-gate__thanks { color: var(--wp--preset--color--bone, #f2ece1); font-weight: 700; }
.ck-gate__error { color: var(--wp--preset--color--ember-light, #ff8260); }
.ck-gate__listen { margin: 26px 0 0; }

@media (prefers-reduced-motion: reduce) {
	/* The poster on the frame shows through; nothing moves. */
	.ck-gate__video { display: none; }
}

@media (max-width: 600px) {
	.ck-gate__stage,
	.ck-gate__hero { min-height: 46vh; }
	.ck-gate__mark { inset: auto auto 6% 6%; }
}

/*
 * The gate borrows the hero's plate, wash, tint and grain, but not its pan —
 * there is nothing to pan on a single still page. With no panel to carry the
 * photograph, the wrapper paints it instead.
 */
.ck-gate .ck-hero__media {
	background-image: var(--ck-hero-image, none);
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}

/* The wordmark, set in the brand face rather than shipped as artwork. */
.ck-gate__wordmark {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(22px, 3.4vw, 40px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone, #f2ece1);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}