/* GATHERING 2026 : painting header with live lettering over the sky */
/* shared by /gigs/gathering-2026.shtml, the home page panel and the mobile page (/gigs/briefs/gathering-2026-home.html) */
/* cqi = 1% of the header's width, so the lettering scales with the painting like a poster */
.hero {
	container-type:inline-size;
	position:relative;
	max-width:44em;
	margin:0em auto 1.5em auto;
	border-radius:1em;
	overflow:hidden;
	background-color:#d9d0e2; /* painting's sky while it loads */
}
.hero img {display:block; width:100%; height:auto; margin:0em; padding:0em; border:none;}
/* centred lettering across the top of the sky */
.hero .title {
	position:absolute;
	top:3.5cqi; left:3cqi; right:3cqi;
	margin:0em; padding:0em; max-width:none;
	font-family:'Marhey',ui-sans-serif,sans-serif;
	line-height:1.05;
	text-align:center;
	/* soft paper-coloured halo lifts the ink off the watercolour texture */
	text-shadow:0 0 0.12em #fbf6ea, 0 0 0.5em rgba(251,246,234,0.9);
}
.hero .title span {display:block;}
.hero .encore {font-size:4.2cqi; font-weight:600; color:#17602f;}
.hero .name {font-size:7cqi; white-space:nowrap; font-weight:700; color:#16131f;}
.hero .venue {font-size:max(0.8rem, 2.8cqi); font-weight:500; color:#4a2f6e; margin-top:0.6cqi;}
/* one dark chip per day, then the tickets button, along the foot of the painting */
.hero .chips {
	position:absolute;
	left:0em; right:0em; bottom:4cqi;
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:1.5cqi;
	margin:0em; padding:0em; max-width:none;
}
.hero .chip, .hero .chip time {font-size:max(0.8rem, 2.2cqi); font-weight:normal; color:#fafafa;} /* site css greys <time> */
.hero .chip {
	padding:0.3em 0.9em;
	border-radius:2em;
	background-color:rgba(13,13,13,0.7);
	-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
	white-space:nowrap;
}
.hero .chip time {font-size:inherit;}
.hero .chip b {color:#5ef7f7; font-weight:600;}
.hero a.go {
	padding:0.3em 1.1em;
	border-radius:2em;
	background-color:#00f790;
	color:#0d0d0d;
	font-size:max(0.8rem, 2.2cqi);
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
}
.hero a.go:hover, .hero a.go:focus-visible {background-color:#5ef7f7; color:#0d0d0d;}
/* phones : the chips drop below the painting onto a dark strip */
@container (max-width:30em) {
	.hero .chips {position:static; padding:0.8em; background-color:#151515;}
}