/* ==========================================================================
   בצל הקודש — website styles
   Clean and calm: gold, cream and deep brown, without ornaments.
   The main colours, fonts and sizes come from the admin's appearance page
   (they are set as variables at the top of every page).
   The site runs right to left (Yiddish); its English version runs left to right
   (<html dir="ltr">), so sides are written as start / end (inline-start is the
   right on the Yiddish site, the left on the English one).
   ========================================================================== */

:root {
  /* set by the admin (these are the defaults) */
  --cream: #fbf6e8;
  --paper: #fffdf7;
  --ink: #3a2a14;
  --ink-soft: #6d5737;
  --accent: #7a5418;
  --line: #e6d4a3;
  --dark: #2f1f0d;
  --gold: #d9ac4a;
  --font-body: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
  --font-display: 'Suez One', 'Frank Ruhl Libre', serif;
  --base-size: 18px;
  --post-size: 1.08em;
  --title-scale: 1;
  --radius: 18px;
  --feed-w: 720px;

  /* made from the colours above */
  --gold-100: color-mix(in srgb, var(--gold) 16%, #fffdf4);
  --gold-200: color-mix(in srgb, var(--gold) 34%, #fffaea);
  --gold-300: color-mix(in srgb, var(--gold) 58%, #fff6dc);
  --gold-400: color-mix(in srgb, var(--gold) 82%, #fff);
  --gold-500: var(--gold);
  --gold-600: color-mix(in srgb, var(--gold) 82%, #3d2a0e);
  --gold-700: color-mix(in srgb, var(--gold) 62%, #3d2a0e);
  --gold-800: var(--accent);
  --gold-900: color-mix(in srgb, var(--accent) 75%, #000);
  --brown-900: color-mix(in srgb, var(--dark) 80%, #000);
  --brown-800: var(--dark);
  --brown-700: color-mix(in srgb, var(--dark) 85%, #fff);
  --brown-600: color-mix(in srgb, var(--ink) 85%, var(--accent));
  --btn-gold: linear-gradient(180deg, color-mix(in srgb, var(--gold) 30%, #fffbe6) 0%, color-mix(in srgb, var(--gold) 75%, #fff3c4) 45%, color-mix(in srgb, var(--gold) 85%, #5a3d12) 100%);
  --wa: #25d366;
  --tg: #229ed9;
  --live: #d6332a;

  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(74, 49, 15, .08), 0 2px 8px rgba(74, 49, 15, .06);
  --shadow: 0 2px 4px rgba(74, 49, 15, .06), 0 10px 30px -8px rgba(74, 49, 15, .22);
  --shadow-lg: 0 4px 10px rgba(74, 49, 15, .08), 0 24px 60px -16px rgba(74, 49, 15, .35);
  --wrap: 1180px;
  /* The bar with the logo and the menu (Appearance › Header sets it, themeCss). */
  --header-h: 52px;
  /* What stays at the top of the screen as one scrolls: the header, and the special menu where it
     stays too (common.js measures it, watchTop); the tabs, the day lines and a jump to a part of the
     page stop under it. Before the script has measured: the header with its top bar. */
  --top-h: calc(var(--header-h) + 36px);
  color-scheme: light;
}

/* the visitor's own letter size */
html[data-size="s"] { --size-mul: .9; }
html[data-size="m"], html { --size-mul: 1; }
html[data-size="l"] { --size-mul: 1.14; }
html[data-size="xl"] { --size-mul: 1.3; }

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 14px);
  -webkit-text-size-adjust: 100%;
}
html.no-scroll { overflow: hidden; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--base-size);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--gold-900); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }
/* A logo drawn from a picture of its lines (TelOChat, common.js): the picture is its shape, in the
   color of where it stands, as the drawn icons are. */
.ic-mask { display: inline-block; background: currentColor; -webkit-mask: var(--ic-mask) center / contain no-repeat; mask: var(--ic-mask) center / contain no-repeat; }
.ic-telochat { --ic-mask: url('/assets/icons/telochat-mark.png'); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note { color: var(--ink-soft); font-size: .92rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .65em 1.35em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-gold {
  color: var(--brown-900);
  background: var(--btn-gold);
  border-color: var(--gold-600);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -8px var(--gold-700);
}
.btn-gold:hover { color: var(--brown-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 22px -8px var(--gold-700); }
.btn-ghost { color: var(--accent); border-color: var(--gold-300); background: color-mix(in srgb, var(--paper) 80%, transparent); }
.btn-ghost:hover { background: var(--gold-100); color: var(--gold-900); }
.btn-sm { padding: .45em 1em; font-size: .9rem; }
.btn-lg { padding: .8em 1.6em; font-size: 1.1rem; }

/* ---------- header ---------- */

.site-header { position: sticky; top: 0; z-index: 50; }

.topbar { background: var(--dark); color: var(--gold-200); font-size: .88rem; }
.topbar-in { display: flex; align-items: center; gap: 20px; min-height: 36px; white-space: nowrap; }
.topbar a { color: var(--gold-200); display: inline-flex; align-items: center; gap: .4em; }
.topbar a:hover { color: #fff3cf; }
.topbar-hotline b { color: var(--gold-300); letter-spacing: .5px; }
.bsd { font-size: .85rem; color: var(--gold-300); margin-inline-end: auto; }
.topbar-social { display: inline-flex; gap: 8px; }
/* The language switch (Yiddish ⇄ English): small and quiet, in the top bar on the right — next to
   בס״ד on the Yiddish site, at the end of the bar on the English one. */
.lang-sw { display: inline-flex; align-items: center; gap: .35em; height: 24px; padding: 0 .75em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lang-sw .ic { width: 13px; height: 13px; opacity: .85; vertical-align: 0; }
.topbar .lang-sw:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: var(--gold-400); }
.topbar-in.has-lang .bsd { margin-inline-end: 0; }
.topbar-in.has-lang .lang-sw { margin-inline-end: auto; }
html[dir="ltr"] .topbar-in.has-lang .bsd { margin-inline-end: auto; }
html[dir="ltr"] .topbar-in.has-lang .lang-sw { margin-inline-end: 0; order: 9; }
/* The same switch in the header itself: only where the top bar is off (also per device, see themeCss). */
.mainbar .lang-sw { display: none; height: 28px; color: var(--brown-600); border-color: var(--line); background: var(--paper); }
.mainbar .lang-sw:hover { color: var(--gold-900); background: var(--gold-100); }
html[dir="ltr"] .mainbar .lang-sw { order: 9; margin-inline-start: auto; }
.sc { width: 27px; height: 27px; border-radius: 50%; justify-content: center; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); transition: background .2s; }
.sc .ic { width: 14px; height: 14px; }
.sc:hover { background: var(--brand); color: #fff !important; border-color: var(--brand); }

.mainbar {
  position: relative;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.scrolled .mainbar { box-shadow: 0 8px 24px -16px rgba(74, 49, 15, .5); }
.mainbar-in { display: flex; align-items: center; gap: 22px; height: var(--header-h); transition: height .3s; }
.site-header.scrolled .mainbar-in { height: min(62px, var(--header-h)); }
.brand { flex: none; display: block; height: 84%; }
.brand img { height: 100%; width: auto; }

/* The menu's own text size, font, color and gap (Appearance › Header) come as --nav-… from themeCss. */
.nav { display: flex; gap: var(--nav-gap, 2px); margin-inline-start: auto; }
/* On a wide screen the menu stands in the middle of the bar. */
@media (min-width: 961px) {
  .mainbar-in { position: relative; }
  .nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}
.nav a {
  /* One line per link, and a little closer together on a smaller screen, so a longer menu fits. */
  padding: 7px clamp(6px, .9vw, 12px);
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--nav-size, 1rem);
  font-family: var(--nav-font, inherit);
  color: var(--nav-color, var(--brown-600));
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav a:hover, .nav a.active { color: var(--gold-900); background: var(--gold-100); }
.menu-btn { padding: 0; display: none; background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; color: var(--brown-600); align-items: center; justify-content: center; }
.menu-btn .ic { width: 24px; height: 24px; }

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  margin-inline-end: 8px;
  vertical-align: 1px;
}

/* ---------- top of the home page ---------- */

.hero { padding: 26px 0 6px; text-align: center; }
.hero-in { display: grid; justify-items: center; }
.hero-logo { width: min(260px, 70vw); height: auto; }
.hero-text { font-size: 1.28rem; color: var(--brown-600); margin: 8px auto 0; max-width: 560px; line-height: 1.55; }
.hero-text strong { color: var(--accent); }
.hero-live { margin: 10px 0 0; min-height: 1.5em; font-size: .92rem; color: var(--ink-soft); }
/* The English version: an introduction for visitors from outside the community, and the ways to follow the news. */
html[lang="en"] .hero-text { font-size: 1.08rem; max-width: min(660px, 100%); line-height: 1.65; color: var(--ink); }
.hero-follow { margin: 12px auto 0; max-width: min(660px, 100%); font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.hero-follow span { margin-inline-end: .3em; }
.hero-follow a { font-weight: 700; white-space: nowrap; }
.hero-follow i { font-style: normal; margin: 0 .45em; color: var(--gold-500); }

/* ---------- sections ---------- */

.section { padding: 56px 0; position: relative; }
.section-head { text-align: center; margin-bottom: 28px; }
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(1.9rem, 4vw, 2.6rem) * var(--title-scale));
  line-height: 1.25;
  color: var(--accent);
}
.section-head p { margin: 6px auto 0; color: var(--ink-soft); font-size: 1.08rem; max-width: 640px; }
.more-row { text-align: center; margin-top: 26px; }
.more-row.more-top { margin: 0 0 16px; }
.more-row:empty, .more-row:has(> [hidden]:only-child) { display: none; }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); border: 1.5px dashed var(--gold-300); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.empty .ic { width: 38px; height: 38px; color: var(--gold-500); margin: 0 auto 8px; display: block; }
.empty p { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--brown-600); }
.empty small { display: block; margin-top: 4px; font-size: .95rem; }

/* ---------- news feed: tabs and tools ---------- */

/* Only the tabs stay at the top while scrolling (the tools scroll away, so the day heading under the
   tabs stays in view). The bar is as wide as the tabs, so the hint at its edges sits on them. */
.feed-bar {
  position: sticky;
  top: calc(var(--top-h) + 6px);
  z-index: 15;
  display: flex;
  width: fit-content;
  max-width: min(100%, calc(var(--feed-w) + 160px));
  margin: 0 auto 10px;
}
.feed-toolrow {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto 16px;
}
.feed-toolrow:not(:has(.tool-btn)) { margin-bottom: 6px; }
/* More tabs than fit (a phone): a fade with an arrow at the side that has more; a tap scrolls there. */
.tabs-hint {
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 2;
  display: none;
  align-items: center;
  width: 52px;
  padding: 0 7px;
  border: 0;
  color: var(--tabs-hint-color, var(--accent));
  cursor: pointer;
}
.tabs-hint svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 3px var(--paper)); }
.tabs-hint.end { inset-inline-end: 1px; justify-content: flex-end; border-radius: 0 999px 999px 0; background: linear-gradient(to right, transparent, var(--paper) 62%); }
.tabs-hint.start { inset-inline-start: 1px; justify-content: flex-start; border-radius: 999px 0 0 999px; background: linear-gradient(to left, transparent, var(--paper) 62%); }
.tabs-hint.start svg { transform: scaleX(-1); }
html[dir="rtl"] .tabs-hint.end { border-radius: 999px 0 0 999px; background: linear-gradient(to left, transparent, var(--paper) 62%); }
html[dir="rtl"] .tabs-hint.start { border-radius: 0 999px 999px 0; background: linear-gradient(to right, transparent, var(--paper) 62%); }
html[dir="rtl"] .tabs-hint.end svg { transform: scaleX(-1); }
html[dir="rtl"] .tabs-hint.start svg { transform: none; }
.feed-bar.hint.can-end .tabs-hint.end, .feed-bar.hint.can-start .tabs-hint.start { display: flex; }
.feed-bar.nudge .tabs-hint.end svg { animation: tabs-nudge .7s ease-in-out 3; }
@keyframes tabs-nudge { 50% { translate: 5px 0; } }
html[dir="rtl"] .feed-bar.nudge .tabs-hint.end svg { animation-name: tabs-nudge-rtl; }
@keyframes tabs-nudge-rtl { 50% { translate: -5px 0; } }
@media (prefers-reduced-motion: reduce) { .feed-bar.nudge .tabs-hint.end svg { animation: none; } }
.feed-tabs, .feed-tools {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.feed-tabs button, .tool-btn {
  flex: none;
  border: 0;
  background: none;
  padding: 7px 17px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--brown-600);
  transition: background .2s, color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.feed-tabs button:hover, .tool-btn:hover { color: var(--gold-900); background: var(--gold-100); }
.feed-tabs button[aria-selected="true"], .tool-btn[aria-expanded="true"] { color: var(--brown-900); background: var(--btn-gold); box-shadow: 0 0 0 1px var(--gold-600) inset; }
.tool-btn { padding: 7px 12px; font-size: .92rem; }

.feed-drawer {
  /* Hangs under the tools; long content scrolls inside it. */
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--feed-w), calc(100vw - 24px));
  max-height: calc(100vh - var(--top-h) - 114px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 16;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* Opened from further down the page (a click on a post's time): it floats under the tabs. */
.feed-drawer.float { position: fixed; top: var(--drawer-top, 140px); max-height: calc(100vh - var(--drawer-top, 140px) - 12px); }
/* The display settings: their own text size (Advanced settings › News feed); everything in them follows it. */
.feed-drawer[data-open="prefs"] { font-size: var(--prefs-size, 15px); width: min(var(--prefs-w, 560px), calc(100vw - 24px)); padding: .8em 1em; }
.search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search { position: relative; flex: 1 1 260px; }
.search input, .select, .date-in input {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding-block: 0;
  padding-inline: 40px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.search .ic { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--gold-700); }
.search input:focus, .select:focus, .date-in input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.date-in { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink-soft); }
.date-in input { width: auto; padding: 0 12px; }
.select { width: auto; padding: 0 14px; }

.date-pick { display: grid; gap: 10px; }
/* The X that closes an open calendar: top right (in both languages), on phones and tablets only. */
.date-pick, .has-x { position: relative; }
.cal-x { position: absolute; top: -6px; right: -6px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brown-800); display: grid; place-items: center; }
.cal-x:hover { background: var(--gold-100); }
.cal-x .ic { width: 20px; height: 20px; }
.date-pick > b { padding-right: 34px; }
.has-x { padding-top: 34px; }
@media (min-width: 1025px) and (hover: hover) {
  .cal-x { display: none; }
  .date-pick > b { padding-right: 0; }
  .has-x { padding-top: 0; }
}
.date-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.date-head .select { flex: 1 1 0; min-width: 0; max-width: 170px; }
/* The English month names are longer ("Cheshvan"): the year (four digits) takes only what it needs. */
html[lang="en"] .date-head .select[data-cal="year"] { flex: 0 0 auto; }
.cal-step { font-size: 1.3rem; line-height: 1; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--brown-600); }
.cal-step:hover { background: var(--gold-100); }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mg-head { text-align: center; font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
/* The parsha of the week, on a line of its own above the week. */
.mg-week { grid-column: 1 / -1; margin-top: 6px; padding: 2px 10px; border-radius: 8px; background: color-mix(in srgb, var(--gold-100) 70%, transparent); color: var(--gold-900); font-weight: 800; font-size: .84rem; }
.mg-week small { font-weight: 600; color: var(--ink-soft); }
.mg-day { min-height: 50px; border-radius: 10px; border: 1px solid transparent; background: none; display: grid; place-content: center; text-align: center; line-height: 1.1; color: color-mix(in srgb, var(--ink-soft) 60%, transparent); padding: 3px 1px; }
.mg-day b { font-size: .98rem; }
.mg-day i { font-style: normal; font-size: .66rem; opacity: .8; direction: ltr; }
.mg-day small { font-size: .6rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mg-day.can { color: var(--brown-800); cursor: pointer; }
.mg-day.can:hover { background: var(--gold-100); }
.mg-day.has { background: var(--gold-100); border-color: var(--gold-300); }
.mg-day.has:hover { background: var(--gold-200); }
.mg-day.shabbos { color: var(--accent); }
.mg-day.today { box-shadow: 0 0 0 2px var(--gold-500) inset; }
.mg-day.sel { background: var(--btn-gold); border-color: var(--gold-600); color: var(--brown-900); }
.date-btn { height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--brown-800); font: inherit; font-weight: 700; }
.date-btn:hover { border-color: var(--gold-500); }
.date-clear { border: 0; background: none; color: var(--ink-soft); font-size: .9rem; padding: 4px; }
.range-cal { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.prefs { display: grid; gap: .65em; justify-items: start; line-height: 1.4; }
.prefs > b { font-size: 1.05em; }
.pref-row { display: flex; align-items: center; gap: .4em .8em; flex-wrap: wrap; }
.pref-row.check { font-weight: 400; cursor: pointer; }
.pref-row.check input { width: 1.15em; height: 1.15em; accent-color: var(--gold-700); }
.prefs .btn, .prefs .note { font-size: .9em; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.prefs .seg button { font-size: 1em; padding: .3em .9em; min-width: 2.4em; }
.seg button { border: 0; background: none; padding: 4px 14px; font-weight: 700; color: var(--brown-600); min-width: 40px; }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--btn-gold); color: var(--brown-900); }

.feed-note {
  max-width: var(--feed-w);
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  color: var(--brown-700);
  font-size: .95rem;
}
/* The line of a search: its words in a box of their own (to change them there), what else it has, the way back. */
.feed-note.is-search { justify-content: flex-start; gap: 6px 10px; padding: 6px; padding-inline-end: 8px; }
.note-search { flex: 1 1 220px; min-width: 0; display: flex; }
.note-search .search { flex: 1; }
.note-search .search input { height: 38px; font-size: .98rem; }
.note-what { min-width: 0; font-size: .88rem; font-weight: 700; }
.note-what[hidden] { display: none; }
.feed-note.is-search [data-back] { margin-inline-start: auto; white-space: nowrap; }
.note-back .nb-x { display: none; }
/* While a search is shown it stays at the top under the tabs as one scrolls (Settings → News page),
   and the day line goes under it (--search-h: its height), so the posts' date stays in view. */
.feed-note.stick { position: sticky; top: calc(var(--top-h) + 64px); z-index: 14; box-shadow: var(--shadow-sm); }
html.search-sticky .feed-day { top: calc(var(--top-h) + 64px + var(--search-h, 0px)); }
@media (max-width: 720px) {
  .feed-note.stick { top: calc(var(--top-h) + 62px); }
  html.search-sticky .feed-day { top: calc(var(--top-h) + 62px + var(--search-h, 0px)); }
  /* One row on a phone: the way back is a round X next to the words (its words stay as its label). */
  .feed-note.is-search { flex-wrap: nowrap; }
  .feed-note.is-search:has(.note-what:not([hidden])) { flex-wrap: wrap; }
  .note-search { flex-basis: 0; }
  .note-back { width: 38px; height: 38px; padding: 0; justify-content: center; flex: none; }
  .note-back .nb-t, .note-back .nb-arrow { display: none; }
  .note-back .nb-x { display: block; }
}

/* "Search also": other ways the words searched are written (feed.js, drawSimilar): the ones the
   search shows already, ticked, with an ✕ to take one off; then the ones only offered, to tick. */
.feed-similar { max-width: var(--feed-w); margin: -4px auto 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 4px; color: var(--brown-600); font-size: .95rem; }
.similar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.feed-similar.similar-busy { opacity: .5; pointer-events: none; }
.similar-lead { font-weight: 700; margin-inline-end: 2px; }
.similar-x { font-size: .8em; font-weight: 700; opacity: .7; margin-inline-start: .1em; }
.feed-similar .chip[aria-pressed="true"]:hover .similar-x { opacity: 1; color: #a12a2a; }
.feed-similar .chip { gap: .45em; padding: .32em .9em; font-size: .92rem; color: var(--brown-600); background: var(--paper); border-color: var(--line); cursor: pointer; }
.feed-similar .chip:hover { color: var(--gold-900); border-color: var(--gold-400); background: var(--gold-100); }
.feed-similar .chip[aria-pressed="true"] { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); }
/* A box to tick in front of the words, ticked when the button is pressed. */
.feed-similar .chip::before { content: ""; flex: none; width: .95em; height: .95em; border: 1.5px solid currentColor; border-radius: 4px; opacity: .55; }
.feed-similar .chip[aria-pressed="true"]::before { content: "✓"; display: grid; place-items: center; border-color: var(--brown-900); opacity: 1; font-size: .8em; line-height: 1; font-weight: 700; }
.similar-n { font-weight: 400; opacity: .75; }
.feed-drawer .feed-similar { margin: 12px 0 0; padding: 0; }

/* ---------- news feed: messages ---------- */

.feed { max-width: var(--feed-w); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.feed-loading { text-align: center; color: var(--ink-soft); padding: 30px; }
/* The results of the last search while the new ones come (feed.js, load). */
.feed.feed-busy { opacity: .55; transition: opacity .15s .1s; pointer-events: none; }
.feed-day { text-align: center; margin: 12px 0 0; position: sticky; top: calc(var(--top-h) + 64px); z-index: 5; pointer-events: none; }
/* A day heading that went up under the next one (feed.js, coverDays): only the newest one shows. */
.feed-day.day-under { visibility: hidden; }
.feed-day span { display: inline-block; padding: 4px 16px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--gold-100); background: color-mix(in srgb, var(--dark) 86%, transparent); backdrop-filter: blur(4px); max-width: 100%; }
/* The day heading opens the date picker (the heading itself lets clicks through to the posts under it). */
.feed-day button { all: unset; display: inline-block; max-width: 100%; pointer-events: auto; cursor: pointer; border-radius: 999px; }
.feed-day button svg { width: .95em; height: .95em; margin-inline-start: 7px; vertical-align: -.12em; opacity: .75; }
.feed-day button:hover span { background: var(--dark); }
.feed-day button:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 2px; }
.seen-line { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: .85rem; font-weight: 700; }
.seen-line::before, .seen-line::after { content: ""; flex: 1; height: 1px; background: var(--gold-400); }

.msg {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-start-start-radius: 6px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px 8px;
  overflow: hidden;
  font-size: calc(1rem * var(--size-mul));
  transition: box-shadow .4s, border-color .4s;
}
.msg.flash { border-color: var(--gold-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow); }
.msg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gold-400); background: var(--cream); object-fit: cover; }
.msg-name { font-weight: 900; color: var(--accent); }
.msg-head .badge { margin-inline-start: auto; }
/* The admin's label on a post ("מודעה"), right beside its category label: a small gold tag
   (its colours are on the admin's Appearance page, as --tag-…). On a narrow screen a long one gives way first, cut with "…". */
.msg-tag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 9px 1px 8px; border: 1px solid var(--tag-border, #d9ac4a); border-radius: 6px; background: var(--tag-bg, #fff1c9); color: var(--tag-color, #7a5418); font-size: .78rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.msg-tag > span { overflow: hidden; text-overflow: ellipsis; }
.msg-tag .ic { width: 12px; height: 12px; flex: none; }
.msg-head .msg-tag { margin-inline-start: auto; }
.msg-head .msg-tag + .badge { margin-inline-start: -3px; }
.msg-head:has(.msg-tag) > :not(.msg-tag) { flex-shrink: 0; }
/* A label word the admin set up to lead to a category (Categories page): a button that looks the same. */
button.msg-tag { font-family: inherit; cursor: pointer; }
button.msg-tag:hover { filter: brightness(.97); }
/* A post the admin pinned: on top of the feed, with a small pin mark. */
.feed-pinned { display: flex; flex-direction: column; gap: 14px; }
.msg.is-pinned { border-color: var(--gold-400); }
.msg-pin { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--gold-700); }
.msg-pin .ic { width: 14px; height: 14px; transform: rotate(35deg); }
.msg-text { font-size: var(--post-size); line-height: 1.85; color: var(--ink); overflow-wrap: anywhere; padding: 2px 2px 0; }
/* A long report, cut: --cut is set by feed.js after about feed.moreChars letters; its last line (1.85em) fades out. */
.msg-text.clamped { max-height: var(--cut, 16.5em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 1.85em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.85em), transparent); }
.msg-text a { color: var(--accent); border-bottom: 1px solid var(--gold-300); }
.msg-text blockquote { margin: .6em 0; padding: .3em .9em; border-inline-start: 4px solid var(--gold-400); background: var(--gold-100); border-radius: 8px; }
.spoiler { background: var(--ink); color: transparent; border-radius: 4px; cursor: pointer; }
.spoiler:hover { color: inherit; background: transparent; }
/* words that were searched, or that a link points to */
mark.hl { background: #ffe58a; color: inherit; font-weight: 700; border-radius: 3px; padding: 0 1px; }
mark.hl-link { background: #ffd24d; box-shadow: 0 0 0 2px #ffd24d; }
.hotline mark.hl { background: rgba(255, 229, 138, .35); color: #fff6dc; }
.share-sel { position: fixed; z-index: 120; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gold-600); background: var(--dark); color: var(--gold-100); font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-lg); white-space: nowrap; }
.share-sel .ic { color: var(--gold-400); }
.msg-more { display: block; margin: 4px 0 0; border: 0; background: none; color: var(--accent); font-weight: 700; padding: 4px 2px; }
.msg-context { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: .92rem; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--ink-soft); font-size: .84rem; }
/* The time opens the date picker at its month. */
#feed-panel .msg-foot time { cursor: pointer; }
#feed-panel .msg-foot time:hover { color: var(--gold-900); text-decoration: underline; }
.msg-actions { display: flex; gap: 2px; }
/* A post's numbers (only when the admin shows them), next to its buttons. */
.msg-counts { display: flex; gap: 10px; margin-inline-start: auto; margin-inline-end: 6px; font-size: .8rem; color: var(--ink-soft); }
.msg-count { display: inline-flex; align-items: center; gap: 3px; }
.msg-count .ic { width: 14px; height: 14px; opacity: .75; }
.msg-act { padding: 0; display: grid; place-items: center; place-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--gold-700); }
/* Without the time (Settings › News page) the buttons stay at the end. */
.msg-foot.no-time { justify-content: flex-end; }
/* The pencil of a signed-in admin (postedit.js shows it); for everyone else it is not there. */
.msg-edit { padding: 0; display: none; place-items: center; place-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--gold-600); background: none; color: var(--gold-800); margin-inline-start: auto; margin-inline-end: 4px; cursor: pointer; }
.msg-counts ~ .msg-edit { margin-inline-start: 0; }
.msg-edit:hover { background: var(--gold-100); color: var(--gold-900); }
.msg-act:hover { background: var(--gold-100); color: var(--gold-900); }
/* A button with its number inside (how often it was pressed; only the numbers the admin shows). */
.msg-act.has-n { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 34px; padding: 0 9px 0 8px; border-radius: 999px; }
.act-n { font-size: var(--count-size, 12px); font-weight: 700; line-height: 1; color: var(--count-color, var(--ink-soft)); font-variant-numeric: tabular-nums; }
.msg-act.has-n:hover .act-n { color: inherit; }
.msg-audio .rec { box-shadow: none; }
.msg-video { margin: 0 -14px 10px; background: #000; max-height: 75vh; }
.msg-video video { width: 100%; height: 100%; max-height: 75vh; display: block; }
.msg-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--gold-100); color: var(--brown-700); font-weight: 700; }
.msg-file img { width: 44px; height: 58px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.msg-file b { margin-inline-start: auto; color: var(--accent); }
/* A PDF: its first page as a picture (a click reads it, pdfreader.js), its name and download under it.
   The heights are the admin's, for a computer or a phone/tablet (--pdf-prev-h, --pdf-h). */
.pdfx { margin-bottom: 8px; }
.pdfx .msg-file { margin-bottom: 0; }
.pdfx-cover { position: relative; display: grid; place-items: center; width: calc(100% + 28px); height: var(--pdf-prev-h, 560px); max-height: 88vh; margin: 0 -14px 8px; padding: 8px; border: 0; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--gold) 12%, #e9e3d3); cursor: zoom-in; overflow: hidden; font: inherit; }
.pdfx-cover .pdfx-page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 2px 12px rgba(40, 25, 5, .28); animation: pdfx-in .35s ease; }
.pdfx-cover img.pdfx-ph { max-width: 100%; height: 100%; width: auto; object-fit: contain; opacity: .85; }
.pdfx-cover span.pdfx-ph .ic { width: 64px; height: 64px; color: var(--gold-700); opacity: .6; animation: pdfx-wait 1.4s ease-in-out infinite alternate; }
.pdfx-cover.no-page span.pdfx-ph .ic { animation: none; }
.pdfx-chip { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: rgba(28, 18, 6, .82); color: var(--gold-100); font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); transition: background .2s, color .2s; }
.pdfx-chip .ic { width: 18px; height: 18px; }
.pdfx-n { font-weight: 400; opacity: .8; padding-inline-start: 7px; border-inline-start: 1px solid rgba(255, 240, 200, .35); }
.pdfx-cover:hover .pdfx-chip, .pdfx-cover:focus-visible .pdfx-chip { background: var(--gold-300); color: var(--brown-900); }
.pdfx.reading .pdfx-cover { display: none; }
@keyframes pdfx-in { from { opacity: 0; } }
@keyframes pdfx-wait { to { opacity: .25; } }

