/* fidl2.css - v1.03 - written by claude.ai under the direction of FC at 2026-08-15 17:03 (Vienna, UTC+2)
   Test stylesheet for index2.php / live2.php. Same look as fidl.css, different plumbing:
   every repeated number now comes from one variable, and the six negative margins are gone. */

/* Self-hosted so no visitor IP goes to Google. Files live in FIDL/fonts/ -
   see the note in the chat for which four to download and what to rename them to. */
@font-face{
	font-family: 'Barlow Condensed';
	src: url('fonts/barlow-condensed-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Barlow Condensed';
	src: url('fonts/barlow-condensed-500.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Barlow Semi Condensed';
	src: url('fonts/barlow-semi-condensed-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
	font-family: 'Barlow Semi Condensed';
	src: url('fonts/barlow-semi-condensed-400i.woff2') format('woff2');
	font-weight: 400; font-style: italic; font-display: swap;
}

:root{
	--font-body: 'Barlow Semi Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
	--font-nav:  'Barlow Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;

	--bg:            #000000;
	--fg:            #ffffff;
	--accent:        #b9aeac;   /* links, dates, subtitle */
	--rule:          #686869;   /* hairlines: year rules, merch borders, buttons, frame */
	--menu-bg:       #6b6462;   /* nav bar - warm, same family as the accent */
	--menu-line:     #7b7472;   /* crosshatch across the bar */
	--menu-fg:       #000000;   /* nav labels - flip to #fff if the bar goes dark */

	--flyer-max:     550px;     /* longest edge of a flyer on the wall.
	                               MUST match $ThumbEdge in FIDL.ps1 */
	--wall-width:    85vw;      /* how wide the flyer wall is allowed to get */
	--flyer-gap:     10px;
	--content-width: 1200px;
	--upcoming-max:  700px;

	--muted:         #8a8a8a;   /* flyer captions, footnotes */
	--bc-bg:         #2f2f2f;   /* the bandcamp player's own greys */
	--bc-link:       #e0421f;   /* release name, as the player had it */
	--bc-btn-bg:     #4a4a4a;   /* play button. swap these two to invert it */
	--bc-btn-fg:     #e6e6e6;
	/* the two-disc listing keeps a wider cover: its art is 150x135, not square */
	--bc-text:       #b3b3b3;
	--frame:         var(--rule);      /* colour of the hatch in the announce frame */
	--frame-band:    4px;              /* thickness of the hatched border band */
	--frame-line-w:  2px;              /* line thickness inside the band */
	--frame-line-gap: 9px;             /* grid spacing inside the band */
	--frame-pad:     1.4em 2em 1.8em;
	/* Gap under the ribbon. It lives here rather than as a margin on ul#menu, because
	   that margin collapses against the content's own margin-top and the larger of the
	   two simply wins - which is why adding 20px there changed nothing. */
	--ribbon-gap:    calc(1.25em + 10px);

	--tab-line:      var(--menu-bg);  /* crosshatch on the current nav tab */
	--tab-line-w:    2px;
	--tab-line-gap:  9px;
	--tab-line-x:    0;         /* nudges the crosshatch sideways */
	--tab-line-y:    3px;       /* and downwards - shifts where the first line lands */
	--nav-pad:       8px;
}

/* ---------- resets ---------- */

/* Without this, a max-width in vw is the *content* width and the border and padding
   are added on top - which is how the announce box ended up wider than the screen. */
*, *::before, *::after{
	box-sizing: border-box;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- page ---------- */

body{
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	/* 18px, not 17: at exactly 17px Barlow's period rasterises a few px above the
	   baseline. Not a spacing bug - the glyph is drawn in the wrong place at that
	   size. Check punctuation before changing this value. */
	font-size: 18px;
	max-width: 100%;            /* not 100vw - that includes the scrollbar and overflows */
	margin: 0;
}

a, a:link, a:visited{
	color: var(--accent);
}

p{
	text-align: center;
}

p#copyright{
	text-align: right;
	margin-bottom: -5px;
}

#main-contents{
	max-width: 100%;
	padding-bottom: 1em;
}

footer{
	padding: 0 5px 0.5em 0;
}

/* ---------- header ---------- */

/* The markup carries several <br> tags for spacing. They are switched off here so the
   gaps are set in one place and can be halved without editing the php. */
#header br,
br#spacer2{
	display: none;
}

#header{
	text-align: center;
	padding: 0.5em 0 0;
}

#header picture{
	display: block;
}

img#headerlogo{
	width: 400px;
	max-width: 70vw;
}

p#subtitle{
	color: var(--fg);
	margin: 0.22em auto calc(1.77em + 10px);
}

/* ---------- nav ---------- */

ul#menu{
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	overflow: hidden;
	background-color: var(--menu-bg);
	background-image:
		repeating-linear-gradient(45deg,  var(--menu-line) 0 var(--tab-line-w), transparent var(--tab-line-w) var(--tab-line-gap)),
		repeating-linear-gradient(-45deg, var(--menu-line) 0 var(--tab-line-w), transparent var(--tab-line-w) var(--tab-line-gap));
	/* the same offset the tab strip uses - move one without the other and the two
	   hatches stop agreeing */
	background-position: var(--tab-line-x) var(--tab-line-y),
	                     var(--tab-line-x) var(--tab-line-y);
	font-family: var(--font-nav);
	font-weight: 500;
	font-size: 1.05em;
	letter-spacing: 0.06em;
}


