/* ==========================================================================
   BLNDR theme. "Club night poster": black, #FAFE4D, condensed uppercase type.
   References: Le Petit Salon (structure, card hover inversion, galleries strip),
   Gérard Drouot Productions (event-first hero), I Love Techno (type scale).
   ========================================================================== */

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--c-bg: #000;
	--c-surface: #0d0d0d;
	--c-text: #fff;
	--c-ink: #000;
	--c-accent: #fafe4d;
	--c-muted: #9a9a9a;
	--c-line: rgba(255, 255, 255, .22);
	--c-link: #fafe4d;

	--f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--f-display: "Anton", Impact, "Arial Narrow", sans-serif;

	--w-wide: 86.25rem;
	--w-normal: 80.625rem;
	--w-narrow: 46.875rem;
	--w-media: 63.125rem;
	--gutter: 1.875rem;
	--header-h: 4.75rem;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Fluid scale: 1rem = 16px up to a 1440px viewport, then grows with the screen so the
   whole layout looks identical (just larger) on 2K/4K monitors. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (min-width: 1440px) { html { font-size: calc(100vw / 90); } }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font: 400 1rem/1.6 var(--f-body);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body.menu-open { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; letter-spacing: .005em; margin: 0 0 .5em; }
p { margin: 0 0 1.5rem; }
button { font: inherit; color: inherit; }

.icon { width: 1em; height: 1em; flex: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 0.625rem; top: -10rem; z-index: 1000;
	background: var(--c-accent); color: var(--c-ink); padding: 0.625rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 0.625rem; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0.1875rem; }
.site-main:focus { outline: none; }

/* Scrollbars ------------------------------------------------------------- */
/* Page: on mouse/trackpad devices the native scrollbar is hidden (it takes ~11px and pushes the
   layout) and main.js draws a thin floating thumb instead (.page-scroll). Touch devices keep
   their native overlay scrollbar. Inner scroll areas get a thin thumb with no track. */
@media (hover: hover) and (pointer: fine) {
	html { scrollbar-width: none; }
	html::-webkit-scrollbar { display: none; }
}
body * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
body *::-webkit-scrollbar { width: 0.1875rem; height: 0.1875rem; background: transparent; }
body *::-webkit-scrollbar-track, body *::-webkit-scrollbar-corner { background: transparent; }
body *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 0; }

.page-scroll {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: 0.75rem;
	opacity: 0; transition: opacity .35s var(--ease);
}
.page-scroll.is-active, .page-scroll:hover, .page-scroll.is-dragging { opacity: 1; }
.page-scroll__thumb {
	position: absolute; top: 0; right: 0.125rem; width: 0.1875rem; min-height: 2.5rem;
	background: rgba(255, 255, 255, .5); cursor: grab;
	transition: width .2s var(--ease), background-color .2s var(--ease);
	will-change: transform;
}
.page-scroll:hover .page-scroll__thumb, .page-scroll.is-dragging .page-scroll__thumb { width: 0.3125rem; background: var(--c-accent); }
.page-scroll.is-dragging .page-scroll__thumb { cursor: grabbing; }
.gallery-view .page-scroll, .menu-open .page-scroll { display: none; }
@media (hover: none), (pointer: coarse) { .page-scroll { display: none; } }

/* Layout ----------------------------------------------------------------- */

.site-main { flex: 1 0 auto; }

.container { width: 100%; max-width: calc(var(--w-normal) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }

.section { padding-block: 5rem; }
.section + .section { padding-top: 2.5rem; }

.page-header { margin-bottom: 3rem; }
.page-title {
	font-family: var(--f-display); font-size: clamp(3.5rem, 9vw, 8rem); line-height: .92;
	text-transform: uppercase; margin: 0;
}
.page-header__description { color: var(--c-muted); margin-top: 1rem; max-width: 60ch; }
.page-header .search-form { margin-top: 1.5rem; }
.empty-state { color: var(--c-muted); }

.section-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem;
	margin-bottom: 2rem;
}
.section-head__title { font-size: clamp(3.25rem, 7.5vw, 7rem); line-height: .9; text-transform: uppercase; margin: 0; }
.section-head__link {
	display: inline-flex; align-items: center; gap: 0.375rem; flex: none;
	font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
	text-decoration: none; padding-bottom: 0.625rem;
}
.section-head__link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.section-head__link:hover { color: var(--c-accent); }
.section-head__link:hover .icon { transform: translate(2px, -2px); }

/* Date line: "//// PET 26. FEB 2027 · HANGAR STAGE 3" */
.dateline {
	margin: 0; font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
	color: var(--c-muted);
}
.dateline__marks { color: var(--c-accent); letter-spacing: -.05em; margin-right: 0.25rem; }

/* Archive masthead --------------------------------------------------------- */
/* Poster-style page head for archives: ruled kicker line, giant title whose letters rise in,
   a yellow count, a short intro and a full-bleed ticker with what's on sale. */

.section--masthead { padding-top: 2.5rem; }
.masthead__rule {
	display: flex; justify-content: space-between; gap: 1rem;
	padding-block: 0.875rem; border-top: 1px solid var(--c-line);
}
.masthead__main {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 1.5rem 4rem;
	padding: 1.25rem 0 2.75rem;
}
.masthead__title {
	display: flex; align-items: flex-start; margin: 0;
	font-family: var(--f-display); font-size: clamp(4.5rem, 13.5vw, 14.5rem); line-height: .8;
	text-transform: uppercase; letter-spacing: -.01em;
}
.masthead__heading { min-width: 0; margin: 0; font: inherit; letter-spacing: inherit; }
.masthead__count {
	flex: none; margin-left: 0.75rem; padding-top: 0.5rem;
	font: 700 clamp(1rem, 1.6vw, 1.5rem)/1 var(--f-body); letter-spacing: .02em; color: var(--c-accent);
}
.masthead__description { margin: 0; padding-bottom: 0.25rem; color: var(--c-muted); font-size: 1.125rem; line-height: 1.5; }
.masthead .search-form { margin-bottom: 2.75rem; }
.masthead--plain { margin-bottom: 1.5rem; }