/* The reader: inside the post, or over the whole screen. The pages run one under the other. */
.pdfr { display: flex; flex-direction: column; background: #3d3f41; color: var(--gold-100); }
.pdfr-post { height: min(var(--pdf-h, 720px), 86vh); margin: 0 -14px 8px; border-block: 1px solid var(--line); }
.pdfr-full { position: fixed; inset: 0; z-index: 140; height: 100vh; height: 100dvh; opacity: 0; transition: opacity .2s; }
.pdfr-full.open { opacity: 1; }
.pdfr-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); background: rgba(20, 13, 5, .94); }
.pdfr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pdfr-count { flex: none; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .3); background: rgba(255, 240, 200, .06); color: inherit; font: inherit; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.pdfr-count:disabled { cursor: default; opacity: .6; }
.pdfr-goto { width: 5em; height: 36px; border-radius: 999px; border: 1px solid var(--gold-300); background: #fff; color: var(--ink); text-align: center; font: inherit; font-weight: 700; }
.pdfr-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.pdfr-btn { display: inline-grid; place-items: center; height: 38px; min-width: 38px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .35); background: rgba(255, 240, 200, .06); color: var(--gold-100); font: inherit; cursor: pointer; }
.pdfr-btn:hover:not(:disabled) { background: var(--gold-300); color: var(--brown-900); }
.pdfr-btn:disabled { opacity: .35; cursor: default; }
.pdfr-btn .ic { width: 20px; height: 20px; }
.pdfr-pct { font-size: .8rem; font-weight: 700; min-width: 3.2em; }
.pdfr-x { background: var(--gold-300); color: var(--brown-900); }
.pdfr-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; outline: none; }
.pdfr-post .pdfr-scroll { overscroll-behavior: auto; }
.pdfr-pages { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; min-width: 100%; padding: 12px 8px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.pdfr-page { position: relative; flex: none; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.pdfr-page canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pdfr-pn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #c9bea6; font: 700 1.5rem/1 system-ui, sans-serif; animation: pdfx-wait 1.2s ease-in-out infinite alternate; }
.pdfr-page.drawn .pdfr-pn { display: none; }
.pdfr-page.bad { background: #efe3df; }
.pdfr-page.bad .pdfr-pn { animation: none; }
.pdfr-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font-weight: 700; }
.pdfr-spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 240, 200, .25); border-top-color: var(--gold-300); animation: pdfr-spin .8s linear infinite; }
@keyframes pdfr-spin { to { transform: rotate(360deg); } }
.pdfr-scroll.failed { display: flex; flex-direction: column; touch-action: auto; }
.pdfr.failed :is(.pdfr-count, .pdfr-out, .pdfr-fit, .pdfr-in, .pdfr-big) { display: none; }
.pdfr-fail { display: grid; justify-items: center; gap: 10px; padding: 18px; text-align: center; font-weight: 700; }
.pdfr-fail p { margin: 0; }
.pdfr-scroll.failed iframe { flex: 1 1 auto; width: 100%; min-height: 320px; border: 0; background: #fff; }

.msg-pdf { flex-wrap: wrap; }
.msg-pdf .pdf-pic { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.msg-pdf .pdf-pic .ic { width: 26px; height: 26px; color: var(--accent); flex: none; }
.msg-file-name { overflow-wrap: anywhere; }
.msg-pdf .btn { flex: none; }
.pdf-dl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent); flex: none; }
.pdf-dl:hover { background: var(--gold-200); }
.msg[data-kind="mazeltov"] { background: linear-gradient(180deg, var(--paper), var(--gold-100)); border-color: var(--gold-400); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid; line-height: 1.6; }
.badge .ic { width: 13px; height: 13px; }
.badge-report, .badge-audio { color: #6b4a14; border-color: #dcc285; background: #fbf0d0; }
.badge-photos { color: #2f5560; border-color: #a9cbd1; background: #e9f4f5; }
.badge-notice { color: #7a2f1f; border-color: #e3b3a3; background: #fbebe4; }
.badge-video { color: #4b2f6b; border-color: #c8b3dd; background: #f2ebf8; }
.badge-mazeltov { color: #1f5f3a; border-color: #a8d5b8; background: #eaf7ef; }
.badge[class*="badge-c-"] { color: #3d4f7a; border-color: #b8c4e0; background: #eef1fa; }

/* Pictures: every row is as wide as the post, and each picture keeps its own shape,
   so nothing is cut off and nothing moves when the pictures arrive. */
.album { display: grid; gap: 3px; margin: 0 -14px 10px; }
.album-row { display: flex; gap: 3px; }
.album .tile {
  position: relative;
  flex: var(--ar) 1 0%;
  aspect-ratio: var(--ar);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--gold-100);
  cursor: zoom-in;
  min-width: 0;
}
.album .tile img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.album .tile:hover img { transform: scale(1.03); }
/* A picture much taller or wider than its place: shown whole, on a soft blurred copy of itself. */
.album .tile.fit::before { content: ""; position: absolute; inset: -20px; background: var(--bg) center / cover; filter: blur(18px) brightness(.85); }
.album .tile.fit img { object-fit: contain; }
.album .tile.fit:hover img { transform: none; }
.album-one .tile { width: 100%; max-height: 82vh; }
.album .tile.flash { outline: 4px solid var(--gold-500); outline-offset: -4px; }
.tile-more { direction: ltr; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(30, 19, 6, .55); color: #fff8e2; font-size: 1.8rem; font-weight: 900; }
/* The grid layout: 2 to 3 (or 4) small pictures in a row, never one big one. */
.album-grid, .album-grid .album-row { gap: var(--grid-gap, 3px); }
.album-grid .tile-more { font-size: 1.5rem; }
.album-grid-one .album-row { justify-content: center; }
.album-grid-one .tile { flex: 0 0 50%; }

/* notices */
.posters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
.poster { display: flex; flex-direction: column; background: var(--paper); border-radius: 14px; padding: 8px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.poster-img { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--gold-100); display: grid; place-items: center; border: 0; padding: 0; width: 100%; cursor: zoom-in; }
.poster-img img { width: 100%; height: 100%; object-fit: contain; }
.poster-img .ic { width: 50px; height: 50px; color: var(--gold-700); }
.poster-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 4px 0; }
.poster-foot time { font-size: .84rem; color: var(--ink-soft); }
.poster-dl { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent); }
.poster-dl:hover { background: var(--gold-100); }

/* ---------- the pages of their own: all recordings, all pictures, all posters ---------- */
.pg .section-head { margin-bottom: 18px; }
/* The recordings read best at the width of the news column. */
.pg-wrap { max-width: var(--feed-w); }
.pg-filters { max-width: 900px; margin: 0 auto 12px; }
.pg-form { justify-content: center; }
.pg-form .select { flex: 0 1 auto; max-width: 100%; }
.pg-filters .range-cal { max-width: 460px; margin-inline: auto; }
.pg-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; max-width: 900px; margin: 0 auto 12px; min-height: 1.5em; }
.pg-tools .play-all { margin: 0; }
.pg-count { font-size: .9rem; color: var(--ink-soft); }
.pg-rec { display: grid; gap: 2px; }
.pg-goto { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--accent); padding: 2px 6px; }
.pg-goto .ic { width: 15px; height: 15px; }
/* Pictures in rows that each picture fills whole, in its own shape: every tile starts at the row
   height the page aims for (--tile-h, set by images.js from how many the visitor wants in a row)
   and grows by its own shape, so all the pictures of a row stay one height and end exactly at the
   edge; there is never an empty or blurred side. The last row keeps its height instead of stretching. */
.pg-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.pg-grid::after { content: ""; flex: 999 1 0; }
.pg-grid.can-zoom { touch-action: pan-x pan-y; }
.pg-tile { position: relative; flex: var(--ar) 1 calc(var(--tile-h, 220px) * var(--ar)); aspect-ratio: var(--ar); max-width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--gold-100); cursor: zoom-in; }
.pg-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-zoom { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.pg-zoom-btn { padding: 0; display: grid; place-items: center; place-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--accent); font: 700 1.35rem/1 var(--font-body); cursor: pointer; }
.pg-zoom-btn:hover:not(:disabled) { background: var(--gold-100); }
.pg-zoom-btn:disabled { opacity: .4; cursor: default; }
.pg-tile time { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; color: #fff8e2; background: rgba(30, 19, 6, .6); opacity: 0; transition: opacity .2s; }
.pg-tile:hover time, .pg-tile:focus-visible time { opacity: 1; }
.pg-grid > .feed-loading, .pg-grid > .empty { flex: 1 1 100%; }
.pg-posters { max-width: none; }
.pg-posters .poster-img { aspect-ratio: auto; height: var(--tile-h); }
@media (max-width: 720px) {
  .pg-posters .poster-img { height: min(var(--tile-h), 62vw); }
  .pg-tools { justify-content: center; }
}

/* The visitor's listening list on the audio page: the same list as on the player bar, in the
   page's light colours. Above the recordings; with "side" (Pages → Audio) beside them on a wide
   screen, where it stays in sight while the page scrolls. Its own style: Visibility → Edit style. */
.pq { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.pq[hidden] { display: none; }
.pq:focus { outline: none; }
.pq-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--gold-100) 50%, transparent); }
.pq-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--brown-900); background: var(--btn-gold); box-shadow: var(--shadow-sm); }
.pq-ic .ic { width: 18px; height: 18px; }
.pq-title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; line-height: 1.3; color: var(--accent); }
.pq .q-count { font-family: var(--font-body); font-size: .88rem; color: var(--ink-soft); }
.pq .q-clear { color: var(--accent); border-color: var(--line); background: var(--paper); }
.pq .q-clear:hover { color: var(--gold-900); background: var(--gold-100); }
.pq .pq-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.pq-hint { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 1.5px dashed var(--gold-300); }
.pq-hint .ic { width: 19px; height: 19px; }
.pq .q-list { max-height: min(46vh, 380px); padding: 4px 8px; }
.pq .q-item + .q-item { border-top-color: var(--line); }
.pq .q-item:hover { background: color-mix(in srgb, var(--gold-100) 60%, transparent); }
.pq .q-play { color: var(--ink); }
.pq .q-play .ic { color: var(--accent); }
.pq .q-play:hover { color: var(--accent); }
.pq .q-dur { color: var(--ink-soft); }
.pq .q-btn { color: var(--accent); }
.pq .q-btn:hover:not(:disabled) { color: var(--gold-900); background: var(--gold-100); }
.pq .q-item.flash { animation: pq-flash 1.6s ease-out; }
@keyframes pq-flash { from { background: color-mix(in srgb, var(--gold) 45%, transparent); } }
.pq-foot { padding: 6px 12px 12px; }
.pq-foot[hidden] { display: none; }
.pq-play { margin: 0; }
@media (min-width: 1100px) {
  #audio-page[data-qpos="side"] .pg-wrap { max-width: calc(var(--feed-w) + 348px); }
  #audio-page[data-qpos="side"] .pg-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; }
  /* Everything else keeps the width of the news column (also when the list is hidden). */
  #audio-page[data-qpos="side"] .pg-body > :not(.pq) { grid-column: 1; width: 100%; max-width: var(--feed-w); justify-self: center; }
  #audio-page[data-qpos="side"] .pq { grid-column: 2; grid-row: 1 / span 6; align-self: start; position: sticky; top: calc(var(--top-h) + 14px); width: 320px; max-height: calc(100vh - var(--top-h) - 30px); margin: 0; }
  #audio-page[data-qpos="side"] .pq .q-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  html.has-mini #audio-page[data-qpos="side"] .pq { max-height: calc(100vh - var(--top-h) - 130px); }
}

