/*
Theme Name: 963 THEME
Theme URI: https://963records.ee
Author: 963 Records
Description: CRT television home screen for 963 Records.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: nsr
*/

/* ------------------------------------------------------------------
   Fonts
------------------------------------------------------------------ */
@font-face {
	font-family: "Franklin963";
	src: url("assets/fonts/franklin-gothic-medium.woff") format("woff");
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: "Gabriola963";
	src: local("Gabriola"), url("assets/fonts/gabriola.woff") format("woff");
	font-display: swap;
}
@font-face {
	font-family: "Console963";
	src: local("Lucida Console"), url("assets/fonts/lucida-console.woff") format("woff");
	font-display: swap;
}
@font-face {
	font-family: "Lucida963";
	src: url("assets/fonts/lucida-grande.woff") format("woff");
	font-display: swap;
}

/* ------------------------------------------------------------------
   Tokens
   Screen insets = where the glass hole sits inside the TV PNG.
------------------------------------------------------------------ */
:root {
	--glass: #0b0d0d;
	--ink: #f4f4f4;
	--ink-dim: #9c9c9c;
	--select: #1a1aa8;

	--f-head: "Franklin963", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	--f-body: "Lucida963", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	--f-mono: "Lucida Console", "Courier New", monospace;
	--f-gab: "Gabriola963", Gabriola, Georgia, serif;
	--f-console: "Console963", "Lucida Console", "Courier New", monospace;

	/* desktop TV: Border_Desktop_Shadow.png 1920x1080, hole 108..1800 x 82..757 */
	--tv: url("assets/img/tv-desktop.webp");
	--st: 7.6%;
	--sr: 6.25%;
	--sb: 29.9%;
	--sl: 5.625%;
}

@media (max-aspect-ratio: 6/5), (max-width: 768px) {
	/* mobile TV: Border_Mobile_Shadow.png 768x1366, hole 27..745 x 113..1102 */
	:root {
		--tv: url("assets/img/tv-mobile.webp");
		--st: 8.27%;
		--sr: 3%;
		--sb: 19.3%;
		--sl: 3.5%;
	}
}

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

html,
body.nsr {
	height: 100%;
	margin: 0;
	background: #000;
	overflow: hidden;
}

body.nsr {
	color: var(--ink);
	font-family: var(--f-body);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.nsr img,
.nsr video {
	-webkit-user-drag: none;
	user-select: none;
}

.nsr button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.nsr :focus-visible {
	outline: 1px dotted #fff;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Stage / TV
------------------------------------------------------------------ */
.stage {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: #050505;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.admin-bar .stage {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .stage {
		top: 46px;
	}
}

/* The TV body. A CSS background (not an <img>) so it can't be dragged or "Save image as"-ed. */
.tv {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: var(--tv) center / 100% 100% no-repeat;
	pointer-events: none;
}

.tv-hot {
	position: absolute;
	display: block;
	pointer-events: auto;
	border-radius: 2px;
}
.tv-hot:active {
	background: rgba(0, 0, 0, .35);
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .6);
}
.tv-hot--power    { left: 94.5%;  top: 85.4%; width: 2.9%; height: 4.9%; }
.tv-hot--ch-up    { left: 91.6%;  top: 85.4%; width: 2.8%; height: 4.9%; }
.tv-hot--ch-down  { left: 91.6%;  top: 90.8%; width: 2.8%; height: 4.6%; }
.tv-hot--vol-up   { left: 88.6%;  top: 85.4%; width: 2.8%; height: 4.9%; }
.tv-hot--vol-down { left: 88.6%;  top: 90.8%; width: 2.8%; height: 4.6%; }

/* "RGB" label + its green LED (desktop TV: LED at 1199,873 of 1920x1080) */
.tv-hot--rgb      { left: 61.6%;  top: 78.6%; width: 1.7%; height: 3.2%; }

.tv-led {
	position: absolute;
	left: 62.45%;
	top: 80.83%;
	width: .3%;
	height: .5%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 4px 1px rgba(120, 255, 60, .55);
	transition: background .15s, box-shadow .15s;
	pointer-events: none;
}
.nsr-mono .tv-led {
	background: radial-gradient(circle at 40% 35%, #3a4136, #141712 70%);
	box-shadow: inset 0 0 1px #000;
}

@media (max-aspect-ratio: 6/5), (max-width: 768px) {
	.tv-hot {
		display: none;
	}
	/* mobile TV: LED at 724,1270 of 768x1366 */
	.tv-hot--rgb {
		display: block;
		left: 91.4%;
		top: 91.1%;
		width: 5.6%;
		height: 2.9%;
	}
	.tv-led {
		left: 94.27%;
		top: 92.97%;
		width: .95%;
		height: .53%;
	}
}

/* RGB off: the whole set goes monochrome */
.screen,
.tv {
	transition: filter .35s steps(4);
}
.nsr-mono .screen,
.nsr-mono .tv {
	filter: grayscale(1) contrast(1.08);
}

/* ------------------------------------------------------------------
   Screen (the glass)
------------------------------------------------------------------ */
.screen {
	position: absolute;
	top: var(--st);
	right: var(--sr);
	bottom: var(--sb);
	left: var(--sl);
	z-index: 1;
	container: screen / size;
	/* same tone as the video's own background so its faded sides disappear */
	background: #0b0d0e;
}

.crt {
	position: absolute;
	inset: 0;
	transform-origin: 50% 50%;
	background: #0b0d0e url("assets/img/screen-bg.webp") center / cover no-repeat;
}

/* a little moving grain so the static background still feels "on" */
.screen-grain {
	position: absolute;
	inset: -40%;
	background: url("assets/img/grain.png") 0 0 / 160px 160px;
	opacity: .05;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: grain .6s steps(5) infinite;
}
@keyframes grain {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-7%, 4%); }
	40%  { transform: translate(5%, -6%); }
	60%  { transform: translate(-3%, -9%); }
	80%  { transform: translate(8%, 3%); }
	100% { transform: translate(0, 0); }
}

/*
 * The 963 stamp, separate from the background so it can be bigger and move:
 * slow drift, RGB fringes that breathe, and an occasional glitch jump.
 */
