/* Red Snapper Tour: the 2027 tour poster (Moiré) as a block on a page.
   Everything is measured in poster pixels: --u is one pixel of the 1123 px
   wide A3 poster, scaled to the width of the block. */

.rst {
	container: rst / inline-size;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0 0 1.5em;
	background: #f4f1ea;
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.rst > * { --u: 0.7px; }
@supports (container-type: inline-size) {
	.rst > * { --u: calc(100cqw / 1123); }
}

/* the two layers of the wave, red and blue, multiplied on cream */
.rst-wave {
	position: absolute;
	inset: -8%;
	z-index: 0;
	background-repeat: repeat;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.rst-wave-a {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20666.67%27%3E%3Cdefs%3E%3Cpath%20id=%27s%27%20d=%27M64.16,0%20C64.16,121.43%206.51,211.90%206.51,333.33%20C6.51,454.77%2064.16,545.24%2064.16,666.67%27%20fill=%27none%27%20stroke=%27%23e5382b%27%20stroke-width=%2770.67%27/%3E%3C/defs%3E%3Cuse%20href=%27%23s%27%20x=%27-100%27/%3E%3Cuse%20href=%27%23s%27%20x=%270%27/%3E%3Cuse%20href=%27%23s%27%20x=%27100%27/%3E%3C/svg%3E");
	background-size: calc(32 * var(--u)) calc(213.33 * var(--u));
}
.rst-wave-b {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20666.67%27%3E%3Cdefs%3E%3Cpath%20id=%27s%27%20d=%27M64.16,0%20C64.16,121.43%206.51,211.90%206.51,333.33%20C6.51,454.77%2064.16,545.24%2064.16,666.67%27%20fill=%27none%27%20stroke=%27%232b4fe0%27%20stroke-width=%2770.67%27/%3E%3C/defs%3E%3Cuse%20href=%27%23s%27%20x=%27-100%27/%3E%3Cuse%20href=%27%23s%27%20x=%270%27/%3E%3Cuse%20href=%27%23s%27%20x=%27100%27/%3E%3C/svg%3E");
	background-size: calc(33.1 * var(--u)) calc(220.67 * var(--u));
	transform: rotate(1.8deg);
}

.rst-in {
	position: relative;
	z-index: 1;
	padding: calc(190 * var(--u)) calc(46 * var(--u)) calc(110 * var(--u));
}

/* the black plate */
.rst .rst-plate {
	background: #111111;
	padding: calc(50 * var(--u)) calc(44 * var(--u)) calc(42 * var(--u)) calc(40 * var(--u));
	color: #ffffff;
	text-align: left;
}
.rst .rst-plate * {
	box-sizing: border-box;
	font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
	text-shadow: none;
}

.rst .rst-logo {
	display: block;
	width: calc(100% + 12 * var(--u)); /* reaches a little past the text, as on the poster */
	max-width: none;
	height: auto;
	margin: 0;
	border: 0;
	filter: invert(1);
}

.rst .rst-live {
	margin: calc(-16 * var(--u)) calc(-12 * var(--u)) 0 0;
	padding: 0;
	text-align: right;
	font-size: calc(43 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #ff6a55;
}

.rst .rst-month {
	margin: calc(2 * var(--u)) 0 0;
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #ff6a55;
}

/* the dates run DOWN the first column and carry on at the top of the second */
.rst .rst-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--rst-rows, 7), auto);
	grid-auto-flow: column;
	gap: calc(16 * var(--u)) calc(28 * var(--u));
	margin: calc(19 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
}
.rst .rst-cell {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
.rst .rst-cell::before,
.rst .rst-cell::marker { content: none; }

.rst .rst-l1 {
	display: flex;
	align-items: baseline;
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1.3;
}
.rst .rst-day {
	flex: none;
	min-width: calc(112 * var(--u));
	color: #ff6a55;
}
.rst .rst-city {
	color: #ffffff;
	text-transform: uppercase;
}
.rst .rst-l2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 10px;
	margin-top: calc(2 * var(--u));
	padding-left: calc(119 * var(--u));
	font-size: max(13px, calc(22 * var(--u)));
	font-weight: 400;
	line-height: 1.3;
	color: #c9c9c9;
}

.rst .rst-tix,
.rst .rst-flag {
	flex: none;
	display: inline-block;
	padding: 0.28em 0.55em 0.22em;
	border: 1px solid currentColor;
	font-size: max(10.5px, calc(13 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.rst .rst-tix,
.rst .rst-tix:visited { color: #ff6a55; }
.rst .rst-tix:hover,
.rst .rst-tix:focus-visible {
	background: #ff6a55;
	border-color: #ff6a55;
	color: #111111;
	text-decoration: none;
}
.rst .rst-tix:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}
.rst .rst-flag {
	color: #8d8d8d;
	border-color: #555555;
}
.rst .is-cancelled .rst-city,
.rst .is-cancelled .rst-venue {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	color: #8d8d8d;
}

.rst .rst-onsale {
	margin: calc(44 * var(--u)) 0 0;
	font-size: max(14px, calc(26 * var(--u)));
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #ff6a55;
}
.rst .rst-foot {
	margin: calc(53 * var(--u)) 0 0;
	font-size: max(11px, calc(21 * var(--u)));
	font-weight: 400;
	line-height: 1.35;
	text-transform: uppercase;
	color: #c9c9c9;
}
.rst .rst-onsale + .rst-foot { margin-top: calc(14 * var(--u)); }

/* narrow: one column, and the poster pixel grows so the type stays readable */
@container rst (max-width: 639px) {
	.rst > * { --u: clamp(0.6px, calc(100cqw / 600), 0.95px); }
	.rst-in { padding: calc(90 * var(--u)) 16px calc(70 * var(--u)); }
	.rst .rst-plate { padding: calc(40 * var(--u)) calc(28 * var(--u)) calc(36 * var(--u)); }
	.rst .rst-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: calc(18 * var(--u));
	}
	/* the logo is much smaller here, so LIVE 2027 would run into its descenders */
	.rst .rst-live { margin: calc(10 * var(--u)) 0 0; }
	.rst .rst-month { margin-top: calc(10 * var(--u)); }
	.rst .rst-day { min-width: calc(104 * var(--u)); }
	.rst .rst-l2 {
		/* long venue names leave no room beside them on a phone, so the button
		   goes straight under the name on every row instead of only on some */
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding-left: calc(104 * var(--u));
	}
	.rst .rst-tix,
	.rst .rst-flag { padding: 0.5em 0.7em 0.45em; } /* 24 px tap height */
}