/* m-theatre.com — the Wix chessboard, kept as it was: two equal columns, black and white squares, Heebo.
   Row heights are the Wix strip heights in px (--h, set per row); between 701 and 1000 px wide they scale down,
   and on a phone the board becomes one column whose squares still alternate black and white.
   The upgrade: a square opens in place. A curtain of the opposite colour sweeps across it from the reading side,
   the content rises after it, and "חזרה" closes it again. */
/* Rubik 800, Hebrew only: the name in the logo (the house's display face). OFL, fonts/OFL-rubik.txt */
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/rubik-hebrew-800-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 300; font-display: swap; src: url(fonts/heebo-hebrew-300-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 400; font-display: swap; src: url(fonts/heebo-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 500; font-display: swap; src: url(fonts/heebo-hebrew-500-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 700; font-display: swap; src: url(fonts/heebo-hebrew-700-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 300; font-display: swap; src: url(fonts/heebo-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: Heebo; font-weight: 400 500; font-display: swap; src: url(fonts/heebo-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: Heebo; font-weight: 700; font-display: swap; src: url(fonts/heebo-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --ink: #000; --paper: #fff; --current: #9fd8a8; --focus: #4d90fe; --mute: #5a5a5a;
  --font: Heebo, "Arial Hebrew", Arial, sans-serif;
  --t: 520ms; --ease: cubic-bezier(.7, 0, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 300; font-size: 16px; line-height: 1.5; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.preview-banner { background: #ffe680; color: #000; padding: 10px 16px; text-align: center; font-size: 14px; font-weight: 500; position: sticky; top: 0; z-index: 40; }

/* ---------- the board ---------- */
.row { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--h, 0) * 1px); }
.cell { position: relative; overflow: hidden; display: grid; min-width: 0; transition: min-height var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.ink { background: var(--ink); color: var(--paper); }
.paper { background: var(--paper); color: var(--ink); }
.inner { align-self: center; justify-self: stretch; padding: clamp(32px, 4.5vw, 80px) clamp(24px, 9%, 140px); min-width: 0; }
.align-center { text-align: center; }
.align-start { text-align: start; }

/* type, as measured on the Wix site */
.h-hero { font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: .7em; }
.h-display { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.35; }
.h-normal { font-size: clamp(24px, 2vw, 30px); font-weight: 400; line-height: 1.3; margin-bottom: .5em; }
.h-small { font-size: 24px; font-weight: 500; margin-bottom: .6em; }
.prose { font-size: 16px; line-height: 1.6; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose h3 { font-size: 18px; font-weight: 500; margin: 1.6em 0 .4em; }
.prose ul { margin: 0; padding-inline-start: 1.2em; }
.prose a { text-underline-offset: 3px; }
.size-hero .prose, .prose.quote { font-size: clamp(18px, 1.75vw, 25px); line-height: 1.45; }
.prose.quote p + p { margin-top: 1.2em; font-size: .8em; }
.size-small .prose { font-size: 15px; }
.prose.review { font-size: 15px; line-height: 1.7; }
.prose.document { max-width: 68ch; font-size: 15px; }
.size-small { padding-block: clamp(28px, 3.5vw, 64px); }

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.align-center .btns { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 26px; border: 1px solid currentColor;
  background: none; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.btn.solid { background: currentColor; }
.btn.solid > span { color: var(--paper); }
.ink .btn.solid > span, .paper > .panel .btn.solid > span { color: var(--ink); }
.ink > .panel .btn.solid > span { color: var(--paper); }
.btn.small { min-height: 36px; padding: 6px 18px; font-size: 13px; }
.btn:hover { opacity: .85; }

/* repertoire */
.show-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(32px, 4vw, 56px); }
.show h3 { font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; }
.show h3 a, .show-sub a { text-decoration: underline; text-underline-offset: 5px; }
.show-sub { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; margin-top: 14px; }
.show-sub.strong { font-weight: 700; font-size: 14px; }
.show-date, .show-soon { font-size: 18px; margin-top: 18px; }
.show-venue { font-size: 16px; margin-top: 8px; }
.show .btn { margin-top: 18px; }
.upcoming { margin-top: 28px; }
.up-label { font-weight: 500; }
.up-date { font-size: 18px; }
.upcoming .btn { margin-top: 16px; }
.soldout { display: inline-block; margin-top: 12px; font-weight: 500; }

/* contact & footer */
.contact h2 { font-size: clamp(24px, 2vw, 30px); font-weight: 400; margin-bottom: 1em; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.lines a { text-underline-offset: 3px; }
.social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; }
.social svg { width: 22px; height: 22px; }
.r-foot .inner { padding-block: 24px; font-size: 12px; font-weight: 500; }
.r-foot p + p { margin-top: 4px; }
.foot-social .inner { justify-self: center; }
.foot-social .social { margin: 0; }

/* header */
.r-head { min-height: max(64px, calc(var(--h) * 1px)); position: relative; z-index: 20; }
.r-head .cell { overflow: visible; align-items: center; }
.nav { list-style: none; margin: 0; padding: 0 24px; display: flex; justify-content: center; gap: clamp(20px, 3.4vw, 64px); font-size: 15px; font-weight: 500; }
.nav > li { position: relative; display: flex; align-items: center; gap: 2px; }
.nav a { text-decoration: none; padding: 10px 2px; display: inline-block; }
.nav a:hover, .nav a[aria-current="page"], .nav a.in-section { color: var(--current); }
/* the menu on its white square: the current page is marked by a line (light green would not be read on white) */
.paper .nav > li > a:hover, .paper .nav > li > a[aria-current="page"], .paper .nav > li > a.in-section { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.sub-toggle { background: none; border: 0; width: 28px; height: 36px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.sub-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; inset-inline-start: -16px; min-width: 200px;
  background: var(--ink); color: var(--paper); border: 1px solid #333; z-index: 30; }
.sub a { display: block; padding: 10px 18px; white-space: nowrap; }
/* the logo: the ensemble's mark and the name in Hebrew (comment 6), on the right; the menu on the left. The mark turns a
   quarter on hover, like the house's; with less motion it stays still. */
.head-logo { justify-items: center; }
.logo { display: inline-flex; align-items: center; gap: clamp(12px, 1.1vw, 18px); padding: 8px; text-decoration: none; color: inherit; }
.logo-mark { display: grid; flex: none; }
.logo-mk { display: block; width: clamp(44px, 3.6vw, 58px); height: auto; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .08)) drop-shadow(0 4px 8px rgb(0 0 0 / .12)); transition: transform 280ms cubic-bezier(.2, .8, .2, 1); }
.logo-word { display: flex; flex-direction: column; font-family: 'Rubik', var(--font); font-weight: 800; font-size: clamp(19px, 1.55vw, 25px); line-height: 1.02; letter-spacing: -.01em; }
@media (hover: hover) and (pointer: fine) { .logo:hover .logo-mk { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .logo-mk { transition: none; } .logo:hover .logo-mk { transform: none; } }

/* ---------- image squares ---------- */
.photo { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: var(--ink); color: var(--paper); text-align: center; overflow: hidden; }
button.photo { cursor: zoom-in; }
.photo .cover { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .3s; }
button.photo:hover .cover, button.photo:focus-visible .cover { transform: scale(1.025); }
button.photo:focus-visible { outline-offset: -6px; }
.photo-title { position: absolute; inset-block-start: clamp(28px, 6%, 64px); inset-inline: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500;
  text-shadow: 0 1px 18px rgb(0 0 0 / .55); }
.photo-caption { position: absolute; inset-block-end: 18px; inset-inline-start: 22px; text-align: start; font-size: 12px; font-weight: 500; line-height: 1.4;
  text-shadow: 0 1px 10px rgb(0 0 0 / .7); }
.count { position: absolute; inset-block-end: 16px; inset-inline-end: 18px; background: rgb(0 0 0 / .55); color: var(--paper); font-size: 13px; font-weight: 500; padding: 3px 9px; }
.play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--paper); background: rgb(0 0 0 / .35); }
.play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--paper); transform: translateX(3px); }

/* ---------- the open state ---------- */
.panel { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden; }
.panel[hidden] { display: none !important; }
.paper > .panel { background: var(--ink); color: var(--paper); }
.ink > .panel { background: var(--paper); color: var(--ink); }
.panel:focus { outline: none; }
.panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(16px, 4%, 40px) 0; font-size: 14px; position: relative; z-index: 2; }
.back { background: none; border: 0; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.back svg { width: 16px; height: 16px; }
.panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px clamp(20px, 9%, 110px) 32px; }
.panel-h { font-size: clamp(22px, 2vw, 30px); font-weight: 700; margin-bottom: .35em; }
.panel-h:focus { outline: none; }
.lead { margin-bottom: 18px; font-size: 15px; }

/* curtain: the opposite colour sweeps in from the reading side (right), the content rises after it */
.panel.anim-in { animation: curtain-in var(--t) var(--ease) both; }
.panel.anim-out { animation: curtain-out calc(var(--t) * .8) var(--ease) both; }
.panel.anim-in > * { animation: rise .38s ease-out calc(var(--t) * .55) both; }
@keyframes curtain-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes curtain-out { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* gallery inside the square */
.panel-gallery { background: var(--ink) !important; color: var(--paper) !important; }
.panel-gallery .panel-bar { position: absolute; inset-inline: 0; top: 0; padding-bottom: 28px; background: linear-gradient(rgb(0 0 0 / .6), transparent); }
.gal-figure { margin: 0; position: absolute; inset: 0; }
.gal-img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.gal-img.fade { opacity: 0; }
.gal-cap { position: absolute; inset-inline: 72px; bottom: 22px; text-align: center; font-size: 13px; font-weight: 500; text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
.gal-nav { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; padding: 12px clamp(12px, 3%, 24px); pointer-events: none; }
.gal-nav button { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .6); color: var(--paper); cursor: pointer; }
.gal-nav svg { width: 18px; height: 18px; }
.gal-count { font-weight: 500; }

/* video inside the square */
.panel-video { background: var(--ink) !important; color: var(--paper) !important; }
.panel-video .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.panel-video .panel-bar { position: absolute; inset-inline: 0; top: 0; background: linear-gradient(rgb(0 0 0 / .6), transparent); padding-bottom: 20px; }

/* sign-up form */
.signup { display: grid; gap: 12px; max-width: 460px; width: 100%; }
.align-center .signup, .panel-body .signup { margin-inline: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 400; }
.signup input[type=text], .signup input:not([type]), .signup input[type=tel], .signup input[type=email] {
  font: inherit; font-size: 16px; font-weight: 400; padding: 10px 11px; min-height: 44px; border: 1px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; width: 100%; min-width: 0; }
.signup input[aria-invalid="true"] { border-width: 2px; }
.hint { font-size: 12px; opacity: .85; margin-top: -4px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; font-weight: 400; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: currentColor; }
.privacy { font-size: 12px; line-height: 1.5; opacity: .9; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pop { font-size: 13px; text-underline-offset: 3px; }
.msg { font-size: 14px; font-weight: 500; min-height: 1.4em; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done:focus { outline: none; }
.done-h { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; margin-bottom: 6px; }
.signup.is-done > :not(.done) { display: none; }
.signup-cell h1 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; margin-bottom: .4em; }

/* document pages: the title square stays in view while the text scrolls */
.r-doc { align-items: start; }
.r-doc .kind-text:first-child .inner { position: sticky; top: 0; padding-block: 64px; }
.r-doc .cell { overflow: visible; }

/* a row whose left square comes first in the page (and on the phone): put it back on the left */
.p-swap > .cell:first-child { grid-column: 2; grid-row: 1; }
.p-swap > .cell:last-child { grid-column: 1; grid-row: 1; }

/* ---------- 701–1000 px: the same board, scaled down ---------- */
@media (max-width: 1000px) and (min-width: 701px) {
  .row { min-height: calc(var(--h, 0) * .1vw); }
  .r-head { min-height: 72px; }
  .inner { padding: 36px 28px; }
}

/* ---------- phone: one column, black and white still alternate, image squares are true squares ---------- */
@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; min-height: 0; }
  .r-head { grid-template-columns: 40% 60%; }
  .r-foot { grid-template-columns: 1fr 1fr; }
  .p-swap > .cell:first-child, .p-swap > .cell:last-child { grid-column: auto; grid-row: auto; }
  .r-head { min-height: 64px; }
  .nav { gap: 14px; padding: 0 8px; font-size: 14px; }
  .nav a { padding: 12px 0; }
  .logo { gap: 8px; padding: 6px 4px; }
  .logo-mk { width: 32px; }
  .logo-word { font-size: 14.5px; }
  .cell.m-ink:not(.head-nav):not(.head-logo) { background: var(--ink); color: var(--paper); }
  .cell.m-paper:not(.head-nav):not(.head-logo) { background: var(--paper); color: var(--ink); }
  main .m-paper > .panel { background: var(--ink); color: var(--paper); }
  main .m-ink > .panel { background: var(--paper); color: var(--ink); }
  main .m-paper .btn.solid > span { color: var(--paper); }
  main .m-ink .btn.solid > span, main .m-paper > .panel .btn.solid > span { color: var(--ink); }
  main .m-ink > .panel .btn.solid > span { color: var(--paper); }
  .kind-image { aspect-ratio: 1 / 1; }
  .kind-image.is-open { aspect-ratio: auto; }
  .inner { padding: 48px max(22px, env(safe-area-inset-left, 0px)) 48px max(22px, env(safe-area-inset-right, 0px)); }
  .row2 { grid-template-columns: 1fr; }
  .panel-body { padding: 8px 22px 32px; }
  .r-doc .kind-text:first-child .inner { position: static; padding-block: 40px; }
  .sub { inset-inline-start: auto; inset-inline-end: -40px; }
  .foot-social .inner { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell, .photo .cover, .gal-img, .btn, .sub-toggle svg { transition: none !important; }
  .panel.anim-in, .panel.anim-out, .panel.anim-in > * { animation: none !important; }
  button.photo:hover .cover, button.photo:focus-visible .cover { transform: none; }
}
@media (forced-colors: active) {
  .btn, .gal-nav button { border: 1px solid ButtonText; }
  .btn.solid { background: ButtonFace; }
}

/* A text that fills its square (editor: "הטקסט ממלא את הריבוע"): justified, and on a wide screen site.js sets the size
   so the text meets the square's height. */
.fill-text .prose { text-align: justify; text-justify: inter-word; hyphens: manual; }
.fill-text .prose p { text-align-last: start; }
@media (min-width: 701px) { .fill-text .prose { font-size: var(--fill-size, 16px); } }
@media (prefers-reduced-motion: reduce) { .cell { transition: none; } }

/* The repertoire as strips: one dark strip per show, white between them. On hover the white narrows and the strip under
   the pointer grows a little, so the square reads as one board again. */
.strips { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none;
  background: var(--paper); transition: gap var(--t) var(--ease); }
.strips > li { flex: 1 1 0; display: flex; min-height: 0; transition: flex-grow var(--t) var(--ease); }
.strip { position: relative; flex: 1; overflow: hidden; border: 0; margin: 0; padding: 0; cursor: pointer; background: var(--ink); color: var(--paper); font: inherit; text-align: start; }
.strip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) contrast(1.08); transition: filter var(--t) var(--ease); }
.strip-text { position: absolute; inset-inline-start: clamp(22px, 7%, 56px); inset-inline-end: clamp(22px, 7%, 56px); inset-block-end: clamp(18px, 9%, 48px); display: grid; gap: 6px; justify-items: start; }
.strip-title { font-weight: 700; font-size: clamp(26px, 3vw, 44px); line-height: 1.05; }
.strip-line { font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; }
.strip-cta { font-size: 14px; font-weight: 500; border: 1px solid currentColor; padding: 2px 10px; margin-top: 4px; }
.strip:focus-visible { outline: 3px solid var(--paper); outline-offset: -8px; }
@media (hover: hover) {
  .strips:hover, .strips:has(.strip:focus-visible) { gap: 3px; }
  .strips > li:hover, .strips > li:has(.strip:focus-visible) { flex-grow: 1.3; }
  .strip:hover .strip-img { filter: brightness(.72) contrast(1.08); }
}
.panel-show .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.panel-show .btns.after-form { margin-top: 12px; }
.panel-show .show-sub { margin-bottom: 1em; }
@media (max-width: 700px) {
  .strips { position: static; gap: 10px; }
  .strips > li { flex: none; height: max(220px, 56vw); }
}
@media (prefers-reduced-motion: reduce) { .strips, .strips > li, .strip-img { transition: none; } }

/* A show opened from the strips: the strip has slid into the square beside it, the show's photo fills it (darkened)
   behind the tickets and the sign-up; "רפרטואר 2026" sits in the strip's place, on white. */
.strip-slot { display: none; }
.strips > li { position: relative; }
.strips > li.is-picked .strip { visibility: hidden; }
.strips > li.is-picked .strip-slot { display: grid; position: absolute; inset: 0; place-items: center; text-align: center; background: var(--paper); color: var(--ink);
  font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.35; }
.panel-show.has-photo { background: var(--ink); color: var(--paper); }
.panel-show .show-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.panel-show .show-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.panel-show > .panel-bar, .panel-show > .panel-body { position: relative; z-index: 1; }
.panel-show.has-photo .btn.solid > span, main .panel-show.has-photo .btn.solid > span { color: var(--ink); }
.panel-show.has-photo .btn.solid { background: var(--paper); border-color: var(--paper); }
.panel-show .panel-body { justify-content: center; gap: 4px; }
.panel-show .show-date { display: grid; justify-items: start; gap: 2px; margin-top: 10px; }
.panel-show .show-date .btn { margin-top: 12px; }
.panel-show .show-signup { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .35); }
.panel-show .show-signup-h { font-size: 17px; font-weight: 500; margin: 0 0 10px; }
.panel-show .show-page { margin-top: 14px; font-size: 14px; }
.panel.anim-rise .panel-body { animation: rise .45s ease-out both; }
.glide { position: fixed; z-index: 60; overflow: hidden; pointer-events: none; margin: 0; }
.glide-strip { background: var(--ink); color: var(--paper); }
.glide-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) contrast(1.08); }
.glide-strip .strip-text { position: absolute; inset-inline-start: clamp(22px, 7%, 56px); inset-block-end: clamp(18px, 9%, 48px); display: grid; gap: 6px; justify-items: start; text-align: start; }
.glide-title { display: grid; place-items: center; text-align: center; overflow: visible; background: none; color: var(--ink); white-space: nowrap; }
/* A photo that has to stand on a white place of the board: a white frame around it. */
.cell.framed, .cell.framed-phone { background: var(--paper); }
.cell.framed .photo, .cell.framed-phone .photo { inset: clamp(22px, 9%, 90px); }
@media (prefers-reduced-motion: reduce) { .panel.anim-rise .panel-body { animation: none; } .glide { display: none; } }

/* ---------- the infinite board (document 12, the switch "לוח אינסופי") ----------
   The pages are one board: each page's rows sit in a .board-page, one after another, between the header and the footer.
   site.js keeps the screen still when a page arrives above it, so the browser's own scroll anchoring is off. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.77, 0, .175, 1);
  --glass: color-mix(in srgb, var(--paper) 72%, transparent); --glass-strong: color-mix(in srgb, var(--paper) 90%, transparent);
  --lift: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 .5px rgb(29 28 26 / .09), 0 1px 2px rgb(29 28 26 / .05), 0 8px 16px -10px rgb(29 28 26 / .14), 0 24px 48px -28px rgb(29 28 26 / .22); }
html[data-board] { overflow-anchor: none; scrollbar-gutter: stable; }
.board-page { display: block; }

/* the floating menu: glass, only on what floats (the house's language); it comes in once the header has gone */
.float-nav { position: fixed; z-index: 45; top: 14px; inset-inline-end: 16px; display: flex; align-items: center; gap: 2px; padding: 5px 6px;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--lift); color: var(--ink); font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.float-nav.is-in { opacity: 1; transform: none; }
.float-nav[hidden] { display: none; }
.float-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.float-mark img { width: 28px; height: 28px; transition: transform 280ms var(--ease-out); }
.float-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.float-list a { display: block; padding: 9px 13px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease; }
.float-list a[aria-current="page"] { background: rgb(0 0 0 / .08); }
.float-toggle { display: none; }
.float-mark, .float-list a, .float-toggle { transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.float-mark:active, .float-list a:active, .float-toggle:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .float-list a:hover { background: rgb(0 0 0 / .06); }
  .float-mark:hover img { transform: rotate(90deg); }
}
.float-nav :focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (max-width: 700px) {
  .float-nav { top: max(10px, env(safe-area-inset-top, 0px)); inset-inline: 10px; justify-content: space-between; padding: 4px 6px 4px 4px; }
  .float-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 500; }
  .float-toggle svg { width: 12px; height: 12px; transition: transform 200ms var(--ease-out); }
  .float-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .float-list { position: absolute; top: calc(100% + 8px); inset-inline: 0; flex-direction: column; padding: 6px; border-radius: 20px; background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--lift);
    opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center; visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
  .float-nav.open .float-list { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
  .float-list a { padding: 12px 14px; border-radius: 14px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .float-nav, .float-list { background: var(--paper) !important; } }
@media (prefers-reduced-transparency: reduce) { .float-nav, .float-list { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .float-nav, .float-nav.is-in { transform: none; transition: opacity 120ms ease; }
  .float-list, .float-nav.open .float-list { transform: none !important; }
  .float-mark img, .float-toggle svg { transition: none; }
  .float-mark:hover img { transform: none; }
}
@media (forced-colors: active) { .float-nav, .float-list { border: 1px solid CanvasText; } }

/* a legal page from the side: a black square that grows to the screen, the page inside it (site.js, sideIn) */
html.sheet-open { overflow: hidden; }
html.sheet-covered body > header, html.sheet-covered main, html.sheet-covered body > footer { visibility: hidden; }
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.sheet-bar { position: sticky; top: 0; z-index: 5; height: 0; }
.sheet-bar .back { position: absolute; top: 14px; inset-inline-start: 16px; padding: 0 16px 0 14px; min-height: 40px; border-radius: 999px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--lift);
  transition: transform 160ms var(--ease-out); }
.sheet-bar .back:active { transform: scale(.97); }
.sheet-bar .back:focus-visible { outline: 3px solid var(--focus); }
.sheet-body { transition: opacity 220ms var(--ease-out); }
.sheet.is-loading .sheet-body { opacity: 0; }
.sheet-body > .row { min-height: 100vh; min-height: 100dvh; }
.sheet .r-doc .inner { padding-top: max(88px, clamp(32px, 4.5vw, 80px)); }
@media (max-width: 700px) { .sheet .r-doc .cell:first-child .inner { padding-top: 76px; } .sheet .r-doc .cell + .cell .inner { padding-top: 48px; } }
@media (prefers-reduced-transparency: reduce) { .sheet-bar .back { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the ticket buttons, when their side move is on: the black square that grows before the browser leaves */
.side-sq { position: fixed; inset: 0; z-index: 80; background: var(--ink); pointer-events: none; }