/* Red Snapper - proposal 1: MOIRE
   The tour poster language taken to the whole site: two wave layers, red and
   blue, multiplied over cream, with the content on black plates on top. */

:root{
	--cream:#f4f1ea;
	--ink:#111111;
	--coral:#ff6a55;
	--red:#e5382b;
	--blue:#2b4fe0;
	--grey:#c9c9c9;
	--dim:#8d8d8d;
	/* The gutter is also how much of the wave field you get to see. Only the
	   floor is raised: on a phone it is 26 px instead of 16, from about 650 px
	   up it is 4vw capped at 46 px, exactly as on the desktop before. */
	--pad:clamp(26px,4vw,46px);
	--plate:clamp(20px,3.4vw,44px);
	--col:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	background:var(--cream);
	color:var(--ink);
	font-family:'Space Grotesk',Helvetica,Arial,sans-serif;
	font-size:17px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- the moire field ---------- */
.wave{
	position:fixed;
	inset:-14%;
	z-index:0;
	background-repeat:repeat;
	mix-blend-mode:multiply;
	pointer-events:none;
}
.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:34px 227px;
}
.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:35.2px 235px;
	transform:rotate(1.8deg);
	animation:rs-focus 20s ease-in-out infinite;
}

/* The blue layer swings in and out of register with the red one. Held at
   1.8 degrees and 35.2 x 235 it is the poster, and that is where it spends two
   thirds of the time. Brought to 0 degrees and the red layer's own 34 x 227 the
   two coincide exactly, red times blue goes almost black, and the field reads as
   the single wave of Wavze.tiff that all of this came from.
   The tile is resized rather than scaled with a transform on purpose: a scaled
   transform resamples the layer and leaves a one pixel red and blue fringe along
   every edge, so focus would not be exact. */
@keyframes rs-focus{
	0%,30%   {transform:rotate(1.8deg);background-size:35.2px 235px}
	43%,57%  {transform:rotate(0deg);background-size:34px 227px}
	70%,100% {transform:rotate(1.8deg);background-size:35.2px 235px}
}
@media (prefers-reduced-motion:reduce){
	.wave-b{animation:none}
}

/* ---------- header ---------- */
.top{
	position:sticky;
	top:0;
	z-index:40;
	display:flex;
	align-items:center;
	gap:clamp(14px,3vw,40px);
	padding:14px var(--pad);
	background:var(--ink);
	isolation:isolate;
}
.brand{flex:none;display:block;width:clamp(140px,19vw,250px)}
.brand img{filter:invert(1)}
.top nav{
	margin-left:auto;
	display:flex;
	flex-wrap:wrap;
	gap:2px 18px;
	justify-content:flex-end;
}
.top nav a{
	color:#fff;
	text-decoration:none;
	font-size:13px;
	font-weight:700;
	letter-spacing:.11em;
	text-transform:uppercase;
	padding:4px 0;
	border-bottom:2px solid transparent;
	white-space:nowrap;
}
.top nav a:hover{color:var(--coral)}
.top nav a.on{border-bottom-color:var(--coral);color:var(--coral)}
.burger{display:none}

/* with a wider gutter the nine items need a touch less air before they wrap */
@media (min-width:1041px) and (max-width:1240px){
	.top nav{gap:2px 12px}
	.top nav a{font-size:12px;letter-spacing:.07em}
}

@media (max-width:1040px){
	/* the menu drops to its own row so the burger can sit out at the right edge */
	.top{flex-wrap:wrap}
	.burger{
		display:block;
		order:2;
		flex:none;
		margin-left:auto;
		width:34px;height:28px;
		background:none;border:0;padding:4px 0;cursor:pointer;
	}
	.burger span{display:block;height:2px;background:#fff;margin:5px 0;transition:.2s}
	.top nav{
		order:3;
		flex-basis:100%;
		justify-content:flex-start;
		gap:0;
		flex-direction:column;
		max-height:0;
		overflow:hidden;
		transition:max-height .28s ease;
	}
	.top nav.open{max-height:460px;padding-top:10px}
	.top nav a{padding:9px 0;font-size:15px;border-bottom:0}
	.top nav a.on{border-bottom:0}
}

/* ---------- layout ---------- */
#main{position:relative;z-index:2;padding:var(--pad) var(--pad) 0;max-width:var(--col);margin:0 auto}
.plate{
	background:var(--ink);
	color:#fff;
	padding:var(--plate);
	margin:0 0 var(--pad);
	transform-origin:center;
	transition:transform .24s cubic-bezier(.16,.84,.32,1);
}
.plate > *{transition:opacity .18s ease .05s}

/* leaving: the plate is pressed in from both sides to a vertical line,
   the text goes first so nothing looks squashed on the way */
#main.closing .plate{
	transform:scaleX(var(--k,.003));
	transition-duration:.165s;
	transition-timing-function:cubic-bezier(.75,0,.9,.2);
	will-change:transform;
}
#main.closing .plate > *{opacity:0;transition-duration:.1s;transition-delay:0s}