ul#menu > li{
	flex: 0 0 16%;
}

ul#menu > li.spacer{
	flex: 0 0 10%;
}

/* The tab's hatch is drawn by a strip as wide as the whole bar, shifted so it starts
   where the bar's own hatch starts. The two are then in phase and the diagonals run
   straight through - no viewport anchoring, so nothing moves when the page scrolls.
   The layout makes the arithmetic exact: a spacer is 10% of the bar and a tab 16%,
   so a tab's left edge sits 0.625 tab-widths in, and one tab-width further for each
   tab after it. The numbers are percentages of a tab, because that is what a child's
   percentage resolves against. */
ul#menu > li > a::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 625%;                     /* 100% / 16% - the width of the whole bar */
	opacity: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(45deg,  var(--tab-line) 0 var(--tab-line-w), transparent var(--tab-line-w) var(--tab-line-gap)),
		repeating-linear-gradient(-45deg, var(--tab-line) 0 var(--tab-line-w), transparent var(--tab-line-w) var(--tab-line-gap));
	background-position: var(--tab-line-x) var(--tab-line-y),
	                     var(--tab-line-x) var(--tab-line-y);
}

ul#menu > li:nth-child(2) > a::before{ left: -62.5%; }
ul#menu > li:nth-child(3) > a::before{ left: -162.5%; }
ul#menu > li:nth-child(4) > a::before{ left: -262.5%; }
ul#menu > li:nth-child(5) > a::before{ left: -362.5%; }
ul#menu > li:nth-child(6) > a::before{ left: -462.5%; }

ul#menu > li > a:hover::before,
ul#menu > li.current > a::before{
	opacity: 1;
}

ul#menu .lbl{
	position: relative;
	z-index: 1;
}

ul#menu > li > a,
ul#menu > li > a:link,
ul#menu > li > a:visited{
	color: var(--menu-fg);
	position: relative;
	overflow: hidden;
	display: block;
	text-align: center;
	/* one px more below than above, which optically centres the caps */
	padding: calc(var(--nav-pad) - 1px) 0 calc(var(--nav-pad) + 1px);
	text-decoration: none;
}

/* The current page is a hole cut in the ribbon. It used to draw its own crosshatch
   on top of the bar's, which meant two patterns starting from two different origins
   and the diagonals breaking at every tab edge. Now the bar paints the hatch once,
   across its whole width, and a tab only darkens what is already there - so the
   pattern runs unbroken from one end to the other and the tab still reads as a hole.
   The four-way text-shadow keeps the label readable where a line crosses a letter. */
ul#menu > li > a:hover,
ul#menu > li.current > a,
ul#menu > li.current > a:hover{
	background-color: #000000;
	color: var(--fg);
	text-shadow:
		 1px  1px 0 #000, -1px  1px 0 #000,
		 1px -1px 0 #000, -1px -1px 0 #000;
}

/* ---------- upcoming block on the front page ---------- */

#announcewrap{
	text-align: center;
	margin-top: var(--ribbon-gap);
	margin-bottom: 2.4em;   /* the first release sat right under the box */
}

/* Border band filled with the same diagonal hatch as the nav tab. The first background
   layer paints the inside black up to the padding edge; the second paints the band. */
p#announce{
	display: inline-block;        /* shrink-wraps to the widest line instead of filling */
	text-align: center;
	border: var(--frame-band) solid transparent;
	background:
		linear-gradient(var(--bg), var(--bg)) padding-box,
		repeating-linear-gradient(45deg,
			var(--frame) 0 var(--frame-line-w),
			var(--bg) var(--frame-line-w) var(--frame-line-gap)) border-box;
	padding: var(--frame-pad);
	max-width: 92vw;
	margin: 0;
}

.upcoming-row{
	display: block;
}

.upcoming-date{
	color: var(--accent);
	font-weight: 500;
}

.upcoming-what{
	font-style: italic;
}

img.upcomingflyer{
	max-height: var(--upcoming-max);
	max-width: 100%;
	margin-top: 1.5em;
	cursor: pointer;
}

/* ---------- gig archive ---------- */

#archive{
	max-width: var(--content-width);
	margin: var(--ribbon-gap) auto 0;
	padding: 0 1em;
}

#stats{
	text-align: center;
	color: var(--fg);
	margin-bottom: 0.6em;
}

#grow{
	color: var(--muted);
	font-size: 80%;
}

#grow a{
	color: var(--muted);
	text-decoration: underline;
}

#grow a:hover{
	color: var(--accent);
}

table#gigs{
	width: auto;                  /* shrink to the longest gig line, so the year rule matches it */
	margin: 0 auto;
	border-collapse: collapse;
}

table#gigs td{
	vertical-align: top;
	padding: 2px 0;
}

table#gigs td.date{
	color: var(--accent);
	font-weight: 500;
	white-space: nowrap;
	padding-right: 0;
}

table#gigs td.gig{
	font-style: italic;
}