.resume-chip {
  position: fixed;
  bottom: 22px;
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold-600);
  background: var(--btn-gold);
  color: var(--brown-900);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  animation: rise .4s ease;
  white-space: nowrap;
  max-width: calc(100% - 100px);
  font-size: .95rem;
}
@keyframes rise { from { opacity: 0; translate: -50% 16px; } }
.to-top {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 18px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  background: var(--paper);
  color: var(--accent);
  display: grid;
  place-items: center;
  place-content: center;
  padding: 0;
  box-shadow: var(--shadow);
}
.to-top .ic { width: 24px; height: 24px; }

/* ---------- hotline ---------- */

.hotline { color: var(--gold-100); background: var(--dark); }
.hotline .section-title { color: var(--gold-300); }
.hotline .section-head p { color: var(--gold-200); }
.hotline-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start; }
.hotline-card {
  position: sticky;
  top: calc(var(--top-h) + 24px);
  text-align: center;
  padding: 30px 24px;
  border-radius: 22px;
  background: rgba(255, 236, 180, .06);
  border: 1px solid rgba(236, 212, 140, .3);
}
.ring { width: 84px; height: 84px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--brown-900); background: var(--btn-gold); }
.ring .ic { width: 38px; height: 38px; }
.hotline-card h3 { margin: 0 0 4px; font-size: 1.25rem; color: var(--gold-200); }
.hotline-num { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 2.9rem); line-height: 1.25; letter-spacing: 1px; margin: 6px 0 12px; color: var(--gold-300); }
.hotline-card p { margin: 0 0 18px; color: var(--gold-200); font-size: 1.02rem; }
.hotline-note { font-size: .9rem !important; opacity: .85; margin: 16px 0 0 !important; }
.play-all { margin-bottom: 14px; }
/* the kinds of דב״ק on the hotline */
.rec-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; padding: .4em 1em; border-radius: 999px; font-weight: 700; font-size: .92rem; border: 1px solid rgba(236, 212, 140, .3); background: rgba(255, 240, 200, .06); color: var(--gold-200); transition: background .2s, color .2s; }
.chip:hover { border-color: var(--gold-400); color: #fff3cf; }
.chip[aria-pressed="true"] { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); }
/* A recording in the feed: just the player, and the words that came with it under it (as on Telegram). */
.rec-bare .rec-main { align-self: center; }
.rec-words { white-space: pre-line; font-weight: 400; margin-top: 10px; }
/* A recording the admin combined into a post: its player (and its words) in the post, under its pictures. */
.msg-rec { margin: 10px 0; }
.msg-rec-words { font-size: var(--post-size); line-height: 1.85; color: var(--ink); overflow-wrap: anywhere; padding: 2px 2px 0; margin-top: 8px; }
.msg-rec-words a { color: var(--accent); border-bottom: 1px solid var(--gold-300); }
/* The kinds of דב״ק above the feed (on the light page). */
.feed-topics { justify-content: center; margin: 14px auto 4px; max-width: 900px; }
.feed-topics .chip { color: var(--brown-600); background: var(--paper); border-color: var(--line); }
.feed-topics .chip:hover { color: var(--gold-900); border-color: var(--gold-400); background: var(--gold-100); }
.feed-topics .chip[aria-pressed="true"] { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); }