/* arriving: start as the line, then open out with the new content */
.plate.pre{transform:scaleX(var(--k,.003));transition:none;will-change:transform}
.plate.pre > *{opacity:0;transition:none}

@media (prefers-reduced-motion:reduce){
	.plate,.plate > *{transition:none}
}
.plate a{color:var(--coral)}
.sec-h{
	margin:0 0 .6em;
	font-size:clamp(26px,4.4vw,44px);
	font-weight:700;
	line-height:1;
	letter-spacing:-.02em;
	text-transform:uppercase;
	color:var(--coral);
}
.rule{height:1px;background:#333;margin:28px 0}

/* ---------- start: the poster ---------- */
.poster .p-logo{width:calc(100% + 1.2%);max-width:none;filter:invert(1);margin-bottom:0}
.poster .p-live{
	margin:-1.4% 0 0;
	text-align:right;
	font-size:clamp(20px,3.9vw,43px);
	font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--coral);
}
.poster .p-month{
	margin:clamp(8px,1vw,10px) 0 0;
	font-size:clamp(20px,3.1vw,34px);
	font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--coral);
}
.dates{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	grid-template-rows:repeat(7,auto);
	grid-auto-flow:column;
	gap:clamp(12px,1.5vw,16px) clamp(16px,2.5vw,28px);
	margin:clamp(14px,1.8vw,19px) 0 0;
	padding:0;
	list-style:none;
}
.dates li{margin:0;padding:0}
.d-1{display:flex;align-items:baseline;font-size:clamp(19px,3.1vw,34px);font-weight:700;line-height:1.25}
.d-day{flex:none;min-width:clamp(62px,10vw,112px);color:var(--coral)}
.d-city{text-transform:uppercase}
.d-2{
	display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
	margin-top:2px;
	padding-left:clamp(62px,10vw,119px);
	font-size:clamp(13px,2vw,22px);
	color:var(--grey);
}
.tix{
	flex:none;
	padding:.3em .6em .24em;
	border:1px solid currentColor;
	font-size:clamp(10.5px,1.2vw,13px);
	font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	text-decoration:none;color:var(--coral);white-space:nowrap;
}
.tix:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.p-foot{
	margin:clamp(26px,4vw,53px) 0 0;
	font-size:clamp(11px,1.9vw,21px);
	text-transform:uppercase;color:var(--grey);
}
@media (max-width:760px){
	.dates{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
	.poster .p-live{text-align:left;margin-top:10px}
	.d-2{flex-direction:column;align-items:flex-start;gap:6px}
	.tix{padding:.5em .7em .45em}
}

/* ---------- press release, under the poster on the start page ---------- */
.pr-h{
	margin:0 0 .65em;
	font-size:clamp(21px,3vw,34px);font-weight:700;line-height:1;
	letter-spacing:-.02em;text-transform:uppercase;color:var(--coral);
}
/* two columns so the text uses the whole plate instead of trailing off to the
   right, and so the measure stays readable on a wide screen */
.pr-body{columns:2;column-gap:clamp(26px,3.4vw,48px)}
.pr-body p{margin:0 0 1.05em;font-size:clamp(15px,1.5vw,17px);line-height:1.55;break-inside:avoid}
@media (max-width:820px){.pr-body{columns:1}}
.pr-line{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid #333}
.pr-line li{
	display:flex;flex-wrap:wrap;gap:1px 16px;
	padding:9px 0;border-bottom:1px solid #333;font-size:15px;
}
.pr-line b{flex:none;width:min(42%,230px);font-weight:700}
.pr-line span{color:var(--grey)}
.pr-q{
	list-style:none;margin:32px 0 0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
	gap:clamp(16px,2.4vw,30px);
}
.pr-q li{border-left:2px solid var(--coral);padding-left:15px}
.pr-q q{display:block;quotes:none;font-size:15px;line-height:1.45}
.pr-q cite{
	display:block;margin-top:8px;font-style:normal;
	font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);
}

/* ---------- biography ---------- */
.bio{max-width:none}
.bio-lead p{font-size:clamp(19px,2.3vw,27px);line-height:1.38;font-weight:500;margin:0 0 .7em}
.bio p{margin:0 0 1.1em;max-width:70ch}
.lineup{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:4px}
.lineup li{font-size:clamp(17px,2vw,22px);font-weight:700}
.lineup li span{color:var(--coral)}
.bio-body{columns:2;column-gap:46px}
.bio-body p{break-inside:avoid;max-width:none}
@media (max-width:860px){.bio-body{columns:1}}

/* ---------- discography ---------- */
.disc-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
	gap:clamp(12px,1.8vw,22px);
	list-style:none;margin:0;padding:0;
}
.disc-grid a{
	display:block;width:100%;padding:0;border:0;background:none;color:inherit;
	text-align:left;cursor:pointer;font:inherit;text-decoration:none;
}
.disc-grid img{width:100%;aspect-ratio:1;object-fit:cover;background:#222}
.disc-grid a:hover img{outline:3px solid var(--coral);outline-offset:-3px}
.dg-y{margin:8px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--coral)}
.dg-t{margin:1px 0 0;font-size:14px;line-height:1.25;color:#fff}

.rel{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(18px,3vw,40px)}
.rel-cover img{width:100%}
.rel-y{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--coral);margin:0}
.rel-t{margin:2px 0 18px;font-size:clamp(24px,3.6vw,40px);line-height:1.04;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.rel-note{margin:-8px 0 22px;max-width:62ch;color:var(--grey);font-size:15px;line-height:1.5}
.ed{margin:0 0 22px}
.ed h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--coral)}
.ed ol{margin:0;padding:0;list-style:none;font-family:'Space Mono',monospace;font-size:13px;line-height:1.75;color:var(--grey)}
.back{
	display:inline-block;margin:0 0 20px;padding:.45em .8em .4em;
	border:1px solid var(--coral);color:var(--coral);text-decoration:none;
	font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:none;
}
.back:hover{background:var(--coral);color:var(--ink)}
.embed{margin:14px 0 0;border:0;width:100%;height:352px}
@media (max-width:760px){.rel{grid-template-columns:1fr}.rel-cover{max-width:280px}}

