@font-face {
  font-family: Rubik;
  src: url('assets/rubik-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  src: url('assets/rubik-800.woff2') format('woff2');
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --black: #090909;
  --white: #f5f4ed;
  --yellow: #ffea57;
  --muted: #b2b1ac;
  --line: rgba(255,255,255,.08);
  --edge: clamp(24px,4.5vw,88px);
  --ease: cubic-bezier(.22,1,.36,1);
  --micro: 180ms;
  --menu: 500ms;
  --space: 8px;
  color-scheme: dark;
  font-family: Rubik,Arial,sans-serif;
  background: var(--black);
  color: var(--white);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  position: relative;
  background: #070707;
}

body:before,
body:after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: auto -12vw -8vh;
  width: 70vw;
  height: 48vh;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .1;
  background: radial-gradient(ellipse at 50% 100%,#c9c9c9 0%,#777 27%,transparent 72%);
  animation: smoke-drift 26s ease-in-out infinite alternate;
}

body:after {
  right: -16vw;
  left: auto;
  bottom: 13vh;
  width: 54vw;
  height: 42vh;
  opacity: .07;
  animation-duration: 34s;
  animation-delay: -13s;
}

@keyframes smoke-drift {
  0% {
    transform: translate3d(-7%,7%,0) scale(.88) rotate(-4deg);
  }
  50% {
    transform: translate3d(4%,-4%,0) scale(1.08) rotate(3deg);
  }
  100% {
    transform: translate3d(11%,4%,0) scale(.95) rotate(8deg);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
}

::selection {
  background: var(--yellow);
  color: var(--black);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 100;
  background: var(--yellow);
  color: var(--black);
  padding: 12px;
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
}

.header {
  padding: 0 var(--edge);
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.identity,
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-actions {
  gap: 12px;
}

.brand {
  display: block;
  width: 92px;
  line-height: 0;
}

.brand img {
  width: 100%;
  height: auto;
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  padding: 14px 0;
  font-size: 14px;
}

.menu-icon {
  position: relative;
  display: block;
  width: 27px;
  height: 20px;
}

.menu-icon i {
  position: absolute;
  right: 0;
  display: block;
  width: 27px;
  height: 2px;
  background: var(--white);
  top: 5px;
  transition: transform var(--menu) var(--ease),width var(--menu) var(--ease);
}

.menu-icon i+ i {
  top: 13px;
  width: 19px;
}

.menu-toggle:hover i+ i {
  width: 27px;
}

.menu-toggle[aria-expanded=true] i {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded=true] i+ i {
  width: 27px;
  transform: translateY(-4px) rotate(-45deg);
}

.pill {
  border: 1px solid #ffffff40;
  border-radius: 999px;
  min-height: 46px;
  padding: 12px 23px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: background var(--micro),color var(--micro);
}

.pill:hover {
  background: var(--white);
  color: var(--black);
}

.contact {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.hero {
  min-height: 100svh;
  height: auto;
  isolation: isolate;
  position: relative;
  background: var(--black);
}

.hero-media {
  position: absolute;
  left: -4%;
  top: 0;
  width: 69%;
  height: 96%;
  z-index: -3;
  overflow: hidden;
  mask-image: linear-gradient(to right,transparent 0,#000 12%,#000 58%,transparent 100%);
  -webkit-mask-image: linear-gradient(to right,transparent 0,#000 12%,#000 58%,transparent 100%);
}

.hero-media:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.venue-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.6);
  opacity: .72;
}

.video-crop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s;
  overflow: hidden;
  filter: saturate(.5) brightness(.65);
}

.video-crop.is-playing {
  opacity: 1;
}

.video-crop iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  pointer-events: none;
}

.haze {
  position: absolute;
  pointer-events: none;
  z-index: -2;
  width: 80%;
  height: 35%;
  left: -10%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse,#b5ab821a 0%,#a4a39d0b 32%,transparent 70%);
  filter: blur(35px);
  animation: haze-drift 21s ease-in-out infinite alternate;
}

.haze-two {
  left: 24%;
  top: 34%;
  width: 65%;
  opacity: .65;
  animation-delay: -11s;
  animation-duration: 29s;
}

@keyframes haze-drift {
  from {
    transform: translate3d(-4%,-8%,0) rotate(-12deg) scale(.9);
  }
  to {
    transform: translate3d(8%,9%,0) rotate(9deg) scale(1.2);
  }
}

.hero-content {
  position: relative;
  width: 58%;
  margin-right: var(--edge);
  padding-top: clamp(150px,19vh,300px);
}

.eyebrow {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c7c6bf;
  margin: 0 0 28px;
}

.eyebrow span {
  width: 24px;
  height: 2px;
  background: var(--yellow);
}

h1 {
  font-size: clamp(86px,9.6vw,176px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.055em;
  margin: 0 0 30px;
}

h1>span {
  display: block;
}

.headline-second {
  white-space: nowrap;
}

h1 em {
  font-style: normal;
  color: var(--yellow);
}

h1 b {
  font-weight: inherit;
  color: var(--yellow);
}

.hero-description {
  font-size: clamp(19px,1.55vw,28px);
  line-height: 1.55;
  color: #d2d1cb;
  margin: 0 0 30px;
  text-wrap: balance;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px,3vw,42px);
  max-width: 100%;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  padding: 8px 26px 8px 8px;
  font-size: 16px;
  min-height: 58px;
  transition: background var(--micro),transform var(--micro) var(--ease);
}

.cta-arrow {
  background: var(--black);
  color: var(--yellow);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: transform var(--micro);
}

.hero-cta:hover {
  background: #fff18b;
  transform: translateY(-2px);
}

.motion-toggle {
  position: absolute;
  left: var(--edge);
  bottom: 154px;
  background: #13131366;
  border: 1px solid #ffffff45;
  backdrop-filter: blur(10px);
}

.motion-toggle:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.hero-bottom {
  position: absolute;
  bottom: 30px;
  left: var(--edge);
  right: var(--edge);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  color: #a7a69f;
}

.bottom-wordmark {
  letter-spacing: .22em;
  font-size: 12px;
}

.hero-bottom a {
  color: var(--white);
  display: flex;
  gap: 18px;
}

.hero-bottom a:hover {
  color: var(--yellow);
}

.menu-backdrop {
  position: fixed;
  background: #0004;
  z-index: 19;
}

.menu-panel {
  position: fixed;
  overflow: auto;
  background: #161615ed;
  border: 1px solid #ffffff20;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: transform var(--menu) var(--ease),opacity var(--menu) var(--ease),visibility var(--menu);
}

.menu-kicker {
  font-size: 14px;
  color: var(--muted);
}

.menu-panel nav {
  margin: 30px 0 38px;
}

.menu-panel nav a {
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
  font-size: 26px;
  transform: translateX(20px);
  opacity: 0;
  transition: transform var(--menu) var(--ease),opacity var(--menu),color var(--micro);
}

.menu-panel.is-open nav a {
  transform: none;
  opacity: 1;
}

.menu-panel.is-open nav a:nth-child(2) {
  transition-delay: 35ms;
}

.menu-panel.is-open nav a:nth-child(3) {
  transition-delay: 70ms;
}

.menu-panel.is-open nav a:nth-child(4) {
  transition-delay: 105ms;
}

.menu-panel.is-open nav a:nth-child(5) {
  transition-delay: 140ms;
}

.nav-number {
  font-size: 12px;
  color: #aaa89d;
  direction: ltr;
}

.nav-arrow {
  margin-right: auto;
  font-size: 22px;
  color: var(--yellow);
}

.menu-panel nav a:hover {
  color: var(--yellow);
}

.menu-address {
  font-size: 13px;
  color: #b4b3aa;
}

.motion-paused .haze {
  animation-play-state: paused;
}

@media(min-width:1700px) {
  .hero-content {
    width: 53%;
  }
  .hero-media {
    width: 65%;
  }
}

@media(max-height:800px) and (min-width:801px) {
  .hero {
    min-height: 100svh;
  }
  .hero-content {
    padding-top: 160px;
  }
  h1 {
    font-size: clamp(86px,8.7vw,145px);
    margin-bottom: 22px;
  }
  .eyebrow {
    margin-bottom: 20px;
  }
  .hero-description {
    margin-bottom: 22px;
  }
  .motion-toggle {
    bottom: 128px;
  }
}

@media(max-width:800px) {
  :root {
    --edge: 24px;
  }
  .header {
    gap: 10px;
  }
  .identity {
    gap: 16px;
  }
  .brand {
    width: 70px;
  }
  .menu-label {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
  .pill {
    padding: 10px 16px;
    min-height: 42px;
    font-size: 13px;
    gap: 0;
  }
  .pill>span {
    display: none;
  }
  .hero {
    height: auto;
    min-height: 100svh;
  }
  .hero-content {
    width: calc(100% - 2 * var(--edge));
    margin-right: var(--edge);
  }
  h1 {
    font-size: clamp(68px,13.6vw,105px);
  }
  .hero-description {
    font-size: clamp(17px,4.4vw,21px);
    text-shadow: 0 2px 12px #000;
    margin-bottom: 26px;
  }
  .eyebrow {
    font-size: 13px;
  }
  .hero-cta {
    gap: 26px;
  }
  .hero-bottom {
    font-size: 12px;
    bottom: 25px;
    flex-wrap: wrap;
  }
  .bottom-wordmark {
    display: none;
  }
  .motion-toggle {
    bottom: 125px;
  }
  .haze {
    top: 61%;
  }
}

@media(max-width:380px) {
  :root {
    --edge: 18px;
  }
  .identity {
    gap: 12px;
  }
  .brand {
    width: 57px;
  }
  .pill {
    padding: 10px 12px;
  }
  .hero-bottom {
    gap: 12px;
  }
  h1 {
    font-size: 13.2vw;
  }
}

.hero-cta:hover .cta-arrow {
  transform: translateX(-3px);
}

.cta-arrow,
.nav-arrow,
.pill>span,
.hero-bottom a>span {
  direction: ltr;
  unicode-bidi: isolate;
}

.motion-toggle {
  width: max-content;
  height: auto;
  min-height: 42px;
  padding: 10px 16px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.motion-label {
  display: block;
  white-space: nowrap;
  flex-shrink: 0;
}

.motion-icon {
  display: flex;
  flex: 0 0 15px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 15px;
  height: 16px;
  direction: ltr;
}

.motion-icon i {
  display: block;
  flex: 0 0 2px;
  width: 2px;
  height: 13px;
  background: currentColor;
  border: 0;
  border-radius: 0;
}

.motion-toggle.is-paused .motion-icon i:first-child {
  flex-basis: 0;
  width: 0;
  height: 0;
  background: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  border-radius: 0;
}

.motion-toggle.is-paused .motion-icon i+i {
  display: none;
}

.menu-backdrop {
  inset: 0;
}

.menu-panel {
  right: 0;
  top: 0;
  bottom: 0;
  width: min(470px,100%);
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border-width: 0 0 0 1px;
  padding: 140px 40px 36px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
}

.menu-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.menu-address {
  margin-top: auto;
  padding-top: 28px;
}

.menu-open {
  overflow: hidden;
}

.menu-open .header {
  position: fixed;
}

@media(max-width:800px) {
  .menu-panel nav {
    margin-bottom: 20px;
  }
  .menu-backdrop {
    top: 0;
  }
  .motion-toggle {
    font-size: 12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,
  *:before,
  *:after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
  .haze {
    transform: none;
  }
  .hero-cta:hover {
    transform: none;
  }
}

.category-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 900px;
  margin-top: -96px;
  padding: calc(clamp(86px,10vw,150px) + 96px) var(--edge) 110px;
}

.category-section:before,
.category-section:after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.category-section:before {
  width: 55%;
  height: 45%;
  top: -10%;
  left: -10%;
  transform: rotate(-20deg);
}

.category-section:after {
  width: 60%;
  height: 38%;
  right: -15%;
  bottom: -8%;
  transform: rotate(18deg);
}

.category-header {
  text-align: center;
  position: relative;
  z-index: 1;
}

.category-header h2 {
  font-size: clamp(54px,7.2vw,126px);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0;
  font-weight: 800;
}

.category-header h2 em {
  font-style: normal;
  color: var(--yellow);
}

.category-header p {
  margin: 24px 0 20px;
  color: #d3d0c9;
  font-size: clamp(16px,1.5vw,25px);
}

.category-divider {
  display: block;
  width: min(230px,52vw);
  height: 38px;
  margin: 2px auto 0;
  overflow: visible;
  opacity: .85;
  filter: drop-shadow(0 0 3px #ffc84d77) drop-shadow(0 0 9px #ffb5343d);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

.disc-rail {
  max-width: 1500px;
  margin: clamp(60px,7vw,105px) auto 0;
  direction: rtl;
}

.disc-card {
  text-align: center;
  min-width: 0;
}

.disc-button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

.vinyl {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  border: 1px solid #7d7d7b;
  box-shadow: 0 18px 32px #000b,0 0 0 9px #101010,0 0 0 10px #55545e44;
  transition: transform 420ms var(--ease),box-shadow 420ms var(--ease),border-color 420ms var(--ease);
}

.vinyl:before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid #ffffff2a;
  box-shadow: inset 0 0 0 12px #0b0b0b, inset 0 0 0 13px #53535366;
}

.disc-placeholder {
  display: grid;
  place-items: center;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,#454545,#171717 68%);
  border: 2px solid #090909;
  box-shadow: 0 0 0 5px #050505;
  color: #bcb9ae;
  font-size: clamp(10px,1vw,15px);
  line-height: 1.25;
  text-align: center;
  position: relative;
  transition: transform 420ms var(--ease),background 420ms var(--ease);
  font-weight: 400;
}

.disc-placeholder:after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #070707;
  position: absolute;
}

.disc-card h3 {
  font-size: clamp(24px,2.45vw,44px);
  line-height: 1.1;
  margin: 34px 0 20px;
  color: var(--white);
  font-weight: 800;
}

.disc-arrow {
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--white);
  border-radius: 50%;
  margin: 0 auto;
  font-size: 29px;
  direction: ltr;
  transition: background var(--micro),color var(--micro),border-color var(--micro),transform var(--micro);
}

.disc-card:hover .disc-arrow {
  transform: translateX(-4px);
}

.disc-card.is-active .vinyl {
  border-color: var(--yellow);
  box-shadow: 0 22px 38px #000d,0 0 0 9px #101010,0 0 0 11px #ffea57;
}

.disc-card.is-active h3 {
  color: var(--yellow);
}

.disc-card.is-active .disc-arrow {
  border-color: var(--yellow);
  color: var(--yellow);
}

.category-bottom {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: 34px;
  align-items: flex-end;
  justify-content: space-between;
  color: #aaa79d;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.8;
}

.category-wave {
  width: 240px;
  height: 58px;
  opacity: .85;
  background: repeating-linear-gradient(90deg,transparent 0 7px,#ffea57 7px 9px,transparent 9px 14px);
  mask-image: linear-gradient(to bottom,transparent 0,#000 30%,#000 75%,transparent 100%);
  transform: scaleY(.75);
}

@media(max-width:800px) {
  .category-section {
    margin-top: -64px;
  }
  .category-header h2 {
    font-size: clamp(47px,13vw,78px);
  }
  .category-header p {
    font-size: 15px;
    line-height: 1.5;
    max-width: 300px;
    margin: 18px auto;
  }
  .disc-rail {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 28px;
    margin-top: 58px;
    scroll-snap-type: x mandatory;
    direction: rtl;
  }
  .disc-card {
    flex: 0 0 min(70vw,290px);
    scroll-snap-align: center;
  }
  .disc-card h3 {
    font-size: 29px;
    margin-top: 28px;
  }
  .category-bottom {
    bottom: 22px;
  }
  .category-wave {
    width: 120px;
    height: 40px;
  }
}

.header {
  position: fixed;
  z-index: 30;
}

.header.is-scrolled,
.menu-open .header {
  transform: translate(-50%,0);
  opacity: 1;
  pointer-events: auto;
}

.disc-card:hover .vinyl {
  transform: rotate(10deg) translateX(10px);
  transform-origin: 50% 50%;
}

.disc-card:hover .disc-placeholder {
  transform: none;
}

.category-bottom {
  display: none;
}

@media(max-width:800px) {
  .category-bottom {
    display: none;
  }
}

@media(max-width:800px) {
  .header.is-scrolled,
  .menu-open .header {
    transform: translate(-50%,0);
  }
}

.header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 116px;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: linear-gradient(180deg,#090909e8 0%,#09090900 100%);
  border: 0;
  border-radius: 0;
  padding-inline: var(--edge);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.header.is-scrolled {
  right: auto;
  opacity: 1;
}

@media(max-width:800px) {
  .header {
    top: 0;
    width: 100%;
    height: 96px;
    padding-inline: var(--edge);
  }
}

.menu-open .header:not(.is-scrolled) {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
  border-radius: 0;
}

.category-section:before,
.category-section:after {
  opacity: .23!important;
}

.category-section:before {
  background: radial-gradient(ellipse at 35% 55%,#aaa 0%,#666 18%,transparent 70%);
}

.disc-rail {
  position: relative;
}

.disc-card {
  position: relative;
}

.disc-rail:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -5%;
  right: -5%;
  top: 34%;
  height: 90px;
  opacity: .5;
  background: repeating-linear-gradient(90deg,transparent 0 8px,#ffdc6a 8px 10px,transparent 10px 16px);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  filter: drop-shadow(0 0 7px #ffc84d);
  display: none;
}

.disc-rail {
  z-index: 2;
}

.disc-card {
  z-index: 3;
}

.category-section:after {
  opacity: .28!important;
  filter: blur(48px);
  background: radial-gradient(ellipse at 65% 55%,#999 0%,#555 20%,transparent 70%);
}

.section-eyebrow {
  display: block;
  color: #a8a69e;
  font-size: 13px;
  letter-spacing: .12em;
  margin-bottom: 18px;
}

.disc-card:hover .vinyl {
  box-shadow: 0 22px 38px #000c,0 0 0 9px #151515,0 0 26px 6px #ffea5799,0 0 0 1px #ffea57cc;
}

.hero-media:after {
  background: linear-gradient(180deg,transparent 30%,#09090955 58%,#090909d9 82%,#090909 100%);
}

.category-section {
  background: var(--black);
}

.category-section::before,
.category-section::after {
  content: none;
  display: none;
  animation: none;
}

.category-section:before,
.category-section:after {
  background: radial-gradient(ellipse,#777 0,transparent 68%);
  z-index: 0;
  opacity: .16;
  filter: blur(42px);
  animation: category-smoke 28s ease-in-out infinite alternate;
}

.category-section:after {
  animation-duration: 36s;
  animation-delay: -12s;
}

.category-header,
.disc-rail,
@keyframes category-smoke {
  0% {
    transform: translate3d(-5%,5%,0) scale(.9);
  }
  50% {
    transform: translate3d(4%,-3%,0) scale(1.08);
  }
  100% {
    transform: translate3d(8%,4%,0) scale(.96);
  }
}

.vinyl {
  overflow: visible;
  background: #080808;
  border-color: #9a9992;
}

.vinyl-art {
  position: absolute;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px #000c);
}

.vinyl:after {
  content: "";
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  border: 1px solid #ffffff28;
  z-index: 2;
  pointer-events: none;
}

.disc-placeholder {
  z-index: 3;
}

.disc-card.is-spinning .vinyl {
  animation: vinyl-spin 900ms cubic-bezier(.22,1,.36,1) both;
  box-shadow: 0 0 0 10px #151515,0 0 30px 8px #ffea5799,0 0 0 2px #ffea57;
}

@keyframes vinyl-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  35% {
    transform: rotate(150deg) scale(1.035);
  }
  72% {
    transform: rotate(300deg) scale(1.035);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media(prefers-reduced-motion:reduce) {
  .disc-card.is-spinning .vinyl {
    animation: none;
  }
}

.header {
  transition: top 360ms var(--ease),left 360ms var(--ease),right 360ms var(--ease),width 360ms var(--ease),height 360ms var(--ease),transform 360ms var(--ease),opacity 260ms var(--ease),padding 360ms var(--ease),background 360ms var(--ease),border 360ms var(--ease),border-radius 360ms var(--ease),box-shadow 360ms var(--ease),backdrop-filter 360ms var(--ease);
}

.header.is-scrolled {
  border-color: #ffffff20;
}

.header.is-scrolled {
  top: 14px;
  left: 50%;
  width: calc(100% - 48px);
  height: 76px;
  transform: translateX(-50%);
  padding-inline: clamp(24px,3.4vw,48px);
  border-radius: 999px;
  background: #050505d9;
  border: 1px solid #ffffff26;
  box-shadow: 0 12px 34px #0008;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media(max-width:800px) {
  .header.is-scrolled {
    top: 10px;
    left: 50%;
    width: calc(100% - 24px);
    height: 64px;
    transform: translateX(-50%);
    padding-inline: 18px;
    border-radius: 999px;
  }
}

.header,
.header.is-scrolled {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 116px;
  transform: none;
  padding-inline: var(--edge);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.header:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,#090909e8 0%,#09090900 100%);
  opacity: 1;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}

.header.is-scrolled:before {
  inset: 14px 24px;
  background: #050505b8;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  box-shadow: 0 12px 34px #0008;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header>* {
  position: relative;
  z-index: 1;
}

.header.is-scrolled .brand {
  width: 92px;
  transform: scale(.86);
  transform-origin: center right;
}

@media(max-width:800px) {
  .header,
  .header.is-scrolled {
    top: 0;
    left: 0;
    width: 100%;
    height: 96px;
    padding-inline: var(--edge);
    transform: none;
  }
  .header.is-scrolled:before {
    inset: 10px 12px;
  }
  .header.is-scrolled .brand {
    width: 70px;
    transform: scale(.84);
  }
}

/* Scroll cue: thin fading stem + glowing chevron, drifting down on a loop */

.scroll-cue {
  --cue-glow: #ffb534;
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(96px + clamp(8px,2vh,24px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 88px;
  transform: translateX(-50%);
  border-radius: 22px;
  color: var(--yellow);
}

.scroll-cue svg {
  width: 14px;
  height: 78px;
  overflow: visible;
  filter: drop-shadow(0 0 3px var(--cue-glow)) drop-shadow(0 0 9px #ffb53480);
  transition: filter var(--micro);
}

.scroll-cue .cue-bar {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: cue-pulse 2.6s ease-in-out infinite alternate;
}

.scroll-cue .cue-core {
  stroke: #fff7df;
}

.scroll-cue:hover svg,
.scroll-cue:focus-visible svg {
  filter: drop-shadow(0 0 4px var(--cue-glow)) drop-shadow(0 0 16px #ffb534cc);
}

@keyframes cue-pulse {
  from {
    transform: scaleY(.82) translateY(-2px);
    opacity: .75;
  }
  to {
    transform: scaleY(1.06) translateY(3px);
    opacity: 1;
  }
}

@media(max-width:800px) {
  .scroll-cue {
    width: 44px;
  }
  .scroll-cue svg {
    width: 12px;
  }
}

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

/* Hero → categories seam: fade the video/photo fully to black before the 96px section overlap */

@media(min-width:801px) {
  .hero-media {
    --fade-x: linear-gradient(to right,transparent 0,#000 12%,#000 58%,transparent 100%);
    --fade-y: linear-gradient(to top,transparent 0,transparent 120px,#000 380px);
    mask-image: var(--fade-x),var(--fade-y);
    mask-composite: intersect;
    -webkit-mask-image: var(--fade-x),var(--fade-y);
    -webkit-mask-composite: source-in;
  }
}

/* Header at rest (top of page): fully transparent over the hero; the pill background fades in once scrolling starts */

.header:not(.is-scrolled):before {
  opacity: 0;
}

/* Rail waveform: decorative SVG drawn by app.js behind the discs (wave z1 → discs z3 → text) */

.rail-wave {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  opacity: .82;
  filter: drop-shadow(0 0 3px #ffc84d88) drop-shadow(0 0 10px #ffb53444);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

/* Disc arrow hover/focus: fills with Tammuz yellow, arrow turns black */

.disc-card .disc-arrow:hover,
.disc-card .disc-arrow:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

/* ── Upcoming events: focus carousel ─────────────────────────────────────────────
   Cards share one grid cell; app.js sets --x / --s / --o per card from its distance to the active one.
   Active card = 100%, neighbours step down in scale + opacity. Glow behind = stage light in Tammuz yellow. */

.events-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(90px,10vw,150px) 0 clamp(90px,10vw,140px);
  background: #070707;
}

.events-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(80px,9vw,130px);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,transparent,#070707);
}

.events-head {
  margin: 0 0 clamp(40px,5vw,72px);
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 24px;
}

.events-head h2 {
  margin: 0;
  font-size: clamp(56px,7vw,118px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 800;
}

.events-head h2 em {
  font-style: normal;
  color: var(--yellow);
}

.events-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
  transition: background var(--micro),color var(--micro),border-color var(--micro);
}

.events-all:hover,
.events-all:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.ev-carousel {
  --card-w: clamp(280px,25vw,380px);
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.ev-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: min(1400px,100vw);
  height: 125%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 46% at 50% 50%,#ffe45ee6 0%,#ffd445a6 28%,#ffbf3552 58%,#ffb52e14 80%,transparent 100%);
  filter: blur(50px);
  opacity: .85;
  pointer-events: none;
}

.ev-glow:after {
  content: "";
  position: absolute;
  inset: -18% -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,#ffc8393d 0%,#ffb52e1a 45%,transparent 70%);
  filter: blur(60px);
}

.ev-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  cursor: grab;
}

.ev-carousel.is-dragging .ev-track {
  cursor: grabbing;
}

.ev-card {
  --x: 0px;
  --s: 1;
  --o: 1;
  --dim: 0;
  grid-area: 1/1;
  width: var(--card-w);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #111110;
  border: 0;
  box-shadow: 0 24px 50px #000c,0 0 30px 4px #0009;
  opacity: var(--o);
  transition: transform 720ms var(--ease),opacity 520ms var(--ease),box-shadow 400ms var(--ease);
  will-change: transform,opacity;
  overflow: hidden;
}

.ev-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #050505;
  opacity: var(--dim);
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}

.ev-card.is-active {
  box-shadow: 0 30px 60px #000d,0 0 34px 4px #ffd84a66,0 0 90px 16px #ffc83a3d;
}

.ev-card.is-far {
  visibility: hidden;
}

.ev-carousel.is-dragging .ev-card {
  transition: none;
}

.ev-card:not(.is-active) {
  cursor: pointer;
}

.ev-media {
  display: block;
  position: relative;
  background: #1b1b1a;
  overflow: hidden;
}

.ev-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.ev-countdown {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.ev-countdown:empty {
  display: none;
}

.ev-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px 22px;
  min-height: 190px;
}

.ev-when {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--yellow);
  font-weight: 700;
}

.ev-time {
  color: #d9d8d1;
  font-weight: 400;
  direction: ltr;
  unicode-bidi: isolate;
}

.ev-title {
  margin: 0;
  font-size: clamp(22px,1.9vw,30px);
  line-height: 1.12;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-where {
  margin: 10px 0 0;
  font-size: 14px;
  color: #a8a69e;
}

.ev-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #ffffff4d;
  font-size: 14px;
  transition: background var(--micro),color var(--micro),border-color var(--micro);
}

.ev-card.is-active .ev-cta {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.ev-card.is-active .ev-cta:hover,
.ev-card.is-active .ev-cta:focus-visible {
  background: var(--white);
  border-color: var(--white);
}

/* side cards: keep image, date and title; reveal location + CTA when the card reaches the centre */

.ev-where,
.ev-cta,
.ev-countdown {
  transition: opacity 420ms var(--ease),transform 420ms var(--ease);
}

.ev-card:not(.is-active) .ev-where,
.ev-card:not(.is-active) .ev-cta,
.ev-card:not(.is-active) .ev-countdown {
  opacity: 0;
  transform: translateY(6px);
}

.ev-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(30px,4vw,48px);
}

.ev-nav {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #ffffff66;
  color: var(--white);
  font-size: 22px;
  transition: background var(--micro),color var(--micro),border-color var(--micro);
}

.ev-nav:hover,
.ev-nav:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

@media(max-width:800px) {
  .events-head {
    grid-template-columns: 1fr;
  }
  .ev-carousel {
    --card-w: min(76vw,330px);
  }
  .ev-info {
    padding: 18px;
  }
  .ev-title {
    font-size: 24px;
  }
  .ev-glow {
    width: 130vw;
  }
}

@media(prefers-reduced-motion:reduce) {
  .ev-card,
  .ev-card:after,
  .ev-where,
  .ev-cta,
  .ev-countdown {
    transition: none;
  }
}

/* ── Courses & workshops teaser: content right, B/W venue photo left, thin yellow arc over the image ── */

.courses-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(640px,52vw,860px);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  align-items: center;
  background: #070707;
}

.courses-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(90px,12vw,180px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,#070707,transparent);
}

.courses-content {
  grid-column: 1;
  position: relative;
  z-index: 2;
  padding: clamp(90px,9vw,140px) var(--edge);
  max-width: 680px;
}

.courses-content h2 {
  margin: 0 0 30px;
  font-size: clamp(56px,7vw,118px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 800;
}

.courses-content h2>span,
.courses-content h2 em {
  display: block;
}

.courses-content h2 em {
  font-style: normal;
  color: var(--yellow);
}

.courses-content p {
  max-width: 27em;
  text-wrap: balance;
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.7;
  color: #c8c7c1;
}

.courses-media {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 70%;
  overflow: hidden;
  --fade-x: linear-gradient(to left,transparent 0,#00000026 14%,#0000008c 32%,#000 58%,#000 100%);
  --fade-y: linear-gradient(to bottom,transparent 0,#0000004d 10%,#000 30%,#000 76%,transparent 100%);
  -webkit-mask-image: var(--fade-x),var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x),var(--fade-y);
  mask-composite: intersect;
}

.courses-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* spotlight from above, like a stage light falling onto the room */

.courses-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 38% 60% at 55% 0%,#ffffff2e 0%,transparent 70%),linear-gradient(0deg,#070707cc 0%,transparent 40%);
  pointer-events: none;
}

.courses-arc {
  position: absolute;
  z-index: 1;
  left: 3vw;
  top: 43%;
  height: 108%;
  width: auto;
  max-width: 62vw;
  aspect-ratio: 1.12;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #ffea5740);
}

.courses-arc ellipse {
  fill: none;
  stroke-dasharray: 0 .0528 0 .9472;
  transition: stroke-dasharray 2.2s cubic-bezier(.65,0,.35,1);
}

.courses-section.is-in .courses-arc ellipse {
  stroke-dasharray: 0 .0528 .69 .2572;
}

@media(max-width:800px) {
  .courses-section {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .courses-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    grid-row: 1;
    --fade-x: linear-gradient(#000,#000);
    --fade-y: linear-gradient(to bottom,transparent 0,#0000004d 10%,#000 30%,#000 60%,transparent 100%);
  }
  .courses-arc {
    left: -14vw;
    top: -4vw;
    width: 84vw;
    height: auto;
    max-width: none;
    transform: none;
  }
  .courses-content {
    grid-row: 2;
    padding: 0 var(--edge) 90px;
  }
  .courses-content h2 {
    font-size: clamp(52px,14vw,82px);
    margin-bottom: 22px;
  }
  .courses-content p {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .courses-arc ellipse {
    transition: none;
    stroke-dasharray: 0 .0528 .69 .2572;
  }
}

/* Events progress bar: thin grey track, yellow segment slides with the active event (RTL: starts on the right) */

.ev-progress {
  --p: 0;
  --thumb: 30px;
  position: relative;
  width: clamp(96px,12vw,150px);
  height: 2px;
  border-radius: 2px;
  background: #ffffff2e;
  overflow: hidden;
  filter: drop-shadow(0 0 4px #ffea5766);
}

.ev-progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,var(--yellow) var(--thumb),transparent var(--thumb));
  transform: translateX(calc(var(--p) * (var(--thumb) - 100%)));
  transition: transform 720ms var(--ease);
}

.ev-carousel.is-dragging .ev-progress span {
  transition: none;
}

@media(prefers-reduced-motion:reduce) {
  .ev-progress span {
    transition: none;
  }
}

/* ── About / venue: map (right, ~20%) · text (~40%) · building photo (left, ~40%) ──────────────── */

@property --spot {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.about-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,46fr) minmax(0,54fr);
  min-height: clamp(600px,46vw,820px);
  background: #070707;
}

.about-map-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-map-col:before,
.about-map-col:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
}

.about-map-col:after {
  background: linear-gradient(to bottom,#070707 0,#07070700 16%,#07070700 82%,#070707 100%),linear-gradient(to right,#070707 0,#07070000 8%);
}

.about-map {
  flex: 1;
  min-height: 320px;
  background: #0b0b0b;
}

.about-address {
  position: absolute;
  z-index: 500;
  left: clamp(18px,3vw,48px);
  bottom: clamp(18px,3vw,40px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #070707d9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  color: #b9b8b1;
  pointer-events: none;
}

.about-address strong {
  color: var(--white);
  font-size: 16px;
}

.about-content {
  align-self: center;
  padding: clamp(80px,8vw,130px) var(--edge) clamp(80px,8vw,130px) clamp(24px,3vw,56px);
}

.about-content h2 {
  margin: 0 0 30px;
  font-size: clamp(52px,5.6vw,104px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 800;
}

.about-content h2>span,
.about-content h2 em {
  display: block;
}

.about-content h2 em {
  font-style: normal;
  color: var(--yellow);
}

.about-content p {
  max-width: 32em;
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.75;
  color: #c8c7c1;
  text-wrap: pretty;
}

/* photo: B/W by default; a soft spotlight under the cursor reveals the real colours */

.venue-band {
  position: relative;
  height: clamp(420px,52vw,820px);
  background: #070707;
  overflow: hidden;
}

.about-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  cursor: crosshair;
  --mx: 50%;
  --my: 50%;
  --fade-x: linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  --fade-y: linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-image: var(--fade-x),var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x),var(--fade-y);
  mask-composite: intersect;
  transition: --spot 520ms var(--ease);
}

.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.about-photo-base {
  filter: grayscale(1) contrast(1.15) brightness(.58);
}

.about-photo-lit {
  -webkit-mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),#000 0,#000 35%,#0000 100%);
  mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),#000 0,#000 35%,#0000 100%);
  filter: saturate(.95) brightness(.92);
}

.about-photo.is-lit {
  --spot: clamp(150px,13vw,230px);
}

/* map skin */

.about-map .leaflet-control-zoom {
  border: 0;
  box-shadow: none;
  margin: clamp(70px,8vw,120px) 0 0 clamp(18px,3vw,48px);
}

.about-map .leaflet-control-zoom a {
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%!important;
  margin-bottom: 8px;
  background: #070707cc;
  color: var(--white);
  border: 1px solid #ffffff4d;
  font: 400 22px/38px Rubik,Arial,sans-serif;
  transition: background var(--micro),color var(--micro),border-color var(--micro);
}

.about-map .leaflet-control-zoom a:hover,
.about-map .leaflet-control-zoom a:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.tammuz-pin {
  position: relative;
}

.tammuz-pin:before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.tammuz-pin:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: pin-pulse 2.6s var(--ease) infinite;
}

@keyframes pin-pulse {
  0% {
    transform: scale(.4);
    opacity: .9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.motion-paused .tammuz-pin:after {
  animation: none;
}

.about-map .leaflet-tooltip.tammuz-label {
  border: 0;
}

.about-map .leaflet-popup-content-wrapper,
.about-map .leaflet-popup-tip {
  background: #111110;
  color: var(--white);
  box-shadow: 0 14px 30px #000c;
}

.about-map .leaflet-popup-content {
  margin: 14px 16px;
  font: 14px/1.6 Rubik,Arial,sans-serif;
  direction: rtl;
  text-align: right;
}

.about-map .leaflet-popup-content a {
  color: var(--yellow);
}

.about-map .leaflet-container a.leaflet-popup-close-button {
  color: #b9b8b1;
}

@media(max-width:800px) {
  .about-section {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .about-content h2 {
    font-size: clamp(52px,14vw,82px);
  }
  .about-content p {
    font-size: 16px;
  }
  .about-map .leaflet-control-zoom {
    margin: 40px 0 0 16px;
  }
  .about-map-col:before {
    background: linear-gradient(to bottom,#070707 0,#07070700 18%);
    -webkit-mask-image: linear-gradient(to bottom,#000 0,transparent 26%);
    mask-image: linear-gradient(to bottom,#000 0,transparent 26%);
  }
  .about-map-col:after {
    background: linear-gradient(to bottom,#070707 0,#07070700 14%,#07070700 86%,#070707 100%);
  }
  .venue-band {
    height: 70vw;
    min-height: 280px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .about-photo {
    transition: none;
  }
  .tammuz-pin:after {
    animation: none;
  }
}

.venue-band.rental-section {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  height: auto;
  min-height: 680px;
  padding: 140px var(--edge) 80px;
  gap: 40px;
  scroll-margin-top: 120px;
  isolation: isolate;
}

.rental-lights {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: space-evenly;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 64px,#000 48%,transparent 96%);
  mask-image: linear-gradient(to bottom,transparent 0,#000 64px,#000 48%,transparent 96%);
}

.rental-lights i {
  position: relative;
  width: 15%;
  height: 100%;
  opacity: 0;
  --tilt: -10deg;
}

.rental-lights i:nth-child(2) {
  --tilt: 6deg;
  transition-delay: 100ms;
}

.rental-lights i:nth-child(3) {
  --tilt: 0deg;
  transition-delay: 220ms;
}

.rental-lights i:nth-child(4) {
  --tilt: -6deg;
  transition-delay: 140ms;
}

.rental-lights i:nth-child(5) {
  --tilt: 10deg;
  transition-delay: 280ms;
}

.rental-lights i::before {
  content: "";
  position: absolute;
  top: 72px;
  left: 50%;
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background: #fff5cd;
  box-shadow: 0 0 12px 5px #ffe788aa,0 0 32px 12px #ffd85840;
  transform: translateX(-50%);
}

.rental-lights i::after {
  content: "";
  position: absolute;
  top: 77px;
  left: -45%;
  width: 190%;
  height: calc(95% - 62px);
  background: conic-gradient(from 160deg at 50% 0%,transparent 0deg,#ffe99022 8deg,#ffe99052 20deg,#ffe99022 32deg,transparent 40deg);
  filter: blur(16px);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
}

@media(prefers-reduced-motion:reduce) {
  .rental-lights i {
    transition: none;
  }
}

.rental-content {
  position: relative;
  z-index: 1;
  text-align: right;
  min-width: 0;
}

.rental-content h2 em {
  color: var(--yellow);
  font-style: normal;
}

.rental-content h2>span {
  display: block;
  white-space: nowrap;
}

.rental-content h2 {
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 28px;
  font-size: clamp(52px,5.6vw,104px);
}

.about-section {
  direction: ltr;
}

.about-content {
  direction: rtl;
}

.about-map-col:before {
  background: linear-gradient(to right,#070707,transparent 30%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.about-map .leaflet-tile-pane {
  filter: invert(1) grayscale(1) brightness(.95) contrast(1.1) sepia(.35);
}

.rental-content p {
  color: #c8c7c1;
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 32px;
}

.rental-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.rental-actions .hero-cta {
  gap: 20px;
}

/* One continuous viewport layer: no section-sized smoke edges. */

body::before,
body::after {
  display: none;
}

.stage-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg,transparent 0%,#000 24%,#000 82%,transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 24%,#000 82%,transparent 100%);
}

.stage-atmosphere i {
  position: absolute;
  inset: -15%;
  background: url('assets/css-1.webp') center bottom/cover no-repeat;
  opacity: .055;
  filter: grayscale(1) blur(14px);
  transform-origin: center;
  animation: stage-smoke-float 42s ease-in-out infinite alternate;
}

.stage-atmosphere i+i {
  opacity: .028;
  animation-duration: 57s;
  animation-delay: -23s;
  scale: -1 1;
}

@keyframes stage-smoke-float {
  from {
    transform: translate3d(-3%,4%,0) scale(1.03);
  }
  to {
    transform: translate3d(4%,-3%,0) scale(1.13);
  }
}

.motion-paused .stage-atmosphere i {
  animation-play-state: paused;
}

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

.rental-contact {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff60;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-contact-row svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 22px;
  direction: ltr;
  margin-top: 12px;
}

.footer-socials svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials :is(span, a) {
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  color: inherit;
}

.footer-socials :is(span, a):nth-child(3) svg {
  fill: currentColor;
  stroke: none;
}

.disc-rail {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
  overflow: hidden;
  padding: 38px 0 22px;
  touch-action: pan-y;
  user-select: none;
  min-height: 440px;
}

.disc-rail .disc-card {
  grid-area: 1/1;
  min-width: 0;
  transform: translateX(var(--disc-x,0px)) scale(var(--disc-scale,1));
  transition: transform 650ms var(--ease),opacity 450ms;
  transform-origin: center 40%;
  align-self: start;
}

.disc-rail .disc-card h3 {
  font-size: clamp(22px,2.1vw,34px);
}

.disc-rail .disc-card::after {
  display: none!important;
}

.disc-rail img {
  -webkit-user-drag: none;
}

.disc-controls {
  display: flex;
  align-items: center;
  margin-top: 14px;
}

.disc-controls button {
  border: 1px solid #ffffff55;
  border-radius: 50%;
  background: transparent;
}

.disc-controls button:hover:not(:disabled) {
  color: var(--yellow);
  border-color: var(--yellow);
}

.disc-controls button:disabled {
  opacity: .25;
  cursor: default;
}

.disc-position {
  direction: ltr;
  font-size: 13px;
  color: #b9b8af;
  text-align: center;
}

@media(max-width:800px) {
  .disc-rail {
    display: grid;
    padding-top: 24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .disc-rail .disc-card {
    transition: none;
  }
}

.disc-rail .disc-card {
  width: 22%;
}

.disc-position {
  position: relative;
  width: 150px;
  height: 2px;
  min-width: 0;
  background: #ffffff35;
}

.disc-position::after {
  content: "";
  position: absolute;
  right: calc(var(--progress,0%) * .8);
  width: 20%;
  height: 2px;
  background: var(--yellow);
  box-shadow: 0 0 8px #ffea5755;
  transition: right 500ms var(--ease);
}

@media(max-width:800px) {
  .disc-rail .disc-card .disc-arrow {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }
}

.site-footer {
  position: relative;
  isolation: isolate;
  background: #070707;
  padding: 90px var(--edge) 0;
  scroll-margin-top: 120px;
  color: #e9e8e2;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.05fr;
  gap: clamp(24px,4vw,70px);
  padding: 32px 0 76px;
}

.footer-identity img {
  width: 190px;
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-tagline {
  margin: 0 0 30px;
  font-size: 24px;
}

.footer-identity address {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
}

.footer-identity address small {
  display: block;
  color: #99978f;
  font-size: 12px;
}

.footer-nav {
  border-right: 1px solid #ffffff26;
  padding-right: clamp(20px,3vw,48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.footer-nav h2 {
  font-size: clamp(23px,2vw,34px);
  margin: 0 0 14px;
  line-height: 1.2;
}

.footer-nav h2:after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: var(--yellow);
  margin-top: 22px;
}

.footer-nav>a {
  font-size: 18px;
  display: flex;
  gap: 16px;
  line-height: 1.5;
}

.footer-nav>a:before {
  content: "←";
  color: var(--yellow);
}

.site-footer a {
  transition: color 180ms;
}

.site-footer a:hover {
  color: var(--yellow);
}

.footer-mood {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: right;
  isolation: isolate;
}

.footer-mood:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: calc(-1 * var(--edge));
  right: -38%;
  aspect-ratio: 1263/562;
  transform: translateY(-92%);
  background: linear-gradient(#07070752,#0707079e),url('assets/css-2.webp') center/cover;
  filter: grayscale(1) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);
}

.footer-mood p {
  font-size: clamp(20px,2vw,32px);
  font-weight: 800;
  line-height: 1.12;
  color: #e5ca67;
  transform: rotate(-7deg);
  margin: 0 0 32px;
}

.footer-mood em {
  font-style: normal;
}

.footer-mood>span {
  font-size: 10px;
  letter-spacing: .18em;
  color: #a5a39a;
}

.footer-partners {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  align-items: center;
  padding: 42px 0;
  gap: 24px;
  border-top: 1px solid #ffffff26;
  border-bottom: 1px solid #ffffff26;
}

.footer-partners img {
  width: 100%;
  height: 74px;
  padding: 6px 18px;
  filter: grayscale(1);
  opacity: .7;
  border-left: 1px solid #ffffff16;
}

.footer-partners img:last-child {
  border-left: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0 36px;
  color: #aba9a1;
  font-size: 13px;
}

.footer-bottom nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media(max-width:1000px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }
  .footer-nav {
    border: 0;
    padding: 0;
  }
  .footer-partners {
    grid-template-columns: repeat(3,1fr);
  }
}

@media(max-width:600px) {
  .site-footer {
    padding-top: 60px;
  }
  .footer-main {
    gap: 40px 20px;
    padding-bottom: 48px;
  }
  .footer-identity {
    grid-column: 1/-1;
  }
  .footer-identity img {
    width: 150px;
  }
  .footer-nav h2 {
    font-size: 22px;
  }
  .footer-nav>a {
    font-size: 15px;
  }
  .footer-mood {
    grid-column: 1/-1;
    min-height: 180px;
  }
  .footer-partners {
    gap: 18px 8px;
    padding: 28px 0;
  }
  .footer-partners img {
    height: 56px;
    padding: 4px;
  }
  .footer-bottom {
    flex-direction: column;
    font-size: 12px;
  }
}

.rental-section .about-photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5;
  min-width: 0;
  --fade-x: linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);
  --fade-y: linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%);
}

@media(max-width:800px) {
  .venue-band.rental-section {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .rental-content h2 {
    font-size: clamp(42px,10vw,64px);
  }
  .rental-content p {
    font-size: 16px;
  }
  .rental-actions .hero-cta {
    font-size: 14px;
    gap: 12px;
  }
}

/* Footer partner logos: greyscale at rest, full colour on hover */

.footer-partners img {
  transition: filter 420ms var(--ease),opacity 420ms var(--ease);
}

.footer-partners img:hover {
  filter: none;
  opacity: 1;
}

/* Footer credit (bottom-left): "Made With Passion By WMG | WMG.co.il" */

.footer-bottom {
  align-items: center;
}

.footer-credit {
  margin: 0;
  font: 700 13px/1.4 Arial,Helvetica,sans-serif;
  color: #8f8e88;
  white-space: nowrap;
}

.footer-credit a {
  color: #b3b2ab;
}

.site-footer .footer-credit a:hover {
  color: var(--white);
}

.wmg-logo {
  font-weight: 900;
  color: var(--white);
  letter-spacing: .02em;
}

.wmg-logo span {
  color: #c9e23c;
}

@media(max-width:600px) {
  .footer-credit {
    white-space: normal;
  }
}

/* Section headings grow in from afar on scroll (app.js) */

[data-reveal] {
  will-change: transform,opacity;
}

[data-reveal]:not([data-reveal="grow"]) {
  font-kerning: none;
}

[data-reveal] [class$="-mask"] {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* Carousel controls: the left-hand arrow (next, in RTL) is the filled yellow one on both carousels,
   so it always reads as "press here to move through the carousel". Category discs lose their own arrows. */

.disc-arrow {
  display: none;
}

.disc-controls button.disc-next,
.ev-controls .ev-next {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

.disc-controls button.disc-next:hover:not(:disabled),
.disc-controls button.disc-next:focus-visible,
.ev-controls .ev-next:hover,
.ev-controls .ev-next:focus-visible {
  background: #fff18b;
  border-color: #fff18b;
  color: var(--black);
}

/* Footer credit types itself out letter by letter when it scrolls into view.
   A stepped mask sweep (not split characters), so the links stay whole for screen readers. */

@property --type {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.footer-credit {
  position: relative;
  --type: 100%;
}

.footer-credit.is-typing {
  --type: 0%;
  -webkit-mask-image: linear-gradient(90deg,#000 var(--type),transparent 0);
  mask-image: linear-gradient(90deg,#000 var(--type),transparent 0);
  animation: credit-type 1.6s steps(36) forwards;
}

.footer-credit.is-typing:after {
  content: "";
  position: absolute;
  top: 8%;
  left: var(--type);
  width: 1px;
  height: 84%;
  background: #c9e23c;
  animation: credit-caret .5s steps(1) infinite;
}

@keyframes credit-type {
  to {
    --type: 100%;
  }
}

@keyframes credit-caret {
  50% {
    opacity: 0;
  }
}

@media(prefers-reduced-motion:reduce) {
  .footer-credit.is-typing {
    animation: none;
    --type: 100%;
  }
  .footer-credit.is-typing:after {
    display: none;
  }
}

/* Hero headline waveform: the same sound-wave language as the disc row, as a thin ribbon under the title */

.hero-wave {
  display: block;
  width: 100%;
  height: 132px;
  margin: 6px 0 18px;
  overflow: visible;
  opacity: 1;
  filter: drop-shadow(0 0 4px #ffc84daa) drop-shadow(0 0 14px #ffb53466);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 78%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 78%,transparent);
}

@media(max-width:800px) {
  .hero-wave {
    height: 86px;
    width: 100%;
    margin: 2px 0 14px;
  }
}

.motion-paused .scroll-cue .cue-bar {
  animation: none;
  animation-play-state: paused;
}

/* Short windows (e.g. 800px tall): tighten the hero so the CTA never falls outside the section */

/* Resting header sits on the video: no plate behind it, just a soft shadow so the items stay readable */

.header:not(.is-scrolled) .brand img,
.header:not(.is-scrolled) .menu-toggle {
  filter: drop-shadow(0 2px 10px #000c);
}

.header:not(.is-scrolled) .menu-label {
  text-shadow: 0 2px 10px #000c;
}

/* standalone export: still map instead of the live one */

.about-map.is-static {
  position: relative;
  overflow: hidden;
}

.about-map .map-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: invert(1) grayscale(1) brightness(.62) contrast(1.35);
}

.about-map .map-still-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.about-map .map-still-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-34px);
  z-index: 3;
  background: var(--yellow);
  color: var(--black);
  border-radius: 999px;
  padding: 4px 12px;
  font: 700 14px Rubik,Arial,sans-serif;
  box-shadow: 0 6px 16px #0008;
}

.about-map .map-still-credit {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 3;
  font-size: 10px;
  color: #8a8983;
}

/* Interactive map: brand zoom buttons */

.about-map {
  position: relative;
  z-index: 0;
}

.map-zoom {
  position: absolute;
  z-index: 1000;
  right: clamp(18px,3vw,48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  direction: ltr;
}

.map-zoom-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: #070707cc;
  color: var(--white);
  font: 400 28px/1 Rubik,Arial,sans-serif;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px #0009;
  transition: background var(--micro),color var(--micro),border-color var(--micro),transform var(--micro);
}

.map-zoom-btn:hover,
.map-zoom-btn:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
  transform: translateY(-2px);
}

.map-zoom-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
  background: #070707cc;
  color: var(--white);
  border-color: #ffffff4d;
}

@media(max-width:800px) {
  .about-map .leaflet-control-attribution {
    margin: 12px 78px 0 0;
  }
  .map-zoom-btn {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
}

.about-map .leaflet-container {
  background: #0b0b0b;
  font-family: Rubik,Arial,sans-serif;
}

/* Category arrows flank the discs; progress bar removed */

.disc-controls {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  justify-content: space-between;
  gap: 0;
  z-index: 5;
}

.disc-controls .disc-position {
  display: none;
}

.category-section .disc-rail {
  position: relative;
  container-type: inline-size;
  overflow: visible;
}

.disc-controls button {
  transition: background var(--micro),color var(--micro),border-color var(--micro);
  pointer-events: auto;
  position: absolute;
  top: calc(38px + 11cqw);
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 26px;
  box-shadow: 0 8px 20px #0009;
}

.disc-controls .disc-prev {
  right: calc(5vw - var(--edge));
  background: var(--black);
}

.disc-controls .disc-next {
  left: calc(5vw - var(--edge));
}

@media(max-width:800px) {
  .disc-controls .disc-prev {
    right: calc(5vw - var(--edge));
  }
  .disc-controls .disc-next {
    left: calc(5vw - var(--edge));
  }
}

/* Titles stay solid white on every disc; only the vinyl dims with depth. Active title = brand yellow. */

.disc-rail .disc-card .vinyl {
  opacity: var(--disc-fade,1);
  transition: opacity 450ms,transform 420ms var(--ease),box-shadow 420ms var(--ease),border-color 420ms var(--ease);
}

.disc-rail .disc-card h3 {
  color: var(--white);
  opacity: 1;
  transition: color var(--micro);
}

.disc-rail .disc-card.is-active h3 {
  color: var(--yellow);
}

/* Header: no "menu" label, larger round hamburger button, logo at scrolled size always */

.menu-label {
  display: none;
}

.header .menu-toggle {
  width: 54px;
  height: 54px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 50%;
  border: 1px solid #ffffff59;
  background: #07070799;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--micro),border-color var(--micro),transform var(--micro);
}

.header .menu-toggle:hover,
.header .menu-toggle:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
}

.header .menu-toggle:hover i,
.header .menu-toggle:focus-visible i {
  background: var(--black);
}

.header .menu-icon {
  width: 24px;
  height: 16px;
}

.header .menu-icon i {
  width: 24px;
  top: 3px;
}

.header .menu-icon i+ i {
  top: 11px;
  width: 16px;
}

.header .menu-toggle:hover i+ i {
  width: 24px;
}

.header .menu-toggle[aria-expanded=true] i {
  transform: translateY(4px) rotate(45deg);
}

.header .menu-toggle[aria-expanded=true] i+ i {
  width: 24px;
  transform: translateY(-4px) rotate(-45deg);
}

.header .brand,
.header.is-scrolled .brand {
  transform: none;
}

@media(max-width:800px) {
  .header .menu-toggle {
    width: 46px;
    height: 46px;
  }
}

/* Hero subtitle directly under the headline, larger; CTA never clipped */

.hero-content h1 {
  margin-bottom: 14px;
}

.hero-content .hero-description {
  font-size: clamp(26px,2.6vw,46px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -.02em;
  margin: 0 0 4px;
  text-shadow: 0 2px 14px #000a;
}

.hero-content .hero-wave {
  margin: 0 0 26px;
}

.hero-content {
  padding-bottom: clamp(120px,16vh,200px);
}

.hero-content .hero-cta {
  position: relative;
  z-index: 2;
  overflow: visible;
  white-space: nowrap;
}

.hero {
  overflow: visible;
}

/* Hero transport: minimal player under the video (replaces the motion toggle) */

.motion-toggle {
  display: none;
}

.hero-transport {
  position: absolute;
  z-index: 20;
  left: calc(-4% + 69% / 2);
  bottom: calc(96px + clamp(20px,4vh,44px));
  transform: translateX(-50%);
  width: min(300px,40vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: .72;
  transition: opacity var(--micro);
}

.hero-transport:hover,
.hero-transport:focus-within {
  opacity: 1;
}

.transport-track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #ffffff40;
}

.transport-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--p,0%);
  border-radius: 2px;
  background: var(--white);
}

.transport-knob {
  position: absolute;
  top: 50%;
  left: var(--p,0%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 3px #0006;
}

.transport-knob:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #0008;
}

.transport-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  direction: ltr;
}

.transport-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  filter: drop-shadow(0 2px 8px #000c);
  transition: transform var(--micro),color var(--micro);
}

.transport-btn svg {
  width: 26px;
  height: 26px;
}

.transport-play svg {
  width: 32px;
  height: 32px;
}

.transport-btn:hover,
.transport-btn:focus-visible {
  color: var(--yellow);
  transform: scale(1.08);
}

.transport-play .icon-play {
  display: none;
}

.transport-play.is-paused .icon-pause {
  display: none;
}

.transport-play.is-paused .icon-play {
  display: block;
}

@media(min-width:1700px) {
  .hero-transport {
    left: calc(-4% + 65% / 2);
  }
}

@media(max-width:800px) {
  .hero-transport {
    gap: 10px;
  }
  .transport-buttons {
    gap: 24px;
  }
}

/* Only the custom transport controls the clip: no hover UI from the embed */

.hero-media .video-crop,
.hero-media .video-crop iframe {
  pointer-events: none;
}

/* Gentle hover on the side event cards: lift, less veil, soft warm glow */

.ev-card {
  --lift: 0px;
  --hs: 1;
  transform: translateX(var(--x)) translateY(var(--lift)) scale(calc(var(--s) * var(--hs)));
}

.ev-carousel:not(.is-dragging) .ev-track .ev-card.ev-card:not(.is-active):not(.is-far):hover {
  --lift: -8px;
  --hs: 1.04;
  opacity: 1!important;
  box-shadow: 0 28px 56px #000d;
}

.ev-carousel:not(.is-dragging) .ev-track .ev-card:not(.is-active):not(.is-far):hover .ev-media img {
  filter: none;
}

.ev-carousel:not(.is-dragging) .ev-card:not(.is-active):not(.is-far):hover:after {
  opacity: 0;
}

.ev-card:not(.is-active):not(.is-far) {
  transition: transform 720ms var(--ease),opacity 420ms var(--ease),box-shadow 400ms var(--ease);
}

.ev-card:not(.is-active):not(.is-far):hover {
  transition: transform 320ms var(--ease),opacity 320ms var(--ease),box-shadow 320ms var(--ease);
}

/* Map marker: bigger, white, musical; label carries the address. Zoom-in button white instead of yellow. */

.tammuz-pin {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--black);
}

.tammuz-pin:before {
  inset: 0;
  background: var(--white);
  box-shadow: 0 0 0 5px #07070799,0 0 22px 6px #ffea57aa;
}

.tammuz-pin svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
}

.tammuz-pin:after {
  inset: -14px;
  border: 1.5px solid #ffea57;
}

.about-map .leaflet-tooltip.tammuz-label {
  background: #f5f4ed;
  color: var(--black);
  padding: 8px 14px;
  border-radius: 14px;
  text-align: center;
  direction: rtl;
  font: 400 13px/1.35 Rubik,Arial,sans-serif;
  box-shadow: 0 10px 26px #000a;
}

.about-map .leaflet-tooltip.tammuz-label:before {
  border-top-color: #f5f4ed;
}

.about-map .leaflet-tooltip.tammuz-label .tl-name {
  display: block;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
}

.about-map .leaflet-tooltip.tammuz-label .tl-addr {
  display: block;
  color: #3a3a37;
  white-space: nowrap;
}

.map-zoom-btn.is-in {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
  box-shadow: 0 10px 24px #0009,0 0 22px 3px #ffffff40;
}

.map-zoom-btn.is-in:hover,
.map-zoom-btn.is-in:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 10px 24px #0009,0 0 28px 5px #ffffff66;
}

.map-zoom-btn.is-in:disabled {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: none;
}

/* Arrow glyphs centred in their circles (SVG replaces the text arrow) */

.cta-arrow {
  display: grid;
  place-items: center;
  line-height: 0;
  font-size: 0;
}

.cta-arrow svg {
  display: block;
}

.hero-cta:hover .cta-arrow,
.hero-cta:active .cta-arrow {
  transform: translateX(-3px);
}

/* Courses photo: same torch reveal as the about photo (B/W base, colour under the pointer) */

.courses-media {
  --mx: 50%;
  --my: 50%;
  --spot: 0px;
  cursor: crosshair;
  pointer-events: auto;
}

.courses-media img {
  filter: grayscale(1) contrast(1.18) brightness(.62);
}

.courses-media .courses-photo-lit {
  position: absolute;
  inset: 0;
  filter: none;
  -webkit-mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),#000 0,#000 35%,#0000 100%);
  mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),#000 0,#000 35%,#0000 100%);
  transition: --spot 420ms var(--ease);
}

.courses-media.is-lit {
  --spot: clamp(150px,13vw,230px);
}

/* Arc: thin stroke, fades out at both ends */

.courses-arc ellipse {
  stroke-width: .14;
}

/* Header buttons: small scale-up on hover */

.header .pill {
  transition: background var(--micro),color var(--micro),border-color var(--micro),transform var(--micro) var(--ease);
}

.header .pill:hover,
.header .pill:focus-visible {
  transform: scale(1.05);
}

.header .menu-toggle:hover,
.header .menu-toggle:focus-visible {
  transform: scale(1.08);
}

.header .brand {
  transition: transform var(--micro) var(--ease);
}

.header .brand:hover,
.header .brand:focus-visible {
  transform: scale(1.05);
}

@media(prefers-reduced-motion:reduce) {
  .header .pill:hover,
  .header .menu-toggle:hover,
  .header .brand:hover {
    transform: none;
  }
}

/* Menu panel: no numbering, logo only on mobile, no address */

.menu-panel .nav-number {
  display: none;
}

.menu-panel .menu-logo {
  display: none;
  line-height: 0;
}

.menu-panel .menu-logo img {
  width: 88px;
  height: auto;
  display: block;
}

@media(max-width:800px) {
  .menu-panel .menu-logo {
    margin-bottom: 24px;
  }
}

/* Menu links: small vinyl disc instead of the number; spins and lights up on hover */

.menu-panel .nav-disc {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #080808;
  box-shadow: 0 0 0 1px #9a999266,0 6px 14px #000c;
  transition: transform 520ms var(--ease),box-shadow var(--micro);
}

.menu-panel .nav-disc img {
  position: absolute;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  object-fit: contain;
  display: block;
}

.menu-panel .nav-disc:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 6px 1px #ffffff66;
}

.menu-panel nav a:hover .nav-disc,
.menu-panel nav a:focus-visible .nav-disc {
  transform: rotate(180deg);
  box-shadow: 0 0 0 1px #9a999266,0 0 18px 5px #ffea5766,0 6px 14px #000c;
}

@media(max-width:800px) {
  .menu-panel .nav-disc {
    width: 28px;
    height: 28px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .menu-panel nav a:hover .nav-disc {
    transform: none;
  }
}

/* ───────── Responsive pass ───────── */

html,
body {
  overflow-x: clip;
}

/* Tablet / small laptop (801–1100): give the hero copy more room, loosen two-column sections */

@media(min-width:801px) and (max-width:1100px) {
  .hero-content {
    width: 64%;
  }
  .hero-media {
    width: 74%;
    left: -8%;
  }
  h1 {
    font-size: clamp(78px,9vw,120px);
  }
  .hero-content .hero-description {
    font-size: clamp(24px,2.8vw,34px);
  }
  .hero-content .hero-wave {
    height: 110px;
  }
  .courses-section {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  }
  .courses-content h2 {
    font-size: clamp(48px,6.4vw,72px);
  }
  .about-content h2 {
    font-size: clamp(46px,6vw,70px);
  }
  .rental-content h2 {
    font-size: clamp(40px,5.4vw,60px);
  }
  .footer-main {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(20px,3vw,40px);
  }
  .footer-mood {
    grid-column: 1/-1;
    min-height: 200px;
  }
  .footer-partners {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* Phones (≤800): three discs in view, bigger, arrows in a row underneath */

@media(max-width:800px) {
  .disc-rail {
    --disc-step: .3;
    --disc-visible: 1;
    min-height: 0;
    padding: 16px 0 0;
    overflow: visible;
    container-type: inline-size;
  }
  .disc-rail .disc-card {
    width: 40%;
  }
  .disc-rail .disc-card h3 {
    font-size: clamp(15px,4.4vw,20px);
    margin-top: 14px;
  }
  .disc-controls {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
    pointer-events: auto;
  }
  .disc-controls button {
    position: static;
    top: auto;
    transform: none;
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .disc-controls .disc-prev,
  .disc-controls .disc-next {
    right: auto;
    left: auto;
  }
  .hero-content .hero-description {
    font-size: clamp(20px,5.8vw,28px);
  }
  .hero-cta {
    font-size: 15px;
    min-height: 54px;
  }
  .events-head {
    gap: 18px;
  }
  .rental-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-partners {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* Small phones (≤380) */

@media(max-width:380px) {
  .header .pill {
    padding: 10px 12px;
    font-size: 12px;
  }
  .hero-content .hero-description {
    font-size: 20px;
  }
  .disc-rail .disc-card {
    width: 44%;
  }
  .ev-carousel {
    --card-w: min(82vw,300px);
  }
  .courses-content h2,
  .about-content h2 {
    font-size: clamp(44px,13vw,60px);
  }
}

/* Short landscape phones */

@media(max-height:520px) and (max-width:900px) {
  .hero-content {
    padding-top: 110px;
    padding-bottom: 120px;
  }
  h1 {
    font-size: clamp(48px,9vw,72px);
  }
  .hero-content .hero-wave {
    height: 56px;
    margin-bottom: 12px;
  }
  .hero-transport {
    bottom: calc(96px + 10px);
  }
  .scroll-cue {
    display: none;
  }
}

/* Mobile hero: notes wave above the headline, CTA tight to the copy, player below the CTA and above the scroll cue */

@media(max-width:800px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 130px;
  }
  .hero-content h1,
  .hero-content .hero-description {
    width: 100%;
    text-align: right;
  }
  .hero-content .hero-wave {
    order: -1;
    height: 64px;
    margin: 0 0 12px;
    width: 100%;
  }
  .hero-content h1 {
    margin-bottom: 8px;
  }
  .hero-content .hero-description {
    margin: 0 0 18px;
  }
  .hero-content .hero-cta {
    align-self: flex-start;
    margin-top: 0;
  }
  .scroll-cue {
    height: 64px;
  }
  .scroll-cue svg {
    height: 56px;
  }
}

/* Mobile menu: full-screen sheet covering the header, own logo + close, action buttons pinned to the bottom */

.menu-head-mobile,
.menu-actions {
  display: none;
}

@media(max-width:800px) {
  .menu-panel {
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    max-height: none;
    height: 100svh;
    border: 0;
    border-radius: 0;
    background: #0b0b0af2;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    z-index: 40;
    transform: translateY(-14px);
  }
  .menu-panel.is-open {
    transform: none;
  }
  .menu-panel .menu-logo {
    display: none;
  }
  .menu-head-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    order: -1;
    height: 96px;
    flex: 0 0 auto;
  }
  .menu-logo-m {
    line-height: 0;
  }
  .menu-logo-m img {
    width: 60px;
    height: auto;
    display: block;
  }
  .menu-close {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #ffffff59;
    background: #07070799;
    color: var(--white);
    font: 300 30px/1 Rubik,Arial,sans-serif;
    transition: background var(--micro),color var(--micro),transform var(--micro);
  }
  .menu-close:hover,
  .menu-close:focus-visible {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
    transform: scale(1.08);
  }
  .menu-panel nav {
    margin: 8px 0 0;
    flex: 1 1 auto;
    overflow: auto;
  }
  .menu-panel nav a {
    font-size: 26px;
    padding: 18px 0;
  }
  .menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    flex: 0 0 auto;
  }
  .menu-actions .pill {
    justify-content: space-between;
    min-height: 54px;
    padding: 12px 22px;
    font-size: 16px;
    gap: 16px;
  }
  .menu-actions .pill>span {
    display: inline;
  }
  .menu-open .header {
    visibility: hidden;
  }
  .menu-backdrop {
    display: none;
  }
}

/* Mobile hero: player and scroll cue flow below the copy instead of being pinned, so they can never overlap the CTA */

@media(max-width:800px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(96px + 28px);
  }
  .hero-content {
    padding-bottom: 0;
    flex: 0 0 auto;
  }
  .hero-transport {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 56px auto 0;
    width: min(240px,64vw);
    flex: 0 0 auto;
  }
  .scroll-cue {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 28px auto 0;
    flex: 0 0 auto;
  }
}

/* Mobile: section rhythm, events button centred, map before the about copy, rental spotlights higher, footer logo centred */

@media(max-width:800px) {
  .category-section {
    padding-top: calc(72px + 64px);
    padding-bottom: 56px;
    min-height: 0;
  }
  .events-section {
    padding: 64px 0 64px;
  }
  .events-head {
    margin-bottom: 28px;
    justify-items: center;
    text-align: center;
  }
  .events-head h2 {
    text-align: center;
  }
  .events-all {
    justify-self: center;
  }
  .courses-section {
    min-height: 0;
  }
  .courses-content {
    padding-top: 0;
    padding-bottom: 64px;
    margin-top: -12vw;
  }
  .about-section {
    display: flex;
    flex-direction: column;
    direction: rtl;
  }
  .about-map-col {
    order: -1;
    margin: 0 0 8px;
  }
  .about-map {
    min-height: min(72vw,380px);
  }
  .about-content {
    padding: 32px var(--edge) 64px;
  }
  .about-content h2 {
    margin-bottom: 20px;
  }
  .venue-band.rental-section {
    padding: 64px var(--edge) 64px;
    gap: 24px;
  }
  .site-footer {
    padding-top: 56px;
  }
  .footer-identity {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .footer-identity img {
    margin: 0 auto;
  }
}

/* Rental spotlights: bulbs at the very top of the section, clear of the title; slower stagger as they light up on scroll */

@media(max-width:1100px) {
  .venue-band.rental-section {
    padding-top: 110px;
  }
  .rental-lights i::before {
    top: 26px;
  }
  .rental-lights i::after {
    top: 31px;
    height: calc(95% - 36px);
  }
  .venue-band.rental-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 90px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,#070707,transparent);
  }
}

.rental-lights i,
.rental-lights i:nth-child(2),
.rental-lights i:nth-child(3),
.rental-lights i:nth-child(4),
.rental-lights i:nth-child(5) {
  transition-delay: 0ms;
}

/* Spotlights: fully lit once on, brighter bulbs and cones */

@media(max-width:1100px) {
  .rental-lights {
    -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 44px,#000 55%,transparent 96%);
    mask-image: linear-gradient(to bottom,transparent 0,#000 44px,#000 55%,transparent 96%);
  }
}

/* Lights fade out faster than they fade in, so the switch-off is seen while scrolling back up */

.rental-lights i {
  transition: opacity 1400ms ease;
}

.rental-section.lights-on .rental-lights i {
  opacity: 1;
  transition-duration: 1400ms;
}

/* Mobile hero video: full-bleed across the screen, fades only top/bottom */

@media(max-width:800px) {
  .hero-media {
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    top: 26%;
    height: 70%;
    opacity: .85;
    mask-image: linear-gradient(to bottom,transparent,#000 24%,#000 66%,transparent);
    -webkit-mask-image: linear-gradient(to bottom,transparent,#000 24%,#000 66%,transparent);
  }
  .hero-media:after {
    background: linear-gradient(0deg,var(--black) 0%,transparent 30%,transparent 75%,var(--black) 100%);
  }
}

/* ── QA / polish pass (no visual redesign) ── */

/* Text: avoid single-word last lines and awkward heading breaks */

h1,
h2,
h3,
.hero-description,
.category-header p,
.courses-content p,
.about-content p,
.rental-content p {
  text-wrap: balance;
}

p,
.ev-where,
.footer-identity address {
  text-wrap: pretty;
}

.ev-title {
  text-wrap: balance;
}

/* Focus: consistent visible ring on every interactive element, brand yellow, no layout shift */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: inherit;
}

.pill:focus-visible,
.hero-cta:focus-visible,
.events-all:focus-visible,
.ev-cta:focus-visible,
.ev-nav:focus-visible,
.disc-controls button:focus-visible,
.map-zoom-btn:focus-visible,
.transport-btn:focus-visible,
.menu-toggle:focus-visible,
.menu-close:focus-visible {
  outline-offset: 4px;
}

/* Hit targets: small text links get an invisible 44px tap area without moving anything */

.footer-nav>a,
.footer-contact-row a,
.footer-bottom a,
.rental-contact,
.menu-panel nav a {
  position: relative;
}

.footer-nav>a::after,
.footer-contact-row a::after,
.footer-bottom a::after,
.rental-contact::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* Layout shift: reserve space for lazy media before it arrives */

.ev-media {
  aspect-ratio: 1;
}

.footer-partners img {
  object-fit: contain;
}

.about-map {
  contain: layout paint;
}

/* Loading/empty states: hide broken remote event images gracefully, keep card shape */

.ev-media img {
  background: #1b1b1a;
  color: transparent;
}

.ev-media img[alt]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1b1b1a;
}

/* Reduced motion: honour system preference for the added interactions */

@media(prefers-reduced-motion:reduce) {
  .hero-transport,
  .transport-btn,
  .map-zoom-btn,
  .ev-card,
  .nav-disc,
  .header .pill,
  .header .brand,
  .header .menu-toggle,
  .cta-arrow {
    transition: none!important;
  }
  .ev-card:hover {
    --lift: 0px;
    --hs: 1;
  }
}

/* Mobile: keep the compact side-card CTA readable, don't clip long event titles */

@media(max-width:800px) {
  .ev-title {
    -webkit-line-clamp: 3;
  }
  .ev-info {
    min-height: 190px;
  }
}

/* Sticky header: don't hide anchored section titles under it */

section[id],
footer[id] {
  scroll-margin-top: calc(96px + 16px);
}

@media(min-width:801px) {
  section[id],
  footer[id] {
    scroll-margin-top: calc(116px + 16px);
  }
}

/* Mobile footer: everything centred in one column; address + phone share a row */

@media(max-width:800px) {
  .footer-main {
    padding: 24px 0 40px;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
    justify-items: center;
    text-align: center;
  }
  .footer-identity {
    grid-column: 1/-1;
    align-items: center;
  }
  .footer-identity address {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 28px;
  }
  .footer-tagline {
    margin-bottom: 22px;
  }
  .footer-nav {
    grid-column: auto;
    width: 100%;
    border: 0;
    padding: 0;
    gap: 16px;
  }
  .footer-nav h2 {
    margin-bottom: 6px;
  }
  .footer-nav h2:after {
    margin: 16px auto 0;
  }
  .footer-nav>a {
    text-align: center;
    justify-content: center;
  }
  .footer-mood {
    grid-column: 1/-1;
    width: 100%;
    min-height: 200px;
    text-align: center;
  }
  .footer-mood p {
    transform: rotate(-7deg);
  }
  .footer-bottom {
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer-bottom nav {
    justify-content: center;
    gap: 12px 18px;
  }
  .footer-credit {
    justify-content: center;
  }
}

@media(max-width:380px) {
  .footer-identity address {
    flex-direction: column;
    gap: 14px;
  }
}

/* Embed is only visible while actually playing; otherwise the poster shows and YouTube's overlay stays hidden */

.video-crop {
  visibility: hidden;
}

/* Mobile footer nav: arrows stack in one column (fixed-width arrow cell), links centred as a block */

@media(max-width:800px) {
  .footer-nav .footer-links a {
    grid-template-columns: 18px 1fr;
    gap: 10px;
    justify-content: start;
    text-align: right;
    width: max-content;
    max-width: 100%;
  }
  .footer-nav .footer-links a:before {
    text-align: center;
  }
  .footer-nav {
    align-items: center;
  }
  .footer-nav .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.footer-links {
  display: contents;
}

@media(max-width:800px) {
  .footer-links {
    display: flex;
  }
}

.footer-nav .footer-links a {
  font-size: 18px;
  display: flex;
  gap: 16px;
  line-height: 1.5;
}

.footer-nav .footer-links a:before {
  content: "←";
  color: var(--yellow);
}

@media(max-width:600px) {
  .footer-nav .footer-links a {
    font-size: 15px;
  }
}

@media(max-width:800px) {
  .footer-nav .footer-links a {
    display: grid;
  }
}

/* Map: hide Leaflet's own zoom control (we draw our own); brand buttons vertically centred on the right */

.about-map .leaflet-control-zoom,
.about-map .leaflet-bar {
  display: none!important;
}

.map-zoom {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

@media(max-width:800px) {
  .map-zoom {
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
  }
}

/* Rental "צור קשר" link: full-strength text and arrow, readable over the photo on mobile */

.rental-contact {
  position: relative;
  z-index: 2;
  color: var(--white);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  border-bottom-color: #ffffff99;
}

.rental-contact span {
  direction: ltr;
  color: var(--yellow);
}

@media(max-width:800px) {
  .rental-contact {
    text-shadow: 0 2px 10px #000c;
    font-size: 17px;
    min-height: 44px;
    align-items: center;
  }
  .rental-content {
    z-index: 3;
  }
}

/* OSM attribution: tiny dark chip, bottom-left, outside the inverted tile layer look */

.about-map .leaflet-control-attribution {
  position: absolute;
  right: auto;
  left: 8px;
  bottom: 8px;
  top: auto;
  margin: 0!important;
  padding: 2px 6px;
  background: #070707b3;
  color: #8a8983;
  font-size: 9px;
  line-height: 1.4;
  border-radius: 4px;
  filter: none;
  box-shadow: none;
}

.about-map .leaflet-top.leaflet-right {
  display: none;
}

.about-map .leaflet-control-attribution a {
  color: #b9b8b1;
}

/* Rental section stacking: content (incl. צור קשר) always above the photo and the lights */

.rental-section .about-photo {
  z-index: 0;
}

.rental-section .rental-content {
  position: relative;
  z-index: 5;
}

.rental-section .rental-actions {
  position: relative;
  z-index: 6;
}

.rental-section .rental-contact {
  position: relative;
  z-index: 7;
  opacity: 1;
  color: var(--white);
  mix-blend-mode: normal;
  filter: none;
}

.rental-section .rental-contact span {
  color: var(--yellow);
  opacity: 1;
}

@media(max-width:800px) {
  .venue-band.rental-section {
    display: flex;
    flex-direction: column;
  }
  .rental-section .rental-content {
    order: 0;
  }
  .rental-section .about-photo {
    aspect-ratio: 1.5;
    order: 1;
    margin-top: 8px;
  }
}

/* Hero embed: oversize the iframe ~18% so YouTube's title strip (top) and watermark (bottom) fall outside the crop */

.video-crop iframe {
  width: max(118%,calc(var(--hero-h,100svh) * 1.71 * 1.18));
  min-height: 118%;
  transform: translate(-50%,-50%);
}

@media(max-width:800px) {
  .video-crop iframe {
    width: max(118%,calc(var(--hero-h,100svh) * .7 * 1.78 * 1.18));
    min-height: 118%;
  }
}

/* Disc centre label with a real photo (same circle, same hole, same ring) */

.disc-placeholder.has-photo {
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.disc-placeholder .disc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(.9) brightness(.95);
}

.disc-placeholder.has-photo:after {
  display: none;
}

/* ── User QA pass (desktop + mobile) ── */

@media (hover:none) {
  .footer-partners img {
    filter: none;
    opacity: 1;
  }
}

html .about-map.leaflet-container {
  background: #0c0c0c;
}

.video-crop.is-playing {
  visibility: visible;
  transition: opacity 1.2s ease 2.8s;
}

.footer-socials :is(span, a) {
  transition: color 180ms ease;
  cursor: default;
}

.footer-socials a {
  cursor: pointer;
  transition: color 180ms ease, transform 180ms var(--ease);
}

@media (hover:hover) {
  .footer-socials :is(span, a):hover {
    color: var(--yellow);
  }

  .footer-socials a:hover {
    transform: scale(1.1);
  }
}

.footer-socials a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

.footer-nav {
  position: relative;
  z-index: 1;
}

@media (max-width:800px) {
  .ev-glow {
    top: 36%;
    height: 84%;
    opacity: .7;
  }
  .ev-controls {
    position: relative;
    z-index: 2;
    margin-top: 34px;
  }
  .category-header p,
  .ev-where,
  .ev-date,
  .ev-time,
  .ev-cta,
  .events-all,
  .hero-cta span,
  .footer-contact-row span,
  .footer-contact-row bdi,
  .footer-links a,
  .leaflet-tooltip .tl-addr,
  .about-content p,
  .rental-copy p,
  .courses-copy p {
    font-size: 16px!important;
  }
  .category-header p,
  .courses-content p {
    font-size: 19px!important;
    line-height: 1.55;
  }
  .category-header p .m-line {
    display: block;
  }
  .footer-bottom,
  .footer-bottom a,
  .footer-bottom span,
  .footer-credit,
  .footer-credit a {
    font-size: 14px!important;
  }
  .header-actions .pill {
    font-size: 14px!important;
  }
}

@media (hover:none) {
  .about-photo.is-lit,
  .courses-media.is-lit {
    --spot: 120px!important;
  }
}

/* Desktop menu: "צור קשר" item (mobile keeps the pill at the bottom of the menu) */

@media (max-width:800px) {
  .menu-panel nav a.nav-contact {
    display: none;
  }
}

/* The handoff made the header logo untappable on mobile (pointer-events:none, ≤800px). Removed: the client wants
   the logo to lead to the top of the home page on phones too (2026-11-02). */

/* Menu: room for the disc glow/shadow so it isn't clipped by the panel's scroll box */

.menu-panel {
  overflow-x: visible;
}

.menu-panel nav {
  padding-inline: 12px;
  margin-inline: -12px;
}

.menu-panel nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 4px;
}

.menu-panel .nav-disc {
  isolation: isolate;
}

/* Homepage event cards: fixed breathing room between the text and the CTA (margin-top:auto alone collapses on 3-line titles) */

.ev-where {
  margin-bottom: 18px;
}

.ev-cta {
  margin-top: auto;
}

/* Header pills: bold label */

.header-actions .pill,
.menu-actions .pill {
  font-weight: 700;
}

/* Header logo: animated SVG wordmark — white ink, gold sound-waves pulsing outward */

.brand .tmz-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.header:not(.is-scrolled) .brand .tmz-logo {
  filter: drop-shadow(0 2px 10px #000c);
}

/* wider wordmark (586×272 vs. the old 654×382 mark) needs a little more width to keep the same visual height */

.header .brand,
.header.is-scrolled .brand {
  width: 101px;
}

@media(max-width:800px) {
  .header .brand,
  .header.is-scrolled .brand {
    width: 77px;
  }
}

.tmz-logo .tmz-ink {
  fill: var(--white);
}

.tmz-logo .tmz-wave {
  transform-box: view-box;
  transform-origin: 0 94px;
  animation: tmz-wave 2.4s ease-in-out infinite;
}

.tmz-logo .tmz-wave path:nth-child(2) {
  animation: tmz-wave-far 2.4s ease-in-out infinite;
}

@keyframes tmz-wave {
  0%,
  100% {
    opacity: .55;
    transform: scale(.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes tmz-wave-far {
  0%,
  100% {
    opacity: .35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .tmz-logo .tmz-wave,
  .tmz-logo .tmz-wave path {
    animation: none;
  }
}

/* Header call button: retro handset with curly cord + bold asterisk, black like the label */

.pill.contact {
  gap: 8px;
}

.call-num {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  letter-spacing: .01em;
}

.call-ic {
  width: 1.9em;
  height: 1.45em;
  margin-inline-end: 3px;
  overflow: visible;
}

.call-hs {
  fill: currentColor;
}

.call-cord {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.call-star {
  width: .82em;
  height: .82em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* Call button: handset to the right of the label (RTL start) */

.pill.contact .call-ic {
  margin-inline-end: 0;
  transform: scaleX(-1);
}

/* Mobile: the label hides, the ticket line's number stays next to the handset (client, 2026-11-01). To make room,
   the header pills get a little tighter; "שכירות אולם" stays on one line from 360px up and wraps below that. */

@media (max-width:800px) {
  .header .pill.contact > .call-num {
    display: inline-flex;
  }
  .header .pill.contact {
    gap: 4px;
  }
  .header .pill.contact .call-ic {
    width: 1.4em;
    height: 1.1em;
  }
  .header .header-actions {
    gap: 6px;
  }
  html .header .header-actions .pill {
    white-space: nowrap;
    padding-inline: 12px;
  }
}

@media (max-width:400px) {
  .header {
    gap: 8px;
  }
  .header .identity {
    gap: 12px;
  }
  .header .brand {
    width: 60px;
  }
  html .header .header-actions .pill {
    padding-inline: 10px;
    font-size: 13px!important;
  }
}

@media (max-width:359px) {
  html .header .header-actions .pill.rental {
    white-space: normal;
  }
}

/* Footer partners: Beer Sheva, Kivunim, Jewish Agency +10% */

.footer-partners img[src$="img-9.avif"],
.footer-partners img[src$="img-10.avif"],
.footer-partners img[src$="img-13.avif"] {
  transform: scale(1.1);
}

/* Footer partner logos: always full colour */

.site-footer .footer-partners img,
.site-footer .footer-partners img:hover {
  filter: none!important;
  opacity: 1!important;
}

/* Jewish Agency logo: +15% on top of the earlier +10% */

.footer-partners img[src$="img-13.avif"] {
  transform: scale(1.265);
}

/* Footer partner logos — "spotlight" hover: the hovered logo lights up (quick light-on flash + warm yellow halo, like the site's lanterns),
   the others step back into the dark. No size change; colours stay full. */

.site-footer .footer-partners img {
  transition: opacity 420ms var(--ease),filter 420ms var(--ease);
}

@media (hover:hover) and (pointer:fine) {
  .site-footer .footer-partners img:hover {
    opacity: 1!important;
    filter: drop-shadow(0 0 10px #ffea5759) drop-shadow(0 0 26px #ffc84d33)!important;
    animation: partner-light-on 620ms var(--ease) both;
  }
}

@keyframes partner-light-on {
  0% {
    filter: brightness(.6) drop-shadow(0 0 0 #ffea5700);
  }
  35% {
    filter: brightness(1.45) drop-shadow(0 0 16px #ffea5799);
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 10px #ffea5759) drop-shadow(0 0 26px #ffc84d33);
  }
}

@media (prefers-reduced-motion:reduce) {
  .site-footer .footer-partners img {
    transition: none;
  }
  .site-footer .footer-partners img:hover {
    animation: none;
  }
}

/* Buttons: 18px on desktop (client rounds 2026-10-11 and 2026-10-20; header pills first, then every text button).
   html-prefixed so it beats the per-page rules in later stylesheets without !important. */
@media (min-width:801px) {
  html .pill,
  html .hero-cta,
  html .events-all,
  html .evp-chip,
  html .evp-go,
  html .evp-more,
  html .evt-stub-cta,
  html .menu-toggle {
    font-size: 18px;
  }

  html .pill {
    white-space: nowrap;
  }
}

/* The home carousel cards are narrow below 1200px; 18px would wrap their CTA onto two lines. */
@media (min-width:1200px) {
  html .ev-cta {
    font-size: 18px;
  }
}

/* Hero loop: dip to black while the clip seeks back to its start (app.js toggles .is-looping; client, 2026-10-25) */
.video-crop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.video-crop.is-looping::after {
  opacity: 1;
}

/* Header: logo +10%, menu button +20%, button labels 20px (client, 2026-10-25). Desktop only; the labels go to 20px
   from 900px, below that they would crowd the logo. */
@media (min-width:801px) {
  html .header .brand,
  html .header.is-scrolled .brand {
    width: 111px;
  }

  html .header .menu-toggle {
    width: 65px;
    height: 65px;
  }

  html .header .menu-icon {
    width: 29px;
    height: 19px;
  }

  html .header .menu-icon i {
    width: 29px;
    top: 4px;
  }

  html .header .menu-icon i+ i {
    top: 13px;
    width: 19px;
  }

  html .header .menu-toggle:hover i+ i,
  html .header .menu-toggle[aria-expanded=true] i+ i {
    width: 29px;
  }

  html .header .menu-toggle[aria-expanded=true] i {
    transform: translateY(4.5px) rotate(45deg);
  }

  html .header .menu-toggle[aria-expanded=true] i+ i {
    transform: translateY(-4.5px) rotate(-45deg);
  }
}

@media (min-width:900px) {
  html .header-actions .pill {
    font-size: 20px;
  }
}

/* Event page: details, purchase and "more events" as wide as the header and the hero ticket (client, 2026-10-25;
   the handoff capped them at 1320px, so on wide screens they sat inset from the ticket above) */
html .evt-body,
html .evt-buy,
html .evt-more {
  max-width: none;
}

/* ...but the facts (date, time, venue) keep the width they had, instead of spreading across a wide screen */
html .evt-facts {
  max-width: 720px;
}

/* Rental inquiry form (client, 2026-10-25): the rental page centres everything; the form block is centred too,
   but its labels and fields stay start-aligned like the other forms */
html .rental-page .ct-intro {
  margin-inline: auto;
}

html .rental-page .ct-form {
  max-width: 1000px;
  margin-inline: auto;
  text-align: start;
}

/* Event images: the whole poster, never cropped (client, 2026-11-01). Posters come in every shape (SmarTicket has
   1.52 landscapes, squares, 4:5 and taller portraits) and the frames are fixed, so the poster is contained and a
   blurred copy of itself (img.poster-fill, first in the frame) fills the rest. Sized with inset, not transform,
   so the cards' hover scale doesn't shrink it back. */

html :is(.ev-media, .evp-media, .evt-poster) img.poster-fill {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  max-width: none;
  object-fit: cover;
  filter: blur(14px) brightness(.5);
  background: none;
}

html :is(.ev-media, .evp-media, .evt-poster) img:not(.poster-fill) {
  position: relative;
  object-fit: contain;
  background: none;
}

html .evp-item.is-out .evp-media img.poster-fill {
  filter: blur(14px) grayscale(1) brightness(.3);
}