table#gigs tr.yearsep td{
	padding: 1em 0 0.15em;
	color: var(--muted);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.08em;
	border-bottom: 1px solid var(--rule);
}

table#gigs td.date a.toflyer{
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px dotted var(--rule);
}

table#gigs td.date a.toflyer:hover{
	color: var(--fg);
	border-bottom-color: var(--fg);
}

table#gigs sup{
	color: var(--muted);
	font-size: 60%;
}

p#footnotes{
	color: var(--muted);
	font-size: 68%;
	margin-top: 2em;
}

p#wallintro{
	color: var(--muted);
	font-size: 85%;
	margin: 2.5em 0 0;
}

p#footnotes sup{ font-size: 90%; }

/* ---------- flyer wall ---------- */

#flyers{
	width: var(--wall-width);
	margin: 3em auto 0;
}

ul#flyerwall{
	display: flex;
	flex-wrap: wrap;
	gap: var(--flyer-gap);
	align-items: center;          /* posters of different heights sit on a shared centre line */
	justify-content: center;
}

ul#flyerwall > li{
	max-width: var(--flyer-max);
	text-align: center;
}

ul#flyerwall img{
	display: block;
	max-height: var(--flyer-max);
	max-width: var(--flyer-max);
	height: auto;                 /* with the width/height attributes present this
	                                 keeps the aspect ratio and reserves the space */
	margin: 0 auto;
	cursor: pointer;
}

#lbcap{
	flex: 0 0 auto;
	align-self: center;      /* the caption is narrower than the frame, so it has to
	                            be centred in its own right, not just internally */
	width: 100%;
	max-width: 94vw;
	margin: 0 auto;
	padding: 0.7em 1em 0;
	text-align: center;
}

#lbcap .lbdate{
	color: var(--accent);
	font-weight: 500;
}

#lbcap .lbline{
	white-space: pre-line;      /* merch captions carry their own line breaks */
	color: var(--fg);
	font-style: italic;
}

#sentinel{
	height: 1px;
}

ul#flyerwall > li.hidden{
	display: none;               /* lazy images inside a hidden li are never fetched */
}

#morewrap{
	text-align: center;
	margin: 2em 0;
}

button#more{
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--rule);
	font-family: inherit;
	font-size: 1em;
	padding: 0.6em 1.6em;
	cursor: pointer;
}

button#more:hover{
	background: var(--rule);
	color: #000000;
}

/* ---------- lightbox ---------- */

#lightbox{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 100;
	cursor: zoom-out;
	text-align: center;
}

#lightbox.open{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The scroll box has to be the full viewport width. If it shrink-wraps to the
   unzoomed image it keeps that width when zoomed, and you get a scrollbar while
   half the screen sits empty either side. */
#lbinner{
	display: flex;
	flex-direction: column;
	width: 100vw;
	max-height: 100vh;
	max-height: 100dvh;           /* phone browsers count the url bar in 100vh */
}

#lbscroll{
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow: auto;
	display: flex;
}

#lightbox img{
	margin: auto;                 /* centres without making the top unreachable when zoomed;
	                                 align-items:center on a scroll container clips the start */
	max-width: 94vw;
	max-height: 88vh;             /* leaves room for the caption underneath */
	cursor: zoom-in;
}

#lightbox img.zoomed{
	max-width: none;              /* full resolution, pan by scrolling */
	max-height: none;
	cursor: zoom-out;
}

#lightbox .lb-close{
	position: absolute;
	top: 0.5em;
	right: 0.8em;
	color: var(--accent);
	font-size: 2em;
	line-height: 1;
}

/* ---------- media pages ---------- */

/* The video wall uses the full wall width, like the flyer wall - capping it at the
   text column is what squeezed three tiles down to two. */
#media{
	width: var(--wall-width);
	max-width: 1400px;      /* three across on a wide screen, not four or five */
	margin: 0 auto;
	text-align: center;
}

#releases{
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1em;
	text-align: center;
}

p.mediahead{
	margin: 2.2em 0 1em;
}

/* Back to flex, but with the column count stated rather than inferred: a grid always
   fills its columns from the left, so a row of two under a row of three sat off to
   one side. Flex with justify-content centres a short last row. */
ul#video{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

ul#video > li{
	flex: 0 0 calc((100% - 28px) / 3);
	min-width: 0;
}

@media only screen and (max-width: 1100px){
	ul#video > li{ flex-basis: calc((100% - 14px) / 2); }
}

ul#video iframe,
button.ytbox{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Stands in for a YouTube player until it is clicked, so nothing is requested from
   Google on page load. Laid out like the player it replaces: title along the top,
   play button in the middle, source at the foot. */
button.ytbox{
	position: relative;
	display: block;
	font-family: inherit;
	background-color: #000;
	background-image:
		repeating-linear-gradient(45deg,  var(--rule) 0 2px, transparent 2px 14px),
		repeating-linear-gradient(-45deg, var(--rule) 0 2px, transparent 2px 14px);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
}

/* A scrim behind the title, because a poster frame can be any brightness and white
   text on the pale ones was unreadable. */
button.ytbox::before{
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5em;
	background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0));
	pointer-events: none;
}