.rec-list { display: flex; flex-direction: column; gap: 12px; }
/* Play, then the rest; the buttons after it (queue, download) each take a column of their own only when
   they are there and shown. */
.rec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 240, 200, .055);
  border: 1px solid rgba(236, 212, 140, .2);
  transition: background .25s, border-color .25s;
}
.rec:hover { background: rgba(255, 240, 200, .09); border-color: rgba(236, 212, 140, .4); }
.rec.active { background: rgba(214, 170, 80, .14); border-color: rgba(236, 212, 140, .6); }
/* A round button with a picture in it has no padding of the browser's own (so too .mini-btn and the
   other round ones): some browsers give a button so much that less room is left than the picture
   needs, and it ran out to one side (the play triangle stood at the left); place-content keeps it in
   the middle even then. */
.rec-play { padding: 0; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; place-content: center; color: var(--brown-900); background: var(--btn-gold); transition: transform .2s; }
.rec-play:hover { transform: scale(1.06); }
.rec-play .ic { width: 22px; height: 22px; grid-area: 1 / 1; }
.rec-play .i-play { transform: translateX(1.5px); }
.rec-play .i-pause, .rec.playing .rec-play .i-play { display: none; }
.rec.playing .rec-play .i-pause { display: block; }
.rec.loading .rec-play { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(236, 212, 140, .2); } }
.rec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-title { font-weight: 700; font-size: 1.08rem; color: #fff6dc; line-height: 1.4; }
.rec-cat { font-size: .74rem; padding: 0 9px; border-radius: 99px; border: 1px solid rgba(236, 212, 140, .45); color: var(--gold-300); }
.rec-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; color: rgba(245, 230, 184, .75); }
.rec-desc { margin: 4px 0 0; font-size: .95rem; color: rgba(245, 230, 184, .85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
/* A time bar (also .m-prog on the bar at the bottom). It fills from the right, as the site runs right
   to left (from the left in the English version). It shows 6px high, but a press anywhere in the 20px around it counts: the padding is
   see-through (the background paints only the middle; 3px / 10px keeps the ends of that round).
   A finger on it drags the time instead of moving the page. */
.rec-progress { flex: 1; height: 20px; padding-block: 7px; border-radius: 3px / 10px; background: rgba(255, 240, 200, .15) content-box; cursor: pointer; position: relative; overflow: hidden; touch-action: none; }
.rec-progress i { position: absolute; inset-block: 7px; inset-inline-start: 0; width: 0; border-radius: 3px; background: var(--gold); transition: width .2s linear; }
/* While a bar is dragged its fill follows at once. */
.rec-progress.dragging i, .m-prog.dragging i { transition: none; }
/* The small skip buttons on each recording (Advanced settings → Player); clearer on the one that plays. */
.rec-skip { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: 0; display: grid; place-items: center; color: var(--gold-200); opacity: .6; transition: opacity .2s, background .2s; }
.rec-skip .ic { width: 20px; height: 20px; }
.rec.active .rec-skip, .rec-skip:hover, .rec-skip:focus-visible { opacity: 1; }
.rec-skip:hover { background: rgba(255, 240, 200, .12); }
.rec-light .rec-skip { color: var(--accent); }
.rec-light .rec-skip:hover { background: var(--gold-100); }
/* "0:00 / 4:32" reads from the right like the rest: the time it is at stands on the right. */
.rec-time { font-size: .8rem; color: rgba(245, 230, 184, .7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-time span, .m-cur, .m-dur { direction: ltr; unicode-bidi: isolate; }
.rec-dl { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-200); border: 1px solid rgba(236, 212, 140, .3); }
.rec-dl:hover { background: var(--gold-300); color: var(--brown-900); }
/* The queue button on each recording (Settings → Player): gold with a check while it waits in the queue. */
.rec-queue { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--gold-200); background: 0; border: 1px solid rgba(236, 212, 140, .3); transition: background .2s, color .2s; }
.rec-queue[hidden] { display: none; }
.rec-queue .ic { width: 19px; height: 19px; grid-area: 1 / 1; }
.rec-queue .i-in, .rec-queue[aria-pressed="true"] .i-add { display: none; }
.rec-queue[aria-pressed="true"] .i-in { display: block; }
.rec-queue:hover { background: rgba(255, 240, 200, .12); color: #fff6dc; }
.hotline .empty { background: rgba(255, 240, 200, .04); border-color: rgba(236, 212, 140, .3); color: var(--gold-200); }
.hotline .empty p { color: var(--gold-100); }

/* light recordings (inside the news feed) */
.rec-light .rec { background: var(--paper); border-color: var(--line); padding: 10px 12px; }
.rec-light .rec.active { background: var(--gold-100); border-color: var(--gold-500); }
.rec-light .rec-title { color: var(--brown-800); }
.rec-light .rec-meta, .rec-light .rec-time, .rec-light .rec-desc { color: var(--ink-soft); }
.rec-light .rec-cat { color: var(--accent); border-color: var(--gold-300); }
.rec-light .rec-progress { background-color: var(--gold-200); }
.rec-light .rec-dl { color: var(--accent); border-color: var(--line); }
.rec-light .rec-queue { color: var(--accent); border-color: var(--line); }
.rec-light .rec-queue:hover { background: var(--gold-100); color: var(--gold-900); }
.rec .rec-queue[aria-pressed="true"] { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); }

/* ---------- join ---------- */

/* The cards in rows; a row that isn't full stands in the middle (Advanced settings › Channel cards:
   how many in a row, where such a row stands). "As many as fit": each card --jc-w wide. */
.join-grid { --jc-gap: 20px; --jc-w: 250px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--jc-gap); }
.join-grid > .join-card { flex: 0 1 var(--jc-w); min-width: 0; }
/* Five cards on a wide screen: one row of five, not four and one left alone. (:where keeps it weak,
   so the number of cards in a row set on the admin's Advanced page still wins.) */
@media (min-width: 1100px) { :where(.join-grid:has(> .join-card:nth-child(5):last-child)) > .join-card { flex-basis: calc((100% - 4 * var(--jc-gap)) / 5); } }
@media (max-width: 720px) { .join-grid > .join-card { flex: 1 1 230px; } }
.join-card {
  position: relative;
  text-align: center;
  padding: 30px 20px 24px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}
.join-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand); }
.join-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--brand); }
.join-ic .ic { width: 32px; height: 32px; }
/* A logo drawn from a picture (TelOChat) is big in its circle (Advanced › Channel cards, picFull). */
.join-ic .ic.ic-mask { width: 64%; height: 64%; }
.topbar-social .sc .ic.ic-mask { width: 17px; height: 17px; }
.join-card h3 { margin: 4px 0 0; font-size: 1.25rem; color: var(--brown-800); }
.join-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; flex: 1; }
.join-card .handle { font-size: .88rem; color: var(--accent); direction: ltr; }
.join-card .btn { margin-top: 6px; }
/* a card that is not ready yet: the same card, quieter, with a badge instead of its button */
.join-card.soon { background: color-mix(in srgb, var(--paper) 72%, var(--cream)); box-shadow: none; }
.join-card.soon::before { opacity: .45; }
.join-card.soon .join-ic { opacity: .72; filter: saturate(.7); }
.join-card.soon h3 { color: var(--brown-700); }
.join-soon {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 6px; padding: .55em 1.2em;
  border-radius: 999px; border: 1px dashed var(--gold-500); background: var(--gold-100);
  color: var(--accent); font-weight: 700; font-size: .95rem; line-height: 1.2; cursor: default; user-select: none;
}
.join-soon .ic { width: 1em; height: 1em; color: var(--gold-700); }