.ticker {
	display: block; overflow: hidden; margin: 0 calc(50% - 50vw) 3.5rem;
	background: var(--c-accent); color: var(--c-ink); text-decoration: none;
	transition: background-color .25s var(--ease);
}
.ticker:hover { background: #fff; color: var(--c-ink); }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__run {
	display: flex; align-items: center; gap: 1.5rem; padding: 0.875rem 1.5rem 0.75rem 0;
	font: 400 clamp(1.25rem, 1.9vw, 1.75rem)/1 var(--f-display); white-space: nowrap;
}
.ticker__mark { font-size: .65em; }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

@media (max-width: 767px) {
	.section--masthead { padding-top: 1.25rem; }
	.masthead__main { grid-template-columns: 1fr; padding-bottom: 2rem; }
	.masthead__title { font-size: clamp(3.5rem, 19vw, 6rem); }
	.masthead__description { font-size: 1rem; }
	.ticker { margin-bottom: 2.5rem; }
}

/* Buttons ---------------------------------------------------------------- */

.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font: 400 1.125rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase;
	padding: 0.8125rem 1.375rem; border: 1px solid transparent; border-radius: 0;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.button--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.button--primary:hover { background: #fff; border-color: #fff; }
.button--outline { border-color: currentColor; background: transparent; color: #fff; }
.button--outline:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.button--pill { border: 1px solid #fff; background: transparent; color: #fff; }
.button--pill:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.button[aria-busy="true"] { opacity: .6; pointer-events: none; }

.bar-link {
	display: block; margin-top: 3rem; padding: 0.875rem 1.25rem; border: 1px solid #fff;
	font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; text-align: center;
	text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bar-link:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }

/* Header ----------------------------------------------------------------- */

.site-header {
	position: fixed; inset: 0 0 auto; z-index: 100;
	height: var(--header-h);
	transition: background-color .25s var(--ease);
}
/* One header everywhere (as on the gallery wall): floating over the page, same size at any
   scroll. Once scrolled, a soft fade keeps the logo and buttons legible over the content. */
.site-header::before {
	content: ""; position: absolute; inset: 0 0 -2rem; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
	opacity: 0; transition: opacity .3s var(--ease);
}
.home .site-header::before, .event-view .site-header::before { opacity: .75; } /* over a photo hero */
.site-header.is-scrolled::before { opacity: 1; }
.menu-open .site-header::before { opacity: 0; }
/* Pages without a full-bleed hero start below the header. */
.site-main { padding-top: var(--header-h); }
.home .site-main, .event-view .site-main, .gallery-view .site-main { padding-top: 0; }

.site-header__inner {
	height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-inline: var(--gutter);
}
.site-logo { display: block; line-height: 0; }
.site-logo__img { display: block; height: 2.75rem; width: auto; fill: var(--c-accent); }
.site-logo__text { font: 400 1.75rem/1 var(--f-display); text-transform: uppercase; }

.site-header__actions { display: flex; align-items: center; gap: 0.625rem; }
.header-tickets {
	display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem;
	background: #fff; color: var(--c-ink);
	font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
	transition: background-color .2s var(--ease);
}
.header-tickets:hover { background: var(--c-accent); }

.menu-toggle {
	position: relative; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid #fff; background: #000;
	cursor: pointer; display: grid; place-items: center; color: #fff;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.menu-toggle:hover { background: #fff; color: #000; }
.menu-toggle__bars { display: grid; gap: 0.25rem; width: 1.125rem; }
.menu-toggle__bars span { display: block; height: 0.125rem; background: currentColor; }
.menu-toggle__close { display: none; width: 1.375rem; height: 1.375rem; }
.menu-open .menu-toggle__bars { display: none; }
.menu-open .menu-toggle__close { display: block; }

/* Overlay menu ----------------------------------------------------------- */
/* Desktop: next-event card on the left, numbered list right-aligned (reference: Le Petit
   Salon), socials + contact along the bottom. Phones: list, compact event card, icon row.
   Opening is a quick fade over a blurred page (as on the reference); items do not stagger. */

.site-menu {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(0, 0, 0, .9);
	-webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem);
	overflow-y: auto; overscroll-behavior: contain;
	opacity: 0; transition: opacity .3s var(--ease);
}
.site-menu[hidden] { display: block; visibility: hidden; pointer-events: none; }
.site-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.site-menu__inner {
	min-height: 100%;
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: 1fr auto;
	gap: 2.5rem 5rem; padding: calc(var(--header-h) + 2.5rem) var(--gutter) 1.75rem;
}

/* Numbered list */
.site-menu__nav { grid-column: 2; grid-row: 1; align-self: center; }
.site-menu__list, .site-menu__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-menu__list { counter-reset: menu; border-top: 1px solid var(--c-line); }
.site-menu__list > li {
	counter-increment: menu; position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.25rem;
	border-bottom: 1px solid var(--c-line);
}
.site-menu__list > li::before {
	content: counter(menu, decimal-leading-zero);
	font: 600 0.75rem/1 var(--f-body); letter-spacing: .08em; color: var(--c-muted);
	transition: color .2s var(--ease);
}
.site-menu__list > li > a {
	grid-column: 2; justify-self: end; text-align: right;
	display: inline-flex; align-items: center; gap: 0.75rem;
	font: 400 clamp(2.5rem, 5vw, 5rem)/1.08 var(--f-display); text-transform: uppercase;
	color: #fff; text-decoration: none; padding: 0.375rem 0;
	transition: color .2s var(--ease), transform .25s var(--ease);
}
.site-menu__list > li > a::after {
	content: ""; width: 0.55em; height: 0.55em; flex: none; margin-right: -0.7em; opacity: 0;
	background: currentColor; transition: opacity .2s var(--ease), margin .25s var(--ease);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h12v12h-2V8.4L6.4 19 5 17.6 15.6 7H7V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h12v12h-2V8.4L6.4 19 5 17.6 15.6 7H7V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-menu__list > li > a:hover, .site-menu__list > li > a:focus-visible { color: var(--c-accent); }
.site-menu__list > li > a:hover::after, .site-menu__list > li > a:focus-visible::after { opacity: 1; margin-right: 0; }
.site-menu__list > li:hover::before { color: var(--c-accent); }
.site-menu__list .current-menu-item > a, .site-menu__list .current_page_parent > a, .site-menu__list .current-menu-ancestor > a { color: var(--c-accent); }

/* Sub-items: always shown as a row of small links on desktop; collapsible on phones. */
.submenu-toggle {
	grid-column: 3; width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-line); background: none; cursor: pointer; color: #fff;
	display: none; place-items: center; transition: border-color .2s var(--ease);
}
.submenu-toggle:hover { border-color: #fff; }
.submenu-toggle .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-menu__list .sub-menu { grid-column: 2 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.5rem; padding: 0 0 0.875rem; }
.site-menu__list .sub-menu[hidden] { display: flex; }
.site-menu__list .sub-menu a { font: 400 1.125rem/1.3 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--c-muted); text-decoration: none; }
.site-menu__list .sub-menu a:hover { color: var(--c-accent); }

/* Next event / latest gallery */
.menu-feature { grid-column: 1; grid-row: 1; align-self: center; display: grid; gap: 1rem; max-width: 26rem; }
.menu-feature__label { margin: 0; font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.menu-feature__media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--c-surface); }
.menu-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.menu-feature:hover .menu-feature__media img { transform: scale(1.03); }
.menu-feature__body { display: grid; gap: 0.625rem; justify-items: start; }
.menu-feature__dateline { color: #fff; }
.menu-feature__title { margin: 0; font: 400 2.25rem/.95 var(--f-display); text-transform: uppercase; }
.menu-feature__title a { text-decoration: none; }
.menu-feature__title a:hover { color: var(--c-accent); }
.menu-feature__cta { margin-top: 0.375rem; }

/* Bottom row */
.site-menu__footer {
	grid-column: 1 / -1; grid-row: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	border-top: 1px solid var(--c-line); padding-top: 1.25rem;
}
.site-menu__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.625rem; }
.site-menu__socials a {
	display: inline-flex; align-items: center; gap: 0.625rem; height: 2.75rem; padding: 0 0.875rem;
	border: 1px solid var(--c-line); text-decoration: none;
	font: 400 1rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.site-menu__socials a:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
.site-menu__socials .icon { width: 1.125rem; height: 1.125rem; }
.site-menu__socials .icon-arrow { width: 0.75rem; height: 0.75rem; }
.site-menu__contact { margin: 0; display: flex; gap: 1.5rem; font-size: 0.875rem; }
.site-menu__contact a { color: var(--c-muted); text-decoration: none; }
.site-menu__contact a:hover { color: #fff; }

@media (max-width: 1023px) {
	.site-menu__inner { grid-template-columns: 1fr; grid-template-rows: auto; gap: 2rem; padding-top: calc(var(--header-h) + 1.5rem); }
	.site-menu__nav, .menu-feature, .site-menu__footer { grid-column: 1; grid-row: auto; }
	.site-menu__nav { align-self: start; }
	.site-menu__list > li > a { font-size: clamp(2rem, 8.4vw, 3.25rem); line-height: 1.18; padding: 0.375rem 0; justify-self: start; text-align: left; }
	.site-menu__list > li > a::after { display: none; }
	.submenu-toggle { display: grid; }
	.site-menu__list .sub-menu { justify-content: flex-start; flex-direction: column; gap: 0.375rem; padding: 0.25rem 0 1rem; }
	.site-menu__list .sub-menu[hidden] { display: none; }
	.site-menu__list .sub-menu a { font-size: 1.375rem; color: #fff; }

	/* Compact horizontal event card */
	.menu-feature { max-width: none; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem 1rem; padding: 1rem; border: 1px solid var(--c-line); }
	.menu-feature__label { grid-column: 1 / -1; }
	.menu-feature__title { font-size: 1.625rem; }
	.menu-feature__cta { padding: 0.625rem 1rem; font-size: 1rem; }

	.site-menu__footer { flex-direction: column; align-items: stretch; border-top: 0; padding-top: 0; }
	.site-menu__socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
	.site-menu__socials li + li a { border-left: 0; }
	.site-menu__socials li { display: block; }
	.site-menu__socials a { display: flex; width: 100%; justify-content: center; height: 3.5rem; }
	.site-menu__socials a span, .site-menu__socials .icon-arrow { display: none; }
	.site-menu__socials .icon { width: 1.375rem; height: 1.375rem; }
	.site-menu__contact { justify-content: center; }
}

/* Hero ------------------------------------------------------------------- */

.hero { position: relative; height: clamp(37.5rem, 100svh, 60rem); overflow: hidden; background: #111; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .85) 100%);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero__content { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 3rem; }
.hero__dateline { color: #fff; font-size: 0.875rem; margin-bottom: 0.875rem; }
.hero__title {
	font: 400 clamp(5.25rem, 15vw, 15rem)/.86 var(--f-display); text-transform: uppercase;
	margin: 0 0 2rem; letter-spacing: -.005em; overflow-wrap: anywhere;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Grids and cards -------------------------------------------------------- */

.post-grid, .event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.875rem; }

/* Shared hover: the info area inverts to the brand yellow (reference: Le Petit Salon). */
.card__body, .event-card__body, .memory-card__dateline, .memory-card__title { transition: background-color .2s var(--ease), color .2s var(--ease); }

.card__link { display: block; text-decoration: none; color: inherit; }
.card__media, .event-card__media, .memory-card__media { position: relative; overflow: hidden; background: var(--c-surface); }
.card__media { aspect-ratio: 16 / 9; }
.card__media img, .event-card__media img, .memory-card__media img {
	width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease);
}
.card__body { padding: 0.875rem 0.875rem 1rem; }
.card__dateline { margin-bottom: 0.5rem; }
.card__title { font-size: 1.625rem; line-height: 1.08; text-transform: uppercase; margin: 0; }
.card__link:focus-visible .card__body { background: var(--c-accent); color: var(--c-ink); }
/* Card hover states only where a real pointer hovers: on touch screens a tap leaves :hover
   stuck, which painted the tapped card yellow. */
@media (hover: hover) {
	.card__link:hover .card__body { background: var(--c-accent); color: var(--c-ink); }
	.card__link:hover .dateline, .card__link:hover .dateline__marks { color: var(--c-ink); }
	.card__link:hover .card__media img { transform: scale(1.04); }
}

.event-card__media { display: block; aspect-ratio: 1; }
.event-card__body { padding: 0.875rem 0.875rem 0.875rem; }
.event-card__dateline { margin-bottom: 0.625rem; }
.event-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.event-card__title { font-size: 1.875rem; line-height: 1; text-transform: uppercase; margin: 0; min-width: 0; }
.event-card__title a { text-decoration: none; }
.event-card__buy { flex: none; padding: 0.625rem 1rem; }
@media (hover: hover) {
	.event-card:hover .event-card__body { background: var(--c-accent); color: var(--c-ink); }
	.event-card:hover .dateline, .event-card:hover .dateline__marks { color: var(--c-ink); }
	.event-card:hover .event-card__buy { color: var(--c-ink); border-color: var(--c-ink); }
	.event-card:hover .event-card__buy:hover { background: var(--c-ink); color: var(--c-accent); }
	.event-card:hover .event-card__media img { transform: scale(1.04); }
}

/* A single upcoming event gets a wide card instead of one lonely column. */
.event-grid:has(> .event-card:only-child) { grid-template-columns: 1fr; }
.event-grid > .event-card:only-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 2.5rem; align-items: end; }
.event-grid > .event-card:only-child .event-card__body { padding: 1.75rem 1.5rem; margin: 0; border-top: 1px solid var(--c-line); }
.event-grid > .event-card:only-child .event-card__row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.event-grid > .event-card:only-child .event-card__title { font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .9; }
.event-grid > .event-card:only-child .event-card__dateline { font-size: 0.875rem; margin-bottom: 1rem; }

/* Horizontal card strips (news, galleries, related) ---------------------- */
.track {
	--track-pad: max(var(--gutter), calc((100vw - var(--w-wide)) / 2));
	display: flex; gap: 1.875rem; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--track-pad);
	padding: 0 var(--track-pad) 0.25rem;
	scrollbar-width: none; cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
.track-section--news .track > .card { flex: 0 0 calc((min(100vw, var(--w-wide) + 2 * var(--gutter)) - 2 * var(--gutter) - 2 * 1.875rem) / 3.25); }
.track-section--galleries .track > .memory-card { flex: 0 0 clamp(15rem, 24vw, 21.25rem); }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.track.is-dragging a { pointer-events: none; }
.track img { -webkit-user-drag: none; user-select: none; }
.track-section .bar-link { margin-top: 2rem; }

.track-nav { display: flex; gap: 0.625rem; padding-bottom: 0.625rem; }
.track-nav__btn {
	display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #fff; background: #000; color: #fff; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.track-nav__btn .icon { width: 1.25rem; height: 1.25rem; }
.track-nav__btn:hover { background: #fff; color: var(--c-ink); }
.track-nav__btn:disabled { opacity: .3; pointer-events: none; }

.track-progress { position: relative; height: 0.125rem; margin-top: 1.5rem; background: var(--c-line); overflow: hidden; }
.track-progress span { position: absolute; inset: 0 auto 0 0; background: var(--c-accent); transition: transform .1s linear; }

/* "Drag" cursor shown over strips on mouse/trackpad devices. */
.drag-cursor {
	position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
	width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--c-accent); color: var(--c-ink);
	font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em;
	opacity: 0; transform: translate3d(var(--x, -100px), var(--y, -100px), 0) scale(.4);
	transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.drag-cursor span { display: flex; align-items: center; gap: 0.25rem; }
.drag-cursor .icon { width: 0.875rem; height: 0.875rem; }
.drag-cursor.is-visible { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
.drag-cursor.is-pressed { transform: translate3d(var(--x), var(--y), 0) scale(.85); }
@media (hover: hover) and (pointer: fine) { .has-drag-cursor .track { cursor: none; } .has-drag-cursor .track a { cursor: none; } }

.memory-card__link { display: block; text-decoration: none; color: inherit; }
.memory-card__media { aspect-ratio: 4 / 5; }
.memory-card__dateline { padding: 0.625rem 0.75rem 2px; }
.memory-card__title { font-size: 1.375rem; line-height: 1.1; text-transform: uppercase; margin: 0; padding: 0.25rem 0.75rem 0.75rem; }
@media (hover: hover) {
	.memory-card__link:hover .memory-card__title, .memory-card__link:hover .memory-card__dateline { background: var(--c-accent); color: var(--c-ink); }
	.memory-card__link:hover .memory-card__dateline { color: var(--c-ink); }
	.memory-card__link:hover .dateline__marks { color: var(--c-ink); }
	.memory-card__link:hover img { transform: scale(1.04); }
}
.memory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.load-more { margin-top: 3.5rem; text-align: center; }
.load-more .button { min-width: 16.25rem; }

/* Events: page, past state, empty state, general hero ------------------- */

.hero--general .hero__slide { background: radial-gradient(ellipse at 70% 30%, #2a2a00 0%, #000 60%); }
.hero--general .hero__bg { opacity: .55; }
.event-card--past .event-card__media img { filter: grayscale(1); opacity: .8; }
@media (hover: hover) { .event-card--past:hover .event-card__media img { filter: none; opacity: 1; } }
/* Past events use the wide event image, like news cards (posters are for what's on sale). */
.event-card--past .event-card__media { aspect-ratio: 16 / 9; }

.empty-block { border: 1px solid var(--c-line); padding: 3rem; display: grid; justify-items: start; gap: 1rem; }
.empty-block__title { margin: 0; font: 400 clamp(2rem, 4vw, 3.5rem)/1 var(--f-display); text-transform: uppercase; }
.empty-block__text { margin: 0 0 0.5rem; color: var(--c-muted); max-width: 40rem; }

.event-page__layout { margin-top: 4rem; }
.event-facts { margin: 0; display: grid; gap: 1.25rem; border-top: 1px solid var(--c-line); padding-top: 1.25rem; }
.event-facts dt { font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.event-facts dd { margin: 0.25rem 0 0; font: 400 1.5rem/1.15 var(--f-display); text-transform: uppercase; }
.event-facts dd span { font: 400 1rem/1.4 var(--f-body); text-transform: none; color: var(--c-muted); }
.event-facts dd a { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font: 400 1rem/1 var(--f-display); text-decoration: none; color: var(--c-accent); }
.event-facts dd a .icon { width: 0.75rem; height: 0.75rem; }
.event-facts__status { justify-self: start; padding: 0.375rem 0.75rem; background: #fff; color: var(--c-ink); font: 400 1rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.ticket-box--past { border-color: var(--c-line); }
.ticket-box__title a { text-decoration: none; }
.ticket-box__title a:hover { color: var(--c-accent); }

/* Single article ------------------------------------------------------- */

.article-hero { padding-top: 4.5rem; padding-bottom: 2.5rem; }
.article-hero__dateline { color: #fff; font-size: 0.8125rem; margin-bottom: 1.25rem; }
.article-hero__title { font-size: clamp(3rem, 6.4vw, 6.5rem); line-height: .92; text-transform: uppercase; margin: 0; max-width: 20ch; overflow-wrap: anywhere; }
.article-media { margin-top: 0; margin-bottom: 4rem; }
.article-media img { width: auto; max-width: 100%; max-height: 85vh; margin-inline: auto; }

.article-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 5rem; align-items: start; }
.article-aside { grid-row: 1 / span 2; position: relative; height: 100%; }
.article-aside__sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 2rem; }
.article-body { padding-inline: 0; max-width: 46rem; }
.article-body > * { max-width: none; margin-left: 0; margin-right: 0; }
.article-body > p:first-child { font-size: 1.375rem; line-height: 1.5; }
.article-body > .alignwide, .article-body > .alignfull { margin-left: 0; margin-right: 0; }

.ticket-box { border: 1px solid #fff; padding: 1.5rem; display: grid; gap: 0.75rem; }
.ticket-box__label { margin: 0; font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.ticket-box__title { margin: 0; font: 400 2.25rem/.95 var(--f-display); text-transform: uppercase; }
.ticket-box__dateline { color: #fff; }
.ticket-box__buy { width: 100%; margin-top: 0.5rem; padding-block: 1rem; font-size: 1.25rem; }

.share { display: grid; gap: 0.5rem; }
.share__label { margin: 0 0 0.25rem; font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.share__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.share__list li { border-bottom: 1px solid var(--c-line); }
.share__list a, .share__list button {
	display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0.875rem 0;
	background: none; border: 0; color: #fff; cursor: pointer; text-decoration: none; text-align: left;
	font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
	transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.share__list a:hover, .share__list button:hover { color: var(--c-accent); padding-left: 0.5rem; }
.share__list .icon { width: 0.875rem; height: 0.875rem; }

/* Mobile "buy" bar: fixed at the bottom while the article is in view. */
.buy-bar { display: none; }

.entry-content { padding-inline: var(--gutter); font-size: 1.0625rem; line-height: 1.7; }
.entry-content > * { max-width: var(--w-narrow); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--w-media); }
.entry-content > .alignfull { max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.page-content .entry-content > * { max-width: var(--w-normal); }
.entry-content--intro { padding-inline: 0; margin-bottom: 3rem; }

.entry-content a { color: var(--c-link); text-decoration: underline; text-underline-offset: 0.1875rem; }
.entry-content a:hover { color: #fff; }
.entry-content h2 { font-size: 2.125rem; margin-top: 3rem; }
.entry-content h3 { font-size: 1.625rem; margin-top: 2.25rem; }
.entry-content h4 { font-size: 1.3125rem; margin-top: 1.875rem; }
.entry-content strong { color: #fff; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin-bottom: 1.5rem; }
.entry-content li { margin-bottom: 0.375rem; }
.entry-content blockquote { border-left: 0.25rem solid var(--c-accent); margin: 2.25rem auto; padding: 0.25rem 0 0.25rem 1.375rem; font: 400 1.625rem/1.25 var(--f-display); text-transform: uppercase; }
.entry-content figure { margin-top: 0; margin-bottom: 2rem; }
.entry-content figcaption { font-size: 0.8125rem; color: var(--c-muted); margin-top: 0.5rem; text-align: center; }
.entry-content hr { border: 0; border-top: 1px solid var(--c-line); margin: 3rem auto; }
.entry-content pre, .entry-content code { white-space: pre-wrap; font-size: 0.875rem; }
.entry-content iframe { display: block; margin-inline: auto; }
.entry-content .wp-block-embed__wrapper iframe,
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.entry-content iframe[src*="soundcloud"], .entry-content iframe[src*="mixcloud"] { width: 100%; }
.entry-content .wp-block-gallery { gap: 0.625rem; }
.entry-content .wp-block-buttons .wp-block-button__link {
	background: transparent; color: #fff; border: 1px solid #fff; border-radius: 0; text-decoration: none; padding: 0.875rem 1.75rem;
	font: 400 1.25rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
}
.entry-content .wp-block-buttons .wp-block-button__link:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--c-line); opacity: 1; }
.entry-content .wp-block-columns { gap: 1.875rem; align-items: center; }
.entry-content .wp-block-column > :last-child { margin-bottom: 0; }

/* Previous / next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.875rem; margin-top: 6rem; }
.post-nav__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; align-items: center; padding: 1.25rem; border: 1px solid var(--c-line); text-decoration: none; color: #fff; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.post-nav__item--next { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); text-align: right; }
.post-nav__item--next .post-nav__media { order: 2; }
.post-nav__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface); }
.post-nav__media img { width: 100%; height: 100%; object-fit: cover; }
.post-nav__label { display: inline-flex; align-items: center; gap: 0.375rem; font: 600 0.75rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.post-nav__label .icon { width: 0.875rem; height: 0.875rem; }
.post-nav__title { display: block; font: 400 1.625rem/1.02 var(--f-display); text-transform: uppercase; margin-top: 0.5rem; }
.post-nav__item:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.post-nav__item:hover .post-nav__label { color: var(--c-ink); }

/* Footer ----------------------------------------------------------------- */

.site-footer { margin-top: 2.5rem; border-top: 1px solid var(--c-line); padding: 0 var(--gutter); }
.site-footer__grid {
	max-width: var(--w-wide); margin: 0 auto;
	display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1.1fr 1fr;
}
.site-footer__col { padding: 2.5rem 1.5rem; border-left: 1px solid var(--c-line); margin: 0; }
.site-footer__col:first-child { border-left: 0; padding-left: 0; }
.site-footer__title { font-size: 1.375rem; text-transform: uppercase; margin: 0 0 1rem; }
.site-footer__menu, .site-footer__list, .site-footer__socials { list-style: none; margin: 0; padding: 0; }
.site-footer__menu a { font: 400 1.5rem/1.35 var(--f-display); text-transform: uppercase; text-decoration: none; }
.site-footer__menu a:hover { color: var(--c-accent); }
.site-footer__menu .lang-item { display: none; }
.site-footer__about { font-size: 0.875rem; color: var(--c-muted); }
.site-footer__logo { height: 3.25rem; width: auto; margin-bottom: 1.125rem; }
.site-footer__list { font-size: 0.875rem; color: var(--c-muted); display: grid; gap: 0.5rem; }
.site-footer__contact { margin: 0; font-size: 0.875rem; }
.site-footer__contact dt { color: var(--c-muted); }
.site-footer__contact dd { margin: 0 0 0.75rem; }
.site-footer__contact a { text-decoration: none; }
.site-footer__contact a:hover { color: var(--c-accent); }
.site-footer__grid > .site-footer__socials { padding: 0 0 0 1.5rem; display: flex; flex-direction: column; }
.site-footer__socials li { flex: 1; border-bottom: 1px solid var(--c-line); }
.site-footer__socials li:last-child { border-bottom: 0; }
.site-footer__socials a {
	display: flex; height: 100%; min-height: 4rem; align-items: center; justify-content: space-between;
	font: 400 1.25rem/1 var(--f-display); text-transform: uppercase; text-decoration: none; padding: 0 2px 0 0;
	transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.site-footer__socials a:hover { color: var(--c-accent); padding-left: 0.5rem; }
.site-footer__socials .icon { width: 1rem; height: 1rem; }
.site-footer__bottom {
	max-width: var(--w-wide); margin: 0 auto; padding: 1.125rem 0 1.75rem; border-top: 1px solid var(--c-line);
	display: flex; justify-content: center; gap: 1.5rem; font-size: 0.75rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }

.back-to-top {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
	width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
	background: var(--c-accent); color: var(--c-ink);
	opacity: 0; visibility: hidden; transform: translateY(0.625rem); transition: opacity .25s, transform .25s, visibility .25s;
}
.back-to-top .icon { width: 1.25rem; height: 1.25rem; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Gallery photo wall ----------------------------------------------------- */
/* Full-screen, endlessly looping columns of photos (reference: Le Petit Salon albums). */

.gallery-view { overflow: hidden; }
.gallery-view .site-footer, .gallery-view .back-to-top { display: none; }

.gwall { position: fixed; inset: 0; z-index: 1; background: #000; overflow: hidden; }
.gwall__viewport { position: absolute; inset: 0; overflow-y: auto; cursor: grab; touch-action: none; outline: none; }
.gwall__viewport.is-dragging { cursor: grabbing; }
.gwall__viewport.is-dragging a { pointer-events: none; }

/* No-JS fallback: a scrollable masonry grid. */
/* Same column count as the JS wall (4 / 3 / 2) so the browser picks the same image sizes. */
.gwall__grid { columns: 4; column-gap: 2rem; padding: 6rem 2.5rem 16.25rem; }
@media (max-width: 1023px) { .gwall__grid { columns: 3; } }
@media (max-width: 639px) { .gwall__grid { columns: 2; } }
.gwall__item { margin: 0 0 2rem; break-inside: avoid; }
.gwall__item a { display: block; }
.gwall__item img { width: 100%; height: auto; background: #111; transition: filter .3s var(--ease); }
.gwall__item a:hover img, .gwall__item a:focus-visible img { filter: brightness(1.15); }

/* JS: columns move independently and wrap around. The outer columns lean slightly away
   to echo the reference's curved edges. */
.gwall__viewport:has(.is-looping) { overflow: hidden; }
.gwall__grid.is-looping {
	columns: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; gap: 2rem;
	padding: 0 2.5rem; height: 100%; perspective: 100rem;
}
.gwall__col { display: flex; flex-direction: column; min-width: 0; will-change: transform; }
.gwall__col > .gwall__item { margin-bottom: 2rem; }
.gwall__grid.is-looping .gwall__col:first-child { transform-origin: right center; }
.gwall__grid.is-looping .gwall__col:first-child > *, .gwall__grid.is-looping .gwall__col:last-child > * { transform: scale(.94); }

.gwall__shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .9) 100%),
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .65) 100%);
}

.gwall__ui { position: absolute; z-index: 2; left: 2.5rem; right: 2.5rem; bottom: 2.5rem; pointer-events: none; }
.gwall__ui > * { pointer-events: auto; }
.gwall__dateline { color: #fff; margin-bottom: 0.5rem; }
.gwall__title { font-size: clamp(2.5rem, 5.5vw, 5.25rem); line-height: .95; text-transform: uppercase; margin: 0 0 1.5rem; max-width: 18ch; }

.gwall__btn {
	display: inline-grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 0.75rem;
	border: 1px solid #fff; background: #000; color: #fff; cursor: pointer; text-decoration: none;
	font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.gwall__btn .icon { width: 1.25rem; height: 1.25rem; }
.gwall__btn:hover { background: #fff; color: var(--c-ink); }


/* Dialogs: post text and the photo lightbox */
.gwall dialog { border: 0; padding: 0; color: #fff; background: transparent; max-width: none; max-height: none; }
.gwall dialog::backdrop { background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); }
.gwall__info { width: min(51.25rem, 100vw - 2rem); max-height: calc(100svh - 4rem); overflow-y: auto; }
.gwall__info-inner { position: relative; background: #000; border: 1px solid #fff; padding: 3rem 2.5rem 1.5rem; }
.gwall__info-close { position: absolute; top: -1px; right: -1px; }
.gwall__info-title { font-size: clamp(2rem, 4vw, 3.25rem); text-transform: uppercase; margin-bottom: 1.5rem; }
.gwall__info-content { padding: 0; }
.gwall__info-content > * { max-width: none; }
.gwall__info-content video { width: 100%; height: auto; }

.gwall__lightbox { width: 100vw; height: 100svh; }
.gwall__lightbox[open] { display: grid; place-items: center; }
.gwall__lightbox img { max-width: calc(100vw - 10rem); max-height: calc(100svh - 7.5rem); width: auto; height: auto; object-fit: contain; }
.gwall__lightbox-count { position: absolute; left: 1.5rem; top: 1.5rem; margin: 0; font: 400 1.125rem/1 var(--f-display); letter-spacing: .05em; }
.gwall__lightbox-prev, .gwall__lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.gwall__lightbox-prev { left: 1.5rem; }
.gwall__lightbox-next { right: 1.5rem; }
.gwall__lightbox-close { position: absolute; right: 1.5rem; top: 1.5rem; }

@media (max-width: 767px) {
	.gwall__grid { padding: 4.5rem 0.75rem 16.25rem; column-gap: 0.75rem; }
	.gwall__grid.is-looping { padding: 0 0.75rem; gap: 0.75rem; }
	.gwall__col > .gwall__item { margin-bottom: 0.75rem; }
	.gwall__ui { left: 1rem; right: 1rem; bottom: 1.25rem; }
		
	
	
	.gwall__info-inner { padding: 3rem 1.25rem 1rem; }
	.gwall__lightbox img { max-width: 100vw; }
	.gwall__lightbox-prev, .gwall__lightbox-next { top: auto; bottom: 1.5rem; transform: none; }
}

/* Search form ------------------------------------------------------------ */

.search-form { display: flex; gap: 0.625rem; max-width: 35rem; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: 0.75rem 0.875rem; border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; font: inherit; }
.search-submit { padding: 0.75rem 1.25rem; border: 0; border-radius: 0; background: var(--c-accent); color: var(--c-ink); cursor: pointer; font: 400 1.125rem/1 var(--f-display); text-transform: uppercase; }

.not-found { min-height: 50vh; }
.not-found .page-title { margin-bottom: 1.5rem; }

/* Intro: logo strike on entering the site (played by intro.js) ----------- */

/* Pre-paint cover set by the <head> script; once intro.js has its own curtain in place
   (.intro-ready) it steps aside so the lifting curtain reveals the page. */
html.is-intro:not(.intro-ready) body::before { content: ""; position: fixed; inset: 0; z-index: 90; background: var(--c-bg); }
html.is-intro:not(.intro-ready) .site-logo { opacity: 0; }
/* Scroll is locked during the intro; keep the scrollbar's space so the page doesn't jump
   sideways when it comes back (classic scrollbars, e.g. Windows). */
html.is-intro { scrollbar-gutter: stable; }
html.is-intro body { overflow: hidden; }
html.is-intro .site-header__actions { opacity: 0; }
.site-header__actions { transition: opacity .5s cubic-bezier(.16, 1, .3, 1); }
.site-logo { transform-origin: 0 0; }
.intro-curtain { position: fixed; inset: 0; z-index: 90; background: var(--c-bg); }
.intro-flash { position: fixed; inset: 0; z-index: 95; background: var(--c-accent); opacity: 0; pointer-events: none; }

/* Page transitions (cross-document View Transitions) ---------------------
   Old page lifts away over the yellow, new page is cut in on the bolt's angle; the header
   stays put. Browsers without support navigate normally. */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition { background: var(--c-accent); }
::view-transition-old(root) { animation: vt-old .55s cubic-bezier(.76, 0, .24, 1) both; }
::view-transition-new(root) { animation: vt-new .7s cubic-bezier(.76, 0, .24, 1) .18s both; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
/* Card → hero morph: the clicked card's image grows into the next page's hero. */
::view-transition-old(vt-media), ::view-transition-new(vt-media) { width: 100%; height: 100%; object-fit: cover; }
/* No hero on the next page: the card image leaves with the page instead of lingering in place. */
::view-transition-old(vt-media):only-child { animation: vt-media-out .55s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes vt-media-out { to { transform: translateY(-18vh); opacity: 0; } }
@keyframes vt-old { to { transform: translateY(-18%); filter: brightness(.4); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } }
@keyframes vt-new { from { clip-path: polygon(0 100%, 100% 115%, 100% 115%, 0 100%); } to { clip-path: polygon(0 -15%, 100% 0, 100% 100%, 0 100%); } }

/* Motion preferences ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.card__link:hover .card__media img, .event-card:hover .event-card__media img, .memory-card__link:hover img { transform: none; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
	.site-footer__col:nth-child(4) { border-left: 0; padding-left: 0; }
	.site-footer__col:nth-child(n + 4) { border-top: 1px solid var(--c-line); }
	.memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.post-grid, .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	:root { --gutter: 1rem; --header-h: 4rem; }
	.site-logo__img { height: 2.25rem; }
	.header-tickets { height: 2.25rem; padding: 0 0.75rem; font-size: 1rem; }
	.menu-toggle { width: 2.25rem; height: 2.25rem; }
	.section { padding-block: 3.5rem; }
	.section-head { flex-wrap: wrap; align-items: flex-end; }
	.hero { height: clamp(35rem, 88svh, 47.5rem); }
	.hero__content { bottom: 1.75rem; }
	.hero__title { font-size: clamp(4rem, 19vw, 7.5rem); margin-bottom: 1.5rem; }
	.post-grid, .event-grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
	.memory-grid .memory-card__title { font-size: 1.125rem; }
	.card__title { font-size: 1.5rem; }
	.event-card__row { flex-wrap: wrap; }
	.event-grid > .event-card:only-child { grid-template-columns: 1fr; }
	.event-grid > .event-card:only-child .event-card__body { padding: 1.25rem 0.875rem 0.875rem; border-top: 0; }
	.event-grid > .event-card:only-child .event-card__title { font-size: 3.5rem; }
	.track-section--galleries .track > .memory-card { flex-basis: 72vw; }
	.track-section--news .track > .card { flex-basis: 82vw; }
	.article-hero { padding-top: 2.5rem; padding-bottom: 1.5rem; }
	.article-hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
	.article-media { margin-bottom: 2rem; padding-inline: 0; }
	.article-layout { display: block; }
	.article-aside { height: auto; margin-top: 3rem; }
	.article-aside .ticket-box:not(.ticket-box--past) { display: none; } /* the buy bar covers it on phones */
	.article-body > p:first-child { font-size: 1.1875rem; }
	.entry-content { font-size: 1rem; }
	.has-ticket { padding-bottom: 5rem; }
	.buy-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
		background: #000; border-top: 1px solid var(--c-line);
		transform: translateY(110%); transition: transform .3s var(--ease);
	}
	.buy-bar.is-visible { transform: none; }
	.buy-bar__text { margin: 0; min-width: 0; display: grid; }
	.buy-bar__label { font: 600 0.6875rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
	.buy-bar__title { font: 400 1.25rem/1.05 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.buy-bar .button { flex: none; }
	.has-ticket ~ .back-to-top, body:has(.buy-bar.is-visible) .back-to-top { bottom: 5.5rem; }
	.post-nav { grid-template-columns: 1fr; gap: 1rem; margin-top: 4rem; }
	.post-nav__item, .post-nav__item--next { grid-template-columns: 7rem minmax(0, 1fr); text-align: left; }
	.post-nav__item--next .post-nav__media { order: 0; }
	.post-nav__title { font-size: 1.25rem; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__col { padding: 1.75rem 0; border-left: 0; }
	.site-footer__col:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--c-line); }
	.site-footer__col:nth-child(n + 3) { border-top: 1px solid var(--c-line); }
	.site-footer__col:nth-child(4) { padding-left: 1rem; }
	.site-footer__socials { grid-column: 1 / -1; border-left: 0 !important; padding-left: 0 !important; }
	.site-footer__bottom { flex-direction: column; align-items: center; gap: 0.5rem; }
}