/* ============================================================
ECHOES — Cinematic web identity
Design system per Design Brief v.01
============================================================ */
/* Fonts load via a in the HTML (reliable here; the @import was flaky). */
:root {
--void: #0d1418;
--void-darker: #060b0e;
--paper: #d8dde0;
--paper-bright:#e8ebed;
--amber: #2fb6a6;
--amber-bright:#4fd0c0;
--teal: #2a5f6e;
--teal-light: #4a8090;
--black: #000000;
--rule: rgba(216,221,224,0.08);
--rule-strong: rgba(216,221,224,0.20);
--dim: rgba(216,221,224,0.50);
--dimmer: rgba(216,221,224,0.30);
--bar: clamp(2.3rem, 5.4vh, 4rem); /* letterbox bar / header height */
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--maxw: 1500px;
--display: 'Bebas Neue', sans-serif;
--serif: 'Cormorant Garamond', serif;
--mono: 'JetBrains Mono', monospace;
--nav: 'Saira Semi Condensed', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--void);
color: var(--paper);
font-family: var(--mono);
font-size: 14px;
line-height: 1.55;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Global film-grain overlay — the subliminal cinematic cue */
body::after {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 9000;
opacity: 0.05;
mix-blend-mode: screen;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
animation: grain 0.7s steps(4) infinite;
}
@keyframes grain {
0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,2%)}
}
@media (prefers-reduced-motion: reduce){ body::after{ animation:none; } }
::selection { background: var(--amber); color: var(--void-darker); }
a { color: inherit; text-decoration: none; }
.mono-tag {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dim);
}
.amber { color: var(--amber); }
/* VU / level-meter component (audio) */
.smpte { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.smpte span { display: block; width: 4px; }
.smpte .c0{height:4px;background:rgba(47,182,166,0.4)} .smpte .c1{height:6px;background:rgba(47,182,166,0.55)} .smpte .c2{height:7px;background:rgba(47,182,166,0.7)}
.smpte .c3{height:9px;background:rgba(47,182,166,0.82)} .smpte .c4{height:10px;background:#2fb6a6} .smpte .c5{height:12px;background:#4fd0c0} .smpte .c6{height:13px;background:#4fd0c0}
/* ============================================================
TOP NAV
============================================================ */
.topnav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 200;
height: var(--bar);
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--gutter);
font-family: var(--mono);
font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
background: transparent;
border-bottom: 1px solid transparent;
}
/* on scroll the bar stops being a hard black block and softly fuses with the
content behind it via a blur veil — continuity instead of a cut line.
(No CSS transition here on purpose: the preview engine freezes transition
time, which would leave the veil stuck transparent.) */
.topnav.scrolled {
background: transparent;
-webkit-backdrop-filter: blur(12px) saturate(130%);
backdrop-filter: blur(12px) saturate(130%);
border-bottom-color: transparent;
}
/* soft gradient scrim: darker behind the nav text, fading to nothing below —
gives legibility without a hard bar edge or anchored separator line */
.topnav.scrolled::before {
content: ''; position: absolute; left: 0; right: 0; top: 0;
height: 230%; z-index: -1; pointer-events: none;
background: linear-gradient(to bottom, rgba(8,13,16,0.78) 0%, rgba(8,13,16,0.42) 42%, transparent 100%);
}
/* ---- Brand lockup: minimal mark + Bebas wordmark, aligned to cap height ---- */
.topnav .brand { display: flex; align-items: center; gap: 0.34rem; line-height: 1; }
.topnav .brand .word {
font-family: var(--display);
font-size: 1.55rem; line-height: 0.8; letter-spacing: 0.06em;
color: var(--paper-bright);
-webkit-text-stroke: 0.6px var(--paper-bright);
position: relative; z-index: 0;
transition: color 0.3s;
}
.topnav .brand .word .echo-solid { position: relative; z-index: 1; }
.topnav .brand .word .echo-ghost { display: none; }
.topnav .brand:hover .word { color: #fff; }
.topnav .brand .mark { display: none; align-items: center; color: var(--paper-bright); }
.topnav .brand .mark svg { display: block; height: 1.12rem; width: auto; overflow: visible; transform: translateY(-1.5px); }
.topnav .brand .dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; animation: rec 2s ease-in-out infinite; }
@keyframes rec { 0%,100%{opacity:1} 50%{opacity:0.25} }
/* which mark shows, driven by body[data-logo] */
body[data-logo="signal"] .brand .mark-signal,
body[data-logo="bars"] .brand .mark-bars,
body[data-logo="aperture"] .brand .mark-aperture,
body[data-logo="wordmark"] .brand .mark-dot { display: flex; }
/* echo concept: no icon — the wordmark sheds ghost repetitions to the right.
Real DOM copies (not text-shadow) so they animate cleanly; on hover they
ripple outward and fade, like an actual echo. */
body[data-logo="echo"] .brand .word { padding-right: 0.7em; }
body[data-logo="echo"] .brand .word .echo-ghost {
display: inline-block; position: absolute; left: 0; top: 0; z-index: -1;
color: var(--paper-bright); -webkit-text-stroke: 0;
pointer-events: none; white-space: nowrap;
opacity: 0.42; transform: translateX(0.17em);
transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease;
}
body[data-logo="echo"] .brand .word .echo-ghost.g2 { opacity: 0.18; transform: translateX(0.36em); }
body[data-logo="echo"] .brand:hover .word .echo-ghost { opacity: 0.26; transform: translateX(0.62em); }
body[data-logo="echo"] .brand:hover .word .echo-ghost.g2 { opacity: 0.10; transform: translateX(1.18em); }
.topnav .brand .mark-signal svg path { stroke: currentColor; }
.topnav nav { display: flex; gap: 1.7rem; }
.topnav nav a { font-family: var(--nav); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--dim); transition: color 0.25s; position: relative; }
.topnav nav a:hover, .topnav nav a.active { color: var(--paper-bright); }
.topnav nav a.active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--amber);
}
.lang { display: flex; gap: 0.55rem; align-items: center; }
.lang button {
background: none; border: none; cursor: pointer; padding: 0;
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--dimmer); transition: color 0.2s;
}
.lang button:hover { color: var(--paper); }
.lang button.on { color: var(--amber); }
.lang .sep { color: var(--dimmer); }
.menu-btn { display: none; background: none; border: none; color: var(--paper-bright); font-size: 1rem; cursor: pointer; }
/* mobile drawer */
.drawer {
position: fixed; inset: 0; z-index: 300;
background: var(--void-darker);
transform: translateY(-100%); transition: transform 0.5s cubic-bezier(.7,0,.2,1);
display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
padding: var(--gutter);
}
.drawer.open { transform: translateY(0); }
.drawer a { font-family: var(--display); font-size: 2.4rem; letter-spacing: 0.06em; color: var(--paper-bright); }
.drawer a .n { font-family: var(--nav); font-size: 0.7rem; color: var(--amber); margin-right: 1rem; letter-spacing: 0.16em; }
.drawer .close { position: absolute; top: var(--bar); right: var(--gutter); font-size: 1.4rem; background: none; border: none; color: var(--paper); cursor: pointer; }
.drawer .drawer-lang { margin-top: 2rem; }
/* ============================================================
OPENING / HERO
============================================================ */
.hero {
position: relative;
height: 100vh; min-height: 600px;
overflow: hidden;
}
.hero-photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
background:
radial-gradient(ellipse at 35% 45%, #1a2832 0%, transparent 60%),
linear-gradient(160deg, #131e26 0%, #0a1014 55%, #060b0e 100%);
}
.hero-photo image-slot { width: 100%; height: 100%; display: block; }
/* grading wash over the photo */
.hero-grade {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
radial-gradient(ellipse at 28% 42%, rgba(42,95,110,0.45) 0%, transparent 62%),
radial-gradient(ellipse at 78% 68%, rgba(47,182,166,0.18) 0%, transparent 55%),
linear-gradient(to bottom, rgba(6,11,14,0.55) 0%, rgba(6,11,14,0.15) 35%, rgba(6,11,14,0.30) 65%, rgba(6,11,14,0.85) 100%);
}
/* letterbox bars — static, always in place (entrance anim removed: preview freezes CSS time) */
/* sonar / signal waves — large, faint background watermark behind ECHOES */
.hero-sonar { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.42; filter: blur(0.6px); }
.hero-sonar svg { width: 100%; height: 100%; display: block; }
@media (max-width: 700px){ .hero-sonar { opacity: 0.3; } }
.lb { position: absolute; left: 0; right: 0; height: var(--bar); background: var(--black); z-index: 20; }
.lb-top { top: 0; }
.lb-bottom { bottom: 0; }
/* corner anchors live just inside the letterbox */
.anchor { position: absolute; z-index: 25; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; }
.anchor.tl { top: calc(var(--bar) + 0.9rem); left: var(--gutter); color: var(--dim); }
.anchor.tr { top: calc(var(--bar) + 0.9rem); right: var(--gutter); color: var(--amber); text-align: right; }
.anchor.bl { bottom: 1.6rem; left: var(--gutter); color: var(--dim); }
.anchor.br { bottom: 1.6rem; right: var(--gutter); }
.hero-center {
position: absolute; inset: 0; z-index: 22;
display: flex; flex-direction: column; justify-content: center;
padding: 0 var(--gutter);
}
.hero-eyebrow {
font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase;
color: var(--paper); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem;
}
.hero-eyebrow .line { width: 2.4rem; height: 1px; background: var(--amber); }
.hero-title {
font-family: var(--display);
font-size: clamp(5.5rem, 19vw, 17rem);
line-height: 0.8; letter-spacing: 0.02em;
color: var(--paper-bright);
position: relative;
}
/* echo concept at hero scale: the giant wordmark sheds ghost repetitions */
.hero-title .echo-solid { position: relative; z-index: 1; text-shadow: 0 0 90px rgba(42,95,110,0.55); }
.hero-title .echo-ghost { position: absolute; left: 0; top: 0; z-index: 0; color: var(--paper-bright); pointer-events: none; white-space: nowrap; opacity: 0.16; transform: translateX(0.05em); }
.hero-title .echo-ghost.g2 { opacity: 0.075; transform: translateX(0.105em); }
.hero-sub {
font-family: var(--serif); font-style: normal; font-weight: 400;
font-size: clamp(1.1rem, 2.2vw, 1.7rem);
color: var(--paper); max-width: 46rem; margin-top: 1.4rem; line-height: 1.4;
text-wrap: balance;
}
/* next-show timecode block bottom-left */
.next-show { display: flex; flex-direction: column; gap: 0.25rem; }
.next-show .lbl { color: var(--dim); }
.next-show .tc { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.12em; color: var(--amber); font-weight: 500; }
.next-show .ven { color: var(--paper); font-size: 0.62rem; }
.scroll-cue {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 1.6rem; z-index: 25;
font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
opacity: 1; transition: opacity 1s ease 1.35s;
}
.scroll-cue .bar { width: 1px; height: 2.2rem; background: linear-gradient(var(--amber), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform: scaleY(0.4); opacity:0.4 } 50%{ transform: scaleY(1); opacity:1 } }
/* ============================================================
SECTION SCAFFOLD
============================================================ */
.reel {
max-width: var(--maxw); margin: 0 auto;
padding: clamp(4rem, 9vh, 8rem) var(--gutter);
border-top: 1px solid var(--rule);
position: relative; z-index: 0;
}
/* per-section colour wash over the black — a faint, distinct glow per section */
.reel::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100vw; z-index: -1; pointer-events: none;
}
#repertoire::before { background: linear-gradient(to bottom, transparent, rgba(58,158,86,0.13) 50%, transparent); }
/* real ![]()
background layer — renders reliably + is screenshot-verifiable */
.reel-bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -2; overflow: hidden; pointer-events: none; }
.reel-bg img { width: 100%; height: 100%; object-fit: contain; object-position: center 52%; opacity: 0.2; }
.reel-bg::after { content: ''; position: absolute; inset: 0; background:
linear-gradient(rgba(13,20,24,0.35), rgba(13,20,24,0.35)),
linear-gradient(to bottom, var(--void) 0%, transparent 30%, transparent 70%, var(--void) 100%),
linear-gradient(to right, var(--void) 0%, rgba(13,20,24,0.5) 30%, transparent 50%); }
/* LIVE — tickets photo: cover, darker, blue-tinted veil to match the section */
.reel-bg-live img { object-fit: cover; object-position: center 40%; opacity: 0.3; filter: grayscale(1) sepia(1) hue-rotate(176deg) saturate(2.3) brightness(0.52) contrast(1.08); }
.reel-bg-live::after { background:
linear-gradient(to bottom, var(--void) 0%, transparent 32%, transparent 64%, var(--void) 100%),
linear-gradient(rgba(6,10,16,0.42), rgba(6,10,16,0.42)); }
#live::before { background: linear-gradient(to bottom, transparent 0%, rgba(58,128,205,0.16) 40%, rgba(58,128,205,0.16) 60%, transparent 100%); }
#ensemble::before { background: linear-gradient(to bottom, transparent 0%, rgba(214,148,80,0.13) 40%, rgba(214,148,80,0.13) 60%, transparent 100%); }
#archive::before { background: linear-gradient(to bottom, transparent 0%, rgba(56,138,200,0.16) 40%, rgba(56,138,200,0.16) 60%, transparent 100%); }
.reel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2.4rem; gap: 1rem; flex-wrap: wrap; }
.reel-tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); }
.reel-num { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--dim); }
.reel-title { font-family: var(--display); font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 0.95; letter-spacing: 0.02em; color: var(--paper-bright); text-transform: uppercase; }
.reel-lede {
font-family: var(--serif); font-style: normal; font-weight: 400;
font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.5; color: var(--paper);
max-width: 44rem; margin-top: 1.6rem;
}
.reel-lede em { color: var(--amber-bright); font-style: normal; }
/* reveal-on-scroll — visible by default; .in is a no-op fallback (preview freezes CSS time) */
.reveal { opacity: 1; transform: none; }
/* ============================================================
REPERTOIRE — scalable expandable index (v2)
============================================================ */
.rep-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-top: 3rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule-strong); }
.rep-tally { display: flex; gap: 2.6rem; }
.rep-tally .stat { display: flex; flex-direction: column; gap: 0.1rem; }
.rep-tally .stat b { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.8; color: var(--paper-bright); font-weight: 400; letter-spacing: 0.02em; }
.rep-tally .stat span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-light); }
.rep-tools { display: flex; gap: 0.9rem; align-items: center; }
.rep-search { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--rule-strong); padding: 0.55rem 0.9rem; background: rgba(0,0,0,0.25); }
.rep-search svg { width: 13px; height: 13px; stroke: var(--dim); flex: none; }
.rep-search input { background: none; border: none; outline: none; color: var(--paper); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; width: 11rem; }
.rep-search input::placeholder { color: var(--dimmer); }
.sort { display: flex; border: 1px solid var(--rule-strong); }
.sort button { background: none; border: none; cursor: pointer; padding: 0.55rem 0.8rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); transition: all 0.2s; }
.sort button + button { border-left: 1px solid var(--rule-strong); }
.sort button.on { background: var(--amber); color: var(--void-darker); }
.rep-list { margin-top: 0.5rem; }
.band { border-bottom: 1px solid var(--rule); }
.band-row {
width: 100%; background: none; border: none; cursor: pointer; text-align: left; color: inherit;
display: grid; grid-template-columns: 3.2rem 1fr auto 6.6rem 1.6rem; gap: 1.7rem; align-items: center;
padding: 1.45rem 0.4rem; transition: background 0.25s, padding-left 0.25s;
}
.band-row:hover { background: linear-gradient(90deg, rgba(47,182,166,0.06), transparent); padding-left: 0.9rem; }
.band-idx { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); letter-spacing: 0.12em; }
.band-name { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: 0.04em; color: var(--paper-bright); line-height: 1; transition: color 0.25s; }
.band-row:hover .band-name, .band.open .band-name { color: var(--amber-bright); }
.band-era { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--teal-light); white-space: nowrap; }
.band-count { display: flex; align-items: baseline; gap: 0.55rem; justify-self: end; white-space: nowrap; }
.band-count b { font-family: var(--display); font-size: 1.9rem; font-weight: 400; line-height: 0.8; color: var(--paper); letter-spacing: 0.03em; }
.band-count span { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.band-chev { justify-self: end; width: 1.6rem; height: 1.6rem; position: relative; }
.band-chev::before, .band-chev::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--dim); transition: transform 0.3s, background 0.25s; }
.band-chev::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
.band-chev::after { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }
.band.open .band-chev::after { transform: translate(-50%,-50%) scaleY(0); }
.band.open .band-chev::before, .band-row:hover .band-chev::before, .band-row:hover .band-chev::after { background: var(--amber); }
.band-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(.4,0,.2,1); }
.band.open .band-panel { grid-template-rows: 1fr; }
.band-panel-inner { overflow: hidden; }
.tracks { columns: 250px; column-gap: 2.5rem; padding: 0.3rem 0.4rem 1.9rem; }
.track { break-inside: avoid; display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.track:first-child { border-top: none; }
.track .tn { font-family: var(--mono); font-size: 0.62rem; color: var(--dimmer); letter-spacing: 0.1em; }
.track .tt { display: flex; flex-direction: column; gap: 0.12rem; }
.track .name { font-family: var(--nav); font-size: 1.02rem; font-weight: 400; color: var(--paper-bright); letter-spacing: 0.01em; }
.track .alb { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--dim); }
.track.flag .name { color: var(--amber-bright); }
.track.flag .name::after { content: '●'; font-size: 0.5rem; color: var(--amber); margin-left: 0.5rem; vertical-align: middle; }
.rep-list mark { background: rgba(47,182,166,0.28); color: var(--paper-bright); }
.rep-empty { padding: 2.5rem 0.4rem; font-family: var(--nav); font-size: 1.1rem; color: var(--dim); display: none; }
.rep-empty.show { display: block; }
.rep-foot { margin-top: 2.2rem; }
.toggle-all { background: none; border: 1px solid var(--rule-strong); cursor: pointer; padding: 0.7rem 1.2rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); transition: all 0.2s; }
.toggle-all:hover { color: var(--paper-bright); border-color: var(--dim); }
/* ============================================================
REPERTOIRE — filmography of covered bands
============================================================ */
.films { margin-top: 3.5rem; display: flex; flex-direction: column; }
.film {
display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 2rem; align-items: center;
padding: 1.6rem 0; border-top: 1px solid var(--rule);
cursor: default; transition: background 0.3s, padding 0.3s;
position: relative;
}
.film:last-child { border-bottom: 1px solid var(--rule); }
.film:hover { background: linear-gradient(90deg, rgba(47,182,166,0.05), transparent); }
.film-idx { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); letter-spacing: 0.15em; }
.film-main { display: flex; flex-direction: column; gap: 0.35rem; }
.film-name { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.7rem); letter-spacing: 0.04em; color: var(--paper-bright); line-height: 1; transition: color 0.3s; }
.film:hover .film-name { color: var(--amber-bright); }
.film-track { font-family: var(--serif); font-style: normal; font-size: 1.05rem; color: var(--dim); }
.film-era { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--teal-light); text-align: right; white-space: nowrap; }
/* ============================================================
LIVE — screening schedule
============================================================ */
.shows { margin-top: 3.5rem; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.show {
background: var(--void); display: grid; grid-template-columns: 8rem 1fr auto; gap: 2rem; align-items: center;
padding: 1.6rem 1.8rem; transition: background 0.3s;
}
.show:hover { background: var(--void-darker); }
.show.past { opacity: 0.5; }
.show-date { font-family: var(--display); font-size: 1.7rem; letter-spacing: 0.05em; color: var(--amber); line-height: 0.9; }
.show.past .show-date { color: var(--dim); }
.show-date .yr { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--dim); margin-top: 0.3rem; }
.show-info { display: flex; flex-direction: column; gap: 0.3rem; }
.show-venue { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.05em; color: var(--paper-bright); }
.show-city { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.show-cta {
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--amber); border: 1px solid var(--rule-strong); padding: 0.55rem 1rem; transition: all 0.25s; white-space: nowrap;
}
.show-cta:hover { background: var(--amber); color: var(--void-darker); border-color: var(--amber); }
.show.past .show-cta { color: var(--dim); pointer-events: none; }
/* LIVE empty state — test-card / "no signal" while the band reforms */
.shows-empty { margin-top: 3.5rem; }
.se-card { border: 1px solid rgba(90,140,205,0.22); background: linear-gradient(162deg, rgba(9,17,28,0.46) 0%, rgba(6,12,19,0.6) 70%); overflow: hidden; }
.se-bars { display: flex; align-items: flex-end; gap: 5px; height: clamp(90px, 15vh, 150px); padding: clamp(1.6rem,3.5vh,2.4rem) clamp(1.2rem,3vw,2.2rem) clamp(0.8rem,2vh,1.4rem); box-sizing: content-box; }
.se-bars span { flex: 1; border-radius: 1.5px 1.5px 0 0; }
.se-bars .c0{height:34%;background:rgba(58,128,205,0.5)} .se-bars .c1{height:58%;background:rgba(58,128,205,0.7)} .se-bars .c2{height:72%;background:rgba(70,150,210,0.85)}
.se-bars .c3{height:90%;background:#2fb6a6} .se-bars .c4{height:50%;background:rgba(58,128,205,0.7)} .se-bars .c5{height:78%;background:#4fd0c0} .se-bars .c6{height:42%;background:rgba(58,128,205,0.55)}
.se-body { padding: 2.2rem clamp(1.5rem,4vw,3rem) 2.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.se-status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--amber); }
.se-note { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--paper-bright); max-width: 38rem; line-height: 1.35; }
.se-cta {
margin-top: 0.5rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
color: var(--amber); border: 1px solid var(--rule-strong); padding: 0.75rem 1.3rem; transition: all 0.25s;
}
.se-cta:hover { background: var(--amber); color: var(--void-darker); border-color: var(--amber); }
/* ============================================================
ENSEMBLE — cast list
============================================================ */
.cast { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.member { display: flex; flex-direction: column; gap: 0.9rem; }
.member-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--rule);
background: radial-gradient(ellipse at 50% 38%, rgba(120,150,160,0.06) 0%, transparent 62%), var(--void); }
.member-photo image-slot { width: 100%; height: 100%; display: block; filter: grayscale(1) contrast(1.1); position: relative; z-index: 2; }
.member-mono { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;
font-family: var(--display); font-size: clamp(3.9rem, 8vw, 5.4rem); letter-spacing: 0.06em; color: rgba(216,221,224,0.12); }
.member-mono-soon { color: rgba(47,182,166,0.45); font-weight: 400; }
.member-photo .pc { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 3; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.15em; color: var(--amber); }
.member-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.member-name { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.05em; color: var(--paper-bright); line-height: 1; text-transform: uppercase; }
.member-name.member-soon { color: var(--amber); }
.member-role { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-light); }
/* ENSEMBLE — piano keys photo: cool-toned already, light darkening, faint turquoise veil */
.reel-bg-ensemble img { object-fit: cover; object-position: center 55%; opacity: 0.3; filter: grayscale(0.4) brightness(0.78) contrast(1.05); }
.reel-bg-ensemble::after { background:
linear-gradient(rgba(9,15,20,0.34), rgba(9,15,20,0.34)),
linear-gradient(to bottom, var(--void) 0%, transparent 28%, transparent 70%, var(--void) 100%),
linear-gradient(to bottom, transparent, rgba(47,150,160,0.10) 50%, transparent); }
/* ============================================================
ARCHIVE — contact sheet
============================================================ */
.sheet { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
@media (max-width: 760px){ .sheet { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 12px; }
.tile { position: relative; overflow: hidden; border: 1px solid var(--rule); background: linear-gradient(135deg, #14202a 0%, #0a1014 75%); }
.tile.art { aspect-ratio: 1 / 1; }
.tile.live { aspect-ratio: 2 / 1; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(0.65) hue-rotate(135deg) saturate(0.85) brightness(0.6) contrast(1.06); transition: transform 0.55s cubic-bezier(.2,.7,.2,1), filter 0.55s ease; }
.tile:hover img { transform: scale(1.04); filter: grayscale(0) brightness(1) contrast(1.04) saturate(1.06); }
.tile .fc { position: absolute; bottom: 0.7rem; left: 0.7rem; z-index: 3; white-space: nowrap; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em; color: rgba(232,235,237,0.9); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
/* ============================================================
CREDITS — end roll
============================================================ */
.credits { background: linear-gradient(to bottom, transparent 0%, rgba(202,84,100,0.14) 42%, transparent 92%), var(--void-darker); border-top: 2px solid var(--amber); margin-top: clamp(4rem,9vh,8rem); }
.credits-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,9vh,8rem) var(--gutter); }
.credits-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; margin-top: 3rem; }
.credit-block h4 { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.1rem; }
.credit-block .big { font-family: var(--display); font-size: clamp(1.6rem,3vw,2.2rem); letter-spacing: 0.03em; color: var(--paper-bright); line-height: 1; flex-shrink: 0; }
.booking-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.credit-block a.big:hover { color: var(--amber-bright); }
.credit-links { display: flex; flex-direction: column; gap: 0.7rem; }
.credit-links a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--paper); transition: color 0.2s; display: flex; align-items: center; gap: 0.7rem; }
.credit-links a:hover { color: var(--amber); }
.credit-links a .arr { color: var(--dim); }
.presskit {
display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; flex-shrink: 0; align-self: stretch;
font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--amber); border: 1px solid var(--amber); padding: 0 1.3rem; transition: all 0.25s;
}
.presskit:hover { background: var(--amber); color: var(--void-darker); }
/* end-credit roll names */
.endroll { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1.4rem 2.5rem; }
.endroll .er { display: flex; flex-direction: column; gap: 0.2rem; }
.endroll .er .r { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.endroll .er .n { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper-bright); line-height: 1; }
.endroll .er .n.is-soon { color: var(--amber); }
footer.site-foot {
text-align: center; padding: 3rem var(--gutter);
font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase;
color: var(--dimmer); border-top: 1px solid var(--rule);
display: flex; flex-direction: column; gap: 0.8rem; align-items: center;
}
footer.site-foot .smpte { margin-bottom: 0.5rem; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1000px) {
.topnav nav { display: none; }
.menu-btn { display: block; }
.anchor.tl, .anchor.br { display: none; }
}
@media (max-width: 680px) {
.topnav .lang { display: none; }
.film { grid-template-columns: 3rem 1fr; }
.film-era { display: none; }
.band-row { grid-template-columns: 2.4rem 1fr auto 1.4rem; gap: 1rem; }
.band-era { display: none; }
.rep-meta { flex-direction: column; align-items: stretch; }
.rep-tools { justify-content: space-between; }
.rep-search { flex: 1; }
.rep-search input { width: 100%; }
.show { grid-template-columns: 5rem 1fr; row-gap: 1rem; }
.show-cta { grid-column: 2; justify-self: start; }
.credits-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.anchor.bl { font-size: 0.55rem; }
}