/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Sep 07 2026 | 00:04:38 */
/* MST POLISH · 2026-09-07 — banner zoom-out + antique gilt frame + mobile show cards.
   Two things this file has to fight:
   - the banner's own <style> lives in the BODY (an Elementor HTML widget), so it wins
     ties on document order. Every rule here carries higher specificity.
   - pseudo-elements are positioned against the PADDING box, so anything that must land
     on the frame's rails is inset by -1 * the border width. */

.elementor-element-603ffbb.elementor-element-603ffbb{
  --rail-top:linear-gradient(180deg,#2e1d05 0%,#7a3f10 5%,#a8701c 9%,#e2c47c 15%,#fdf4d6 22%,#d8ae48 31%,#a97c1e 44%,#7b5714 58%,#b98d2c 73%,#ecd79a 84%,#7a4a10 93%,#150d02 100%);
  --rail-bot:linear-gradient(180deg,#160e02 0%,#5a3c0a 6%,#a8811f 15%,#d2ab42 24%,#8d6417 40%,#61440e 56%,#9c7620 70%,#c9a64a 83%,#713a0e 93%,#140c02 100%);
  --rail-left:linear-gradient(90deg,#281805 0%,#7a3f10 6%,#ab7620 11%,#ddb862 18%,#f7e8b4 25%,#cfa23c 36%,#8d6417 50%,#614309 64%,#b58a29 78%,#e3ca85 88%,#6d4210 96%,#150d02 100%);
  --rail-right:linear-gradient(270deg,#221404 0%,#6a370d 6%,#96681c 11%,#c8a95a 18%,#ded0a0 25%,#b08a2e 36%,#7a5614 50%,#533909 64%,#9c7722 78%,#c3aa6b 88%,#5d3a0d 96%,#120a02 100%);
  --bead-h:repeating-linear-gradient(90deg,#2a1c05 0 1px,#8a6417 1px 2px,#f7ebc4 2px 4px,#d3ae55 4px 6px,#8a6417 6px 7px,#241605 7px 8px);
  --bead-v:repeating-linear-gradient(180deg,#2a1c05 0 1px,#8a6417 1px 2px,#f7ebc4 2px 4px,#d3ae55 4px 6px,#8a6417 6px 7px,#241605 7px 8px);
  --gilt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  --gilt-tarnish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23t)'/%3E%3C/svg%3E");
}

/* 1 · MOBILE ZOOM-OUT — the clips are 720x900 (4:5) but the window was 0.625,
   so object-fit:cover threw away 22% of every frame. Size the window to the clip:
   matB = stage - matT - 1.25 * (viewport - 2*matS).  matS is held >= fw so the
   side rails are never clipped by the section's overflow:hidden. */
@media (max-width:767px){
  .elementor-element-603ffbb.elementor-element-603ffbb{
    --matS:17px; --matT:22px; --fw:16px; --curW:12%;
    --matB:max(150px, calc(100dvh - var(--mst-top,0px) + 20.5px - 125vw));
  }
  .elementor-element-603ffbb .mst-cta{bottom:calc(var(--matB) * .40)}
  .elementor-element-603ffbb .mst-scrim{height:34%;max-height:150px}
}
@media (min-width:768px){
  .elementor-element-603ffbb.elementor-element-603ffbb{--fw:24px}
}
.elementor-element-603ffbb > .elementor-background-video-container{
  background-size:cover;background-position:50% 42%}

/* 2 · ANTIQUE GILT FRAME.
   A gilded proscenium arch stands IN FRONT of the curtains, not behind them. At
   z-index 4 the curtains covered both side rails and all four corner ornaments,
   which left the frame reading as two flat bars. */
.elementor-element-603ffbb .mst-frame{
  border-image:none!important;border-color:transparent!important;background:none;
  z-index:7!important;
  filter:drop-shadow(0 2px 1px rgba(255,238,196,.10)) drop-shadow(0 20px 30px rgba(0,0,0,.72)) drop-shadow(0 44px 70px rgba(0,0,0,.55));
}
/* the four rails, each lit on its own axis — a moulding is a curved section,
   so the gradient runs ACROSS each rail, not diagonally across the whole frame */
.elementor-element-603ffbb .mst-frame::after{
  content:"";position:absolute;inset:calc(var(--fw) * -1);pointer-events:none;
  background:var(--rail-top) left top / 100% var(--fw) no-repeat,
             var(--rail-bot) left bottom / 100% var(--fw) no-repeat,
             var(--rail-left) left top / var(--fw) 100% no-repeat,
             var(--rail-right) right top / var(--fw) 100% no-repeat;
  box-shadow:0 0 0 1px rgba(14,9,2,.95),inset 0 0 0 1px rgba(16,10,2,.92),inset 0 0 26px rgba(0,0,0,.55);
}
/* patina + 45-degree mitre joints, painted over the rails */
.elementor-element-603ffbb .mst-frame::before{
  content:"";position:absolute;inset:calc(var(--fw) * -1);pointer-events:none;z-index:1;
  background:
    linear-gradient(45deg,transparent calc(50% - .6px),rgba(20,12,2,.75) 50%,transparent calc(50% + .6px)) left bottom / calc(var(--fw)*1.02) calc(var(--fw)*1.02) no-repeat,
    linear-gradient(-45deg,transparent calc(50% - .6px),rgba(20,12,2,.75) 50%,transparent calc(50% + .6px)) right bottom / calc(var(--fw)*1.02) calc(var(--fw)*1.02) no-repeat,
    linear-gradient(-45deg,transparent calc(50% - .6px),rgba(20,12,2,.75) 50%,transparent calc(50% + .6px)) left top / calc(var(--fw)*1.02) calc(var(--fw)*1.02) no-repeat,
    linear-gradient(45deg,transparent calc(50% - .6px),rgba(20,12,2,.75) 50%,transparent calc(50% + .6px)) right top / calc(var(--fw)*1.02) calc(var(--fw)*1.02) no-repeat,
    var(--gilt-tarnish) left top / 100% var(--fw) no-repeat,
    var(--gilt-tarnish) left bottom / 100% var(--fw) no-repeat,
    var(--gilt-tarnish) left top / var(--fw) 100% no-repeat,
    var(--gilt-tarnish) right top / var(--fw) 100% no-repeat;
  opacity:.20;mix-blend-mode:multiply;
}
/* fine metal grain; the bead box sits 0.40*fw outside the padding box, so
   -0.58*fw from there lands on the frame's border box */
.elementor-element-603ffbb .mst-frame__bead::before{
  content:"";position:absolute;inset:calc(var(--fw) * -.58);pointer-events:none;z-index:2;
  background:var(--gilt-grain) left top / 100% var(--fw) repeat-x,
             var(--gilt-grain) left bottom / 100% var(--fw) repeat-x,
             var(--gilt-grain) left top / var(--fw) 100% repeat-y,
             var(--gilt-grain) right top / var(--fw) 100% repeat-y;
  opacity:.16;mix-blend-mode:overlay;
}
/* the carved bead run on the inner lip. The old rule ran one horizontal repeat
   around all four sides, so on the side rails the beads smeared into stripes. */
.elementor-element-603ffbb .mst-frame__bead{
  inset:calc(var(--fw) * -.40);border:0!important;border-image:none!important;opacity:1;
  background:var(--bead-h) left top / 100% calc(var(--fw)*.30) repeat-x,
             var(--bead-h) left bottom / 100% calc(var(--fw)*.30) repeat-x,
             var(--bead-v) left top / calc(var(--fw)*.30) 100% repeat-y,
             var(--bead-v) right top / calc(var(--fw)*.30) 100% repeat-y;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
.elementor-element-603ffbb .mst-corner{width:calc(var(--fw)*4.1);height:calc(var(--fw)*4.1);z-index:8!important}
.elementor-element-603ffbb .mst-corner--tl{top:calc(var(--fw)*-1.42);left:calc(var(--fw)*-1.42)}
.elementor-element-603ffbb .mst-corner--tr{top:calc(var(--fw)*-1.42);right:calc(var(--fw)*-1.42)}
.elementor-element-603ffbb .mst-corner--bl{bottom:calc(var(--fw)*-1.42);left:calc(var(--fw)*-1.42)}
.elementor-element-603ffbb .mst-corner--br{bottom:calc(var(--fw)*-1.42);right:calc(var(--fw)*-1.42)}
.elementor-element-603ffbb .mst-corner svg{filter:drop-shadow(0 1px 0 rgba(255,244,214,.55)) drop-shadow(0 -1px .5px rgba(0,0,0,.8)) drop-shadow(0 5px 7px rgba(0,0,0,.65))}
.elementor-element-603ffbb .mst-corner--bl svg,.elementor-element-603ffbb .mst-corner--br svg{opacity:.86}

/* 3 · UPCOMING SHOWS ON MOBILE.
   All five cards carry the same poster, title and blurb; only the date differs.
   So the date becomes the subject of the card, which is how venues list multiple
   performances of one production. */
@media (max-width:767px){
  .play__list.play__list{grid-template-columns:repeat(2,1fr)!important;gap:14px!important;align-items:stretch!important}
  .play__list.play__list .play__card.play__card{
    display:flex!important;flex-direction:column!important;height:100%!important;
    background:linear-gradient(180deg,#17181a 0%,#0e0f10 100%)!important;
    border:1px solid rgba(201,160,58,.22)!important;border-radius:16px!important;overflow:hidden!important;
    box-shadow:0 10px 26px rgba(0,0,0,.55)!important;
    opacity:0;transform:translateY(22px) scale(.985);
    transition:opacity .62s cubic-bezier(.22,.86,.28,1),transform .62s cubic-bezier(.22,.86,.28,1),border-color .3s ease,box-shadow .3s ease}
  .play__list.play__list .play__card.play__card.mst-in{opacity:1;transform:none}
  .play__list.play__list .play__card.play__card:nth-child(2){transition-delay:.07s}
  .play__list.play__list .play__card.play__card:nth-child(3){transition-delay:.14s}
  .play__list.play__list .play__card.play__card:nth-child(4){transition-delay:.21s}
  .play__list.play__list .play__card.play__card:nth-child(5){transition-delay:.28s}
  .play__list.play__list .play__card.play__card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 7px);justify-self:center}
  .play__list.play__list .play__card.play__card:active{border-color:rgba(246,230,180,.55)!important;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 24px rgba(201,160,58,.22)!important}

  .play__list.play__list .play__card.play__card .play__card__cover{
    position:relative!important;aspect-ratio:4/3!important;height:auto!important;flex:0 0 auto!important;overflow:hidden!important}
  .play__list.play__list .play__card.play__card .play__card__img{
    position:absolute!important;inset:0!important;background-size:cover!important;background-position:50% 34%!important;
    transform:scale(1.08);transition:transform .9s cubic-bezier(.22,.86,.28,1)}
  .play__list.play__list .play__card.play__card.mst-in .play__card__img{transform:scale(1)}
  .play__list.play__list .play__card.play__card .play__card__cover::after{
    content:"";position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,rgba(14,15,16,0),rgba(14,15,16,.45) 58%,#0e0f10 100%)}

  /* THE root cause of the squashed card: a hard min-height:300px on this overlay
     forced the 3:2 poster into a 300px-tall box. */
  .play__list.play__list .play__card.play__card .play__card__info{
    position:absolute!important;inset:0!important;min-height:0!important;height:auto!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-start!important;padding:9px!important;text-align:center!important;z-index:2!important}

  .play__list.play__list .play__card.play__card .play__card__sticker{
    margin:0!important;padding:5px 11px!important;border-radius:999px!important;
    font-size:11px!important;font-weight:700!important;line-height:1!important;letter-spacing:.02em!important;
    white-space:nowrap!important;background:rgba(10,7,4,.72)!important;color:#f2e0a8!important;
    border:1px solid rgba(201,160,58,.5)!important}
  .play__list.play__list .play__card.play__card:first-child .play__card__sticker{
    background:linear-gradient(180deg,#f6e6b4,#c79a34)!important;color:#2b1b05!important;
    border-color:rgba(255,244,214,.75)!important;box-shadow:0 0 16px rgba(246,230,180,.4)!important}
  .play__list.play__list .play__card.play__card:not(:first-child) .play__card__sticker{display:none!important}
  .play__list.play__list .play__card.play__card .play__card__title{
    margin:auto 0 5px!important;font-size:12px!important;font-weight:700!important;
    letter-spacing:.24em!important;line-height:1.1!important;color:rgba(247,235,198,.95)!important;
    text-shadow:0 2px 10px rgba(0,0,0,.95)!important;text-align:center!important;z-index:2!important}
  .play__list.play__list.mst-dated .play__card.play__card .play__card__meta{display:none!important}
  .play__list.play__list .play__card.play__card .play__card__excerpt{display:none!important}
  .play__list.play__list .play__card.play__card .play__card__bottom{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:space-between!important;flex:1 1 auto!important;padding:12px 10px 14px!important;text-align:center!important}

  .play__list.play__list .mst-dt{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;padding-bottom:10px;position:relative}
  .play__list.play__list .mst-dt::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,160,58,.55),transparent)}
  .play__list.play__list .mst-dt__d{font-size:38px;font-weight:800;line-height:.95;letter-spacing:-.02em;color:#f7ebc6;
    text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 26px rgba(201,160,58,.28)}
  .play__list.play__list .mst-dt__m{font-size:14px;font-weight:700;line-height:1.2;color:#e2c887;letter-spacing:.06em;margin-top:2px}
  .play__list.play__list .mst-dt__w{font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.62);margin-top:3px}
  .play__list.play__list .mst-dt__y{font-size:10px;color:rgba(255,255,255,.34);letter-spacing:.14em;margin-top:1px}

  .play__list.play__list .play__card.play__card .play__card__btn{
    padding:0!important;margin:0!important;width:100%!important;display:flex!important;justify-content:center!important}
  .play__list.play__list .play__card.play__card .play__card__btn a{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    margin:10px 0 0!important;padding:10px 16px!important;width:auto!important;min-width:0!important;max-width:100%!important;
    white-space:nowrap!important;font-size:13px!important;font-weight:800!important;line-height:1!important;letter-spacing:.01em!important;
    border-radius:999px!important;border:1px solid rgba(255,244,214,.7)!important;
    background:linear-gradient(180deg,#f6e6b4 0%,#c79a34 100%)!important;color:#2b1b05!important;text-decoration:none!important;
    box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 20px rgba(201,160,58,.30),inset 0 1px 0 rgba(255,255,255,.65)!important;
    transition:transform .2s ease,box-shadow .28s ease}
  .play__list.play__list .play__card.play__card .play__card__btn a:hover,
  .play__list.play__list .play__card.play__card .play__card__btn a:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.58),0 0 30px rgba(246,230,180,.55),inset 0 1px 0 rgba(255,255,255,.8)!important}
  .play__list.play__list .play__card.play__card .play__card__btn a:active{transform:translateY(0) scale(.98)}
  .play__list.play__list .play__card.play__card .play__card__btn a:focus-visible{outline:3px solid #f6e6b4;outline-offset:3px}
  .play__list.play__list .play__card.play__card:first-child .play__card__btn a{animation:mstGlow 3.4s ease-in-out 1.2s infinite}
  @keyframes mstGlow{
    0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 20px rgba(201,160,58,.30),inset 0 1px 0 rgba(255,255,255,.65)}
    50%{box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 34px rgba(246,230,180,.62),inset 0 1px 0 rgba(255,255,255,.8)}}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .play__list.play__list .play__card.play__card{opacity:1;transform:none;transition:none}
  .play__list.play__list .play__card.play__card .play__card__img{transform:none;transition:none}
  .play__list.play__list .play__card.play__card:first-child .play__card__btn a{animation:none}
}

/* 4 · ONE BUTTON LANGUAGE ON THE HOME PAGE
   The purple #8224e3 that was flagged on the show cards also sits on the home
   page's "כל ההופעות" button, and the new Instagram follow button came out
   unstyled. Both join the gold system so the page speaks one language.
   Scoped to the home page only — delete this block to revert. */
body.home .elementor-button.elementor-button,
body.home .mst-ig__cta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:999px!important;
  border:1px solid rgba(255,244,214,.7)!important;
  background:linear-gradient(180deg,#f6e6b4 0%,#c79a34 100%)!important;
  background-color:#c79a34!important;
  color:#2b1b05!important;
  font-weight:800!important;letter-spacing:.01em!important;text-decoration:none!important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.5),
    0 0 20px rgba(201,160,58,.30),
    inset 0 1px 0 rgba(255,255,255,.65)!important;
  transition:transform .2s ease,box-shadow .28s ease}
body.home .elementor-button.elementor-button *,
body.home .mst-ig__cta *{color:#2b1b05!important}
body.home .elementor-button.elementor-button:hover,
body.home .elementor-button.elementor-button:focus-visible,
body.home .mst-ig__cta:hover,
body.home .mst-ig__cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.58),
    0 0 30px rgba(246,230,180,.55),
    inset 0 1px 0 rgba(255,255,255,.8)!important}
body.home .elementor-button.elementor-button:active,
body.home .mst-ig__cta:active{transform:translateY(0) scale(.98)}
body.home .elementor-button.elementor-button:focus-visible,
body.home .mst-ig__cta:focus-visible{outline:3px solid #f6e6b4;outline-offset:3px}
@media (max-width:767px){
  body.home .elementor-button.elementor-button,
  body.home .mst-ig__cta{padding:12px 22px!important;font-size:14px!important}
}

/* the follow button was centred by margin:auto, which inline-flex breaks;
   keep it a block-level flex so it stays centred in an RTL container. */
body.home .mst-ig__cta{display:flex!important;width:fit-content!important;margin:28px auto 0!important}