/* ---------- remixes ---------- */
.rx{columns:2;column-gap:46px}
.rx-y{break-inside:avoid;margin:0 0 20px}
.rx-y h3{margin:0 0 4px;font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--coral);line-height:1}
.rx-y ul{margin:0;padding:0;list-style:none}
.rx-y li{font-size:15px;line-height:1.45;margin:0 0 3px;color:#fff}
.rx-y li b{font-weight:700;color:var(--grey)}
@media (max-width:860px){.rx{columns:1}}

/* ---------- synchography ---------- */
.sy{margin:0 0 34px}
.sy h3{margin:0 0 10px;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:.04em;color:var(--coral)}
.sy dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px clamp(14px,2vw,28px);margin:0}
.sy dt{font-weight:700;text-align:right;font-size:15px}
.sy dd{margin:0;color:var(--grey);font-size:15px}
.sy-note{margin:14px 0 0;color:var(--grey);font-size:15px;max-width:60ch}
@media (max-width:700px){
	.sy dl{grid-template-columns:1fr;gap:0}
	.sy dt{text-align:left;margin-top:10px}
}

/* ---------- gallery ---------- */
.gal-set{margin:0 0 34px}
.gal-set h3{margin:0 0 4px;font-size:clamp(19px,2.3vw,26px);font-weight:700;color:var(--coral)}
.gal-set p{margin:0 0 12px;color:var(--grey);font-size:14px}
.gal-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:7px;list-style:none;margin:0;padding:0;
}
.gal-grid button{display:block;padding:0;border:0;background:none;cursor:pointer;width:100%}
.gal-grid img{width:100%;aspect-ratio:1;object-fit:cover;background:#222}
.gal-grid button:hover img{opacity:.8}

/* ---------- videos ---------- */
.vid-intro{margin:-10px 0 26px;color:var(--grey);font-size:15px}
.vid-intro a{color:var(--coral);text-decoration:none;border-bottom:1px solid currentColor}
/* the first clip of the playlist runs the full width, the rest sit under it */
.vid-lead{margin:0 0 clamp(24px,3.4vw,44px)}
.vid-lead-t{
	margin:14px 0 0;font-size:clamp(18px,2.4vw,27px);font-weight:700;
	line-height:1.18;letter-spacing:-.015em;color:#fff;
}
.vid-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));
	gap:clamp(16px,2.2vw,30px) clamp(14px,1.8vw,24px);
	list-style:none;margin:0;padding:0;
}
.vid-grid li{margin:0;padding:0}
.vid-shot{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vid-shot img{width:100%;height:100%;object-fit:cover;display:block}
.vid-shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{
	position:absolute;inset:0;width:100%;height:100%;padding:0;
	background:rgba(17,17,17,.18);border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.vid-play i{
	display:block;width:clamp(42px,5.4vw,56px);aspect-ratio:1;border-radius:50%;
	background:var(--coral);position:relative;transition:transform .2s;
}
.vid-play i::after{
	content:'';position:absolute;top:50%;left:50%;
	transform:translate(-42%,-50%);
	border-left:clamp(13px,1.7vw,17px) solid var(--ink);
	border-top:clamp(8px,1vw,10px) solid transparent;
	border-bottom:clamp(8px,1vw,10px) solid transparent;
}
.vid-lead .vid-play i{width:clamp(56px,7vw,86px)}
.vid-lead .vid-play i::after{
	border-left-width:clamp(18px,2.2vw,26px);
	border-top-width:clamp(11px,1.35vw,16px);
	border-bottom-width:clamp(11px,1.35vw,16px);
}
.vid-play:hover{background:rgba(17,17,17,0)}
.vid-play:hover i{transform:scale(1.09)}
.vid-play:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.vid-t{
	margin:10px 0 0;font-size:14.5px;line-height:1.3;color:#fff;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,40px)}
.ct h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.ct ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.6}
.ct li:first-child{font-weight:700}
.ct a{color:#fff;text-decoration:none;border-bottom:1px solid var(--coral)}
.ct a:hover{color:var(--coral)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;padding:var(--pad);max-width:var(--col);margin:0 auto}
.foot-in{
	background:var(--ink);color:var(--grey);padding:var(--plate);
	font-size:13px;text-align:center;
}
.foot-note{
	margin:0 0 22px;
	font-size:max(12px,calc(0.95vw + 4px));
	font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
.foot-note a{color:var(--coral);text-decoration:none;border-bottom:1px solid currentColor}
.foot-note a:hover{color:#fff}

.foot-social{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
	gap:22px;list-style:none;margin:0 0 26px;padding:0;
}
.foot-social a{display:block;color:#fff;line-height:0}
.foot-social svg{width:21px;height:21px;fill:currentColor;display:block}
.foot-social a:hover{color:var(--coral)}

/* copyright and "web by" on one centred line, the logo set to the text size */
.foot-legal{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
	gap:5px 18px;margin:0;
	font-size:11px;letter-spacing:.06em;color:var(--dim);
}
.foot-by{display:inline-flex;align-items:center;gap:7px;letter-spacing:.14em;text-transform:uppercase}
.foot-by a{display:block;line-height:0;opacity:.8;transition:opacity .2s}
.foot-by a:hover{opacity:1}
.foot-by img{height:16px;width:auto;display:block}

/* ---------- lightbox: photos and videos ---------- */
body.lb-open{overflow:hidden}
.lb{
	position:fixed;inset:0;z-index:90;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
	padding:clamp(44px,6vw,64px) clamp(14px,5vw,64px);
	background:rgba(10,10,10,0);
	opacity:0;
	transition:opacity .24s ease,background .24s ease;
}
.lb.on{opacity:1;background:rgba(10,10,10,.96)}
.lb[hidden]{display:none}

.lb-stage{
	display:flex;align-items:center;justify-content:center;
	max-width:100%;min-height:0;
	opacity:0;transform:scale(.94) translateY(12px);
	transition:opacity .22s ease,transform .32s cubic-bezier(.18,.9,.3,1);
}
.lb.on .lb-stage{opacity:1;transform:none}
.lb-stage img{max-width:100%;max-height:76vh;object-fit:contain;display:block}
.lb-vid{
	width:min(1180px,92vw,calc(74vh * 16 / 9));
	aspect-ratio:16/9;background:#000;
}
.lb-vid iframe{width:100%;height:100%;border:0;display:block}

.lb-cap{
	margin:0;max-width:70ch;text-align:center;color:#fff;
	font-size:14px;line-height:1.35;
	opacity:0;transition:opacity .26s ease .06s;
}
.lb.on .lb-cap{opacity:1}
.lb-cap:empty{display:none}

.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:34px;line-height:1;padding:12px}
.lb button[hidden]{display:none}
.lb-x{top:6px;right:10px;font-size:40px}
.lb-p{left:4px;top:50%;transform:translateY(-50%)}
.lb-n{right:4px;top:50%;transform:translateY(-50%)}
.lb button:hover{color:var(--coral)}

@media (prefers-reduced-motion:reduce){
	.lb,.lb-stage,.lb-cap{transition:none}
}