/* ---------- contact page ---------- */

.contact-wrap { max-width: 760px; }
.contact-form, .contact-done { display: grid; gap: 14px; padding: 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact-done { justify-items: center; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--brown-700); }
.contact-done .ic { width: 44px; height: 44px; color: #2f7a3a; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 5px; font-size: .95rem; font-weight: 700; color: var(--brown-600); }
.field input, .field select, .field textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff; width: 100%; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
.field small { font-weight: 400; }
.form-error { color: #a1281e; min-height: 1.2em; margin: 0; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form progress { width: 100%; height: 10px; accent-color: var(--gold-600); }
.contact-form .btn { justify-self: start; }
.contact-other { text-align: center; margin-top: 24px; color: var(--ink-soft); }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- the text-message sign-up (/sms): an English card under the Yiddish heading ---------- */

.sms-form { text-align: left; }
.sms-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--accent); line-height: 1.3; }
.sms-head p { margin: 2px 0 0; color: var(--ink-soft); font-size: .98rem; }
.sms-form .field input[name="phone"] { font-size: 1.1rem; letter-spacing: .3px; max-width: 320px; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px; background: var(--gold-100); border: 1px solid var(--line); }
.consent input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--gold-700); cursor: pointer; }
.consent input[aria-invalid="true"] { outline: 2px solid #a1281e; outline-offset: 2px; }
.consent label { font-size: .93rem; line-height: 1.6; color: var(--brown-700); cursor: pointer; }
.consent a, .sms-privacy a, .contact-done a { border-bottom: 1px solid var(--gold-300); }
.field input[aria-invalid="true"] { border-color: #a1281e; }
.sms-privacy { margin: 0; font-size: .88rem; }
/* The categories to choose (in the page's language, so right to left on the Yiddish site). */
.sms-kinds { margin: 0; padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; min-width: 0; text-align: start; }
.sms-kinds legend { padding: 0 6px; font-weight: 700; color: var(--brown-600); font-size: .98rem; }
.sms-kinds-list { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sms-kinds-list label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: 1rem; }
.sms-kinds-list label:has(input:checked) { background: var(--gold-100); border-color: var(--gold-500); }
.sms-kinds-list input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-700); cursor: pointer; }
.sms-kinds small { color: var(--ink-soft); font-size: .86rem; }
.sms-kinds[aria-invalid="true"] { border-color: #a1281e; }
.contact-done .note { font-size: .92rem; font-weight: 400; margin: 0; }
.nowrap { white-space: nowrap; }

/* ---------- the Privacy Policy and the SMS Terms: English, in a calm card ---------- */

.legal-wrap { max-width: 860px; }
.legal-meta { font-size: .98rem; }
.legal {
  padding: 30px 36px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: .96rem; line-height: 1.7; text-align: left; overflow-wrap: break-word;
}
.legal[dir="rtl"] { text-align: right; }
.legal h2 { margin: 1.7em 0 .45em; font-size: 1.2rem; line-height: 1.35; color: var(--accent); }
.legal h3 { margin: 1.1em 0 .3em; font-size: 1.02rem; color: var(--brown-700); }
.legal > p:first-child { font-size: 1.02rem; }
.legal p { margin: 0 0 .8em; }
.legal ul { margin: 0 0 .9em; padding-inline-start: 1.25em; }
.legal li { margin-bottom: .4em; }
.legal li::marker { color: var(--gold-600); }
.legal a { border-bottom: 1px solid var(--gold-300); }
.legal a[href^="tel:"] { white-space: nowrap; }
.legal-key { margin: 0 0 1em; padding: 14px 18px; border-radius: 12px; background: var(--gold-100); border-inline-start: 4px solid var(--gold-500); color: var(--brown-700); font-weight: 700; }
.legal-key p:last-child { margin-bottom: 0; }
.legal-contact { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; margin: 0 0 .9em; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--cream) 60%, var(--paper)); border: 1px solid var(--line); }
.legal-contact dt { font-weight: 700; color: var(--brown-600); }
.legal-contact dd { margin: 0; }
.legal-yi { max-width: 860px; margin: 0 auto 18px; padding: 12px 18px; border-radius: 12px; border: 1px dashed var(--gold-400); background: color-mix(in srgb, var(--paper) 70%, transparent); text-align: center; color: var(--brown-600); font-size: 1rem; line-height: 1.6; }

