/* Header: animated blob logo overlapping the first section, pill menu top-right, full-screen menu on small screens. */
.sc-header { position: relative; z-index: 20; background: var(--sc-bg); }
.sc-header__inner { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: var(--header-h); }

/* The SVG box is square; the blob fills ~80% of it, so the box is nudged out to line the blob up with the gutter. */
.sc-brand { position: absolute; z-index: 2; left: calc(var(--gutter) - var(--logo-w) * 0.1); top: calc(var(--logo-w) * -0.04); width: var(--logo-w); line-height: 0; }
.sc-brand__logo { display: block; width: 100%; height: auto; }

.sc-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; padding-left: calc(var(--logo-w) * 0.9); }
.sc-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.sc-menu a {
	display: inline-flex; align-items: center; padding: calc(0.3em + var(--nudge)) 0.95em 0.3em; border-radius: var(--pill);
	background: var(--sc-terracotta); color: var(--sc-bg); font-family: var(--font-display); font-weight: 500; font-size: var(--pill-size);
	letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.15s;
}
.sc-menu a:hover, .sc-menu .current-menu-item > a { background: var(--sc-terracotta-dark); }
.sc-lang { margin-left: 0.4rem; color: var(--sc-terracotta); font-family: var(--font-display); font-weight: 500; font-size: var(--pill-size); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; }
.sc-lang:hover { text-decoration: underline; }

.sc-nav-toggle { display: none; }
.sc-nav__meta { display: none; }

@media (max-width: 1099px) {
	/* Without JS (no .js on <html>) the menu is a plain list under the logo; the panel and toggle need JS. */
	html:not(.js) .sc-header__inner { flex-wrap: wrap; }
	html:not(.js) .sc-nav { width: 100%; flex-direction: column; align-items: flex-start; padding: calc(var(--logo-w) * 0.85) 0 1.5rem; }
	.js .sc-nav-toggle {
		position: relative; z-index: 31; display: inline-flex; align-items: center; justify-content: center;
		width: 3.25rem; height: 3.25rem; margin-left: auto; padding: 0; border: 0; background: none; color: var(--sc-terracotta); cursor: pointer;
	}
	.sc-nav-toggle__bars, .sc-nav-toggle__bars::before, .sc-nav-toggle__bars::after { display: block; width: 2.6rem; height: 4px; border-radius: 2px; background: currentColor; transition: transform 0.2s, background-color 0.2s; }
	.sc-nav-toggle__bars { position: relative; }
	.sc-nav-toggle__bars::before, .sc-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.sc-nav-toggle__bars::before { top: -11px; }
	.sc-nav-toggle__bars::after { top: 11px; }
	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars { background: transparent; }
	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars::before { transform: translateY(11px) rotate(45deg); }
	.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__bars::after { transform: translateY(-11px) rotate(-45deg); }

	.sc-menu { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	.sc-menu a, .sc-nav__tickets { font-size: 1.5rem; white-space: normal; text-align: left; }
	.sc-lang { margin: 0.5rem 0 0; font-size: 1.5rem; }

	/* Menu panel (no Illustrator design): the terracotta of the closing band, the yellow logo kept on top,
	   big light links with the current page in yellow, a faint brand blob in the corner. */
	.js .sc-nav {
		position: fixed; inset: 0; z-index: 30; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start;
		gap: 1.25rem; padding: calc(var(--logo-w) * 0.9 + 1.5rem) var(--gutter) 2rem; background: var(--sc-terracotta);
		overflow-x: hidden; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0s linear 0.25s;
	}
	.js .sc-nav::before {
		content: ""; position: absolute; z-index: -1; right: -30vw; bottom: -18vw; width: 85vw; aspect-ratio: 735.6 / 681.6; pointer-events: none;
		background: var(--sc-yellow); opacity: 0.13;
		-webkit-mask: url("../img/blob-mask.svg") center / contain no-repeat; mask: url("../img/blob-mask.svg") center / contain no-repeat;
	}
	.js .sc-nav-open .sc-nav { visibility: visible; opacity: 1; transition: opacity 0.25s; }
	.js .sc-nav-open .sc-brand { z-index: 32; }
	.js .sc-nav-open .sc-nav-toggle { color: var(--sc-bg); }
	.sc-nav-open { overflow: hidden; }
	.js .sc-nav :focus-visible, .js .sc-nav-open .sc-nav-toggle:focus-visible { outline-color: var(--sc-yellow); }

	.js .sc-nav :is(.sc-menu, .sc-archive-nav) { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
	.js .sc-nav :is(.sc-menu, .sc-archive-nav) a {
		padding: 0.12em 0; border-radius: 0; background: none; color: var(--sc-bg); font-family: var(--font-display); font-weight: 700;
		font-size: clamp(2rem, 9vw, 2.75rem); letter-spacing: 0; line-height: 1.1; text-transform: none; white-space: normal;
	}
	.js .sc-nav :is(.sc-menu, .sc-archive-nav) a:hover,
	.js .sc-nav .sc-menu .current-menu-item > a,
	.js .sc-nav .sc-archive-nav .is-current a { background: none; color: var(--sc-yellow); }
	.js .sc-nav .sc-nav__tickets { margin-top: 0.75rem; font-weight: 700; font-size: 1.375rem; padding: calc(0.45em + var(--nudge)) 1em 0.45em; }
	.js .sc-nav .sc-lang { margin: 0; color: var(--sc-yellow); font-size: 1.25rem; }
	.js .sc-nav .sc-nav__meta { display: block; margin: auto 0 0; padding-top: 1.5rem; color: var(--sc-bg); font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; letter-spacing: 0.02em; opacity: 0.85; }

	/* Links rise in one after another when the panel opens (switched off by prefers-reduced-motion in style.css). */
	.js .sc-nav :is(.sc-menu li, .sc-archive-nav li, .sc-nav__tickets, .sc-lang, .sc-nav__meta) { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
	.js .sc-nav-open .sc-nav :is(.sc-menu li, .sc-archive-nav li, .sc-nav__tickets, .sc-lang, .sc-nav__meta) { opacity: 1; transform: none; }
	.js .sc-nav-open .sc-nav li:nth-child(2) { transition-delay: 0.04s; }
	.js .sc-nav-open .sc-nav li:nth-child(3) { transition-delay: 0.08s; }
	.js .sc-nav-open .sc-nav li:nth-child(4) { transition-delay: 0.12s; }
	.js .sc-nav-open .sc-nav li:nth-child(5) { transition-delay: 0.16s; }
	.js .sc-nav-open .sc-nav li:nth-child(n+6) { transition-delay: 0.2s; }
	.js .sc-nav-open .sc-nav :is(.sc-nav__tickets, .sc-lang, .sc-nav__meta) { transition-delay: 0.24s; }
}
@media (min-width: 1100px) {
	/* Design: pill row starts ~49px from the top of the 124px header. */
	.sc-header__inner { align-items: flex-start; padding-block: clamp(1rem, 3.4vw, 3.05rem) 1.25rem; }
	/* All pills (menu, Buy tickets, language) flow and wrap as one row. */
	.sc-menu { display: contents; }
}