button.ytbox .medialabel{
	position: absolute;
	top: 0.5em;
	left: 0.8em;
	right: 0.8em;
	text-align: left;
	font-style: normal;
	text-shadow: 0 1px 3px #000;
}

button.ytbox .mtitle{
	display: block;
	font-weight: 700;
	font-size: 13pt;
	line-height: 1.2;
	max-height: 2.4em;
	overflow: hidden;
}

/* directly under the title, smaller and quieter - the way a player labels a channel */
button.ytbox .mchan{
	display: block;
	margin-top: 0.05em;
	margin-left: 3px;
	font-size: 10pt;
	line-height: 1.3;
	color: #c9c9c9;
}

button.ytbox .platform{
	position: absolute;
	right: 0.8em;
	bottom: 0.55em;
	margin: 0;
	font-size: 7pt;
	letter-spacing: 0.1em;
	color: var(--fg);
}

/* A plain play button, not YouTube's mark - drawn here rather than borrowed. */
button.ytbox .ytplay{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	border-radius: 12px;
	background: #cc1a1a;
	text-shadow: none;
	transition: background 0.12s;
}

button.ytbox .ytplay::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}

button.ytbox:hover .ytplay{
	background: #e62117;
}

/* With a cached still behind it the hatching is hidden and the art shows through,
   dimmed a little so the play glyph stays readable. */
button.ytbox.haspreview{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 0 999px rgba(0,0,0,0.35);
}

button.ytbox:hover{
	box-shadow: inset 0 0 0 999px rgba(0,0,0,0.10);
}





/* Deliberately not sized in em. This rule used to set font-size: 2.4em, and the
   button below is sized in em too, so the two multiplied and the play button came
   out nearly three times its intended size. Pixels here mean one fixed size at any
   window width, which is what it should be. */
.ytplay{
	color: var(--accent);
	line-height: 1;
}

/* Laid out like the player it replaces: size=large with artwork=small put a small
   square cover at the left, the release name and its label beside it, and the
   tracklist underneath. The heights are the originals, so the page keeps its rhythm.
   Sizes are in px on purpose - .bcplay used to set font-size in em and everything
   sized against it compounded, which is what made the video button enormous. */
.bcbox{
	position: relative;
	width: 400px;             /* the width the players were, so the page keeps its rhythm */
	max-width: 95vw;
	margin: 0 auto;
	background-color: var(--bc-bg);
	color: var(--bc-text);
	/* the players were Arial, not the site face - keeping that so the boxes read as
	   the thing they replace rather than as part of the page around them */
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #4a4a4a;
	cursor: pointer;
	overflow: hidden;
	text-align: left;
}

.bccover{
	position: absolute;
	top: 0;
	left: 0;
	width: 118px;
	height: 118px;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	border-right: 1px solid #4a4a4a;
	border-bottom: 1px solid #4a4a4a;
}

.bcmeta{
	position: absolute;
	top: 6px;
	left: 126px;
	right: 10px;
}

/* No cover: the artwork is already on the page as a full picture just above, so the
   text takes the width the cover would have used. */
.bcbox.noart .bcmeta{
	left: 10px;
}

.bcaction{
	float: right;
	color: var(--bc-link);
	font-size: 9pt;
}