/* ---------- footer ---------- */

.site-footer { background: var(--dark); color: var(--gold-200); }
/* One column for each part that is shown (a column hidden on this kind of screen leaves no gap). */
.footer-in { display: grid; grid-template-columns: 1.4fr; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 30px; padding: 40px 0 30px; }
.footer-logo { width: 120px; height: auto; background: var(--paper); border-radius: 50%; padding: 12px; }
.footer-tag { margin: 14px 0 0; font-size: .98rem; color: var(--gold-300); max-width: 280px; }
/* Each column's heading and its links stand as one column, aligned together (Appearance › Footer). */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--gold-300); }
.footer-col a { display: flex; align-items: center; gap: 8px; color: rgba(245, 230, 184, .85); padding: 3px 0; font-size: .98rem; }
.footer-col a:hover { color: #fff3cf; }
.footer-bottom { border-top: 1px solid rgba(236, 212, 140, .15); padding: 14px 0; font-size: .88rem; color: rgba(245, 230, 184, .65); text-align: center; }
.footer-legal { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 .55em; margin-inline-start: 1.6em; font-size: .82rem; }
.footer-bottom .wrap > .footer-legal:only-child { margin: 0; }
.footer-legal a { color: rgba(245, 230, 184, .6); }
.footer-legal a:hover { color: #fff3cf; }
.footer-legal a + a::before { content: "·"; margin-inline-end: .55em; color: rgba(245, 230, 184, .35); }
/* The English line under it (for people who search in English), on every page. */
.footer-en { margin: 6px auto 0; max-width: 760px; font-size: .8rem; line-height: 1.5; color: rgba(245, 230, 184, .5); }
.footer-bottom .wrap > .footer-legal:first-child { margin: 0; }
/* The menu's pages as plain links, in the footer the server sends (until the script draws the footer). */
.footer-pages { margin-bottom: 6px; font-size: .86rem; }
.footer-pages a { color: rgba(245, 230, 184, .7); }
.footer-bottom .wrap > .footer-pages + .footer-legal { margin: 0; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(20, 13, 5, .95);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: var(--gold-200); }
.lb-actions { display: flex; gap: 8px; }
.lb-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; min-width: 42px; padding: 0 12px; justify-content: center; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .35); background: rgba(255, 240, 200, .06); color: var(--gold-100); font-weight: 700; font-size: .95rem; }
.lb-btn:hover { background: var(--gold-300); color: var(--brown-900); }
.lb-btn .ic { width: 20px; height: 20px; }
.lb-stage { margin: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; min-height: 0; padding: 0 70px 16px; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 6px; opacity: 0; transition: opacity .3s; }
.lb-stage img.ready { opacity: 1; }
/* Zooming: the picture takes the gestures itself (pinch, drag), and shows that it can be moved. */
.lb-stage img { touch-action: none; cursor: zoom-in; position: relative; z-index: 1; will-change: transform; }
.lightbox.zoomed .lb-stage img { cursor: grab; }
.lightbox.zoomed .lb-stage img:active { cursor: grabbing; }
.lightbox.zoomed .lb-nav, .lightbox.zoomed figcaption { opacity: .25; pointer-events: none; }
.lightbox { overflow: hidden; }
.lb-stage figcaption { margin-top: 12px; color: var(--gold-100); text-align: center; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: .95rem; max-width: 900px; }
.lb-stage figcaption time { color: var(--gold-400); }
.lb-stage figcaption a { color: var(--gold-300); display: inline-flex; align-items: center; gap: 5px; }
.lb-nav { padding: 0; position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(236, 212, 140, .35); background: rgba(255, 240, 200, .08); color: var(--gold-100); display: grid; place-items: center; place-content: center; }
.lb-nav:hover { background: var(--gold-300); color: var(--brown-900); }
.lb-nav .ic { width: 26px; height: 26px; }
.lb-prev { inset-inline-start: 14px; }
.lb-next { inset-inline-end: 14px; }
.lightbox.single .lb-nav { display: none; }
/* At the first / last picture there is nothing more that way. */
.lightbox.at-first .lb-prev, .lightbox.at-last .lb-next { opacity: 0; pointer-events: none; }
/* Going on from the last picture loaded (pictures page): the next ones are on their way. */
.lightbox.waiting .lb-stage img { opacity: .35; }
.lightbox.waiting .lb-count::after { content: ''; display: inline-block; width: 13px; height: 13px; margin-inline-start: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgba(255, 240, 200, .3); border-top-color: var(--gold-300); animation: pdfr-spin .8s linear infinite; }

/* The small pictures of the album under the big one; the current one is marked. */
.lightbox { grid-template-rows: auto 1fr auto; }
.lightbox:not(.single) .lb-stage img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
/* The post's words under the picture: at most about three lines (the rest scrolls), and the picture leaves room for them. */
.lb-stage figcaption span { max-height: 5.1em; overflow-y: auto; overscroll-behavior: contain; }
.lightbox.has-caption .lb-stage img { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
.lightbox.has-caption:not(.single) .lb-stage img { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); }
.lb-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 14px; justify-content: safe center; scrollbar-width: thin; }
.lb-thumbs:empty { display: none; }
.lb-thumbs button { flex: none; width: 58px; height: 58px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: rgba(255, 240, 200, .08); opacity: .55; transition: opacity .2s, border-color .2s; }
.lb-thumbs button:hover { opacity: .85; }
.lb-thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--gold-300); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox.zoomed .lb-thumbs { opacity: .25; pointer-events: none; }
/* On a phone the arrow buttons would sit on the small pictures; there one swipes or taps a small picture. */
@media (max-width: 720px) { .lb-thumbs button { width: 46px; height: 46px; } .lightbox:not(.single) .lb-nav { display: none; } }


/* ---------- the little player bar at the bottom of the page ---------- */

html.has-mini body { padding-bottom: 104px; }
html.has-mini .to-top { bottom: 112px; }
html.has-mini #toast { bottom: 172px; }

.mini {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--dark) 95%, #000);
  border-top: 1px solid rgba(236, 212, 140, .3);
  box-shadow: 0 -8px 30px -10px rgba(20, 13, 5, .6);
  color: var(--gold-100);
  animation: mini-up .3s ease;
}
@keyframes mini-up { from { translate: 0 100%; } }
.mini[hidden] { display: none; }
.mini-now { min-width: 0; }
.mini-title { display: block; max-width: 100%; padding: 0; border: 0; background: 0; font: inherit; font-weight: 700; color: #fff6dc; text-align: start; }
.mini-title:hover { color: var(--gold-300); }
.mini-title span, .mini-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub { font-size: .8rem; color: rgba(245, 230, 184, .7); }
.mini-mid { display: grid; gap: 2px; justify-items: center; width: 100%; min-width: 0; }
/* Right to left like the rest of the site (see buildMini): back and the time it is at on the right. */
.mini-ctrls, .mini-extra, .mini-bar { display: flex; align-items: center; }
.mini-ctrls { gap: 2px; }
.mini-extra { gap: 4px; justify-content: flex-end; }
.mini-btn { padding: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: 0; color: var(--gold-200); display: grid; place-items: center; place-content: center; transition: background .2s, color .2s, transform .2s; }
.mini-btn:hover { background: rgba(255, 240, 200, .12); color: #fff6dc; }
.mini-btn .ic { width: 19px; height: 19px; }
.mini-btn[aria-pressed="true"] { color: var(--gold); background: rgba(214, 170, 80, .2); }
.mini-play { width: 44px; height: 44px; color: var(--brown-900); background: var(--btn-gold); }
.mini-play:hover { color: var(--brown-900); background: var(--btn-gold); transform: scale(1.06); }
.mini-play .ic { width: 20px; height: 20px; grid-area: 1 / 1; }
.mini-play .i-play { transform: translateX(1px); }
.mini-play .i-pause, .mini.playing .mini-play .i-play { display: none; }
.mini.playing .mini-play .i-pause { display: block; }
.mini-bar { gap: 10px; width: 100%; max-width: 540px; }
/* Waiting with only the list on it (nothing played yet): what needs a recording is out of sight, in its place. */
.mini.idle :is(.m-prev, .m-back, .m-fwd, .m-share, .mini-bar) { visibility: hidden; }
.m-prog { flex: 1; height: 20px; padding-block: 7px; border-radius: 3px / 10px; background: rgba(255, 240, 200, .18) content-box; position: relative; overflow: hidden; cursor: pointer; touch-action: none; }
.m-prog i { position: absolute; inset-block: 7px; inset-inline-start: 0; width: 0; border-radius: 3px; background: var(--gold); transition: width .2s linear; }
.m-cur, .m-dur { font-size: .78rem; color: rgba(245, 230, 184, .72); font-variant-numeric: tabular-nums; }
/* The speed: a pill with the speed on it (gold while it isn't 1×), and next to it then a small "1×" that
   brings it back to normal in one press. Its panel: − and + around the speed, a slider, the speeds, "normal". */
.mini-speed { position: relative; display: flex; align-items: center; gap: 3px; }
.m-speed { width: auto; min-width: 48px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .3); font: inherit; font-size: .85rem; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.m-speed[aria-expanded="true"] { border-color: var(--gold); background: rgba(214, 170, 80, .2); }
.mini.speedy .m-speed { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); }
.m-speed-reset { width: auto; height: 28px; gap: 3px; display: inline-flex; align-items: center; padding: 0 8px 0 7px; border-radius: 999px; border: 1px dashed rgba(236, 212, 140, .45); font: inherit; font-size: .78rem; font-weight: 700; direction: ltr; }
.m-speed-reset .ic { width: 13px; height: 13px; }
.m-speed-reset[hidden] { display: none; }
.speed-menu { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 3; display: grid; gap: 12px; width: 236px; padding: 14px; border-radius: 16px; background: var(--dark); border: 1px solid rgba(236, 212, 140, .35); box-shadow: var(--shadow-lg); color: var(--gold-100); }
.speed-menu[hidden] { display: none; }
.speed-menu button { font: inherit; color: var(--gold-100); }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-now { flex: 1; text-align: center; font-size: 1.6rem; font-weight: 700; color: #fff6dc; direction: ltr; font-variant-numeric: tabular-nums; }
.sp-step { padding: 0; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(236, 212, 140, .35); background: rgba(255, 240, 200, .06); font-size: 1.35rem !important; line-height: 1; display: grid; place-items: center; place-content: center; }
.sp-step:hover:not(:disabled) { background: rgba(255, 240, 200, .16); color: #fff6dc; }
.sp-step:disabled { opacity: .3; cursor: default; }
/* The slider fills from its start (the right on the Yiddish site, where the slow end is). */
.sp-range { width: 100%; height: 22px; margin: 0; appearance: none; background: 0; cursor: pointer; --fill: 25%; }
.sp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to var(--fill-to, right), var(--gold) var(--fill), rgba(255, 240, 200, .2) var(--fill)); }
.sp-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 240, 200, .2); }
.sp-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gold); }
.sp-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff6dc; border: 3px solid var(--gold); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.sp-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff6dc; border: 3px solid var(--gold); }
html[dir="rtl"] .sp-range { --fill-to: left; }
.sp-range:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; border-radius: 4px; }
.sp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-chips button { padding: 6px 0; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .25); background: 0; font-size: .86rem; direction: ltr; font-variant-numeric: tabular-nums; }
.sp-chips button:hover { background: rgba(255, 240, 200, .14); }
.sp-chips button[aria-pressed="true"] { color: var(--brown-900); background: var(--btn-gold); border-color: var(--gold-600); font-weight: 700; }
.sp-normal { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: 999px; border: 1px solid var(--gold-600); background: rgba(214, 170, 80, .16); font-weight: 700; font-size: .9rem; }
.sp-normal .ic { width: 15px; height: 15px; }
.sp-normal:hover:not(:disabled) { background: var(--btn-gold); color: var(--brown-900); }
.sp-normal:disabled { opacity: .45; cursor: default; }
.speed-menu :focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.m-vol { width: 78px; accent-color: var(--gold); }
/* The queue's button, with how many wait in it on its corner. */
.m-queue { position: relative; }
.m-qn { position: absolute; top: 1px; inset-inline-start: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--btn-gold); color: var(--brown-900); font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.m-qn[hidden] { display: none; }
.m-queue[aria-expanded="true"] { color: var(--gold); background: rgba(214, 170, 80, .2); }
/* The queue's list: above the bar on its left end (where the button is; the right end in the English
   version), never over the bar itself. A long list scrolls inside it. */