.screen-logo {
	position: absolute;
	top: 2.5cqh;
	left: 50%;
	height: 21cqh;
	aspect-ratio: 1;
	transform: translateX(-50%);
	pointer-events: none;
	animation: logo-drift 9s ease-in-out infinite;
}
.screen-logo img {
	display: block;
	width: 100%;
	height: 100%;
	opacity: .34;
	mix-blend-mode: screen;
	filter:
		drop-shadow(2px 0 0 rgba(255, 30, 90, .75))
		drop-shadow(-2px 0 0 rgba(0, 255, 200, .6))
		drop-shadow(0 0 6px rgba(160, 200, 255, .35));
	animation: logo-flicker 5.3s steps(1) infinite, logo-glitch 7.7s steps(1) infinite;
}
@keyframes logo-drift {
	0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
	50%      { transform: translate(-50%, -0.8cqh) rotate(-1.5deg); }
}
@keyframes logo-flicker {
	0%, 100% { opacity: .34; }
	12% { opacity: .28; }
	13% { opacity: .4; }
	47% { opacity: .31; }
	48% { opacity: .22; }
	49% { opacity: .36; }
	81% { opacity: .3; }
}
@keyframes logo-glitch {
	0%, 100% { transform: none; clip-path: none; }
	62% { transform: translateX(3%) skewX(-4deg); clip-path: inset(20% 0 55% 0); }
	63% { transform: translateX(-2%); clip-path: inset(58% 0 12% 0); }
	64% { transform: none; clip-path: none; }
	91% { transform: translateX(-1.5%) scaleY(1.04); }
	92% { transform: none; }
}

.screen-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 26cqh;
}

/* scanlines + vignette + a hint of flicker, drawn over everything on the glass */
.screen-fx {
	position: absolute;
	inset: -2%;
	z-index: 3;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%),
		repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
	animation: flicker 5s steps(1) infinite;
}

.screen-static {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
	image-rendering: pixelated;
	opacity: 0;
	mix-blend-mode: screen;
}
.is-static .screen-static {
	opacity: .55;
}

.screen-off {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .05), transparent 45%),
		var(--glass);
	transition: opacity .2s .45s;
}
.is-off .screen-off {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}
.is-off .crt {
	animation: crt-off .55s cubic-bezier(.2, .8, .3, 1) forwards;
}
.is-on .crt,
.nsr-boot .crt {
	animation: crt-on .9s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes crt-off {
	0%   { transform: none; filter: brightness(1); opacity: 1; }
	45%  { transform: scale(1, .006); filter: brightness(4); opacity: 1; }
	75%  { transform: scale(.25, .006); filter: brightness(6); opacity: 1; }
	100% { transform: scale(0, 0); filter: brightness(8); opacity: 0; }
}
@keyframes crt-on {
	0%   { transform: scale(0, .006); filter: brightness(8); opacity: 0; }
	25%  { transform: scale(1, .006); filter: brightness(5); opacity: 1; }
	60%  { transform: scale(1, 1.02); filter: brightness(1.8); }
	100% { transform: none; filter: brightness(1); }
}
@keyframes flicker {
	0%, 100% { opacity: 1; }
	41% { opacity: .94; }
	42% { opacity: 1; }
	77% { opacity: .96; }
	78% { opacity: 1; }
}

/* ------------------------------------------------------------------
   Window
   Painted with the real EmptyWindow.png (765x402) as a 9-slice border-image,
   so the bevels and title-bar buttons stay crisp at any size.
   --u  = one PNG pixel at the current window width
   --px = same, but never smaller than .72px so chrome stays usable on phones
------------------------------------------------------------------ */
.win-wrap {
	position: relative;
	z-index: 3;
	container: win / inline-size;
	width: min(45cqw, 118cqh);
	transform: translate(var(--dx, 0px), var(--dy, 0px));
	transition: width .35s cubic-bezier(.2, .8, .3, 1);
}
.win-wrap.is-snapping {
	transition: width .35s cubic-bezier(.2, .8, .3, 1), transform .3s cubic-bezier(.2, .8, .3, 1);
}
.win-wrap.is-dragging .win {
	filter: drop-shadow(calc(8 * var(--u)) calc(10 * var(--u)) 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 calc(14 * var(--u)) rgba(190, 210, 255, .18));
}
.win-wrap.is-dragging .win-title {
	cursor: move;
}

/* Win95 "outline drag" trail: on the glass, under the window (.win-wrap is z-index 3) */
.win-ghost {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	border: 2px dotted rgba(255, 255, 255, .7);
	animation: ghost-out .35s linear forwards;
}
@keyframes ghost-out {
	to { opacity: 0; }
}
.win-wrap:has(.win--page) {
	width: min(56cqw, 140cqh);
}

.win {
	--u: calc(100cqw / 765);
	--px: max(var(--u), .72px);

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(100cqw * 402 / 765);
	max-height: 64cqh;
	padding: calc(53 * var(--px)) calc(8 * var(--px)) calc(9 * var(--px)) calc(7 * var(--px));
	filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(190, 210, 255, .12));
	animation: win-in .45s cubic-bezier(.2, .9, .3, 1.15) both;
}
.win--page {
	min-height: min(calc(100cqw * 402 / 765), 60cqh);
	max-height: 60cqh;
}
.nsr-boot .win {
	animation-delay: .7s;
}

.win::before {
	content: "";
	position: absolute;
	inset: 0;
	border-style: solid;
	border-width: calc(53 * var(--px)) calc(72 * var(--px)) calc(9 * var(--px)) calc(7 * var(--px));
	border-image: url("assets/img/window.png") 53 72 9 7 fill stretch;
	pointer-events: none;
}