.bcbox .mtitle{
	display: block;
	font-weight: 700;
	font-size: 13px;
	line-height: 26px;
	color: var(--bc-link);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bcbox .mchan{
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
	color: var(--bc-text);
	/* a five-artist split runs off the end; one row with an ellipsis, like the title */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* One row rather than two absolutely placed pieces: positioning the button and the
   bar separately meant every change to one had to be mirrored in the other, and they
   drifted out of line. */
.bctransport{
	position: absolute;
	top: 62px;
	margin-top: -3px;
	left: 126px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bcbox.noart .bctransport{ left: 10px; }

.bcplay{
	flex: 0 0 auto;
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 2px;
	background: var(--bc-btn-bg);
	line-height: 1;
}

.bcplay::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent var(--bc-btn-fg);
}

.bcbox:hover .bcplay{ background: #5e5e5e; }

.bcbar{
	flex: 1 1 auto;
	position: relative;
	height: 16px;
	background: #4a4a4a;
	border-radius: 3px;
	overflow: hidden;
}

/* Says what a click does, in the place a progress bar would be. Nothing is loaded
   from Bandcamp until then, so the bar is decoration and this is the honest use
   of the space. */
.bcnote{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 7.5pt;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #cfcfcf;
	white-space: nowrap;
	overflow: hidden;
}

/* The tracklist fills what is left, exactly as it did in the player. */
/* The first divider is drawn on the list rather than the row, so it runs the full
   width of the box while the ones below it stay inside the inset. */
ol.bctracks{
	border-top: 1px solid #3a3a3a;
	position: absolute;
	top: 118px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	/* inset, so the dividers stop short of the box edges the way the player's did.
	   The 3px at the top is the gap under the full-width divider above the first row. */
	padding: 3px 11px 0 14px;
	overflow: hidden;
	font-size: 9pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
}

/* One background throughout, not banded rows - the player never striped them, and
   the separators are doing that job already. */
ol.bctracks > li{
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 3px 0 0 0;
	height: 33px;
	line-height: 30px;
	border-top: 1px solid #3a3a3a;
}

ol.bctracks > li:first-child{ border-top: 0; }

ol.bctracks .tn{ width: 26px; margin-left: -10px; text-align: right; flex: 0 0 auto; }
ol.bctracks .tt{ flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
ol.bctracks .td{ margin-right: 10px; flex: 0 0 auto; }



.medialabel{
	display: block;
	color: var(--fg);
	font-size: 0.82em;
	font-style: italic;
	line-height: 1.25;
	padding: 0 0.8em;
	text-shadow: 0 0 6px #000, 0 0 3px #000;
}

/* Says which service the click will contact, before it is contacted. */
.platform{
	display: block;
	margin-top: 0.35em;
	color: var(--accent);
	font-size: 0.68em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 0 6px #000, 0 0 3px #000;
}

/* Exactly the width of the box it replaces. Anything else makes the page jump the
   moment someone presses play. */
iframe.bcplayer{
	width: 400px;
	max-width: 95vw;
	border: 0;
	display: block;
	margin: 0 auto;
}

img.release{
	max-width: 75%;
	cursor: pointer;
}

/* ---------- merch ---------- */

/* Three across at most, stated rather than inferred - a flex-basis alone decides the
   column count by arithmetic, and it drifted to two and to four while the video wall
   was being built. */
ul#merch{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
	width: var(--wall-width);
	max-width: 1400px;
	margin: 1.5em auto;
}

ul#merch > li{
	flex: 0 0 calc((100% - 36px) / 3);
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 16px 16px 18px;
	/* The same hatched band as the announce box on the front page. First layer paints
	   the inside up to the padding edge, second paints the band itself. */
	border: var(--frame-band) solid transparent;
	background:
		linear-gradient(var(--bg), var(--bg)) padding-box,
		repeating-linear-gradient(45deg,
			var(--frame) 0 var(--frame-line-w),
			var(--bg) var(--frame-line-w) var(--frame-line-gap)) border-box;
}

ul#merch > li img{
	max-width: 100%;
	height: auto;
	cursor: pointer;
}

/* The same diagonal hatch as the frame and the nav bar, as a rule rather than a
   band: a strip of the repeating gradient with nothing drawn around it. */
hr.hatch{
	border: 0;
	height: var(--frame-band);
	margin: 14px 0 0;
	background: repeating-linear-gradient(45deg,
		var(--frame) 0 var(--frame-line-w),
		var(--bg) var(--frame-line-w) var(--frame-line-gap));
}

/* Most of the way out to the card's edges, but not all: meeting the hatched band
   exactly made two diagonal patterns touch, and where their lines disagreed it read
   as a mistake. A few pixels of black on each side separates them. */
ul#merch > li hr.hatch{
	margin-left: -10px;
	margin-right: -10px;
}

ul#merch p.desc{
	flex: 1 1 auto;
	font-size: 0.92em;
	color: var(--fg);
	margin: 0.9em 0 0.5em;
	line-height: 1.35;
}

ul#merch p.price{
	margin: 0;
	color: var(--accent);
	font-size: 1.05em;
}

@media only screen and (max-width: 1100px){
	ul#merch > li{ flex-basis: calc((100% - 18px) / 2); }
}

/* ---------- narrow screens ---------- */

@media only screen and (max-width: 1200px){

	:root{
		--flyer-max:  95vw;      /* one flyer per row, full width */
		--wall-width: 95vw;
	}

	/* Five equal items across the full width. The spacers frame the bar nicely on a
	   desktop and just eat 20% of a phone screen, so they go. --nav-pad is deliberately
	   NOT overridden here: the bar must be the same height as on desktop, or the
	   crosshatch ends up with a different number of rows. */
	ul#menu > li{ flex: 1 1 0; }
	ul#menu > li.spacer{ display: none; }

	ul#flyerwall{ gap: 1.2em; }

	ul#video > li{ flex: 0 0 100%; max-width: 100%; }

	ul#merch > li{ flex: 0 0 100%; }

	/* Two narrow columns turn long gig lines into a column of single words.
	   Stacking the date above its entry gives the text the full width. */
	table#gigs, table#gigs tbody, table#gigs tr, table#gigs td{
		display: block;
		width: 100%;
	}
	table#gigs tr{ margin-bottom: 0.7em; }
	table#gigs td.date{ padding: 0; }
	table#gigs tr.yearsep td{ padding: 0.8em 0 0.15em; }

	/* Same treatment as the archive: date on its own line, entry underneath. */
	.upcoming-row{ margin-bottom: 0.7em; }
	.upcoming-date{ display: block; }

	/* Line up with the outer edge of the announce frame, which sits at 4vw. */
	p.intro{ padding: 0 4vw; }

	#grow{ display: block; margin-top: 0.9em; font-size: 100%; }

	#lightbox img{ max-height: 76vh; max-height: 76dvh; }

	/* The oneliner should use the full width it can get; the subtitle must stay
	   narrower than the logo above it, which it did not always do before. */
	img#headerlogo{ width: auto; max-width: 95vw; }

	/* The logo is sized in vw, so the subtitle is too - that keeps it at roughly
	   90% of the logo width at any screen size instead of a fixed em that drifts. */
	/* 10px less above the ribbon than on desktop */
	p#subtitle{ font-size: clamp(12px, 3.5vw, 24px); max-width: 95vw; margin-top: 0; margin-bottom: calc(1.77em - 10px); }
	#header{ padding-top: 10px; }
}