.q-panel { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 12px; z-index: 3; width: min(420px, calc(100vw - 24px)); max-height: min(60vh, 480px); max-height: min(60dvh, 480px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 14px; background: var(--dark); border: 1px solid rgba(236, 212, 140, .35); box-shadow: var(--shadow-lg); color: var(--gold-100); }
.q-panel[hidden] { display: none; }
.q-head { display: flex; align-items: center; gap: 6px; padding: 6px; padding-inline-start: 12px; border-bottom: 1px solid rgba(236, 212, 140, .18); }
.q-head b { flex: 1; min-width: 0; color: #fff6dc; }
.q-count { font-weight: 400; color: rgba(245, 230, 184, .7); font-variant-numeric: tabular-nums; }
.q-clear { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(236, 212, 140, .3); background: 0; color: var(--gold-200); font: inherit; font-size: .82rem; white-space: nowrap; }
.q-clear:hover { background: rgba(255, 240, 200, .12); color: #fff6dc; }
.q-clear[hidden] { display: none; }
.q-list { list-style: none; margin: 0; padding: 4px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.q-list:empty { display: none; }
.q-item { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.q-item + .q-item { border-top: 1px solid rgba(236, 212, 140, .1); }
.q-item:hover { background: rgba(255, 240, 200, .06); }
.q-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 6px; border: 0; border-radius: 10px; background: 0; color: var(--gold-100); font: inherit; font-size: .92rem; text-align: start; }
.q-play .ic { flex: none; width: 15px; height: 15px; color: var(--gold); }
.q-play:hover { color: #fff6dc; }
.q-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-dur { flex: none; font-size: .78rem; color: rgba(245, 230, 184, .7); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.q-btn { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: 0; color: var(--gold-200); display: grid; place-items: center; }
.q-btn .ic { width: 17px; height: 17px; }
.q-btn:hover:not(:disabled) { background: rgba(255, 240, 200, .12); color: #fff6dc; }
.q-btn:disabled { opacity: .25; cursor: default; }
.q-empty { margin: 0; padding: 14px; font-size: .9rem; color: rgba(245, 230, 184, .78); }
.q-empty[hidden] { display: none; }
/* The X that closes the bar: in its top right corner (in both languages); the bar keeps room for it. */
.mini { padding-right: 46px; }
.mini .m-close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; }
.mini .m-close .ic { width: 17px; height: 17px; }

@media (max-width: 980px) {
  html.has-mini body { padding-bottom: 136px; }
  html.has-mini .to-top { bottom: 146px; }
  html.has-mini #toast { bottom: 200px; }
  .mini { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 8px 42px calc(8px + env(safe-area-inset-bottom)) 12px; }
  .mini .m-close { top: 4px; right: 4px; }
  .mini-mid { grid-column: 1 / -1; }
  .m-vol, .m-mute { display: none; }
  /* The speed's panel above the middle of the bar, so it never runs off the screen's edge. */
  .speed-menu { position: fixed; bottom: calc(var(--bar-h, 120px) + 8px); width: min(300px, calc(100vw - 24px)); }
  .sp-step { width: 46px; height: 46px; }
  .sp-chips button { padding: 9px 0; }
}
@media (max-width: 560px) {
  .mini-btn { width: 34px; height: 34px; }
  .q-panel { left: 8px; right: 8px; width: auto; max-height: 55vh; max-height: 55dvh; }
}

/* The one in the list that is in the player: marked, with pause on it while it plays (it stays in the
   list; only its X takes it off). */
.q-play .i-pause, .q-item.playing .q-play .i-play { display: none; }
.q-item.playing .q-play .i-pause { display: block; }
.q-item.now { background: rgba(214, 170, 80, .2); }
.q-item.now .q-name { font-weight: 700; color: #fff6dc; }
.pq .q-item.now { background: color-mix(in srgb, var(--gold-100) 85%, transparent); }
.pq .q-item.now .q-name { color: var(--accent); }
/* Moved up or down: it slides into its new place (common.js, slideQueue) and lights up a moment. */
.q-item.flash { position: relative; z-index: 1; animation: q-flash 1.6s ease-out; }
@keyframes q-flash { from { background: rgba(214, 170, 80, .55); } }

/* ---------- the recording goes on between pages (shell.js) ---------- */
/* The page that was opened, in a frame over the whole window above the bar; this page itself is out of
   sight. A frame that is still opening is there (so its page is laid out) but not seen yet. (1px with
   min-width: an iPhone doesn't make the frame wider than the screen for a wide part of its page.) */
.bh-frame { position: fixed; top: 0; left: 0; z-index: 140; width: 1px; min-width: 100%; height: calc(100% - var(--bar-h, 0px)); border: 0; background: var(--paper); visibility: hidden; }
.bh-frame.on { visibility: visible; }
/* (Pulling the page down at its top no longer reloads it, or bounces the bar with it: that would stop the sound.) */
html.shell-on, html.shell-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.shell-on body { padding-bottom: 0; }
html.shell-on body > :not(.mini, #toast, .bh-frame) { display: none !important; }
/* A pop-up ad on the page in the frame covers the bar too, as it does on a page of its own. */
html.frame-over .bh-frame.on { z-index: 160; height: 100%; }

/* ---------- toast ---------- */

#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  translate: -50% 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--dark);
  color: var(--gold-100);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; translate: -50% 0; }
/* While the list on the bar is open, the message goes up under the header, not over the list. */
html.q-open #toast { bottom: auto; top: calc(var(--top-h) + 10px); translate: -50% -20px; }
html.q-open #toast.show { translate: -50% 0; }
#toast .ic { color: var(--gold-400); }

/* ---------- appear on scroll (gently) ---------- */

/* Everything is always visible; the soft rise is only an extra when the browser runs it. */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .reveal.in { animation: rise-in .5s ease; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  :root { --header-h: 50px; }
  .hotline-grid { grid-template-columns: 1fr; }
  .hotline-card { position: relative; top: 0; }
  .footer-in { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .menu-btn { display: inline-flex; }
  .join-cta { margin-inline-start: auto; }
  .nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px -20px rgba(74, 49, 15, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; }
  /* The links in the bar itself, as on a computer (Appearance › Header: no ☰ button): in the middle
     of the bar, and a longer menu scrolls sideways instead of running off the screen. */
  .nav-inline .nav { position: static; flex-direction: row; inset: auto; margin-inline: auto; padding: 0; gap: var(--nav-gap, 2px); background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transition: none; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .nav-inline .nav::-webkit-scrollbar { display: none; }
  .nav-inline .nav a { padding: 6px 10px; font-size: var(--nav-size, .98rem); border-bottom: 0; border-radius: 8px; }
  .nav-inline .join-cta { margin-inline-start: 0; }
  .nav a { padding: 12px 6px; font-size: var(--nav-size, 1.08rem); border-bottom: 1px solid var(--line); border-radius: 0; }
  /* A few pixels' move the admin gave a menu word was made for the row on a computer; in this
     opened list (one under the other) it would push each line sideways, so it is not used here. */
  .nav a, .nav a * { left: 0 !important; top: 0 !important; }
  /* Where the top bar has more than fits in one line (the e-mail turned on for a tablet or a phone on
     the Visibility page), it goes on in a second line instead of running off the screen. */
  .topbar-in { flex-wrap: wrap; row-gap: 2px; }
}

@media (max-width: 720px) {
  body { font-size: calc(var(--base-size) - 1px); }
  .section { padding: 42px 0; }
  .feed-bar { top: calc(var(--top-h) + 4px); }
  .feed-drawer[data-open="prefs"] { font-size: var(--prefs-size-ph, 14px); }
  .tool-btn span { display: none; }
  .feed-tabs button { padding: 7px 12px; font-size: .95rem; }
  .msg { padding: 10px 12px 6px; }
  .album, .msg-video, .pdfx-cover, .pdfr-post { margin-inline: -12px; }
  .pdfx-cover { width: calc(100% + 24px); }
  .pdfr-bar { gap: 6px; padding-inline: 6px; }
  .pdfr-tools { gap: 4px; }
  .pdfr-btn { min-width: 40px; height: 40px; padding: 0 6px; }
  .pdfr-count { padding: 0 9px; font-size: .86rem; }
  .pdfr-pages { gap: 8px; padding-inline: 4px; }
  .pdfr-name { display: none; }
  .posters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .topbar-hotline span:not([dir]) { display: none; }
  .topbar-in { gap: 12px; }
  .footer-in { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { display: grid; justify-items: center; }
  .footer-col { align-items: center; }
  .footer-col a { justify-content: center; }
  .cf-grid { grid-template-columns: 1fr; }
  .footer-legal { display: flex; margin: 4px 0 0; }
  /* The last lines clear the round "up" button in the corner. */
  .footer-bottom { padding-bottom: 78px; }
  .legal { padding: 20px 18px; font-size: .95rem; }
  .legal h2 { font-size: 1.12rem; }
  .legal-contact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-contact dd + dt { margin-top: 6px; }
  .legal-yi { padding: 10px 14px; font-size: .95rem; }
  .consent { padding: 12px; gap: 10px; }
  .sms-form .field input[name="phone"] { max-width: none; }
  .hero-text { font-size: 1.1rem; }
  html[lang="en"] .hero-text { font-size: 1rem; }
  .hero-logo { max-width: 52vw; }
  .lb-stage { padding: 0 8px 12px; }
  .lb-nav { width: 42px; height: 42px; top: auto; bottom: 18px; translate: none; }
  .lb-btn span { display: none; }
  .rec { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; gap: 12px; }
  .rec-dl { display: none; }
  .rec-queue { width: 34px; height: 34px; }
  .rec-play { width: 44px; height: 44px; }
  .feed-day { top: calc(var(--top-h) + 62px); }
}

@media (max-width: 420px) {
  .brand { height: 70%; }
  /* Room for the language switch in the top bar of a phone. */
  .topbar-in.has-lang { gap: 8px; }
  .topbar .lang-sw { padding: 0 .5em; height: 22px; font-size: .76rem; }
  .topbar .lang-sw .ic { display: none; }
  .join-cta { padding: .45em .8em; font-size: .85rem; }
}

/* A very narrow phone: the top bar has no room for the language switch, so it stands in the header. */
@media (max-width: 350px) {
  .topbar .lang-sw { display: none; }
  .topbar-in.has-lang .bsd { margin-inline-end: auto; }
  .mainbar .lang-sw { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal.in { animation: none; }
}

/* A recording opened from a shared point: its play button is marked until it is pressed. */
.rec.cued .rec-play { box-shadow: 0 0 0 3px var(--gold-400); }

/* A category label is a button (it filters); with a color set in admin it takes that color. */
button.badge { font: inherit; font-size: .78rem; cursor: pointer; }
button.badge:hover { filter: brightness(.95); }
.badge[style*='--kc'] { color: var(--kc); border-color: color-mix(in srgb, var(--kc) 45%, transparent); background: color-mix(in srgb, var(--kc) 10%, var(--paper)); }
.badge-update { color: #1f4f7a; border-color: #b5cde3; background: #edf4fb; }

/* The menu on gold plaques (Appearance › Header › Menu style): each word on its own plaque, a thin
   gold line between them and an ornament at both ends of the row. The plaque and the ornament are
   drawn in the admin's colors by themeCss (--plaque-img, --plaque-end). Computers only: on a phone
   the opened menu stays a plain list. */
@media (min-width: 961px) {
  .mainbar-in:has(.nav.plaques) { --plaque-w: clamp(108px, 9.6vw, 154px); --plaque-gap: clamp(22px, 2.5vw, 42px); height: max(var(--header-h), calc(var(--plaque-w) * .42 + 26px)); }
  .site-header.scrolled .mainbar-in:has(.nav.plaques) { height: max(62px, calc(var(--plaque-w) * .42 + 8px)); }
  /* In the middle of the room next to the logo (not of the whole bar), so the ornament never reaches the logo. */
  .nav.plaques { position: static; transform: none; margin-inline: auto; gap: var(--nav-gap, var(--plaque-gap)); align-items: center; }
  .nav.plaques a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--plaque-w);
    height: calc(var(--plaque-w) * .42);
    padding: 0 8px calc(var(--plaque-w) * .1);
    background: var(--plaque-img) center / 100% 100% no-repeat;
    border-radius: 0;
    font-family: var(--nav-font, var(--font-body));
    font-size: var(--nav-size, clamp(.95rem, 1.18vw, 1.3rem));
    font-weight: 700;
    color: var(--nav-color, var(--brown-800));
    filter: drop-shadow(0 3px 3px rgba(90, 60, 15, .26));
    transition: transform .2s, filter .2s;
    /* The plaques stand evenly: a sideways move a menu word was given for the plain menu isn't used here. */
    left: 0 !important;
    top: 0 !important;
  }
  .nav.plaques a:hover, .nav.plaques a.active {
    background-color: transparent;
    color: var(--nav-color, var(--brown-800));
    transform: translateY(-2px);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 75%, transparent)) drop-shadow(0 3px 3px rgba(90, 60, 15, .26));
  }
  .nav.plaques a + a::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--nav-gap, var(--plaque-gap)) / -2);
    top: 12%;
    height: 56%;
    width: 1px;
    background: linear-gradient(transparent, var(--plaque-line), transparent);
  }
  .nav.plaques::before, .nav.plaques::after {
    content: '';
    flex: none;
    width: clamp(36px, 3.6vw, 58px);
    height: calc(clamp(36px, 3.6vw, 58px) * .375);
    margin-bottom: calc(var(--plaque-w) * .1);
    background: var(--plaque-end) center / contain no-repeat;
  }
  /* The swirl at the outer end of the row on both sides (in Yiddish ::before is the right end). */
  html[dir="rtl"] .nav.plaques::after, html[dir="ltr"] .nav.plaques::before { transform: scaleX(-1); }
}
@media (min-width: 961px) and (max-width: 1260px) { .nav.plaques::before, .nav.plaques::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav.plaques a { transition: none; } }

/* The special menu (Appearance › Special menu): the menu links marked special (Links and menu), as a
   row of big buttons of their own under the header, on a phone too (they are not in the menu, which
   folds behind its button there). common.js draws it; themeCss gives the colors (--sp-…) and, for a
   computer and for a phone apart, the size, shape, corners, place and spacing. A button with a
   picture has it behind its words, with the overlay color over it so they can be read. */
.special-nav { background: var(--sp-row-bg, transparent); transition: box-shadow .3s; }
/* Where it stays at the top as one scrolls (themeCss): a soft shadow once it stands there (common.js). */
.special-nav.stuck { box-shadow: 0 8px 24px -16px rgba(74, 49, 15, .5); }
/* On the home page under its introduction, right above the tabs (Appearance › Special menu). */
.special-nav.sp-intro + #news { padding-top: 8px; }
.special-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding-block: 14px; transition: padding-block .25s; }
.special-nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 18px;
  min-height: 56px;
  border-radius: 14px;
  background: var(--sp-bg);
  color: var(--sp-color);
  border: var(--sp-bw, 1px) solid var(--sp-border);
  box-shadow: var(--sp-shadow, 0 6px 16px -10px rgba(74, 49, 15, .55));
  font-family: var(--sp-font, var(--font-body));
  font-weight: var(--sp-weight, 700);
  line-height: 1.2;
  overflow-wrap: anywhere;
  /* (Smaller once one has scrolled down, where it stays at the top: themeCss, .stuck.) */
  transition: transform .2s, filter .2s, background-color .2s, color .2s, min-height .25s, font-size .25s, width .25s, padding .25s;
}
/* A sideways move the admin gave the same word in the menu row isn't used on the buttons. */
.special-nav a, .special-nav a * { left: 0 !important; top: 0 !important; }
.special-nav a.sp-pic { background: var(--sp-pic) center / cover no-repeat, var(--sp-bg); color: var(--sp-img-color); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.special-nav a.sp-pic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sp-overlay); transition: background .2s; }
.special-nav a:hover, .special-nav a:focus-visible { transform: translateY(-2px); filter: brightness(1.04); background-color: var(--sp-hover-bg, var(--sp-bg)); color: var(--sp-hover-color, var(--sp-color)); }
.special-nav a.sp-pic:hover, .special-nav a.sp-pic:focus-visible { color: var(--sp-hover-color, var(--sp-img-color)); }
.special-nav a.active { box-shadow: 0 0 0 var(--sp-active-w, 3px) color-mix(in srgb, var(--sp-active, var(--gold)) 70%, transparent), var(--sp-shadow, 0 6px 16px -10px rgba(74, 49, 15, .55)); }
@media (prefers-reduced-motion: reduce) { .special-nav a, .special-in { transition: none; } .special-nav a:hover { transform: none; } }

/* The /email page's ways (email.js): Google Groups, an e-mail to the group, the form here */
.ew-way { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 18px 20px; margin: 0 0 18px; }
.ew-way > h2.ew-title { margin: 0 0 6px; font-size: 1.2rem; color: var(--dark, var(--ink)); }
.ew-way > p { margin: 0 0 10px; }
.ew-way .contact-form { margin-top: 6px; }
.ew-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; }
.ew-addr { margin: 8px 0; }
.ew-addr code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 6px 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg, #fff); font-size: 1rem; user-select: all; }
.ew-copied { color: var(--accent); font-weight: 700; }

/* The e-mail's download button opens the recording's page (feed.js downloadHere): a note at the bottom of the screen. */
.dl-note { position: fixed; z-index: 150; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; justify-items: center; max-width: 520px; margin: 0 auto; padding: 16px 40px 14px; border-radius: 14px; background: var(--gold-100); color: var(--brown-700); text-align: center; border: 1px solid var(--line); box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .35); }
.dl-note .dl-x { position: absolute; top: 6px; inset-inline-end: 8px; border: 0; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
.dl-note p { margin: 0; }
.dl-note .btn svg { width: 18px; height: 18px; vertical-align: -3px; }
.dl-note .dl-app { font-size: .85em; opacity: .8; }

/* ---------- live (server/live.js; the /live page, a venue's page, the mark in the top bar) ---------- */
.live-mark { display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px; border-radius: 999px; background: var(--live); color: #fff; font-weight: 700; font-size: .85em; text-decoration: none; white-space: nowrap; }
.live-mark .live-dot { background: #fff; animation: live-blink 1.4s infinite; }
@keyframes live-blink { 50% { opacity: .25; } }
.live-box { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px 16px; margin: 0 0 28px; border-radius: 16px; background: var(--gold-100); border: 1px solid var(--line); }
.live-on { display: grid; gap: 14px; justify-items: center; }
.live-badge { margin: 0; font-weight: 700; color: var(--live); }
.live-time { color: var(--brown-700); font-variant-numeric: tabular-nums; margin-inline-start: 8px; }
.live-play { min-width: 200px; }
.live-quality { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.live-quality button { border: 0; background: none; padding: 6px 14px; color: var(--brown-700); cursor: pointer; font: inherit; }
.live-quality button[aria-pressed="true"] { background: var(--gold); color: var(--brown-900); font-weight: 700; }
.live-state { margin: 0; }
.live-venue { margin-top: 8px; }
.venue-meter { display: grid; gap: 4px; width: min(360px, 100%); }
.venue-meter i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #3a9d4a 70%, #e0b13a 88%, #c8402c); width: 0; transition: width .08s linear; }
@media (prefers-reduced-motion: reduce) { .live-mark .live-dot { animation: none; } }

/* Added text (the admin's "Added text"): rich text under the header or over the footer. */
.page-blocks { display: grid; gap: 10px; padding-block: 14px; }
.page-block { line-height: 1.6; overflow-wrap: anywhere; }
.page-block img { max-width: 100%; height: auto; border-radius: 6px; }
.page-block p { margin: 0 0 .5em; }
.page-block.pb-card { background: var(--paper, #fff); border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; padding: 14px 18px; max-width: 1100px; }
.page-block.pb-band { background: var(--bg2, rgba(0,0,0,.04)); padding: 12px; }
/* An Added text in its row: as wide as the page, or narrower (its own width) at the right, center or left. */
.pb-outer { display: flex; flex-direction: column; }
.pb-outer > .page-block { width: 100%; box-sizing: border-box; }
.pb-a-center > .page-block { margin-inline: auto; }
.pb-a-start > .page-block { margin-inline: 0 auto; }
.pb-a-end > .page-block { margin-inline: auto 0; }
/* Its pictures, each on a line of its own (unless a picture was placed itself in the editor). */
.page-block[class*="pb-pics-"] img:not([style*="margin"]) { display: block; }
.page-block.pb-pics-center img:not([style*="margin"]) { margin-inline: auto; }
.page-block.pb-pics-right img:not([style*="margin"]) { margin-left: auto; margin-right: 0; }
.page-block.pb-pics-left img:not([style*="margin"]) { margin-right: auto; margin-left: 0; }
@media (min-width: 1025px) { .pb-no-desktop { display: none !important; } }
@media (min-width: 721px) and (max-width: 1024px) { .pb-no-tablet { display: none !important; } }
@media (max-width: 720px) { .pb-no-mobile { display: none !important; } }
/* A rich text: a picture never wider than its place. */
[data-edit] img { max-width: 100%; height: auto; }