/* דניאל חן: עיצוב. כהה, נקי, קרם וזהב מאופק */
@font-face { font-family:"Rubik"; src:url("assets/fonts/Rubik-wght.ttf") format("truetype"); font-weight:300 900; font-display:swap; }
:root {
  --ink: #0b0a09;
  --cream: #f3ece0;
  --cream-dim: rgba(243, 236, 224, .68);
  --cream-faint: rgba(243, 236, 224, .18);
  --gold: #c8a96a;
  --gold-soft: rgba(200, 169, 106, .55);
  --panel: rgba(12, 11, 10, .55);
  --display: "Rubik", system-ui, sans-serif;
  --ui: "Rubik", system-ui, sans-serif;
  --w: 980px;
  --space: clamp(72px, 12vw, 140px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font: 400 17px/1.6 var(--ui); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Background (whole site) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.bg__still, .bg__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg__still {
  background: center / cover no-repeat;
}
.bg__video { object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.2s ease; }
.has-video .bg__video { opacity: 1; }
.bg__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(11,10,9,.25) 0%, rgba(11,10,9,.7) 70%),
    linear-gradient(180deg, rgba(11,10,9,.35) 0%, rgba(11,10,9,.62) 45%, rgba(11,10,9,.86) 100%);
}
/* film grain-free subtle warm tint */
.bg__shade::after { content: ""; position: absolute; inset: 0; background: rgba(60, 40, 15, .12); mix-blend-mode: soft-light; }

/* ---------- Layout ---------- */
.page { width: min(var(--w), 100% - 40px); margin-inline: auto; text-align: center; }
.block { padding-top: var(--space); }

/* ---------- Hero ---------- */
.hero { min-height: 74svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: clamp(48px, 9vh, 96px); }
.hero__name {
  font: 500 clamp(60px, 15vw, 150px)/.95 var(--display);
  margin: 0; letter-spacing: -.02em; color: var(--cream);
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.hero__sub { margin: 22px 0 0; font: 300 clamp(13px, 2.6vw, 16px)/1 var(--ui); letter-spacing: .38em; color: var(--cream-dim); }
.rule { display: block; width: 56px; height: 1px; background: var(--gold); margin: 34px auto 0; opacity: .85; }

/* ---------- Type ---------- */
.eyebrow { margin: 0 0 14px; font: 400 13px/1 var(--ui); letter-spacing: .34em; color: var(--gold); }
.eyebrow--small { margin-bottom: 10px; }
.song-title { margin: 0 0 30px; font: 400 clamp(30px, 6vw, 46px)/1.15 var(--display); }
.label { margin: 40px 0 18px; font: 300 15px/1 var(--ui); letter-spacing: .12em; color: var(--cream-dim); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; text-decoration: none;
  font: 600 16px/1 var(--ui); letter-spacing: .04em;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

.btn--wa { width: min(100%, 520px); min-height: 64px; padding: 0 18px; font-size: clamp(15px, 4.2vw, 18px); letter-spacing: 0; background: var(--cream); color: var(--ink); }
.btn--wa .ico { width: 22px; height: 22px; }
.btn--wa:hover { background: var(--gold); }
.block--cta { padding-top: 0; }

.btn--line { width: 100%; background: rgba(11,10,9,.35); color: var(--cream); border-color: var(--cream-faint); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--line .ico { color: var(--gold); }
.btn--line:hover { border-color: var(--gold); background: rgba(200,169,106,.1); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--cream); }
.btn--quiet { border-color: var(--cream-faint); color: var(--cream-dim); font-weight: 400; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.single-link { margin: 22px 0 0; font-size: 15px; }
.single-link a { color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid var(--gold-soft); padding-bottom: 3px; }
.single-link a:hover { color: var(--gold); }

/* ---------- YouTube ---------- */
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--cream-faint); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Shows ---------- */
.featured { padding-top: 0; margin-bottom: clamp(40px, 7vw, 64px); }
.show { background: var(--panel); border: 1px solid var(--cream-faint); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; }
.show + .show { margin-top: 20px; }
.show__banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.show__body { padding: 30px 22px 34px; }
.show__title { margin: 0 0 10px; font: 400 clamp(26px, 5vw, 38px)/1.2 var(--display); }
.show__meta { margin: 0 0 24px; color: var(--cream-dim); font-size: 16px; }
.show__meta .dot { margin: 0 10px; color: var(--gold); }
.show--featured { border-color: var(--gold-soft); }
.show--featured .btn { min-width: 240px; }

.shows__empty { border: 1px solid var(--cream-faint); padding: clamp(48px, 9vw, 84px) 24px; background: rgba(11,10,9,.4); }
.shows__empty .rule { margin: 0 auto 28px; }
.shows__soon { margin: 0; font: 300 clamp(26px, 5vw, 36px)/1.2 var(--display); }
.shows__hint { margin: 12px 0 0; color: var(--cream-dim); font-size: 15px; }

/* ---------- Footer ---------- */
.foot { padding: var(--space) 0 48px; color: var(--cream-dim); font-size: 14px; }
.foot__booking { text-decoration: none; letter-spacing: .06em; }
.foot__booking:hover { color: var(--gold); }
.foot__copy { margin: 14px 0 0; opacity: .6; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg__video { display: none !important; }
  * { transition: none !important; }
}
@media (max-width: 639px) { .grid .btn { padding: 0 12px; gap: 10px; font-size: 15px; white-space: nowrap; } }

/* ---------- כפתור צף: להזמנת מופעים ---------- */
.call-fab {
  position: fixed; z-index: 50;
  left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  padding-block: 7px; padding-inline: 7px 15px; border-radius: 999px;
  background: rgba(12, 11, 10, .72); border: 1px solid var(--gold-soft);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cream); text-decoration: none;
  font: 500 13px/1 var(--ui); letter-spacing: .02em;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  transition: border-color .25s ease, transform .25s ease;
}
.call-fab:hover, .call-fab:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.call-fab__icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
}
.foot { padding-bottom: 96px; }
@media (max-width: 639px) { .hero { min-height: 66svh; } }

.show__banner{display:block;cursor:pointer}
a.show__banner img{transition:transform .5s ease}
a.show__banner:hover img{transform:scale(1.02)}