@keyframes win-in {
	from { transform: scale(.6); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.win-title {
	position: absolute;
	top: calc(5 * var(--px));
	left: calc(6 * var(--px));
	right: calc(8 * var(--px));
	height: calc(22 * var(--px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.win-crumbs {
	margin: 0;
	padding-left: calc(5 * var(--px));
	font: 400 calc(16 * var(--px)) / 1 var(--f-head);
	letter-spacing: .01em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.win-crumbs a {
	color: inherit;
	text-decoration: none;
}
.win-crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.win-ctrls {
	display: flex;
	flex: none;
	width: calc(64 * var(--px));
	height: 100%;
}
.win-btn {
	flex: 1;
	height: 100%;
}
.win-btn:active {
	background: rgba(0, 0, 0, .3);
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .7);
}

.win-body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: auto;
	user-select: text;
	-webkit-user-select: text;
}

/* Maximise */
.is-max .screen-inner {
	padding-top: 4cqh;
}
.is-max .win-wrap,
.is-max .win-wrap:has(.win--page) {
	width: min(94cqw, 160cqh);
}
.is-max .win {
	max-height: 84cqh;
}
.is-max .win--page {
	height: 84cqh;
}

/* ------------------------------------------------------------------
   Home: desktop icons
------------------------------------------------------------------ */
.desk {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	min-height: 100%;
	padding: calc(18 * var(--u)) calc(28 * var(--u)) calc(6 * var(--u));
}

.win--home .win-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.win--home .desk {
	flex: 1;
	min-height: 0;
	padding-top: calc(12 * var(--u));
	padding-bottom: calc(12 * var(--u));
}

.desk-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(24 * var(--u));
	color: var(--ink);
	text-decoration: none;
	outline: none;
}

.desk-icon {
	display: block;
	transition: transform .15s;
}
.desk-icon img {
	display: block;
	width: auto;
	height: calc(93 * var(--u));
	filter: drop-shadow(calc(3 * var(--u)) calc(4 * var(--u)) 0 rgba(0, 0, 0, .45));
	transition: filter .15s;
}

.desk-label {
	padding: calc(2 * var(--u)) calc(5 * var(--u));
	font: 400 max(10px, calc(19 * var(--u))) / 1 var(--f-head);
	letter-spacing: .01em;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
	outline: 1px dotted transparent;
	outline-offset: 0;
}

/* Win95 "selected icon" */
.desk-item:hover .desk-icon,
.desk-item:focus-visible .desk-icon {
	transform: translateY(calc(-4 * var(--u)));
}
.desk-item:hover .desk-icon img,
.desk-item:focus-visible .desk-icon img {
	filter:
		drop-shadow(calc(3 * var(--u)) calc(4 * var(--u)) 0 rgba(0, 0, 0, .45))
		drop-shadow(0 0 calc(10 * var(--u)) rgba(150, 170, 255, .45));
}
.desk-item:hover .desk-label,
.desk-item:focus-visible .desk-label {
	background: var(--select);
	outline-color: #fff;
	text-shadow: none;
}
.desk-item:active .desk-icon img {
	filter: brightness(.6) sepia(1) hue-rotate(190deg) saturate(4);
}

/* ------------------------------------------------------------------
   Media player
------------------------------------------------------------------ */
.player {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(6 * var(--px));
	padding: calc(4 * var(--px)) calc(60 * var(--px)) calc(9 * var(--px));
}

.player-now {
	width: 100%;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	font: 400 max(8px, calc(10 * var(--px))) / 1.2 var(--f-mono);
	color: var(--ink-dim);
	letter-spacing: .02em;
}
.player-now-text {
	display: inline-block;
}
.player-now.is-long .player-now-text {
	padding-left: 100%;
	animation: marquee var(--dur, 12s) linear infinite;
}
@keyframes marquee {
	to { transform: translateX(-100%); }
}

.player-btns {
	display: flex;
	gap: calc(1 * var(--px));
}

.pbtn {
	width: calc(27 * var(--px));
	height: calc(27 * var(--px));
	line-height: 0;
}
.pbtn img,
.spk img {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}
.pbtn:hover img {
	filter: brightness(1.15);
}
.pbtn:active img,
.pbtn.is-on img {
	transform: translate(1px, 1px);
	filter: brightness(.8) contrast(1.1);
}
.player.is-empty .pbtn,
.player.is-empty .spk {
	opacity: .35;
	pointer-events: none;
}

.spk {
	position: absolute;
	right: calc(14 * var(--px));
	bottom: calc(5 * var(--px));
	width: calc(36 * var(--px));
	height: calc(36 * var(--px));
}
.spk .spk-on { display: none; }
.spk.is-sound .spk-on { display: block; }
.spk.is-sound .spk-off { display: none; }
.spk.is-sound img {
	animation: spk-pulse 1.2s steps(2) infinite;
}
@keyframes spk-pulse {
	50% { filter: brightness(1.25); }
}


/* ------------------------------------------------------------------
   Shop: a row of records, scrolls sideways (wheel, drag, swipe)
------------------------------------------------------------------ */
.screen-inner:has(.win--product) {
	padding-top: 17cqh;
}
.win-wrap:has(.win--product) {
	width: min(60cqw, 150cqh);
}
.win--shop.win--product {
	height: 55cqh;
	max-height: none;
}
.win--shop .win-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.shop {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.shop-cart {
	position: absolute;
	top: calc(10 * var(--u));
	right: calc(16 * var(--u));
	z-index: 2;
	width: max(24px, calc(44 * var(--u)));
	color: #0c0c0c;
	line-height: 0;
	filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .28));
	transition: transform .15s;
}
.shop-cart svg {
	width: 100%;
	height: auto;
}
.shop-cart:hover {
	color: #fff;
	filter: drop-shadow(0 0 6px rgba(150, 170, 255, .6));
	transform: translateY(-1px);
}
.shop-cart-count {
	position: absolute;
	top: -.45em;
	right: -.55em;
	min-width: 1.5em;
	padding: .15em .3em;
	font: 400 max(9px, calc(11 * var(--u))) / 1 var(--f-head);
	text-align: center;
	color: #fff;
	background: #c21a1a;
	border: 1px solid #fff;
}
.shop-cart-count[hidden] {
	display: none;
}

.shop-notices:empty {
	display: none;
}
.shop-notices {
	position: absolute;
	left: calc(16 * var(--u));
	right: calc(80 * var(--u));
	top: calc(10 * var(--u));
	z-index: 2;
	font-size: max(10px, calc(12 * var(--u)));
}
.shop-notices ul,
.shop-notices .woocommerce-message,
.shop-notices .woocommerce-info,
.shop-notices .woocommerce-error {
	margin: 0;
	padding: .4em .7em;
	list-style: none;
	color: #000;
	background: #c3c3c3;
	border: 2px solid;
	border-color: #fff #555 #555 #fff;
}
.shop-notices a {
	color: #000;
	font-weight: bold;
}

.shop-track {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: calc(56 * var(--u));
	padding: calc(50 * var(--u)) calc(36 * var(--u)) calc(4 * var(--u));
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding: 0 calc(36 * var(--u));
	scrollbar-width: none;
	cursor: grab;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.shop-track::-webkit-scrollbar {
	display: none;
}
.shop-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}
.shop-track.is-dragging .prod {
	pointer-events: none;
}

/* centre the row when it fits, scroll from the first item when it doesn't */
.prod:first-child { margin-left: auto; }
.prod:last-child  { margin-right: auto; }

.prod {
	flex: 0 0 auto;
	width: calc(152 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
	scroll-snap-align: start;
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	outline: none;
	-webkit-user-drag: none;
}

.prod-art {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: calc(10 * var(--u));
	background: #161616;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .8),
		calc(3 * var(--u)) calc(4 * var(--u)) 0 rgba(0, 0, 0, .45);
	transition: transform .15s, box-shadow .15s;
}
.prod-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.prod-name {
	margin-top: calc(14 * var(--u));
	padding: calc(2 * var(--u)) calc(4 * var(--u));
	font: 400 max(9px, calc(13.5 * var(--u))) / 1.02 var(--f-head);
	letter-spacing: .01em;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
	white-space: nowrap;
	outline: 1px dotted transparent;
}
.prod-price {
	margin-top: calc(4 * var(--u));
	font: 400 max(9px, calc(13.5 * var(--u))) / 1 var(--f-head);
	letter-spacing: .01em;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
}
.prod-price s {
	color: var(--ink-dim);
	margin-right: .25em;
}
.prod.is-sold .prod-price {
	color: #d9d9d9;
}

.prod:hover .prod-art,
.prod:focus-visible .prod-art {
	transform: translateY(calc(-4 * var(--u)));
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .8),
		calc(3 * var(--u)) calc(8 * var(--u)) 0 rgba(0, 0, 0, .45),
		0 0 calc(14 * var(--u)) rgba(150, 170, 255, .35);
}
.prod:hover .prod-name,
.prod:focus-visible .prod-name {
	background: var(--select);
	outline-color: #fff;
	text-shadow: none;
}

.shop-empty {
	margin: auto;
	font-family: var(--f-head);
}


/* ------------------------------------------------------------------
   Single product
------------------------------------------------------------------ */
.pdp {
	position: relative;
	display: grid;
	grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: calc(30 * var(--u));
	flex: 1;
	min-height: 0;
	padding: calc(22 * var(--u)) calc(70 * var(--u)) calc(8 * var(--u)) calc(30 * var(--u));
}

.pdp-art {
	align-self: start;
	aspect-ratio: 1;
	padding: calc(12 * var(--u));
	background: #161616;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .8),
		calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(0, 0, 0, .45);
}
.pdp-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pdp-info {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-right: calc(10 * var(--u));
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #6a6a6a transparent;
}
.pdp-info::-webkit-scrollbar { width: 6px; }
.pdp-info::-webkit-scrollbar-track { background: transparent; }
.pdp-info::-webkit-scrollbar-thumb { background: #6a6a6a; }

.pdp-back {
	align-self: flex-start;
	padding: calc(1 * var(--u)) calc(4 * var(--u));
	font: 400 max(10px, calc(12 * var(--u))) / 1.2 var(--f-head);
	color: var(--ink-dim);
	text-decoration: none;
	outline: 1px dotted transparent;
}
.pdp-back:hover {
	color: #fff;
	background: var(--select);
	outline-color: #fff;
}

.pdp .shop-notices {
	position: static;
	margin-top: calc(6 * var(--u));
}

.pdp-name {
	margin: calc(10 * var(--u)) 0 0;
	font: 400 max(13px, calc(24 * var(--u))) / 1 var(--f-head);
	letter-spacing: .01em;
	color: #fff;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
}
.pdp-name span {
	font-size: .72em;
	color: #d6d6d6;
}

.pdp-price {
	margin: calc(8 * var(--u)) 0 0;
	font: 400 max(12px, calc(19 * var(--u))) / 1 var(--f-head);
}
.pdp-price s {
	color: var(--ink-dim);
	margin-right: .25em;
}

.pdp-buy {
	margin-top: calc(12 * var(--u));
}
.pdp-buy form.cart {
	display: flex;
	align-items: stretch;
	gap: calc(8 * var(--u));
	margin: 0;
}
.pdp-buy .stock {
	display: none;
}
.pdp-buy .wcpay-express-checkout-wrapper {
	width: max(180px, calc(240 * var(--u)));
	margin-top: calc(8 * var(--u));
}
.pdp-buy .quantity input.qty {
	width: max(38px, calc(52 * var(--u)));
	height: 100%;
	padding: 0 .3em;
	font: 400 max(11px, calc(14 * var(--u))) / 1 var(--f-mono);
	color: #000;
	text-align: center;
	background: #fff;
	border: 2px solid;
	border-color: #555 #f2f2f2 #f2f2f2 #555;
	border-radius: 0;
	-moz-appearance: textfield;
}
.pdp-buy .quantity input.qty::-webkit-inner-spin-button,
.pdp-buy .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
}
.pdp-buy .single_add_to_cart_button,
.pdp-sold {
	padding: .5em 1.1em .45em;
	font: 400 max(11px, calc(14 * var(--u))) / 1 var(--f-head) !important;
	letter-spacing: .02em;
	color: #000 !important;
	background: #c3c3c3 !important;
	border: 2px solid !important;
	border-color: #fff #555 #555 #fff !important;
	border-radius: 0 !important;
	box-shadow: 1px 1px 0 #000;
	cursor: pointer;
}
.pdp-buy .single_add_to_cart_button:hover {
	background: #d4d4d4 !important;
}
.pdp-buy .single_add_to_cart_button:active {
	border-color: #555 #fff #fff #555 !important;
	transform: translate(1px, 1px);
	box-shadow: none;
}
.pdp-sold {
	display: inline-block;
	margin: 0;
	color: #7a0000 !important;
	cursor: default;
}

.pdp-desc {
	flex: none;
	margin-top: calc(16 * var(--u));
	padding-top: calc(12 * var(--u));
	border-top: 1px solid #3c3c3c;
	font-size: max(10px, calc(12 * var(--u)));
	line-height: 1.5;
	color: #cfcfcf;
	user-select: text;
	-webkit-user-select: text;
}
.pdp-desc > :first-child { margin-top: 0; }

/* ------------------------------------------------------------------
   Cart + checkout (WooCommerce blocks, restyled only — no markup changes)
------------------------------------------------------------------ */
.screen-inner:has(.win--checkout) {
	padding-top: 4cqh;
}
.win-wrap:has(.win--checkout) {
	width: min(78cqw, 190cqh);
}
.win.win--checkout {
	height: 83cqh;
	min-height: 0;
	max-height: none;
}

.win--checkout .doc {
	padding: calc(18 * var(--px)) calc(24 * var(--px)) calc(24 * var(--px));
	font-size: max(12px, calc(12.5 * var(--px)));
	line-height: 1.45;
	color: #dcdcdc;
}
.win--checkout .wp-block-woocommerce-cart,
.win--checkout .wp-block-woocommerce-checkout {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

/* type */
.win--checkout h2,
.win--checkout .wc-block-components-title,
.win--checkout .wc-block-cart__totals-title,
.win--checkout .wc-block-components-checkout-step__title {
	font-family: var(--f-head) !important;
	font-weight: 400 !important;
	font-size: max(14px, calc(17 * var(--px))) !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff !important;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}
.win--checkout .wc-block-cart-items__header,
.win--checkout .wc-block-components-totals-item__label,
.win--checkout .wc-block-components-panel__button {
	font-family: var(--f-head);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.win--checkout .wc-block-cart-items__header {
	color: var(--ink-dim);
	font-size: .85em;
}
.win--checkout .doc a {
	color: #aebdff;
}
.win--checkout .doc a:hover {
	color: #fff;
}
.win--checkout .wc-block-components-product-name {
	font-family: var(--f-head);
	font-size: max(13px, calc(15 * var(--px))) !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #fff !important;
}
.win--checkout a.wc-block-components-product-name:hover {
	background: var(--select);
	outline: 1px dotted #fff;
}
.win--checkout .wc-block-components-product-name {
	overflow-wrap: normal !important;
	word-break: normal !important;
	hyphens: none !important;
}
.win--checkout .wc-block-components-order-summary .wc-block-components-product-name {
	font-size: max(12px, calc(12.5 * var(--px))) !important;
	line-height: 1.1;
}
.win--checkout .wc-block-components-order-summary .wc-block-components-product-metadata {
	display: none;
}
.win--checkout .wc-block-components-product-metadata {
	color: var(--ink-dim);
	font-size: .9em;
}
.win--checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--f-head);
	font-size: max(14px, calc(17 * var(--px))) !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.win--checkout .wc-block-components-totals-footer-item,
.win--checkout .wc-block-components-checkout-order-summary__title-price {
	font-family: var(--f-head);
	font-size: max(15px, calc(19 * var(--px))) !important;
	color: #fff;
}

/* layout: the sidebar is a sunken sub-panel */
.win--checkout .wc-block-components-sidebar-layout {
	margin: 0 !important;
}
.win--checkout .wc-block-components-sidebar {
	padding: calc(14 * var(--px)) calc(16 * var(--px)) !important;
	background: #1f1f1f;
	border: 2px solid;
	border-color: #111 #4a4a4a #4a4a4a #111;
}
.win--checkout .wc-block-components-totals-wrapper,
.win--checkout .wc-block-cart-items,
.win--checkout .wc-block-cart-items td,
.win--checkout .wc-block-cart-items th,
.win--checkout .wc-block-components-checkout-order-summary__title,
.win--checkout .wc-block-components-express-payment-continue-rule::before,
.win--checkout .wc-block-components-express-payment-continue-rule::after {
	border-color: #3a3a3a !important;
}

/* product thumbs */
.win--checkout .wc-block-cart-item__image img,
.win--checkout .wc-block-components-order-summary-item__image img {
	padding: 4px;
	background: #161616;
	box-shadow: inset 0 0 0 1px #000, 2px 3px 0 rgba(0, 0, 0, .45);
}
.win--checkout .wc-block-components-order-summary-item__quantity {
	min-width: 20px;
	height: 20px;
	font-family: var(--f-head);
	color: #000 !important;
	background: #c3c3c3 !important;
	border: 2px solid !important;
	border-color: #fff #555 #555 #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* text fields, selects: classic white sunken fields */
.win--checkout .wc-block-components-text-input input,
.win--checkout .wc-block-components-text-input textarea,
.win--checkout .wc-block-components-textarea,
.win--checkout .wc-blocks-components-select__select,
.win--checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
.win--checkout .wc-block-components-quantity-selector {
	color: #000 !important;
	background: #f4f4f4 !important;
	border: 2px solid !important;
	border-color: #5a5a5a #fff #fff #5a5a5a !important;
	border-radius: 0 !important;
	box-shadow: inset 1px 1px 0 #000 !important;
	font-family: var(--f-body) !important;
}
.win--checkout .wc-blocks-components-select__container {
	background: transparent !important;
	border-radius: 0 !important;
}
.win--checkout .wc-block-components-text-input label,
.win--checkout .wc-blocks-components-select__label,
.win--checkout .wc-block-components-combobox label {
	color: #555 !important;
}
.win--checkout .wc-blocks-components-select__expand {
	fill: #555 !important;
}
.win--checkout .wc-block-components-text-input input:focus,
.win--checkout .wc-blocks-components-select__select:focus,
.win--checkout .wc-block-components-textarea:focus {
	outline: 1px dotted #000 !important;
	outline-offset: -5px !important;
	box-shadow: inset 1px 1px 0 #000 !important;
}
.win--checkout .has-error input,
.win--checkout .has-error select {
	border-color: #b00 #fff #fff #b00 !important;
}
.win--checkout .wc-block-components-validation-error,
.win--checkout .has-error label {
	color: #ff8f8f !important;
}
.win--checkout .wc-block-components-validation-error svg {
	fill: #ff8f8f !important;
}

/* quantity -/+ */
.win--checkout .wc-block-components-quantity-selector {
	width: auto !important;
}
.win--checkout .wc-block-components-quantity-selector input {
	color: #000 !important;
	background: transparent !important;
	font-family: var(--f-mono) !important;
}
.win--checkout .wc-block-components-quantity-selector__button {
	color: #000 !important;
	background: #c3c3c3 !important;
	border: 2px solid !important;
	border-color: #fff #555 #555 #fff !important;
	border-radius: 0 !important;
	opacity: 1 !important;
}
.win--checkout .wc-block-components-quantity-selector__button:active {
	border-color: #555 #fff #fff #555 !important;
}
.win--checkout .wc-block-components-quantity-selector__button:disabled {
	color: #888 !important;
}
.win--checkout .wc-block-cart-item__remove-link {
	color: var(--ink-dim) !important;
	fill: currentColor;
}
.win--checkout .wc-block-cart-item__remove-link:hover {
	color: #ff8f8f !important;
}

/* checkboxes */
.win--checkout .wc-block-components-checkbox__input[type="checkbox"] {
	background: #f4f4f4 !important;
	border: 2px solid !important;
	border-color: #5a5a5a #fff #fff #5a5a5a !important;
	border-radius: 0 !important;
	box-shadow: inset 1px 1px 0 #000 !important;
}
.win--checkout .wc-block-components-checkbox__mark {
	fill: #000 !important;
}

/* radio lists (shipping + payment): rows, the chosen one gets the blue "selected" look */
.win--checkout .wc-block-components-radio-control--highlight-checked {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.win--checkout .wc-block-components-radio-control--highlight-checked::after {
	display: none !important;
}
.win--checkout .wc-block-components-radio-control__option,
.win--checkout .wc-block-components-radio-control-accordion-option {
	margin-bottom: 4px;
	background: #1f1f1f;
	border-radius: 0 !important;
	box-shadow: inset 0 0 0 1px #3a3a3a !important;
}
.win--checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	margin: 0;
	box-shadow: none !important;
	background: transparent;
}
.win--checkout .wc-block-components-radio-control__option-checked,
.win--checkout .wc-block-components-radio-control-accordion-option:has(> .wc-block-components-radio-control__option-checked) {
	color: #fff !important;
	background: var(--select) !important;
	box-shadow: inset 0 0 0 1px #fff !important;
}
.win--checkout .wc-block-components-radio-control-accordion-content {
	color: #dcdcdc;
	background: #242424;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
.win--checkout .wc-block-components-radio-control__input {
	background: #f4f4f4 !important;
	border: 2px solid !important;
	border-color: #5a5a5a #fff #fff #5a5a5a !important;
	box-shadow: none !important;
}
.win--checkout .wc-block-components-radio-control__input:checked::before {
	background: #000 !important;
}
.win--checkout .wc-block-components-radio-control__label,
.win--checkout .wc-block-components-radio-control__secondary-label,
.win--checkout .wc-block-components-payment-method-label {
	font-family: var(--f-head);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.win--checkout .wc-block-components-radio-control__description,
.win--checkout .wc-block-components-radio-control__secondary-description {
	color: inherit;
	opacity: .75;
}

/* buttons: Proceed to checkout, Place order, Apply coupon */
.win--checkout .wc-block-components-button:not(.is-link):not(.wc-block-components-quantity-selector__button):not(.wc-block-components-panel__button) {
	min-height: 44px;
	padding: .55em 1.2em !important;
	font: 400 max(13px, calc(15 * var(--px))) / 1 var(--f-head) !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	color: #000 !important;
	background: #c3c3c3 !important;
	border: 2px solid !important;
	border-color: #fff #555 #555 #fff !important;
	border-radius: 0 !important;
	box-shadow: 1px 1px 0 #000 !important;
	text-decoration: none !important;
}
.win--checkout .wc-block-components-button:not(.is-link):not(.wc-block-components-quantity-selector__button):not(.wc-block-components-panel__button):hover {
	background: #d4d4d4 !important;
}
.win--checkout .wc-block-components-button:not(.is-link):not(.wc-block-components-quantity-selector__button):not(.wc-block-components-panel__button):active {
	border-color: #555 #fff #fff #555 !important;
	transform: translate(1px, 1px);
	box-shadow: none !important;
}
.win--checkout .wc-block-components-checkout-place-order-button,
.win--checkout .wc-block-cart__submit-button {
	width: 100%;
}
.win--checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.win--checkout .wc-block-cart__submit-button .wc-block-components-button__text {
	display: block !important;
	white-space: nowrap;
}
.win--checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text::after,
.win--checkout .wc-block-cart__submit-button .wc-block-components-button__text::after {
	content: " \25B6";
	font-size: .75em;
	vertical-align: .1em;
}
.win--checkout .wc-block-components-checkout-return-to-cart-button {
	font-family: var(--f-head);
	text-transform: uppercase;
	color: var(--ink-dim) !important;
}

/* the mobile "sticky" cart button must stay inside the window */
.win--checkout .wc-block-cart__submit-container--sticky {
	position: static !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.win--checkout .wc-block-cart__submit-container--sticky::before {
	display: none !important;
}

/* express payment box */
.win--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.win--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after,
.win--checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
	border-color: #4a4a4a !important;
	border-radius: 0 !important;
}
.win--checkout .wc-block-components-express-payment__title,
.win--checkout .wc-block-components-express-payment-continue-rule {
	font-family: var(--f-head) !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-dim) !important;
}

/* saved address card, coupon panel */
.win--checkout .wc-block-components-address-card {
	background: #1f1f1f;
	border: 1px solid #3a3a3a !important;
	border-radius: 0 !important;
}
.win--checkout .wc-block-components-panel__button {
	color: #dcdcdc !important;
}
.win--checkout .wc-block-components-panel__button-icon {
	fill: currentColor;
}

/* notices */
.win--checkout .wc-block-components-notice-banner,
.win--checkout .wc-block-store-notice {
	color: #000 !important;
	background: #c3c3c3 !important;
	border: 2px solid !important;
	border-color: #fff #555 #555 #fff !important;
	border-radius: 0 !important;
	box-shadow: 1px 1px 0 #000;
}
.win--checkout .wc-block-components-notice-banner > svg {
	border-radius: 0 !important;
}
.win--checkout .wc-block-components-notice-banner a {
	color: #000;
}

/* empty cart */
.win--checkout .wp-block-woocommerce-empty-cart-block {
	text-align: center;
}
.win--checkout .wc-block-cart__empty-cart__title::before {
	display: none !important;
}


/* ------------------------------------------------------------------
   MEIST + MUUSIKA (scrolling list windows)
------------------------------------------------------------------ */
.screen-inner:has(.win--list) {
	padding-top: 23.5cqh;
}
.win-wrap:has(.win--list) {
	width: min(64cqw, 150cqh);
}
.win.win--list {
	height: 66cqh;
	min-height: 0;
	max-height: none;
}

.win--list .doc {
	padding: calc(22 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
	font-family: var(--f-head);
	color: #e8e8e8;
}
.win--list .doc a {
	color: inherit;
	text-decoration: none;
}
.win--list .doc p {
	margin: 0;
}

.rule {
	width: 92%;
	margin: calc(16 * var(--u)) auto;
	border: 0;
	border-top: 1px solid #4a4a4a;
	box-shadow: 0 1px 0 #161616;
}

.list-title {
	margin: calc(6 * var(--u)) 0 calc(18 * var(--u));
	font: 400 max(18px, calc(28 * var(--u))) / 1 var(--f-head);
	letter-spacing: .01em;
	text-align: center;
	color: #fff;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
}

.list-empty {
	text-align: center;
	color: var(--ink-dim);
}

/* link icons with Gabriola captions (MUUSIKA / INSTAGRAM / SPOTIFY / VIDEO / POOD) */
.lnks {
	display: flex;
	flex-wrap: wrap;
	gap: calc(22 * var(--u));
	margin-top: calc(14 * var(--u));
}
.lnk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(2 * var(--u));
	outline: none;
}
/* .lnks prefix: must beat ".doc img { height: auto }" further down */
.lnks .lnk img {
	display: block;
	height: max(26px, calc(36 * var(--u)));
	width: auto;
	filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) 0 rgba(0, 0, 0, .45));
	transition: transform .15s;
}
.lnks .lnk img.is-pixel {
	height: max(16px, calc(21 * var(--u)));
	margin: calc(8 * var(--u)) 0 calc(6 * var(--u));
	image-rendering: pixelated;
}
.lnk span {
	padding: 0 .3em;
	font: 400 max(12px, calc(15 * var(--u))) / 1.1 var(--f-gab);
	letter-spacing: .02em;
	color: #bdbdbd;
	outline: 1px dotted transparent;
}
.lnk:hover img,
.lnk:focus-visible img {
	transform: translateY(calc(-3 * var(--u)));
}
.lnk:hover span,
.lnk:focus-visible span {
	color: #fff;
	background: var(--select);
	outline-color: #fff;
}

/* shared photo / cover frame */
.member-photo img,
.rel-cover img,
.member-noimg {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .8),
		calc(4 * var(--u)) calc(5 * var(--u)) 0 rgba(0, 0, 0, .45);
}
.member-noimg {
	display: grid;
	place-items: center;
	background: #1b1b1b;
}
.member-noimg img {
	width: 70%;
	opacity: .25;
	box-shadow: none;
	aspect-ratio: auto;
}

/* --- MEIST ------------------------------------------------------------ */
.about-intro {
	text-align: center;
}
.about-logo {
	display: block;
	width: max(110px, calc(170 * var(--u)));
	height: auto;
	margin: calc(4 * var(--u)) auto calc(18 * var(--u));
}
.about-text {
	max-width: 88%;
	margin: 0 auto;
	font-size: max(13px, calc(15.5 * var(--u)));
	line-height: 1.3;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}
.about-text p + p {
	margin-top: .8em !important;
}
.about-copy {
	margin-top: calc(16 * var(--u)) !important;
	font-size: max(9px, calc(9 * var(--u)));
	color: #bdbdbd;
}

.member {
	display: grid;
	grid-template-columns: calc(170 * var(--u)) minmax(0, 1fr);
	gap: calc(20 * var(--u));
	align-items: start;
	max-width: 86%;
	margin: 0 auto calc(34 * var(--u));
}
.member.is-flip {
	grid-template-columns: minmax(0, 1fr) calc(170 * var(--u));
	text-align: right;
}
.member.is-flip .member-photo {
	order: 2;
}
.member.is-flip .lnks {
	justify-content: flex-end;
}

.member-name {
	margin: calc(6 * var(--u)) 0 0;
	font: 400 max(17px, calc(26 * var(--u))) / 1 var(--f-head);
	letter-spacing: .01em;
	color: #fff;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
}
.member-role {
	margin-top: calc(2 * var(--u)) !important;
	font-size: max(10px, calc(11 * var(--u)));
	font-style: italic;
	color: #d0d0d0;
}
.member-bio {
	margin-top: calc(14 * var(--u));
	font-size: max(12px, calc(14 * var(--u)));
	font-style: italic;
	line-height: 1.4;
	color: #e2e2e2;
}

/* --- MUUSIKA ---------------------------------------------------------- */
.rel {
	display: grid;
	grid-template-columns: calc(185 * var(--u)) minmax(0, 1fr);
	gap: calc(30 * var(--u));
	align-items: stretch;
	padding: calc(8 * var(--u)) 0;
}
.rel .rel-cover {
	align-self: start;
}
/* text column as tall as the cover, release date sits on the bottom edge */
.rel-body {
	display: flex;
	flex-direction: column;
}
.rel-title {
	margin: calc(10 * var(--u)) 0 0;
	font: 400 max(14px, calc(30 * var(--u) - 2px)) / 1.05 var(--f-head);
	letter-spacing: .005em;
	color: #fff;
	text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 rgba(0, 0, 0, .55);
}
/* Singel / EP / Album label above the title */
.rel-type {
	margin: calc(10 * var(--u)) 0 0 !important;
	font: 400 max(8px, calc(11 * var(--u) - 2px)) / 1 var(--f-console);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8f8f8f;
}
.rel-title.has-type {
	margin-top: calc(4 * var(--u));
}
.rel-date {
	margin-top: auto !important;
	padding-top: calc(14 * var(--u));
	font-size: max(9px, calc(17 * var(--u) - 5px));
	font-style: italic;
	color: #8f8f8f;
}
.rel-desc {
	margin-top: calc(14 * var(--u));
	font-size: max(10px, calc(16 * var(--u) - 2px));
	font-style: italic;
	line-height: 1.3;
	color: #a6a6a6;
}
.rel-credits {
	margin-top: calc(12 * var(--u)) !important;
	font: 400 max(8px, calc(10.5 * var(--u) - 2px)) / 1.25 var(--f-console);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #8a8a8a;
}

/* ------------------------------------------------------------------
   Signature under the window
------------------------------------------------------------------ */
.sig {
	position: relative;
	z-index: 2;
	margin: 3.5cqh 0 0;
	font: 400 clamp(10px, 2.3cqh, 18px) / 1 var(--f-head);
	text-align: center;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 0 6px rgba(255, 255, 255, .35);
}

/* ------------------------------------------------------------------
   Text pages (About etc.) inside the window
------------------------------------------------------------------ */
.doc {
	padding: calc(18 * var(--px)) calc(24 * var(--px));
	font-size: max(12px, calc(13 * var(--px)));
	line-height: 1.55;
	color: #e8e8e8;
}
.doc > :first-child { margin-top: 0; }
.doc h1, .doc h2, .doc h3, .doc h4 {
	font-family: var(--f-head);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .01em;
	color: #fff;
}
.doc a { color: #aebdff; }
.doc a:hover { color: #fff; }
.doc img, .doc video, .doc iframe { max-width: 100%; height: auto; }

.doc--error {
	display: grid;
	place-content: center;
	height: 100%;
	text-align: center;
}
.err-code {
	margin: 0;
	font: 400 calc(64 * var(--px)) / 1 var(--f-head);
}
.btn95 {
	display: inline-block;
	padding: .35em .9em;
	font-family: var(--f-head);
	color: #000 !important;
	text-decoration: none;
	background: #c3c3c3;
	border: 2px solid;
	border-color: #fff #555 #555 #fff;
}
.btn95:active { border-color: #555 #fff #fff #555; }

/* Thin, quiet scrollbars inside the window */
.win-body {
	scrollbar-width: thin;
	scrollbar-color: #6a6a6a transparent;
}
.win-body::-webkit-scrollbar { width: 6px; height: 6px; }
.win-body::-webkit-scrollbar-track { background: transparent; }
.win-body::-webkit-scrollbar-thumb { background: #6a6a6a; }

/* ------------------------------------------------------------------
   Phones / portrait
------------------------------------------------------------------ */
@media (max-aspect-ratio: 6/5), (max-width: 768px) {
	.screen-inner {
		padding-top: 30cqh;
	}
	.win-wrap,
	.win-wrap:has(.win--page) {
		width: 94cqw;
	}
	.screen-logo {
		top: 5cqh;
	}
	.screen-inner:has(.win--list) {
		padding-top: 22cqh;
	}
	.win-wrap:has(.win--list) {
		width: 94cqw;
	}
	.win.win--list {
		height: 64cqh;
	}
	.win--list .doc {
		padding: calc(34 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
	}
	.member,
	.member.is-flip,
	.rel {
		grid-template-columns: 1fr;
		gap: calc(26 * var(--u));
		max-width: 100%;
		text-align: center;
	}
	.member.is-flip .member-photo {
		order: 0;
	}
	.member-photo,
	.rel-cover {
		width: 62%;
		margin: 0 auto;
	}
	.lnks,
	.member.is-flip .lnks {
		justify-content: center;
	}
	.about-text {
		max-width: 100%;
	}
	.screen-inner:has(.win--checkout) {
		padding-top: 3cqh;
	}
	.win-wrap:has(.win--checkout) {
		width: 94cqw;
	}
	.win.win--checkout {
		height: 86cqh;
	}
	.win--checkout .doc {
		padding: calc(14 * var(--px)) calc(12 * var(--px)) calc(20 * var(--px));
	}
	.win--shop,
	.win--shop.win--product {
		height: auto;
		max-height: 62cqh;
	}
	.screen-inner:has(.win--product) {
		padding-top: 22cqh;
	}
	.win-wrap:has(.win--product) {
		width: 94cqw;
	}
	.win--shop.win--product {
		height: 66cqh;
		max-height: none;
	}
	.shop-track {
		gap: calc(44 * var(--u));
		padding: calc(84 * var(--u)) calc(40 * var(--u)) calc(10 * var(--u));
		scroll-padding: 0 calc(40 * var(--u));
	}
	.prod {
		width: calc(250 * var(--u));
	}
	.prod-name {
		white-space: normal;
		text-wrap: balance;
		font-size: max(10px, calc(22 * var(--u)));
	}
	.prod-price {
		font-size: max(10px, calc(22 * var(--u)));
	}
	.shop-cart {
		width: 26px;
		top: calc(16 * var(--u));
	}
	.pdp {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: calc(24 * var(--u));
		padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(16 * var(--u));
		overflow-y: auto;
		scrollbar-width: none;
	}
	.pdp::-webkit-scrollbar { display: none; }
	.pdp-art {
		width: 46%;
		justify-self: center;
	}
	.pdp-info {
		align-items: center;
		text-align: center;
	}
	.pdp-name { margin-top: calc(4 * var(--u)); }
	.pdp-back { align-self: center; }
	.pdp-info {
		overflow: visible;
		padding: 0;
	}
	.pdp-desc {
		text-align: left;
	}
	.pdp-name { font-size: max(15px, calc(40 * var(--u))); }
	.pdp-price { font-size: max(13px, calc(30 * var(--u))); }
	.win--page {
		min-height: min(calc(100cqw * 402 / 765), 56cqh);
		max-height: 56cqh;
	}
	.sig {
		margin: auto 0 3.5cqh;
		padding-top: 2cqh;
	}
	.is-max .win-wrap,
	.is-max .win-wrap:has(.win--page) {
		width: 94cqw;
	}
	.is-max .win--page {
		height: 78cqh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crt, .win, .screen-fx, .player-now-text, .spk img, .screen-grain, .screen-logo, .screen-logo img {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
   Maximise, whatever the window type. Kept last and one step more
   specific, so the per-page sizes above (list, product, checkout)
   can't hold a maximised window back.
------------------------------------------------------------------ */
.stage.is-max .screen-inner {
	padding-top: 4cqh;
}
.stage.is-max .win-wrap:has(.win--page),
.stage.is-max .win-wrap:has(.win--product) {
	width: 94cqw;
}
.stage.is-max .win.win--page,
.stage.is-max .win.win--shop.win--product {
	height: 84cqh;
	min-height: 0;
	max-height: none;
}

/*
 * Sub-page windows (text/list pages, product, cart/checkout) size their content from the
 * window's NORMAL width, not its current width. So maximising gives more room instead of
 * just zooming everything up. --base-u is registered so it resolves on .screen-inner,
 * where cqw/cqh still mean the glass, and is then inherited as a plain px value.
 */
@property --base-u {
	syntax: "<length>";
	inherits: true;
	initial-value: 1px;
}
.screen-inner:has(.win--page)     { --base-u: calc(min(56cqw, 140cqh) / 765); }
.screen-inner:has(.win--list)     { --base-u: calc(min(64cqw, 150cqh) / 765); }
.screen-inner:has(.win--checkout) { --base-u: calc(min(78cqw, 190cqh) / 765); }
.screen-inner:has(.win--product)  { --base-u: calc(min(60cqw, 150cqh) / 765); }
@media (max-aspect-ratio: 6/5), (max-width: 768px) {
	.screen-inner:has(.win--page),
	.screen-inner:has(.win--list),
	.screen-inner:has(.win--checkout),
	.screen-inner:has(.win--product) {
		--base-u: calc(94cqw / 765);
	}
}
.win.win--page,
.win.win--product {
	--u: var(--base-u);
}

/* ------------------------------------------------------------------
   Cover art window (MUUSIKA): a second window on the TV
------------------------------------------------------------------ */
a.rel-cover {
	display: block;
	cursor: zoom-in;
	outline: none;
	-webkit-user-drag: none;
}
a.rel-cover img {
	transition: transform .15s, box-shadow .15s;
}
a.rel-cover:hover img,
a.rel-cover:focus-visible img {
	transform: translateY(calc(-4 * var(--u)));
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .8),
		calc(4 * var(--u)) calc(9 * var(--u)) 0 rgba(0, 0, 0, .45),
		0 0 calc(16 * var(--u)) rgba(150, 170, 255, .35);
}

.cover-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .45);
	cursor: pointer;
}
.cover-wrap {
	container: win / inline-size;
	width: min(76cqw, 78cqh);
	cursor: default;
}
.win.win--cover {
	min-height: 0;
	max-height: none;
}
.win--cover .win-body {
	overflow: hidden;
	line-height: 0;
}
.win--cover .win-body img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #111;
}
.win--cover .win-crumbs {
	font-size: calc(14 * var(--px));
}

/* Empty cart: just the message and a way back to the shop */
.win--checkout .wp-block-woocommerce-empty-cart-block {
	padding: calc(30 * var(--px)) 0;
}
.win--checkout .wc-block-cart__empty-cart__title {
	margin-bottom: calc(22 * var(--px)) !important;
}
.win--checkout .nsr-empty-cart-btns .wp-block-button__link {
	display: inline-block;
	padding: .6em 1.4em;
	font: 400 max(13px, calc(15 * var(--px))) / 1 var(--f-head);
	letter-spacing: .04em;
	color: #000 !important;
	text-decoration: none !important;
	background: #c3c3c3;
	border: 2px solid;
	border-color: #fff #555 #555 #fff;
	border-radius: 0;
	box-shadow: 1px 1px 0 #000;
}
.win--checkout .nsr-empty-cart-btns .wp-block-button__link:hover {
	background: #d4d4d4;
}
.win--checkout .nsr-empty-cart-btns .wp-block-button__link:active {
	border-color: #555 #fff #fff #555;
	transform: translate(1px, 1px);
	box-shadow: none;
}

/* MUUSIKA link captions: 2px smaller than elsewhere */
.rel .lnk span {
	font-size: max(10px, calc(15 * var(--u) - 2px));
}