/* ==========================================================================
   Social Miscues — landing page
   Palette sampled from the show's cover art and backdrop photograph.
   ========================================================================== */

@font-face {
	font-family: "Fredoka SM";
	src: url("../fonts/fredoka-var.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo SM";
	src: url("../fonts/archivo-var.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Sampled from socialmiscues-cover.png */
	--sm-black:      #010A05;
	--sm-baize-deep: #0B1F13;
	--sm-baize:      #29642A;
	--sm-red:        #F04B45;
	--sm-red-deep:   #8E211C;
	--sm-chalk:      #EDE6D8;
	--sm-chalk-dim:  #A9A79C;

	/* Snooker colours, in scoring order — used for the section rule */
	--sm-yellow: #E8B62C;
	--sm-green:  #1F7A3D;
	--sm-brown:  #7A4A22;
	--sm-blue:   #1B5FA8;
	--sm-pink:   #E28FA0;
	--sm-ball-black: #2E2C28;

	--sm-display: "Fredoka SM", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
	--sm-body:    "Archivo SM", system-ui, -apple-system, "Segoe UI", sans-serif;

	--sm-measure: 62ch;
	--sm-wrap:    1100px;
}

/* Own our box model rather than inheriting whatever the theme decided. */
.sm-hero,
.sm-hero__inner,
.sm-rule,
.sm-player,
.sm-btn,
body.sm-page .sm-section {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Page shell — only where the hero is present
   -------------------------------------------------------------------------- */

body.sm-page {
	background-color: var(--sm-black);
	color: var(--sm-chalk);
	font-family: var(--sm-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	overflow-x: hidden;
}

body.sm-page a {
	color: var(--sm-red);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

body.sm-page a:hover {
	color: var(--sm-chalk);
}

body.sm-page :is(a, button, iframe):focus-visible {
	outline: 3px solid var(--sm-red);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.sm-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 8vw, 7rem);
	isolation: isolate;
	overflow: hidden;
}

/* The blurred photograph. Inset is negative and the layer is scaled up so the
   blur radius never bleeds a pale fringe in at the edges. */
.sm-hero__backdrop {
	position: absolute;
	inset: -6%;
	z-index: -2;
	background-image: var(--sm-hero-image);
	background-size: cover;
	background-position: center 68%;
	filter: blur(var(--sm-hero-blur, 6px)) saturate(0.95) brightness(1.05);
	transform: scale(1.08);
}

/* Darkening wash, fading to solid at the bottom so the hero meets the page. */
.sm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to bottom,
			rgba(1, 10, 5, calc(var(--sm-hero-darken, 0.62) * 0.78)) 0%,
			rgba(1, 10, 5, var(--sm-hero-darken, 0.62)) 58%,
			var(--sm-black) 100%
		);
}

.sm-hero__inner {
	max-width: var(--sm-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(190px, 340px) 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.sm-hero__cover {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow:
		0 0 0 1px rgba(237, 230, 216, 0.14),
		0 26px 60px -18px rgba(0, 0, 0, 0.9);
}

/* The wordmark. This is the one loud thing on the page — chunky red type with
   a hard dark edge and an offset drop, echoing the cover art. */
.sm-wordmark {
	font-family: var(--sm-display);
	font-weight: 700;
	font-size: clamp(3.1rem, 11vw, 6.5rem);
	line-height: 0.88;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--sm-red);
	text-shadow:
		-2px 0 var(--sm-red-deep),
		 2px 0 var(--sm-red-deep),
		 0 -2px var(--sm-red-deep),
		 0 2px var(--sm-red-deep),
		 6px 7px 0 rgba(1, 10, 5, 0.85);
}

.sm-wordmark__line {
	display: block;
}

.sm-hero__tagline {
	font-family: var(--sm-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	line-height: 1.35;
	color: var(--sm-chalk);
	margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
	max-width: 40ch;
}

.sm-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.sm-page a.sm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.05rem;
	font-family: var(--sm-body);
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1;
	text-decoration: none;
	color: var(--sm-chalk);
	background: rgba(11, 31, 19, 0.72);
	border: 1px solid rgba(237, 230, 216, 0.22);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.sm-page a.sm-btn:hover {
	color: var(--sm-black);
	background: var(--sm-chalk);
	border-color: var(--sm-chalk);
}

body.sm-page a.sm-btn--live {
	color: var(--sm-black);
	background: var(--sm-red);
	border-color: var(--sm-red);
}

body.sm-page a.sm-btn--live:hover {
	background: var(--sm-chalk);
	border-color: var(--sm-chalk);
	color: var(--sm-black);
}

.sm-btn__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* --------------------------------------------------------------------------
   Section rule — the six colours, in scoring order
   -------------------------------------------------------------------------- */

.sm-rule {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 4px;
	background: linear-gradient(
		to right,
		var(--sm-red)    0 14.28%,
		var(--sm-yellow) 14.28% 28.57%,
		var(--sm-green)  28.57% 42.85%,
		var(--sm-brown)  42.85% 57.14%,
		var(--sm-blue)   57.14% 71.42%,
		var(--sm-pink)   71.42% 85.71%,
		var(--sm-ball-black) 85.71% 100%
	);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

body.sm-page .sm-section {
	max-width: var(--sm-wrap);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 2rem);
}

body.sm-page .sm-h2 {
	font-family: var(--sm-display);
	font-weight: 600;
	font-size: clamp(1.9rem, 4.5vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--sm-chalk);
	margin: 0 0 0.75rem;
}

body.sm-page .sm-lede {
	max-width: var(--sm-measure);
	color: var(--sm-chalk-dim);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

body.sm-page .sm-section p {
	max-width: var(--sm-measure);
}

/* --------------------------------------------------------------------------
   Player
   -------------------------------------------------------------------------- */

.sm-player {
	background: var(--sm-baize-deep);
	border: 1px solid rgba(237, 230, 216, 0.12);
	border-radius: 10px;
	padding: 10px;
	box-shadow: inset 0 1px 0 rgba(237, 230, 216, 0.06);
}

.sm-player iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Hosts — a faint maple leaf sits behind this block
   -------------------------------------------------------------------------- */

.sm-section--hosts {
	position: relative;
	overflow: clip; /* keeps the decorative leaf from widening the document */
}

.sm-section--hosts::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -3.5rem;
	translate: 0 -50%;
	width: min(360px, 38%);
	aspect-ratio: 1;
	z-index: -1;
	background: var(--sm-red);
	opacity: 0.032;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32l-30 60c-4 8-12 10-19 6l-30-16 22 108c5 21-11 21-18 12l-38-42-12 30c-3 7-8 7-14 6l-63-13 17 60c3 12 6 17-3 20l-21 10 101 82c8 6 12 11 9 22l-9 29 96-11c9-1 13 4 13 12l-6 95h29l-6-95c0-8 4-13 13-12l96 11-9-29c-3-11 1-16 9-22l101-82-21-10c-9-3-6-8-3-20l17-60-63 13c-6 1-11 1-14-6l-12-30-38 42c-7 9-23 9-18-12l22-108-30 16c-7 4-15 2-19-6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32l-30 60c-4 8-12 10-19 6l-30-16 22 108c5 21-11 21-18 12l-38-42-12 30c-3 7-8 7-14 6l-63-13 17 60c3 12 6 17-3 20l-21 10 101 82c8 6 12 11 9 22l-9 29 96-11c9-1 13 4 13 12l-6 95h29l-6-95c0-8 4-13 13-12l96 11-9-29c-3-11 1-16 9-22l101-82-21-10c-9-3-6-8-3-20l17-60-63 13c-6 1-11 1-14-6l-12-30-38 42c-7 9-23 9-18-12l22-108-30 16c-7 4-15 2-19-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.sm-page .sm-hosts {
	gap: clamp(1.75rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.sm-page .sm-host__name {
	font-family: var(--sm-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.6vw, 1.65rem);
	line-height: 1.1;
	color: var(--sm-red);
	margin: 0;
}

body.sm-page .sm-host__where {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--sm-chalk-dim);
	margin: 0.15rem 0 0.85rem;
}

/* --------------------------------------------------------------------------
   Footer bits
   -------------------------------------------------------------------------- */

body.sm-page .sm-signoff {
	font-family: var(--sm-display);
	font-weight: 500;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	color: var(--sm-chalk);
	margin: 1.75rem 0 0;
}

body.sm-page .sm-madein {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.86rem;
	color: var(--sm-chalk-dim);
	margin: 2.5rem 0 0;
}

.sm-leaf {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	color: var(--sm-red);
	vertical-align: -0.18em;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
	.sm-hero__inner {
		grid-template-columns: 1fr;
		justify-items: start;
		text-align: left;
	}

	.sm-hero__cover {
		max-width: 210px;
	}

	.sm-wordmark {
		text-shadow:
			-1.5px 0 var(--sm-red-deep),
			 1.5px 0 var(--sm-red-deep),
			 0 -1.5px var(--sm-red-deep),
			 0 1.5px var(--sm-red-deep),
			 4px 5px 0 rgba(1, 10, 5, 0.85);
	}

	.sm-section--hosts::before {
		width: 320px;
		right: -6rem;
		opacity: 0.04;
	}
}

@media (max-width: 600px) {
	/* The RSS.com playlist is shorter on narrow screens; don't leave a hole. */
	.sm-player iframe {
		height: 520px;
	}
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.sm-page *,
	body.sm-page *::before,
	body.sm-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: more) {
	body.sm-page {
		--sm-chalk-dim: #D6D2C7;
	}

	.sm-hero::after {
		background: rgba(1, 10, 5, 0.88);
	}
}