@media only screen and (min-width: 1201px) and (max-width: 1443px){
	ul#merch > li{ max-width: 45vw; }
}

@media only screen and (max-width: 1200px) and (orientation: portrait){
	img#headerlogo{ max-width: 88vw; }
}





/* ---------- streaming, under the two releases that were distributed --------------
   It sat in the footer as one list for the whole page, which implied every release
   was on those services. Only the two albums were. */
div.streamrow{
	max-width: 400px;   /* the width of the players it sits under */
	margin: 0.5em auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.3em 0.9em;
}

span.streamlab{
	flex: 1 1 100%;
	text-align: center;
	margin-bottom: 0.5em;
	color: var(--muted);
	font-family: var(--font-nav);
	font-size: 0.9em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

ul.streams{
	/* The row is itself a flex item inside .streamrow, and without this it was sized
	   from its content and left narrow - which is what wrapped six services into two
	   columns however wide the row around it was. */
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 5px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}

/* An <img> renders the svg's own colours and cannot be restyled from outside, which
   is why the Bootstrap glyphs came out the same dark as the page. Used as a mask the
   file supplies only the shape and the colour comes from here - so each service can
   carry its own. */
/* Inline vectors, not masks. The colour comes from `color` because every explicit
   black in the sprite was turned into currentColor when it was built. Drawn at
   device resolution, so nothing is resampled and a stroke stays a stroke. */
/* --------------------------------------------------------------------------------
   Size and stroke weight in one block. stroke-width is inherited, so the value set
   here reaches the shadow content of each <use>; the sprite states none of its own.
   Each icon is drawn on its own grid, so a stroke has to be given per icon rather
   than shared: the number is in that icon's user units, and lands on screen at
   number / viewBox-width * --svc-size.

   Currently 33px with strokes of 16 / 8 / 2, settled by looking rather than by
   arithmetic - 32 and 34 both looked thinner at the same weights.
   -------------------------------------------------------------------------------- */
ul.streams .svc{
	/* 33, chosen by eye. 32 and 34 both read thinner, which is what happens when a
	   stroke lands either side of a pixel boundary rather than on one. */
	--svc-size: 33px;
	display: block;
	width: var(--svc-size);
	height: var(--svc-size);
	overflow: visible;
}

ul.streams .svc-apple-music{ stroke-width: 16; }
ul.streams .svc-qobuz{       stroke-width: 8; }
ul.streams .svc-tidal{       stroke-width: 2; }

/* Matched at the same weight as the rule above, or that one wins on specificity and
   every mark inherits the link's white - which is exactly what happened. */
ul.streams .svc-spotify{       color: #1db954; }
ul.streams .svc-apple-music{   color: #fa243c; }
ul.streams .svc-youtube-music{ color: #ff0000; }
ul.streams .svc-deezer{        color: #a238ff; }
/* Tidal's mark is black, which would be invisible here, so it takes their white */
ul.streams .svc-tidal{         color: #ffffff; }
ul.streams .svc-qobuz{         color: #2c9bd6; }

ul.streams a:hover .svc{
	color: var(--accent);
}

/* one width for every service, so the row reads as a row rather than as words of
   different lengths that happen to sit next to each other */
/* Six across a 400px row: fixed width so they read as a row, but sized from that
   width rather than chosen independently of it. */
ul.streams > li{
	display: flex;
	align-items: center;
	flex: 0 0 62px;
	justify-content: center;
}

ul.streams > li > a{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
}

/* Both this and the full list below are 0.64em of the row. They used to be 0.8em of
   two different things - the list for one, the row for the other - which is how they
   ended up different sizes while looking identical in the file. */
.svcname{
	font-size: 0.64em;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
}

details.moretail{
	flex: 1 1 100%;
	text-align: center;
	margin-top: 0.2em;
}

details.moretail summary{
	cursor: pointer;
	color: var(--muted);
	font-size: 0.9em;
	letter-spacing: 0.04em;
	/* under the words rather than across the row, and dashed so it reads as
	   "there is more here" rather than as a link */
	text-decoration: underline dashed;
	text-underline-offset: 3px;
	list-style: none;
}

details.moretail summary::-webkit-details-marker{ display: none; }

details.moretail[open] p{
	margin: 0.6em auto 0;
	max-width: 560px;   /* wide enough that the last name is not alone on its line */
	font-size: 0.64em;
	letter-spacing: 0.04em;   /* the same tracking the names carry, or it reads thinner */
	line-height: 1.7;
	color: var(--fg);
}

/* titles and labels are links now, but quiet ones - the box is still the thing you
   click to load the player */
.bcbox .mtitle a{ color: inherit; text-decoration: none; }
.bcbox .mtitle a:hover{ text-decoration: underline; }
.bcbox .mchan a{ color: inherit; text-decoration: none; border-bottom: 1px solid #4a4a4a; }
.bcbox .mchan a:hover{ color: var(--fg); }

ul.streams a{
	color: var(--fg);
	text-decoration: none;
}

ul.streams a:hover{
	color: var(--accent);
}

ul.streams li.more a{
	color: var(--muted);
	border-bottom: 1px solid var(--rule);
}


/* ---------- a release with no player ---------------------------------------------
   Same box, minus the transport: there is nothing to load, so pretending otherwise
   would be a button that does nothing. */
.bcbox.static{
	cursor: default;
	border-style: dashed;
}

/* Says outright that there is no player here. The dashed border carries the same
   message for anyone who reads shapes rather than words. */
.bctag{
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 9px;
	background: #4a4a4a;
	color: #d8d8d8;
	font-size: 7pt;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bcstatic{
	position: absolute;
	top: 62px;
	left: 126px;
	right: 12px;
	font-size: 8.5pt;
	line-height: 1.4;
	color: var(--bc-text);
}

/* The art is 150x135, not square: a square slot with background-size cover would
   crop it. Same height, wider slot, contained rather than cropped - and everything
   to its right shifts by the difference. */
.bcbox.twodisc .bccover{
	top: 5px;
	left: 5px;
	width: 131px;
	height: 118px;
	background-size: contain;
}

.bcbox.twodisc .bcmeta,
.bcbox.twodisc .bcstatic{
	left: 139px;
}

/* A 26-track double CD in one column would be a 1000px block. Two columns halves it
   and happens to put one disc beside the other - but two columns of long artist and
   title strings need a wider box than a normal release, so this one gets one. */
.bcbox.twodisc{
	width: 760px;
	max-width: 95vw;
}

.bcbox.twodisc ol.bctracks{
	columns: 2;
	column-gap: 26px;
	font-size: 8.5pt;
}

.bcbox.twodisc ol.bctracks > li{
	break-inside: avoid;
}

/* The second column starts a fresh run of rows, so its first one draws a rule with
   nothing above it. There are thirteen tracks a disc, so that is item fourteen. */
.bcbox.twodisc ol.bctracks > li:nth-child(14){
	border-top: 0;
}

.bcbox.twodisc ol.bctracks .tn{
	width: 34px;
	margin-left: -6px;
}

/* our own track, so it is findable in a list of twenty-six */
ol.bctracks > li.us .tt{
	color: var(--fg);
}


/* ---------- mobile ---------------------------------------------------------------
   Everything here exists because it was wrong on a phone, not because it is wrong
   in general. */
@media only screen and (max-width: 700px){

	/* The spacers are hidden here, so a tab is a fifth of the bar rather than 16%.
	   The vertical offset differs from the desktop one because the bar's padding
	   does, and the strip is measured from the tab rather than from the bar. */
	ul#menu{ position: static; }
	:root{ --tab-line-y: 0.5px; }

	ul#menu > li > a::before{ width: 500%; }
	ul#menu > li:nth-child(2) > a::before{ left: 0; }
	ul#menu > li:nth-child(3) > a::before{ left: -100%; }
	ul#menu > li:nth-child(4) > a::before{ left: -200%; }
	ul#menu > li:nth-child(5) > a::before{ left: -300%; }
	ul#menu > li:nth-child(6) > a::before{ left: -400%; }

	/* 400px wide with a 95vw cap still overflowed the padded column it sits in, so
	   the boxes had air on the left and none on the right. */
	.bcbox,
	iframe.bcplayer,
	.bcbox.twodisc{
		width: 100%;
		max-width: 100%;
	}

	div.streamrow{ max-width: 100%; }

	/* the notice was being cut off mid-word */
	.bcnote{ font-size: 6.5pt; letter-spacing: 0.03em; }
	.bcbox .mtitle{ font-size: 12px; }
	.bcbox .mchan{ font-size: 11px; }
	ol.bctracks{ font-size: 8pt; }
	.bcstatic{ font-size: 7.5pt; }

	/* Two columns of a 26-track double CD on a phone is unreadable. One column, and
	   a row is allowed to take the two lines it needs. */
	.bcbox.twodisc{ height: auto !important; }

	.bcbox.twodisc ol.bctracks{
		columns: 1;
		position: static;
		padding: 3px 10px 0 12px;
	}

	.bcbox.twodisc ol.bctracks > li{
		height: auto;
		min-height: 33px;
		line-height: 1.35;
		padding: 6px 0;
		flex-wrap: wrap;
	}

	.bcbox.twodisc ol.bctracks .tt{
		white-space: normal;
		flex: 1 1 100%;
		order: 2;
	}

	.bcbox.twodisc ol.bctracks .tn{ order: 1; }
	.bcbox.twodisc ol.bctracks .td{ order: 1; margin-left: auto; }

	/* nth-child(14) is only the top of the second column when there are two */
	.bcbox.twodisc ol.bctracks > li:nth-child(14){ border-top: 1px solid #3a3a3a; }

	.bcbox.twodisc .bccover,
	.bcbox.twodisc .bcmeta,
	.bcbox.twodisc .bcstatic{ position: static; }

	.bcbox.twodisc .bccover{ width: 131px; height: 118px; margin: 10px auto 6px; }
	.bcbox.twodisc .bcmeta,
	.bcbox.twodisc .bcstatic{ left: auto; right: auto; padding: 0 12px; text-align: center; }

	/* centred rather than left-hugging, everywhere it matters */
	#media, #releases{ width: 100%; padding: 0 0.6em; }
	ul.streams{ justify-content: center; }

	/* a phone is narrower than the 397px the desktop row needs, so the six are
	   sized from the width available rather than from a fixed number */
	ul.streams > li{ flex: 0 0 15.6%; }
	ul.streams{ gap: 4px 1%; }
	.svcname{ font-size: 0.58em; }

	/* the release photos take the full column here, not three quarters of it */
	img.release{ max-width: 100%; }

}


/* A static box with no tracklist: the meta sits higher and the note takes the space
   a transport row and a list would have used. */
.bcbox.static .bcstatic b{
	color: var(--fg);
	font-weight: 500;
}

@media only screen and (max-width: 700px){
	.bcbox.static{ height: auto !important; min-height: 140px; }
	.bcbox.static .bccover,
	.bcbox.static .bcmeta,
	.bcbox.static .bcstatic{ position: static; }
	.bcbox.static .bccover{ margin: 10px auto 6px; }
	.bcbox.static{ text-align: center; }
	.bcbox.static .bcmeta,
	.bcbox.static .bcstatic{ padding: 4px 12px 10px; text-align: center; left: auto; right: auto; top: auto; }
	.bcbox.static .mtitle,
	.bcbox.static .mchan{ white-space: normal; text-align: center; }
	.bctag{ position: static; display: inline-block; margin: 8px auto 0; }
}


/* ---------- every box, inset the same -------------------------------------------
   The cover sits 5px in on all four sides and everything to its right lines up with
   that. This used to apply only to the boxes added later, which is why three of the
   original players still had theirs flush against the corner. */
.bcbox .bccover{
	top: 5px;
	left: 5px;
	width: 110px;
	height: 110px;
}

.bcbox .bcmeta,
.bcbox .bcstatic,
.bcbox .bctransport{
	left: 124px;
}

.bcbox.noart .bcmeta,
.bcbox.noart .bcstatic,
.bcbox.noart .bctransport{
	left: 10px;
}

/* the tracklist starts below the cover, wherever the cover now ends */
ol.bctracks{ top: 120px; }

/* the title starts below the corner tag rather than being cut short by it */
.bcbox.static .bcmeta{ top: 28px; }
.bcbox.static .bcstatic{ top: 78px; }
.bcbox.static.compact .bcmeta{ top: 24px; }
.bcbox.static.compact .mtitle{ line-height: 20px; }
.bcbox.static.compact .mchan{ line-height: 14px; }
.bcbox.static.compact .bcstatic{ top: 66px; font-size: 8pt; line-height: 1.4; }

@media only screen and (max-width: 700px){
	/* A span is inline by default; taking it out of absolute positioning put it back
	   that way, and width and height stopped applying - which is why the covers on
	   the two listings vanished on a phone. */
	.bcbox.static .bccover,
	.bcbox.twodisc .bccover{
		display: block;
	}

	.bcbox.static.compact{ height: auto !important; min-height: 120px; }

	/* it was sitting on top of the title */
	.bctag{ margin: 8px auto 14px; }
}


/* ---------- radio and streams, on the media page ---------------------------------
   Things that happened but have nothing to play: interviews, and the pre-recorded
   sets that went into the covid-era marathon streams. A live set on the radio is a
   gig and belongs in the archive instead.
   Styled as the gig table is, because it is the same kind of thing - a dated list of
   things that happened - and two different treatments for that would be a choice
   without a reason. */
table#radiolist{
	width: auto;
	margin: 1em auto 1.4em;
	border-collapse: collapse;
}

table#radiolist td{
	vertical-align: top;
	padding: 2px 0;
	text-align: left;   /* both columns, so the entries line up under each other */
}

table#radiolist td.date{
	color: var(--accent);
	font-weight: 500;
	white-space: nowrap;
	padding-right: 0.5em;
	text-align: right;
}

table#radiolist td.gig{
	font-style: italic;
}

table#radiolist a{
	color: inherit;
	border-bottom: 1px dotted var(--rule);
	text-decoration: none;
}

table#radiolist a:hover{
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* The recording, where one survived. Quiet as text but in the accent, with a small
   mark in front of it - a filled badge shouted, a tinted word at body size vanished
   into the sentence. */
a.cue{
	margin-left: 0.7em;
	font-family: var(--font-nav);
	font-style: normal;
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: gray;
}

/* the triangle sits inside the brackets and is set much larger than the words around
   it, so it reads as a play mark rather than as punctuation */
a.cue .pl{
	font-size: 2em;
	line-height: 0;
	vertical-align: -0.15em;
}

a.cue:hover{
	color: var(--fg);
}


@media only screen and (max-width: 700px){
	table#radiolist, table#radiolist tbody,
	table#radiolist tr, table#radiolist td{ display: block; }
	table#radiolist td.date{ padding-right: 0; text-align: center; }
	table#radiolist td.gig{ text-align: center; }
	table#radiolist tr{ padding-bottom: 0.5em; }
}