@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700&display=swap");


/*
 * Safra streaming skin
 * Pass 1: brand system, application shell, navigation, and library cards.
 */

:root {
  color-scheme: dark;
  --lv-ink: #221e19;
  --lv-canvas: #2b2620;
  --lv-surface: #37312a;
  --lv-surface-raised: #4a4237;
  --lv-surface-soft: #574d3f;
  --lv-line: #4f463a;
  --lv-line-strong: #574d3f;
  --lv-text: #fffaf0;
  --lv-muted: #c4af88;
  --lv-muted-strong: #f0e4cf;
  --lv-gold: #e2b84f;
  --lv-gold-bright: #f2ca50;
  --lv-gold-soft: #fffaf0;
  --lv-petrol: #574d3f;
  --lv-petrol-deep: #37312a;
  --lv-danger: #d68579;
  --lv-radius-small: 8px;
  --lv-radius: 14px;
  --lv-radius-large: 22px;
  --lv-content: 1480px;
  --lv-header-height: 74px;
  --lv-nav-height: 0px;
  --lv-font-ui: "Assistant", "Noto Sans Hebrew", InterVariable, Inter, "Arial Hebrew", Arial, sans-serif;
  --lv-font-display: "Frank Ruhl Libre", "Noto Serif Hebrew", "David Libre", "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--lv-ink);
  scrollbar-color: #574d3f transparent;
  scrollbar-width: thin;
}

body,
button,
input,
select,
textarea {
  font-family: var(--lv-font-ui) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "ss03";
  font-weight: 500;
  text-rendering: optimizeLegibility;
}

body,
.page-main,
.page-main-wrap {
  background: var(--lv-canvas) !important;
  color: var(--lv-text) !important;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--lv-gold) !important;
  outline-offset: 3px !important;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--lv-gold) !important;
  outline-offset: 0 !important;
}

::selection {
  background: var(--lv-gold);
  color: var(--lv-ink);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #574d3f;
  border: 2px solid var(--lv-canvas);
  border-radius: 999px;
}

/* Public chrome ------------------------------------------------------- */

.page-header {
  height: var(--lv-header-height) !important;
  background: rgba(34, 30, 25, 0.96) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lv-line) !important;
  z-index: 1010 !important;
}

.logo,
.logo a,
.logo a > span {
  width: 172px !important;
  height: 56px !important;
}

.logo a {
  display: block !important;
  text-decoration: none !important;
}

.logo img {
  display: none !important;
}

.logo a::after {
  content: "" !important;
  display: block;
  width: 172px;
  height: 56px;
  background: url("/media/brand/safra_logo.png") center / contain no-repeat;
}

.register-wrap,
.page-sidebar-bottom,
.sidebar-theme-switcher,
.nav-menu:nth-of-type(2),
.nav-menu:nth-of-type(3),
.nav-menu a[href*="/about"],
.nav-menu a[href*="/tos"],
.nav-menu a[href*="/terms"],
.nav-menu a[href*="/contact"] {
  display: none !important;
}

.sign-in-wrap a,
.sign-in,
.sign-in:visited {
  min-width: 88px;
  min-height: 36px;
  padding: 9px 14px !important;
  color: var(--lv-gold-soft) !important;
  background: transparent !important;
  border: 1px solid var(--lv-line-strong) !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  font-weight: 600 !important;
  text-align: center;
}

.sign-in-wrap a::after,
.sign-in::after {
  content: "אנטר";
  font-size: 13px;
}

.circle-icon-button {
  color: var(--lv-muted-strong) !important;
}

.circle-icon-button > span,
.circle-icon-button > span > span {
  background: transparent !important;
}

.toggle-sidebar .circle-icon-button,
.mobile-search-toggle .circle-icon-button,
.user-options .circle-icon-button {
  min-width: 48px;
  min-height: 48px;
}

/* Search is a quiet command surface, not a toolbar box. */
.search-field-wrap > div > form > div {
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.search-field-wrap .text-field-wrap,
.search-field-wrap input,
.text-field-wrap input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--lv-text) !important;
}

.search-field-wrap input {
  min-height: 42px;
  padding: 0 18px !important;
  direction: rtl;
  font-size: 15px !important;
  text-align: right;
}

.search-field-wrap input::placeholder {
  color: var(--lv-muted) !important;
  opacity: 0.8;
}

.search-field-wrap form button {
  min-width: 46px;
  background: transparent !important;
  border: 0 !important;
  color: var(--lv-muted-strong) !important;
}

/* Desktop navigation shares one compact header row with the utilities. */
@media (min-width: 901px) {
  .page-header {
    display: grid !important;
    grid-template-columns: 96px clamp(200px, 22vw, 320px) minmax(0, 1fr) 96px;
    column-gap: 20px;
    align-items: center;
    padding: 0 max(28px, calc((100vw - var(--lv-content)) / 2)) !important;
  }

  .page-header-left,
  .page-header-right,
  .search-field-wrap {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--lv-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-header-left {
    grid-column: 4;
    grid-row: 1;
  }

  .page-header-left > div {
    display: flex !important;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
  }

  .page-header-right {
    grid-column: 1;
    grid-row: 1;
  }

  .page-header-right > div {
    display: flex !important;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
  }

  .search-field-wrap {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    width: 100% !important;
    align-items: center;
  }

  .search-field-wrap > div {
    width: 100%;
  }

  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 118px !important;
    height: 38px !important;
  }

  .toggle-sidebar,
  .mobile-search-toggle,
  .user-options {
    display: none !important;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    position: fixed !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: var(--lv-header-height) !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    z-index: 1020 !important;
  }

  .page-sidebar-inner {
    display: grid !important;
    grid-template-columns: 96px clamp(200px, 22vw, 320px) minmax(0, 1fr) 96px;
    column-gap: 20px;
    width: min(calc(100% - 56px), var(--lv-content)) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center;
  }

  .page-sidebar .nav-menu:first-child {
    display: block !important;
    grid-column: 3;
    justify-self: end;
    width: auto !important;
    height: 100% !important;
    padding: 0 !important;
    pointer-events: auto;
    border: 0 !important;
  }

  .page-sidebar .nav-menu:first-child nav,
  .page-sidebar .nav-menu:first-child ul {
    height: 100%;
  }

  .page-sidebar .nav-menu:first-child ul {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 20px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-sidebar .nav-menu:first-child .link-item {
    display: flex !important;
    width: auto !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--lv-muted) !important;
  }

  .page-sidebar .nav-menu:first-child .link-item a {
    display: flex !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    align-items: center;
    color: inherit !important;
    text-decoration: none !important;
  }

  .page-sidebar .menu-item-icon {
    display: none !important;
  }

  .page-sidebar .link-item > a > span:last-child {
    font-size: 0 !important;
  }

  .page-sidebar .link-item > a > span:last-child::after {
    font-size: 15px;
    font-weight: 500;
  }

  .nav-item-home > a > span:last-child::after { content: "היים"; }
  .nav-item-featured > a > span:last-child::after { content: "אויסגעקליבן"; }
  .nav-item-recommended > a > span:last-child::after { content: "רעקאמענדירט"; }
  .nav-item-latest > a > span:last-child::after { content: "נײע"; }
  .nav-item-tags > a > span:last-child::after { content: "טאגס"; }
  .nav-item-categories > a > span:last-child::after { content: "קאטעגאריעס"; }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active,
  .page-sidebar .link-item:has(a[aria-current="page"]) {
    background: transparent !important;
    color: var(--lv-text) !important;
  }

  .page-sidebar .link-item:hover a,
  .page-sidebar .link-item.active a {
    box-shadow: inset 0 -2px var(--lv-gold);
  }

  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: calc(var(--lv-header-height) + var(--lv-nav-height)) 0 0 !important;
  }
}

#page-profile-media .profile-info-nav-wrap::before {
  display: none !important;
}

#page-home .media-list-row.safra-grid .item-main {
  min-height: 80px !important;
}

#page-home .media-list-row.safra-grid .item-main h3,
#page-home .media-list-row.safra-grid .item-main h3 a,
#page-home .media-list-row.safra-grid .item-main h3 a span {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (min-width: 901px) and (max-width: 1050px) {
  .page-sidebar .nav-menu:first-child ul {
    gap: 10px;
  }

}

/* Home hero ---------------------------------------------------------- */

#page-home .page-main {
  --lv-hero-height: clamp(300px, 31vw, 460px);
  max-width: none !important;
  min-height: calc(100vh - var(--lv-header-height) - var(--lv-nav-height));
  padding: 0 0 72px !important;
  overflow: hidden;
}

.page-main::before,
.page-main::after {
  display: none;
}

#page-home .page-main::before {
  content: "דברות קודש";
  display: flex;
  width: min(calc(100% - 64px), var(--lv-content));
  height: var(--lv-hero-height);
  margin: 28px auto 0;
  padding: 44px clamp(34px, 5vw, 78px) 76px;
  align-items: flex-end;
  justify-content: flex-start;
  direction: rtl;
  background-image:
    linear-gradient(90deg, rgba(34, 30, 25, 0.06), rgba(34, 30, 25, 0.2) 46%, rgba(34, 30, 25, 0.55)),
    radial-gradient(circle at 18% 42%, rgba(196, 175, 136, 0.36), transparent 31%),
    linear-gradient(135deg, #574d3f 0%, #37312a 48%, #25211b 100%),
    url("/media/brand/safra_mark.png");
  background-position: center, center, center, 12% 50%;
  background-repeat: no-repeat;
  background-size: cover, cover, cover, clamp(150px, 19vw, 275px) auto;
  border: 1px solid var(--lv-line);
  border-radius: min(1.5vw, var(--lv-radius-large));
  color: var(--lv-text);
  font-family: var(--lv-font-display) !important;
  font-size: clamp(3.7rem, 7vw, 7.3rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
  text-align: right;
}

#page-home .page-main::after {
  content: "געהערט פון מרן מהר״י ט״ב מסאטמאר";
  position: absolute;
  top: calc(28px + var(--lv-hero-height) - 55px);
  right: max(calc((100% - var(--lv-content)) / 2 + 78px), calc(32px + 5vw));
  display: block;
  direction: rtl;
  color: var(--lv-gold-soft);
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 0;
  text-align: right;
}

#page-home .media-list-wrapper {
  width: min(100%, var(--lv-content));
  margin: 0 auto !important;
  padding: 38px 32px 0 !important;
}

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

.media-list-row {
  border: 0 !important;
}

.media-list-row + .media-list-row {
  margin-top: 48px !important;
  padding-top: 42px !important;
  border-top: 1px solid var(--lv-line) !important;
}

.media-list-header {
  display: flex !important;
  min-height: 42px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  align-items: baseline;
  justify-content: space-between;
  direction: rtl;
  border: 0 !important;
}

.media-list-header h2 {
  margin: 0 !important;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.75rem, 2.4vw, 2.35rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}

#page-home .media-list-row.safra-hero .media-list-header h2,
#page-home .media-list-row.safra-grid .media-list-header h2 {
  font-size: 0 !important;
}

#page-home .media-list-row.safra-hero .media-list-header h2::after {
  content: "אויסגעקליבן";
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

#page-home .media-list-row.safra-grid .media-list-header h2::after {
  content: "נײ אין אוצר";
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

.media-list-header h3 {
  margin: 0 !important;
  font-size: 0 !important;
}

.media-list-header h3 a,
.media-list-header > a {
  color: var(--lv-muted-strong) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.media-list-header h3 a::after,
.media-list-header > a::after {
  content: "אלע ווידעאס  ←";
  font-size: 13px;
}

.media-list-header h3 a:hover,
.media-list-header > a:hover {
  color: var(--lv-gold-soft) !important;
}

.items-list-outer:not(.items-list-hor) .items-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px 22px !important;
}

#page-home .media-list-row.safra-hero .items-list {
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.78fr) !important;
}

#page-home .media-list-row.safra-grid .items-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.items-list .item {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.video-item .item-content {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  overflow: visible !important;
  transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.video-item:has(a:hover) .item-content {
  transform: translateY(-5px);
}

.item-thumb {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
  overflow: hidden;
  background-color: var(--lv-surface-raised) !important;
  background-position: center !important;
  background-size: cover !important;
  border: 0 !important;
  border-radius: min(1vw, var(--lv-radius)) !important;
  box-shadow: inset 0 0 0 1px var(--lv-line) !important;
}

.video-item:has(a:hover) .item-thumb {
  box-shadow: inset 0 0 0 1px var(--lv-line-strong) !important;
}

.item-duration {
  right: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  padding: 4px 7px !important;
  background: rgba(34, 30, 25, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #fffaf0 !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.item-main {
  display: block !important;
  width: 100% !important;
  min-width: 0;
  direction: rtl;
  text-align: right;
}

.item-main h3 {
  margin: 13px 1px 0 !important;
  direction: rtl;
  text-align: right;
}

.item-main h3 a,
.item-main h3 a span,
.item-main > a,
.item-main > a span,
.item-main a:visited,
.item-main a:visited span {
  background: transparent !important;
  color: var(--lv-text) !important;
  text-decoration: none !important;
}

.item-main h3 a,
.item-main h3 a span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem) !important;
  font-weight: 500 !important;
}

.item-main a:hover,
.item-main a:hover span {
  color: var(--lv-gold-soft) !important;
}

.item-author {
  display: none !important;
}

.item-meta {
  display: flex !important;
  margin: 5px 1px 0 !important;
  align-items: center;
  justify-content: flex-start;
  direction: ltr !important;
  color: var(--lv-muted) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.item-views,
.item-date,
.item-meta time,
.item-media-count {
  color: inherit !important;
}

.item-meta .item-views:first-child::before,
.item-meta .item-author + .item-views::before {
  content: none !important;
}

/* Mobile shell and content ------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --lv-header-height: 68px;
    --lv-nav-height: 0px;
  }

  .page-header {
    height: var(--lv-header-height) !important;
    background: rgba(34, 30, 25, 0.98) !important;
  }

  .page-header-left,
  .page-header-right {
    height: var(--lv-header-height) !important;
  }

  .page-header-left {
    width: 100% !important;
    padding: 0 !important;
  }

  .page-header-left > div {
    height: 100%;
  }

  .toggle-sidebar {
    position: absolute !important;
    top: 10px;
    left: 8px;
  }

  .logo {
    position: fixed !important;
    top: 4px;
    left: 50%;
    width: 112px !important;
    height: 60px !important;
    transform: translateX(-50%);
  }

  .logo a,
  .logo a > span,
  .logo a::after {
    width: 112px !important;
    height: 60px !important;
  }

  .page-header-right {
    top: 0 !important;
    right: 6px !important;
    width: 98px !important;
    padding: 0 !important;
  }

  .page-header-right > div {
    height: 100%;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    top: var(--lv-header-height) !important;
    width: 280px !important;
    height: calc(100dvh - var(--lv-header-height)) !important;
    background: var(--lv-surface) !important;
    border: 0 !important;
    border-right: 1px solid var(--lv-line) !important;
  }

  .page-sidebar-inner {
    padding: 12px !important;
  }

  .page-sidebar .nav-menu:first-child {
    padding: 0 !important;
    border: 0 !important;
  }

  .page-sidebar .link-item {
    margin: 3px 0 !important;
    border-radius: 10px !important;
    color: var(--lv-muted-strong) !important;
  }

  .page-sidebar .link-item a {
    min-height: 48px;
  }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active {
    background: rgba(196, 175, 136, 0.08) !important;
    color: var(--lv-text) !important;
  }

  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: var(--lv-header-height) 0 0 !important;
  }

  #page-home .page-main {
    --lv-hero-height: 300px;
    padding-bottom: 48px !important;
  }

  #page-home .page-main::before {
    width: calc(100% - 24px);
    height: var(--lv-hero-height);
    margin-top: 12px;
    padding: 28px 24px 70px;
    background-image:
      linear-gradient(180deg, rgba(34, 30, 25, 0.02), rgba(34, 30, 25, 0.55)),
      radial-gradient(circle at 28% 29%, rgba(196, 175, 136, 0.36), transparent 34%),
      linear-gradient(135deg, #574d3f 0%, #37312a 55%, #25211b 100%),
      url("/media/brand/safra_mark.png");
    background-position: center, center, center, 50% 30%;
    background-size: cover, cover, cover, 118px auto;
    border-radius: 16px;
    font-size: clamp(3.1rem, 16vw, 4.5rem);
    justify-content: center;
    text-align: center;
  }

  #page-home .page-main::after {
    top: 260px;
    right: 30px;
    left: 30px;
    font-size: 1rem;
    text-align: center;
  }

  #page-home .media-list-wrapper {
    padding: 34px 20px 0 !important;
  }

  .media-list-row + .media-list-row {
    margin-top: 40px !important;
    padding-top: 36px !important;
  }

  .media-list-header {
    min-height: 36px;
    margin-bottom: 18px !important;
  }

  .media-list-header h2,
  #page-home .media-list-row.safra-hero .media-list-header h2::after,
  #page-home .media-list-row.safra-grid .media-list-header h2::after {
    font-size: 1.75rem !important;
  }

  .media-list-header h3 a::after,
  .media-list-header > a::after {
    content: "אלע  ←";
    font-size: 13px;
  }

  .items-list-outer:not(.items-list-hor) .items-list,
  #page-home .media-list-row.safra-hero .items-list,
  #page-home .media-list-row.safra-grid .items-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  .items-list-outer {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .item-main h3 a,
  .item-main h3 a span {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
    font-size: 1.45rem !important;
  }

  .item-meta {
    font-size: 13px !important;
  }
}

/* Reference-led home: the featured item itself is the hero, so the page
   stays image-led and every prominent surface is a real destination. */
#page-home .page-main {
  --lv-hero-height: auto;
}

#page-home .page-main::before,
#page-home .page-main::after {
  display: none !important;
  content: none !important;
}

#page-home .media-list-wrapper {
  padding-top: 24px !important;
}

#page-home .media-list-row.safra-hero {
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#page-home .media-list-row.safra-hero .media-list-header {
  display: none !important;
}

#page-home .media-list-row.safra-hero .items-list-outer,
#page-home .media-list-row.safra-hero .items-list-wrap,
#page-home .media-list-row.safra-hero .items-list {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#page-home .media-list-row.safra-hero .item:not(:first-child),
#page-home .media-list-row.safra-hero .next-slide {
  display: none !important;
}

#page-home .media-list-row.safra-hero .item:first-child,
#page-home .media-list-row.safra-hero .item:first-child .item-content {
  width: 100% !important;
  height: clamp(420px, 42vw, 610px) !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-content {
  position: relative !important;
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line-strong) !important;
  border-radius: min(1.5vw, var(--lv-radius-large)) !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  border-radius: inherit !important;
  background-position: center !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 30, 25, 0.5) 0%, rgba(34, 30, 25, 0.25) 42%, rgba(34, 30, 25, 0) 73%),
    linear-gradient(180deg, rgba(34, 30, 25, 0.02) 50%, rgba(34, 30, 25, 0.55) 100%);
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  content: "←";
  position: absolute;
  bottom: calc(50% - 148px);
  left: clamp(30px, 4.2vw, 62px);
  display: grid;
  min-width: 106px;
  min-height: 42px;
  padding: 9px 16px;
  place-items: center;
  background: var(--lv-text);
  border-radius: 999px;
  color: var(--lv-ink);
  font-family: var(--lv-font-ui) !important;
  font-size: 14px;
  font-weight: 650;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main {
  position: absolute !important;
  bottom: calc(50% - 88px) !important;
  left: clamp(30px, 4.2vw, 62px) !important;
  z-index: 2;
  width: min(56%, 660px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  content: "אויסגעקליבענער ווידעא  ·  דברות קודש";
  display: block;
  margin-bottom: 11px;
  color: var(--lv-gold-soft);
  font-family: var(--lv-font-ui) !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 {
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(2.3rem, 4.5vw, 4.7rem) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

#page-home .media-list-row.safra-hero .item:first-child .item-meta {
  margin-top: 10px !important;
  color: rgba(245, 240, 230, 0.72) !important;
  font-size: 13px !important;
}

#page-home .media-list-row.safra-grid {
  margin-top: 34px !important;
  padding-top: 42px !important;
}

#page-home .media-list-row.safra-grid .item-content {
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: min(1vw, var(--lv-radius)) !important;
}

#page-home .media-list-row.safra-grid .item-thumb {
  border-radius: min(1vw, var(--lv-radius)) min(1vw, var(--lv-radius)) 0 0 !important;
  box-shadow: none !important;
}

#page-home .media-list-row.safra-grid .item-main {
  min-height: 104px;
  padding: 14px 16px 16px !important;
}

#page-home .media-list-row.safra-grid .item-main h3 {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  #page-home .media-list-wrapper {
    padding-top: 14px !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child,
  #page-home .media-list-row.safra-hero .item:first-child .item-content {
    height: 430px !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-thumb {
    background-position: 66% center !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-thumb::before {
    background:
      linear-gradient(180deg, rgba(34, 30, 25, 0.02) 35%, rgba(34, 30, 25, 0.6) 88%),
      linear-gradient(90deg, rgba(34, 30, 25, 0.18), transparent 72%);
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
    bottom: 24px;
    left: 22px;
    min-height: 44px;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main {
    bottom: 88px !important;
    right: 22px !important;
    left: 22px !important;
    width: auto !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
    font-size: 2.45rem !important;
  }

  #page-home .media-list-row.safra-grid {
    margin-top: 24px !important;
    padding-top: 34px !important;
  }

  #page-home .media-list-row.safra-grid .item-main {
    min-height: 108px;
    padding: 15px 16px 17px !important;
  }
}

/* Pass 2: route-specific experiences --------------------------------- */

/* Watch page: the player and its queue become a deliberate two-column
   viewing room, while the information lives directly beneath the film. */
#page-media .page-main {
  min-height: calc(100vh - var(--lv-header-height) - var(--lv-nav-height));
  padding: 32px 24px 88px !important;
}

#page-media .viewer-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: 0 30px;
  width: min(100%, var(--lv-content)) !important;
  max-width: var(--lv-content) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#page-media .viewer-container {
  grid-column: 1;
  grid-row: 1;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#page-media .viewer-section-nested {
  display: contents !important;
}

#page-media .viewer-sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  align-self: start;
}

#page-media .viewer-info {
  grid-column: 1;
  grid-row: 2;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#page-media .player-container,
#page-media .player-container-inner,
#page-media .video-player,
#page-media .video-js-wrapper {
  overflow: hidden;
  border-radius: min(1.2vw, 16px) !important;
}

#page-media .video-js {
  background: #1e1a16 !important;
  box-shadow: inset 0 0 0 1px var(--lv-line-strong) !important;
}

#page-media .video-js .vjs-control-bar,
#page-media .video-js .vjs-controls-wrapper {
  background: linear-gradient(180deg, transparent, rgba(34, 30, 25, 0.96)) !important;
}

#page-media .auto-play {
  overflow: hidden;
}

#page-media .auto-play-header {
  display: flex !important;
  min-height: 44px;
  margin: 0 0 12px !important;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  color: var(--lv-text) !important;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-media .next-label {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

#page-media .next-label::after {
  content: "נעקסט";
  font-size: 1.5rem;
}

#page-media .items-list-hor .items-list,
#page-media .viewer-sidebar .items-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  transform: none !important;
}

#page-media .viewer-sidebar .item {
  width: 100% !important;
}

#page-media .viewer-sidebar .item-content,
#page-media .viewer-sidebar .item-thumb,
#page-media .viewer-sidebar .item-main {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  float: none !important;
}

#page-media .viewer-sidebar .item-main > a {
  display: block !important;
  padding-top: 10px;
}

#page-media .viewer-sidebar .item-main h3 {
  margin: 0 !important;
}

#page-media .viewer-sidebar .item-main h3 span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--lv-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

#page-media .viewer-sidebar .item-meta {
  margin-top: 4px !important;
}

#page-media .viewer-info-inner,
#page-media .media-title-banner,
#page-media .media-author-banner,
#page-media .media-content-banner,
#page-media .media-content-banner-inner,
#page-media .comments-list,
#page-media .comments-list-inner,
#page-media .comments-form,
#page-media .comments-form-inner {
  background: transparent !important;
  color: var(--lv-text) !important;
}

#page-media .media-title-banner {
  padding: 26px 0 22px !important;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-media .media-title-banner h1 {
  max-width: 32ch;
  margin: 0 0 16px !important;
  direction: rtl;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.8rem, 2.7vw, 2.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-align: right;
}

#page-media .media-views-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#page-media .media-views {
  color: var(--lv-muted) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}

#page-media .media-actions > div {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

#page-media .media-actions button,
#page-media .more-options > span > button {
  display: inline-flex !important;
  min-height: 36px;
  padding: 6px 10px !important;
  align-items: center;
  gap: 5px;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 999px !important;
  color: var(--lv-muted-strong) !important;
  font-size: 12px !important;
}

#page-media .media-actions button:hover,
#page-media .more-options > span > button:hover {
  background: var(--lv-surface-raised) !important;
  color: var(--lv-text) !important;
}

#page-media .media-actions .circle-icon-button {
  min-width: 20px !important;
  min-height: 20px !important;
}

#page-media .media-actions .circle-icon-button i {
  font-size: 18px !important;
}

#page-media .share button > span:last-child,
#page-media .video-downloads button > span:last-child {
  font-size: 0 !important;
}

#page-media .share button > span:last-child::after {
  content: "טיילן";
  font-size: 12px;
}

#page-media .video-downloads button > span:last-child::after {
  content: "אראפלאדן";
  font-size: 12px;
}

#page-media .media-info-content {
  direction: rtl;
}

#page-media .media-author-banner {
  display: flex !important;
  min-height: 88px;
  padding: 18px 0 !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-media .author-banner-thumb {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  overflow: hidden;
  flex: 0 0 52px;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line-strong) !important;
  border-radius: 13px !important;
}

#page-media .author-banner-thumb span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--lv-surface) url("/media/brand/safra_mark.png") center / 76% no-repeat !important;
}

#page-media .author-banner-thumb img {
  display: none !important;
}

#page-media .author-banner-name,
#page-media .author-banner-name span {
  color: var(--lv-gold-soft) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#page-media .author-banner-name span:empty::after {
  content: "ספרא — דברות קודש";
}

#page-media .author-banner-date {
  display: block;
  margin-top: 4px;
  color: var(--lv-muted) !important;
  font-size: 0 !important;
}

#page-media .author-banner-date::after {
  content: "פון ספרא ארכיוו";
  font-size: 12px;
}

#page-media .media-content-banner {
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-media .media-content-description {
  color: var(--lv-muted-strong) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  text-align: right;
}

#page-media .comments-list-inner {
  padding: 26px 0 0 !important;
}

#page-media .comments-list h2 {
  margin: 0 0 18px !important;
  color: var(--lv-text) !important;
  font-size: 0 !important;
  font-weight: 600 !important;
}

#page-media .comments-list h2::after {
  content: "נאך נישטא קיין באמערקונגען";
  font-size: 16px;
}

#page-media .comments-form-inner {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

#page-media .comments-form .circle-icon-button.thumbnail {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  background: var(--lv-surface) url("/media/brand/safra_mark.png") center / 72% no-repeat !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 11px !important;
}

#page-media .comments-form .circle-icon-button.thumbnail i {
  visibility: hidden;
}

#page-media .comments-form .form {
  min-width: 0;
  flex: 1 1 auto;
}

#page-media .form-textarea-wrap {
  display: block !important;
  min-height: 42px;
  padding: 10px 12px !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 10px !important;
  color: var(--lv-muted) !important;
  text-decoration: none !important;
}

#page-media .form-textarea {
  font-size: 0 !important;
}

#page-media .form-textarea::after {
  content: "לייגט צו א באמערקונג";
  font-size: 14px;
}

#page-media .form-buttons {
  display: flex !important;
  margin-top: 10px !important;
  justify-content: flex-start;
}

#page-media .form-buttons a {
  min-height: 34px;
  padding: 8px 13px !important;
  background: var(--lv-surface-raised) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 8px !important;
  color: var(--lv-muted) !important;
  font-size: 0 !important;
}

#page-media .form-buttons a::after {
  content: "שיקן";
  font-size: 12px;
}

/* Profile becomes a branded archive rather than a generic user channel. */
#page-profile-media .page-main {
  min-height: calc(100vh - var(--lv-header-height) - var(--lv-nav-height));
  padding: 0 0 88px !important;
}

#page-profile-media .profile-page-header {
  background: transparent !important;
  color: var(--lv-text) !important;
}

#page-profile-media .profile-banner-wrap,
#page-profile-media .profile-banner {
  display: block !important;
  width: 100% !important;
  height: clamp(230px, 22vw, 330px) !important;
}

#page-profile-media .profile-banner {
  background-image:
    url("/media/brand/safra_mark.png"),
    linear-gradient(90deg, rgba(34, 30, 25, 0.08), rgba(34, 30, 25, 0.45)),
    radial-gradient(circle at 17% 45%, rgba(196, 175, 136, 0.42), transparent 30%),
    linear-gradient(135deg, #574d3f 0%, #37312a 48%, #25211b 100%) !important;
  background-position: 14% 50%, center, center, center !important;
  background-repeat: no-repeat !important;
  background-size: clamp(150px, 18vw, 250px) auto, cover, cover, cover !important;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-profile-media .profile-info-nav-wrap {
  width: min(100%, var(--lv-content)) !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  background: transparent !important;
  color: var(--lv-text) !important;
}

#page-profile-media .profile-info {
  min-height: 126px;
  margin-top: -62px !important;
  padding: 0 !important;
  background: transparent !important;
}

#page-profile-media .profile-info-inner {
  display: flex !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 20px;
  direction: rtl;
}

#page-profile-media .profile-info-inner > div:first-child {
  width: 124px !important;
  height: 124px !important;
  flex: 0 0 124px;
  overflow: hidden;
  background: var(--lv-surface) url("/media/brand/safra_mark.png") center / 78% no-repeat !important;
  border: 1px solid var(--lv-line-strong) !important;
  border-radius: 22px !important;
}

#page-profile-media .profile-info-inner > div:first-child img {
  display: none !important;
}

#page-profile-media .profile-name-edit-wrapper {
  padding-bottom: 15px;
  text-align: right;
}

#page-profile-media .profile-name-edit-wrapper h1 {
  margin: 0 !important;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
}

#page-profile-media .profile-name-edit-wrapper h1::after {
  content: "ספרא";
  font-size: clamp(2.4rem, 4vw, 4rem);
}

#page-profile-media .profile-name-edit-wrapper::after {
  content: "ארכיוו פון דברות קודש";
  display: block;
  margin-top: 5px;
  color: var(--lv-gold-soft);
  font-size: 14px;
}

#page-profile-media .profile-nav {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lv-line) !important;
}

#page-profile-media .profile-nav-inner,
#page-profile-media .profile-nav .items-list-wrap {
  width: max-content !important;
  min-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#page-profile-media .profile-nav .items-list-wrap {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  direction: rtl;
}

#page-profile-media .profile-nav li {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#page-profile-media .profile-nav li > a {
  display: flex !important;
  min-height: 46px;
  padding: 0 13px !important;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--lv-muted) !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

#page-profile-media .profile-nav li > a::after {
  font-size: 13px;
}

#page-profile-media .profile-nav a[title="About"]::after { content: "וועגן"; }
#page-profile-media .profile-nav a[title="Media"]::after { content: "ווידעאס"; }
#page-profile-media .profile-nav a[title="Playlists"]::after { content: "זאמלונגען"; }

#page-profile-media .profile-nav li.active > a,
#page-profile-media .profile-nav li > a:hover {
  color: var(--lv-text) !important;
  box-shadow: inset 0 -2px var(--lv-gold);
}

#page-profile-media .profile-nav .circle-icon-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  margin: 0 2px !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 999px !important;
}

#page-profile-media .profile-page-content {
  width: min(100%, var(--lv-content)) !important;
  margin: 0 auto !important;
  padding: 48px 32px 0 !important;
  background: transparent !important;
  color: var(--lv-text) !important;
}

#page-profile-media .profile-page-content .media-list-header h2 {
  font-size: 0 !important;
}

#page-profile-media .profile-page-content .media-list-header h2::after {
  content: "נײ אין אוצר";
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

#page-profile-media .profile-page-content .items-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Search results are a clean library grid with a secondary filter action. */
#page-search .page-main {
  min-height: calc(100vh - var(--lv-header-height) - var(--lv-nav-height));
  padding: 0 0 88px !important;
}

#page-search .search-results-wrap {
  width: min(100%, var(--lv-content)) !important;
  margin: 0 auto !important;
  padding: 52px 32px 0 !important;
}

#page-search .media-list-row {
  position: relative;
  min-height: 380px;
}

#page-search .media-list-header {
  padding-left: 150px !important;
}

#page-search .media-list-header h2 {
  font-size: 0 !important;
}

#page-search .media-list-header h2::after {
  content: none;
  display: none;
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

#page-search .mi-filters-toggle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
}

#page-search .mi-filters-toggle button {
  display: inline-flex !important;
  min-height: 38px;
  padding: 8px 12px !important;
  align-items: center;
  gap: 7px;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 999px !important;
  color: var(--lv-muted-strong) !important;
}

#page-search .mi-filters-toggle button:hover {
  background: var(--lv-surface-raised) !important;
  color: var(--lv-text) !important;
}

#page-search .mi-filters-toggle .material-icons {
  color: inherit !important;
  font-size: 18px !important;
}

#page-search .filter-button-label-text {
  font-size: 0 !important;
}

#page-search .filter-button-label-text::after {
  content: "פילטער";
  font-size: 12px;
}

#page-search .mi-filters-row:not(.hidden) {
  display: block !important;
  margin: 22px 0 30px !important;
  padding: 20px !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 14px !important;
}

#page-search .mi-filters-row-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

#page-search .mi-filter-title {
  margin-bottom: 10px;
  color: var(--lv-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}

#page-search .mi-filter-options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
}

#page-search .mi-filter-options button {
  min-height: 32px;
  padding: 6px 10px !important;
  background: transparent !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 999px !important;
  color: var(--lv-muted-strong) !important;
  font-size: 12px !important;
}

#page-search .mi-filter-options .active button {
  background: rgba(196, 175, 136, 0.1) !important;
  border-color: rgba(196, 175, 136, 0.2) !important;
  color: var(--lv-gold-soft) !important;
}

#page-search .items-list-outer {
  margin-top: 28px !important;
}

#page-search .items-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px 22px !important;
  width: 100% !important;
  transform: none !important;
}

#page-search .video-item,
#page-search .video-item .item-content,
#page-search .video-item .item-thumb,
#page-search .video-item .item-main {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#page-search .item-description {
  display: none !important;
}

#page-search .media-list-row:not(:has(.items-list-outer))::after {
  content: "קיין פאסיקע ווידעאס זענען נישט געפונען געווארן. פרוווט אן אנדער זוך.";
  display: grid;
  min-height: 310px;
  margin-top: 28px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(196, 175, 136, 0.22), transparent 48%),
    var(--lv-surface);
  border: 1px solid var(--lv-line);
  border-radius: min(1.3vw, 18px);
  color: var(--lv-muted-strong);
  font-size: 16px;
  text-align: center;
}

/* Empty taxonomy pages should feel intentional, not unfinished. */
#page-categories .page-main,
#page-tags .page-main {
  min-height: calc(100vh - var(--lv-header-height) - var(--lv-nav-height));
  padding: 0 0 88px !important;
}

#page-categories .media-list-wrapper,
#page-tags .media-list-wrapper {
  width: min(100%, var(--lv-content)) !important;
  margin: 0 auto !important;
  padding: 52px 32px 0 !important;
}

#page-categories .media-list-header h2,
#page-tags .media-list-header h2 {
  font-size: 0 !important;
}

#page-categories .media-list-header h2::after {
  content: "קאטעגאריעס";
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

#page-tags .media-list-header h2::after {
  content: "טאגס";
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
}

#page-categories .items-list-wrap,
#page-tags .media-list-row {
  display: flex !important;
  min-height: 420px;
  margin-top: 22px;
  padding: 42px 24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(circle at 50% 38%, rgba(196, 175, 136, 0.28), transparent 33%),
    linear-gradient(135deg, var(--lv-surface-raised), var(--lv-surface));
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--lv-line);
  border-radius: min(1.3vw, 18px);
  color: var(--lv-text);
  text-align: center;
}

#page-categories .items-list-wrap::before,
#page-tags .media-list-row::before {
  content: "דער אוצר ווערט צוגעגרייט";
  color: var(--lv-text);
  font-family: var(--lv-font-display) !important;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0;
}

#page-categories .items-list-wrap::after,
#page-tags .media-list-row::after {
  content: "נײע קאטעגאריעס און טאגס וועלן דא דערשײנען ווען דער ארכיוו וואקסט.";
  margin-top: 12px;
  color: var(--lv-muted-strong);
  font-size: 15px;
  line-height: 1.7;
}

#page-categories .items-list-wrap {
  background-image:
    radial-gradient(circle at 50% 38%, rgba(196, 175, 136, 0.28), transparent 33%),
    url("/media/brand/safra_mark.png"),
    linear-gradient(135deg, var(--lv-surface-raised), var(--lv-surface));
  background-position: center, 50% calc(50% - 88px), center;
  background-size: cover, 74px auto, cover;
}

#page-categories .items-list-wrap::before {
  margin-top: 82px;
}

#page-categories .items-list,
#page-categories .category-item {
  display: none !important;
}

#page-tags .media-list-row::after {
  content: "נײע טאגס וועלן דא דערשײנען ווען דער ארכיוו וואקסט.";
}

/* Mobile page composition */
@media (max-width: 900px) {
  .page-sidebar {
    transform: translateX(-100%) !important;
  }

  body.visible-sidebar .page-sidebar {
    transform: translateX(0) !important;
  }

  #page-media .page-main {
    padding: 0 0 56px !important;
  }

  #page-media .viewer-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100% !important;
  }

  #page-media .viewer-container {
    grid-column: 1;
    grid-row: 1;
  }

  #page-media .viewer-info {
    grid-column: 1;
    grid-row: 2;
    padding: 0 18px !important;
  }

  #page-media .viewer-sidebar {
    grid-column: 1;
    grid-row: 3;
    padding: 30px 18px 0 !important;
  }

  #page-media .player-container,
  #page-media .player-container-inner,
  #page-media .video-player,
  #page-media .video-js-wrapper {
    border-radius: 0 !important;
  }

  #page-media .media-title-banner {
    padding: 22px 0 18px !important;
  }

  #page-media .media-title-banner h1 {
    margin-bottom: 14px !important;
    font-size: 1.8rem !important;
  }

  #page-media .media-views-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  #page-media .media-actions {
    width: 100%;
    overflow-x: auto;
  }

  #page-media .media-actions > div {
    width: max-content;
  }

  #page-media .media-actions button,
  #page-media .more-options > span > button {
    min-height: 42px;
    padding: 8px 11px !important;
  }

  #page-media .auto-play-header {
    min-height: 42px;
  }

  #page-media .next-label::after {
    font-size: 1.4rem;
  }

  #page-media .comments-form-inner {
    gap: 10px;
  }

  #page-profile-media .profile-banner-wrap,
  #page-profile-media .profile-banner {
    height: 210px !important;
  }

  #page-profile-media .profile-banner {
    background-position: 50% 44%, center, center, center !important;
    background-size: 104px auto, cover, cover, cover !important;
  }

  #page-profile-media .profile-info-nav-wrap {
    padding: 0 18px !important;
  }

  #page-profile-media .profile-info {
    min-height: 108px;
    margin-top: -48px !important;
  }

  #page-profile-media .profile-info-inner {
    gap: 14px;
  }

  #page-profile-media .profile-info-inner > div:first-child {
    width: 96px !important;
    height: 96px !important;
    flex-basis: 96px;
    border-radius: 18px !important;
  }

  #page-profile-media .profile-name-edit-wrapper {
    padding-bottom: 10px;
  }

  #page-profile-media .profile-name-edit-wrapper h1::after {
    font-size: 2.55rem;
  }

  #page-profile-media .profile-name-edit-wrapper::after {
    font-size: 13px;
  }

  #page-profile-media .profile-nav li > a {
    min-height: 48px;
    padding: 0 12px !important;
  }

  #page-profile-media .profile-nav .circle-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  #page-profile-media .profile-page-content,
  #page-search .search-results-wrap,
  #page-categories .media-list-wrapper,
  #page-tags .media-list-wrapper {
    padding: 36px 18px 0 !important;
  }

  #page-profile-media .profile-page-content .items-list,
  #page-search .items-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
  }

  #page-profile-media .profile-page-content .media-list-header h2::after,
  #page-search .media-list-header h2::after,
  #page-categories .media-list-header h2::after,
  #page-tags .media-list-header h2::after {
    font-size: 1.75rem !important;
  }

  #page-search .media-list-header {
    padding-left: 104px !important;
  }

  #page-search .mi-filters-toggle button {
    min-height: 42px;
    padding: 9px 11px !important;
  }

  #page-search .mi-filters-row-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-search .media-list-row:not(:has(.items-list-outer))::after,
  #page-categories .items-list-wrap,
  #page-tags .media-list-row {
    min-height: 340px;
    border-radius: 14px;
  }

  #page-categories .items-list-wrap::before,
  #page-tags .media-list-row::before {
    font-size: 2.2rem;
  }

  #page-categories .items-list-wrap::after,
  #page-tags .media-list-row::after {
    max-width: 28ch;
    font-size: 16px;
  }
}

/* Pass 3: final consistency, localization, and interaction polish. */

/* Localized search placeholder without changing the application markup. */
.search-field-wrap form {
  position: relative;
}

.search-field-wrap input::placeholder {
  color: transparent !important;
}

.search-field-wrap form:has(input:placeholder-shown)::before {
  content: "זוך דער אוצר";
  position: absolute;
  top: 50%;
  right: 18px;
  z-index: 1;
  transform: translateY(-50%);
  direction: rtl;
  color: var(--lv-muted);
  font-size: 14px;
  pointer-events: none;
}

/* The current location is quiet but unmistakable. */
body:has(#page-home) .nav-item-home,
body:has(#page-categories) .nav-item-categories,
body:has(#page-tags) .nav-item-tags {
  color: var(--lv-text) !important;
}

@media (min-width: 901px) {
  body:has(#page-home) .nav-item-home a,
  body:has(#page-categories) .nav-item-categories a,
  body:has(#page-tags) .nav-item-tags a {
    box-shadow: inset 0 -2px var(--lv-gold);
  }

  #page-profile-media .profile-banner {
    background-size: clamp(120px, 13vw, 180px) auto, cover, cover, cover !important;
  }
}

/* The featured CTA already communicates duration context; the badge would
   otherwise read like a stray control at the bottom of the stage. */
#page-home .media-list-row.safra-hero .item:first-child .item-duration {
  display: none !important;
}

/* Library cards share one contained surface treatment across routes. */
#page-profile-media .profile-page-content .items-list,
#page-search .items-list {
  direction: rtl;
}

#page-profile-media .profile-page-content .items-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#page-profile-media .profile-page-content .item-content,
#page-search .video-item .item-content {
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: min(1vw, var(--lv-radius)) !important;
}

#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb {
  position: relative !important;
  border-radius: min(1vw, var(--lv-radius)) min(1vw, var(--lv-radius)) 0 0 !important;
  box-shadow: none !important;
}

#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  height: auto !important;
  min-height: 104px !important;
  padding: 14px 16px 16px !important;
  overflow: visible !important;
}

#page-profile-media .profile-page-content .item-main h3,
#page-search .video-item .item-main h3 {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 0 !important;
}

#page-profile-media .profile-page-content .item-main h3 a,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a,
#page-search .video-item .item-main h3 a span {
  height: auto !important;
  max-height: none !important;
}

/* Queue cards fill their rail and keep badges attached to the image. */
#page-media .viewer-sidebar .item-content,
#page-media .viewer-sidebar .item-main {
  padding: 0 !important;
}

#page-media .viewer-sidebar .item-thumb {
  position: relative !important;
}

#page-media .viewer-sidebar .item-main > a {
  padding: 11px 1px 0 !important;
}

#page-media .media-actions .like {
  border-bottom: 0 !important;
}

/* Mobile drawer uses the same RTL labels as the desktop browse rail. */
@media (max-width: 900px) {
  .page-sidebar .link-item > a > span:last-child {
    font-size: 0 !important;
  }

  .page-sidebar .link-item > a > span:last-child::after {
    font-size: 16px;
    font-weight: 500;
  }

  .nav-item-home > a > span:last-child::after { content: "היים"; }
  .nav-item-featured > a > span:last-child::after { content: "אויסגעקליבן"; }
  .nav-item-recommended > a > span:last-child::after { content: "רעקאמענדירט"; }
  .nav-item-latest > a > span:last-child::after { content: "נײע"; }
  .nav-item-tags > a > span:last-child::after { content: "טאגס"; }
  .nav-item-categories > a > span:last-child::after { content: "קאטעגאריעס"; }

  body:has(#page-home) .nav-item-home,
  body:has(#page-categories) .nav-item-categories,
  body:has(#page-tags) .nav-item-tags {
    background: rgba(196, 175, 136, 0.08) !important;
    color: var(--lv-gold-soft) !important;
  }

  #page-profile-media .profile-page-content .items-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #page-profile-media .profile-page-content .item-content,
  #page-search .video-item .item-content {
    border-radius: 12px !important;
  }

  #page-profile-media .profile-page-content .item-thumb,
  #page-search .video-item .item-thumb {
    border-radius: 12px 12px 0 0 !important;
  }

  #page-profile-media .profile-page-content .item-main,
  #page-search .video-item .item-main {
    height: auto !important;
    min-height: 110px !important;
    padding: 15px 16px 17px !important;
    overflow: visible !important;
  }

  #page-profile-media .profile-banner-wrap,
  #page-profile-media .profile-banner {
    height: 178px !important;
  }

  #page-profile-media .profile-banner {
    background-size: 0 0, cover, cover, cover !important;
  }

  #page-profile-media .profile-info {
    margin-top: -44px !important;
  }
}

/* Yiddish-only public UI --------------------------------------------- */

/* Stock MediaCMS bakes English grammar into these dynamic strings
   ("views", "days ago"). CSS cannot safely split the number from the
   phrase, so the public cards omit the mixed-language line. */
#page-home .item-meta,
#page-media .viewer-sidebar .item-meta,
#page-profile-media .profile-page-content .item-meta,
#page-search .item-meta,
#page-media .media-views {
  display: none !important;
}

#page-media .media-views-actions {
  justify-content: flex-end;
}

#page-home .media-list-row.safra-grid .item-main {
  min-height: 82px;
}

#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  min-height: 86px !important;
}

/* Filter headings */
#page-search .mi-filter-title,
#page-profile-media .mi-filter-title {
  font-size: 0 !important;
}

#page-search .mi-filter-title::after,
#page-profile-media .mi-filter-title::after {
  font-size: 11px;
}

.mi-filter:has(button[filter="media_type"]) .mi-filter-title::after {
  content: "מעדיעסארט";
}

.mi-filter:has(button[filter="upload_date"]) .mi-filter-title::after {
  content: "ארויפלאדדאטע";
}

.mi-filter:has(button[filter="duration"]) .mi-filter-title::after {
  content: "לענג";
}

.mi-filter:has(button[filter="publish_state"]) .mi-filter-title::after {
  content: "פארעפנטלעכונג";
}

.mi-filter:has(button[filter="tag"]) .mi-filter-title::after {
  content: "טאגס";
}

.mi-filter:has(button[filter="sort_by"]) .mi-filter-title::after {
  content: "סארטירן לויט";
}

#page-profile-media .mi-filters-row:has(.mi-filter-title):not(:has(button)) .mi-filter-title::after {
  content: "מיט קיינעם נישט געטיילט";
}

/* Filter choices */
.mi-filter-options button[filter] > span {
  font-size: 0 !important;
}

.mi-filter-options button[filter] > span::after {
  font-size: 12px;
}

.mi-filter-options button[filter][value="all"] > span::after { content: "אלע"; }
.mi-filter-options button[filter="media_type"][value="video"] > span::after { content: "ווידעא"; }
.mi-filter-options button[filter="media_type"][value="audio"] > span::after { content: "אוידיא"; }
.mi-filter-options button[filter="media_type"][value="image"] > span::after { content: "בילד"; }
.mi-filter-options button[filter="media_type"][value="pdf"] > span::after { content: "PDF"; }
.mi-filter-options button[filter="upload_date"][value="today"] > span::after { content: "הײנט"; }
.mi-filter-options button[filter="upload_date"][value="this_week"] > span::after { content: "די וואך"; }
.mi-filter-options button[filter="upload_date"][value="this_month"] > span::after { content: "דער חודש"; }
.mi-filter-options button[filter="upload_date"][value="this_year"] > span::after { content: "דאס יאר"; }
.mi-filter-options button[filter="duration"][value="0-20"] > span::after { content: "0–20 מינוט"; }
.mi-filter-options button[filter="duration"][value="20-40"] > span::after { content: "20–40 מינוט"; }
.mi-filter-options button[filter="duration"][value="40-60"] > span::after { content: "40–60 מינוט"; }
.mi-filter-options button[filter="duration"][value="60-120"] > span::after { content: "60–120+ מינוט"; }
.mi-filter-options button[filter="publish_state"][value="private"] > span::after { content: "פריוואט"; }
.mi-filter-options button[filter="publish_state"][value="unlisted"] > span::after { content: "נישטגעליסטעט"; }
.mi-filter-options button[filter="publish_state"][value="public"] > span::after { content: "פארעפנטלעכט"; }
.mi-filter-options button[filter="publish_state"][value="shared"] > span::after { content: "געטיילט"; }
.mi-filter-options button[filter="sort_by"][value="date_added_desc"] > span::after { content: "נײסטע ערשט"; }
.mi-filter-options button[filter="sort_by"][value="date_added_asc"] > span::after { content: "עלטסטע ערשט"; }
.mi-filter-options button[filter="sort_by"][value="alphabetically_asc"] > span::after { content: "אלףבית א–ת"; }
.mi-filter-options button[filter="sort_by"][value="alphabetically_desc"] > span::after { content: "אלףבית ת–א"; }
.mi-filter-options button[filter="sort_by"][value="plays_least"] > span::after { content: "ווייניקסטע געזען"; }
.mi-filter-options button[filter="sort_by"][value="plays_most"] > span::after { content: "מערסט געזען"; }
.mi-filter-options button[filter="sort_by"][value="likes_least"] > span::after { content: "ווייניקסטע ליב געהאט"; }
.mi-filter-options button[filter="sort_by"][value="likes_most"] > span::after { content: "מערסט ליב געהאט"; }
.mi-filter-options button[filter="sort_by"][value="most_views"] > span::after { content: "מערסט געזען"; }
.mi-filter-options button[filter="sort_by"][value="most_likes"] > span::after { content: "מערסט ליב געהאט"; }

@media (max-width: 900px) {
  #page-home .media-list-row.safra-grid .item-main {
    min-height: 88px;
  }

  #page-profile-media .profile-page-content .item-main,
  #page-search .video-item .item-main {
    min-height: 94px !important;
  }
}

/* Keep every desktop utility on one baseline and reserve the search
   field's inline end for its icon instead of letting it cover the label. */
@media (min-width: 901px) {
  .page-header-right .sign-in-wrap {
    display: flex !important;
    height: 100% !important;
    align-items: center;
  }

  .page-header-right .sign-in-wrap a,
  .page-header-right .sign-in {
    display: inline-flex !important;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .search-field-wrap form button {
    right: 0 !important;
    left: auto !important;
    width: 48px !important;
    min-width: 48px !important;
  }

  .search-field-wrap form:has(input:placeholder-shown)::before {
    right: 62px;
  }
}

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

/* =====================================================================
   Pass 8: soften the clipped end of horizontal archive shelves.
   The RTL reading edge stays crisp; only the off-screen continuation at
   the left dissolves into the canvas. Single-card shelves remain unmasked.
   ===================================================================== */

@media (max-width: 900px) {
  :is(
    #page-home .parsha-rail,
    #page-home .media-list-row.safra-grid .items-list
  ):has(> :nth-child(2)) {
    --safra-rail-fade-width: clamp(42px, 15vw, 62px);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--safra-rail-fade-width),
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--safra-rail-fade-width),
      #000 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

@media (min-width: 901px) {
  :is(
    #page-home .parsha-rail,
    #page-home .media-list-row.safra-grid .items-list
  ):has(> :nth-child(5)) {
    --safra-rail-fade-width: clamp(46px, 4.5vw, 72px);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--safra-rail-fade-width),
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--safra-rail-fade-width),
      #000 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Featured card: the Rov's portrait anchored right (left edge pre-faded in
   the asset), text block left on the steel ground - mirrors the karaoke
   videos' own composition. Replaces the raw video still on the hero only. */
#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  background-image:
    linear-gradient(90deg, rgba(10, 15, 18, 0.62) 0%, rgba(10, 15, 18, 0.28) 42%, rgba(10, 15, 18, 0) 64%),
    url("/static/images/rov_hero.png"),
    radial-gradient(circle at 20% 32%, rgba(196, 175, 136, 0.26), transparent 40%),
    linear-gradient(135deg, #574d3f 0%, #37312a 55%, #25211b 100%) !important;
  background-position: center, right center, center, center !important;
  background-size: cover, auto 102%, cover, cover !important;
  background-repeat: no-repeat !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-thumb::before {
  background: linear-gradient(180deg, rgba(34, 30, 25, 0) 60%, rgba(34, 30, 25, 0.38) 100%);
}

/* Hero v2: taller card, text cluster left + centered, carousel dots ------ */
#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  aspect-ratio: 2.15 / 1 !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main {
  left: clamp(20px, 2.6vw, 40px) !important;
  width: min(52%, 640px) !important;
  text-align: center !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main::before,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3,
#page-home .media-list-row.safra-hero .item:first-child .item-main .item-meta {
  text-align: center !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  font-size: clamp(2.1rem, 3.5vw, 4.1rem) !important;
  line-height: 1.16 !important;
  transition: opacity 0.3s ease;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  left: calc(clamp(20px, 2.6vw, 40px) + min(26%, 320px) - 53px);
}
.hero-dots {
  position: absolute;
  bottom: 26px;
  left: calc(clamp(20px, 2.6vw, 40px) + min(26%, 320px));
  z-index: 3;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.32);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero-dot.on { background: var(--lv-gold); transform: scale(1.25); }

/* carousel prev/next arrows */
.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: translateY(-50%);
  background: rgba(10, 15, 18, 0.55);
  border: 1px solid var(--lv-line-strong);
  border-radius: 50%;
  color: var(--lv-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background 0.2s;
  user-select: none;
}
.hero-nav:hover { opacity: 1; background: rgba(10, 15, 18, 0.8); }
.hero-nav.prev { left: 16px; }
.hero-nav.next { right: 16px; }

/* arrows reveal on hero hover only (touch users have the dots) */
#page-home .media-list-row.safra-hero .item:first-child:hover .hero-nav {
  opacity: 0.7;
  pointer-events: auto;
}
#page-home .media-list-row.safra-hero .item:first-child .hero-nav:hover { opacity: 1; }


/* ================= JEM-mimic pass ================================= */
:root { --lv-font-brand: "Rubik", "Assistant", "Noto Sans Hebrew", sans-serif; }

/* full-bleed hero band */
#page-home .media-list-row.safra-hero { position: relative; }
#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  aspect-ratio: auto !important;
  height: clamp(430px, 58vh, 530px) !important;
  border-radius: 14px !important;
}
/* chip label, JEM style (top-left outlined pill) */
#page-home .media-list-row.safra-hero .item:first-child .item-content::before {
  content: "דברות קודש";
  position: absolute;
  top: 26px;
  left: clamp(24px, 4vw, 64px);
  z-index: 3;
  padding: 7px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fffaf0;
  font-family: var(--lv-font-brand);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* title cluster: bottom-left, left-aligned, chunky */
#page-home .media-list-row.safra-hero .item:first-child .item-main {
  bottom: 92px !important;
  top: auto !important;
  left: clamp(24px, 4vw, 64px) !important;
  width: min(58%, 720px) !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 { order: 1; text-align: left !important; }
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  font-family: var(--lv-font-brand) !important;
  font-size: clamp(2.2rem, 3.4vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  order: 2;
  margin: 12px 0 0 !important;
  color: rgba(245, 240, 230, 0.85);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
}
#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  left: clamp(24px, 4vw, 64px);
  bottom: 26px;
  background: #fffaf0;
}

/* dots bottom-right, JEM placement */
.hero-dots { left: auto; right: clamp(24px, 4vw, 64px); transform: none; bottom: 30px; }

/* section headers: bold brand face */
.media-list-header h2 {
  font-family: var(--lv-font-brand) !important;
  font-weight: 800 !important;
  color: var(--lv-text) !important;
}

/* category tiles row (injected by landau.js) */
.safra-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 30px 0 6px;
}
.safra-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 215px;
  padding: 20px;
  border-radius: 10px;
  color: #fffaf0 !important;
  font-family: var(--lv-font-brand);
  font-size: 21px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform 0.15s ease, filter 0.15s ease;
  direction: rtl;
}
.safra-tile:hover { transform: translateY(-3px); filter: brightness(1.15); }
.safra-tile::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.safra-tile.t1 { background: linear-gradient(160deg, #574d3f, #2b2620); }
.safra-tile.t2 { background: linear-gradient(160deg, #5a4d38, #2b2620); }
.safra-tile.t3 { background: linear-gradient(160deg, #c4af88, #2b2620); }
.safra-tile.t4 { background: linear-gradient(160deg, #4a4237, #2b2620); }
.safra-tile.t5 { background: linear-gradient(160deg, #37312a, #221e19); }
@media (max-width: 900px) {
  .safra-tiles { grid-template-columns: repeat(2, 1fr); }
  .safra-tile { height: 130px; }
}

/* hero band: content hugs the image; frame/strip gone */
#page-home .media-list-row.safra-hero .item:first-child .item-content {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main {
  display: flex !important;
  flex-direction: column !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 { order: 1 !important; }
#page-home .media-list-row.safra-hero .item:first-child .item-main::before { order: 2 !important; }

/* one anchoring base: content box = image box */
#page-home .media-list-row.safra-hero .item:first-child .item-content {
  height: clamp(430px, 58vh, 530px) !important;
}
/* tiles align with the rows' content edges */
.safra-tiles { width: 100%; }


/* final JEM alignment: cluster hard-left, subtitle under title */
#page-home .media-list-row.safra-hero .item:first-child .item-main,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span,
#page-home .media-list-row.safra-hero .item:first-child .item-main::before,
#page-home .media-list-row.safra-hero .item:first-child .item-main .item-meta {
  text-align: left !important;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 { margin-bottom: 8px !important; }
#page-home .media-list-row.safra-hero .item:first-child .item-main::before { margin: 0 !important; }

/* JEM-style parsha rows ------------------------------------------------- */
.parsha-row { margin: 34px 0 6px; direction: rtl; }
.parsha-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-brand);
  font-size: 22px;
  font-weight: 800;
  text-decoration: none !important;
}
.parsha-row-head:hover { color: var(--lv-gold) !important; }
.parsha-row-more { font-size: 26px; line-height: 1; margin-top: -2px; }
.parsha-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 24%, 330px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.parsha-card {
  display: block;
  background: var(--lv-surface);
  border: 1px solid var(--lv-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.15s, border-color 0.15s;
}
.parsha-card:hover { transform: translateY(-3px); border-color: var(--lv-line-strong); }
.pc-thumb { display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.pc-title {
  display: block;
  padding: 10px 12px 12px;
  color: var(--lv-text);
  font-family: var(--lv-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}

/* Pass 4 / JEM study: editorial scale and four-up streaming rhythm -----
   The page keeps Safra's language and identity, but follows the reference
   service's wide stage, compact rails and predictable 16px card cadence. */
@media (min-width: 901px) {
  #page-home .media-list-wrapper {
    width: min(100%, 1800px) !important;
    max-width: 1800px !important;
    padding-right: 64px !important;
    padding-left: 64px !important;
  }

  #page-home .media-list-row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* A cinematic stage, without letting the artwork swallow the catalogue. */
#page-home .media-list-row.safra-hero .item:first-child,
#page-home .media-list-row.safra-hero .item:first-child .item-content,
#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  height: clamp(410px, 34vw, 600px) !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main {
  bottom: 94px !important;
  gap: 10px;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3,
#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  margin: 0 !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  direction: rtl;
  text-align: right !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  direction: rtl;
  letter-spacing: 0 !important;
  text-align: right !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  direction: rtl;
  text-align: right !important;
}

/* JEM's navigation cards work because they read as one shallow rail. */
.safra-tiles {
  gap: 16px;
  margin: 28px 0 4px;
}

.safra-tile {
  height: auto;
  min-height: 154px;
  aspect-ratio: 1.45 / 1;
  padding: clamp(16px, 1.4vw, 22px);
  border: 1px solid rgba(231, 221, 198, 0.1);
  font-size: clamp(17px, 1.25vw, 21px);
}

.safra-tile::before {
  top: clamp(14px, 1.2vw, 18px);
  right: clamp(14px, 1.2vw, 18px);
  width: 20px;
  height: 20px;
}

/* Four cards per desktop rail: the defining density of the reference. */
.parsha-row {
  margin: 30px 0 2px;
}

.parsha-row-head {
  margin-bottom: 16px;
  font-size: clamp(20px, 1.45vw, 25px);
}

.parsha-rail {
  grid-auto-columns: calc((100% - 48px) / 4);
  gap: 16px;
}

.parsha-card,
#page-home .media-list-row.safra-grid .item-content {
  border-radius: 8px !important;
}

.pc-title {
  min-height: 58px;
  padding: 10px 12px 12px;
  font-size: 15px;
}

#page-home .media-list-row.safra-grid {
  margin-top: 30px !important;
  padding-top: 30px !important;
}

#page-home .media-list-row.safra-grid .media-list-header {
  min-height: 36px;
  margin-bottom: 16px !important;
}

#page-home .media-list-row.safra-grid .media-list-header h2::after {
  font-size: clamp(1.55rem, 1.75vw, 1.9rem) !important;
}

#page-home .media-list-row.safra-grid .items-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  direction: rtl;
}

#page-home .media-list-row.safra-grid .item-thumb {
  border-radius: 8px 8px 0 0 !important;
}

#page-home .media-list-row.safra-grid .item-main {
  min-height: 68px;
  padding: 11px 13px 13px !important;
}

#page-home .media-list-row.safra-grid .item-main h3 a,
#page-home .media-list-row.safra-grid .item-main h3 a span {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  #page-home .media-list-wrapper {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child,
  #page-home .media-list-row.safra-hero .item:first-child .item-content,
  #page-home .media-list-row.safra-hero .item:first-child .item-thumb {
    height: 400px !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-content::before {
    top: 20px;
    left: 20px;
    padding: 6px 12px;
    font-size: 12px;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main {
    right: 20px !important;
    bottom: 94px !important;
    left: 20px !important;
    gap: 8px;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: clamp(1.85rem, 8.7vw, 2.15rem) !important;
    line-height: 1.12 !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main::before {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
    bottom: 22px;
    left: 20px;
    min-width: 94px;
    min-height: 42px;
  }

  .hero-dots {
    right: 20px;
    bottom: 38px;
  }

  .safra-tiles {
    display: flex;
    gap: 12px;
    margin: 18px -16px 2px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .safra-tiles::-webkit-scrollbar {
    display: none;
  }

  .safra-tile {
    flex: 0 0 min(72vw, 280px);
    min-height: 138px;
    aspect-ratio: auto;
    scroll-snap-align: start;
    font-size: 19px;
  }

  .parsha-row {
    margin-top: 26px;
  }

  .parsha-row-head {
    margin-bottom: 13px;
    font-size: 21px;
  }

  .parsha-rail {
    grid-auto-columns: min(82vw, 310px);
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }

  .parsha-card {
    scroll-snap-align: start;
  }

  #page-home .media-list-row.safra-grid {
    margin-top: 24px !important;
    padding-top: 26px !important;
  }

  #page-home .media-list-row.safra-grid .items-list {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 318px);
    gap: 12px !important;
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px !important;
    padding-bottom: 8px !important;
    padding-left: 16px !important;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #page-home .media-list-row.safra-grid .items-list::-webkit-scrollbar {
    display: none;
  }

  #page-home .media-list-row.safra-grid .item {
    scroll-snap-align: start;
  }

  #page-home .media-list-row.safra-grid .item-main {
    min-height: 66px;
    padding: 11px 13px 13px !important;
  }
}

/* Pass 5 / JEM study: one frame and one card scale on every route ------- */
@media (min-width: 901px) {
  /* Viewing room: the same 64px edge as JEM's catalogue at laptop sizes. */
  #page-media .page-main {
    padding-right: 64px !important;
    padding-left: 64px !important;
  }

  #page-media .viewer-section {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 0 24px;
    width: min(100%, 1672px) !important;
    max-width: 1672px !important;
  }

  /* The archive profile and its tabs sit on the catalogue's exact frame. */
  #page-profile-media .profile-info-nav-wrap,
  #page-profile-media .profile-page-content {
    width: min(100%, 1800px) !important;
    max-width: 1800px !important;
    padding-right: 64px !important;
    padding-left: 64px !important;
  }

  #page-profile-media .profile-info,
  #page-profile-media .profile-page-content .media-list-row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #page-profile-media .profile-nav {
    width: min(calc(100% - 128px), 1672px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #page-profile-media .profile-page-content .items-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Search results use the same four fixed slots and RTL start edge. */
  #page-search .search-results-wrap,
  #page-categories .media-list-wrapper,
  #page-tags .media-list-wrapper {
    width: min(100%, 1800px) !important;
    max-width: 1800px !important;
    padding-right: 64px !important;
    padding-left: 64px !important;
  }

  #page-search .media-list-row,
  #page-categories .media-list-row,
  #page-tags .media-list-row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #page-search .items-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* The route heading returns as a quiet anchor, rather than a broken label. */
#page-search .media-list-header h2::after {
  content: "זוך־רעזולטאטן";
  display: inline;
  font-family: var(--lv-font-brand);
  font-size: clamp(1.55rem, 1.75vw, 1.9rem);
  font-weight: 800;
}

#page-search .items-list-outer {
  margin-top: 18px !important;
}

/* Cards never change scale merely because a route has less content. */
#page-profile-media .profile-page-content .item-content,
#page-search .video-item .item-content {
  border-radius: 8px !important;
}

#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb {
  border-radius: 8px 8px 0 0 !important;
}

#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  min-height: 68px !important;
  padding: 11px 13px 13px !important;
}

#page-profile-media .profile-page-content .item-main h3 a,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a,
#page-search .video-item .item-main h3 a span {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* The channel treatment stays branded, but yields sooner to the films. */
#page-profile-media .profile-banner-wrap,
#page-profile-media .profile-banner {
  height: clamp(220px, 18vw, 280px) !important;
}

#page-profile-media .profile-banner {
  background-size: clamp(140px, 15vw, 210px) auto, cover, cover, cover !important;
}

#page-profile-media .profile-page-content {
  padding-top: 38px !important;
}

#page-profile-media .profile-page-content .media-list-header {
  margin-bottom: 16px !important;
}

#page-profile-media .profile-page-content .media-list-header h2::after {
  font-family: var(--lv-font-brand);
  font-size: clamp(1.55rem, 1.75vw, 1.9rem);
  font-weight: 800;
}

/* Empty states should be composed, not enormous. */
#page-categories .items-list-wrap,
#page-tags .media-list-row {
  min-height: 300px;
  margin-top: 16px;
  padding: 36px 24px;
  border-radius: 14px;
}

#page-categories .items-list-wrap::before,
#page-tags .media-list-row::before {
  font-size: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 900px) {
  #page-profile-media .profile-banner-wrap,
  #page-profile-media .profile-banner {
    height: 188px !important;
  }

  #page-profile-media .profile-page-content,
  #page-search .search-results-wrap,
  #page-categories .media-list-wrapper,
  #page-tags .media-list-wrapper {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #page-profile-media .profile-page-content .items-list,
  #page-search .items-list {
    gap: 18px !important;
  }

  #page-profile-media .profile-page-content .item-main,
  #page-search .video-item .item-main {
    min-height: 66px !important;
    padding: 11px 13px 13px !important;
  }

  #page-search .media-list-header h2::after,
  #page-profile-media .profile-page-content .media-list-header h2::after {
    font-size: 1.65rem !important;
  }

  #page-categories .items-list-wrap,
  #page-tags .media-list-row {
    min-height: 286px;
    margin-top: 14px;
    padding: 30px 20px;
  }
}

/* Pass 6 / final polish: purposeful controls, icons and RTL finishing ---- */
@media (min-width: 901px) {
  .page-sidebar .link-item > a > span:last-child::after {
    font-size: 16px;
    font-weight: 600;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
    font-size: clamp(2.2rem, 3.5vw, 4.25rem) !important;
    text-wrap: balance;
  }
}

/* The primary hero action names the action instead of showing a lone arrow. */
#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  content: "קוקט  ←";
  min-width: 106px;
}

/* Category cards use recognizable JEM-like pictograms, not placeholder dots. */
.safra-tile::before {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Material Icons" !important;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
}

.safra-tile.t1::before { content: "star"; }
.safra-tile.t2::before { content: "thumb_up"; }
.safra-tile.t3::before { content: "fiber_new"; }
.safra-tile.t4::before { content: "local_offer"; }
.safra-tile.t5::before { content: "apps"; }

/* Native horizontal scrolling is cleaner than a half-clipped slider button. */
#page-profile-media .profile-nav .next-slide {
  display: none !important;
}

@media (max-width: 900px) {
  #page-profile-media .profile-nav {
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }

  #page-profile-media .profile-nav::-webkit-scrollbar {
    display: none;
  }

  #page-profile-media .profile-nav .items-list-wrap {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
}

/* Class-based row targeting (rows tagged by landau.js; positional nth-child
   broke when Featured/Recommended were empty on production). Empty stock
   rows are hidden outright - hero/tiles/parsha rows replace them. */
#page-home .media-list-row.safra-off { display: none !important; }
.media-list-row.safra-hero .item-main h3 a span { transition: opacity 0.3s ease; }

/* =====================================================================
   Safra Archive System — editorial sanctuary
   Pass 1: palette, permanent desktop rail, home stage, filters and cards.
   The generated concept is mirrored into Yiddish without changing routes.
   ===================================================================== */
:root {
  --lv-ink: #221e19;
  --lv-canvas: #2b2620;
  --lv-surface: #37312a;
  --lv-surface-raised: #4a4237;
  --lv-surface-soft: #574d3f;
  --lv-line: #4f463a;
  --lv-line-strong: #574d3f;
  --lv-text: #fffaf0;
  --lv-muted: #c4af88;
  --lv-muted-strong: #f0e4cf;
  --lv-gold: #e2b84f;
  --lv-gold-bright: #f2ca50;
  --lv-gold-soft: #fffaf0;
  --lv-petrol: #574d3f;
  --lv-petrol-deep: #37312a;
  --lv-radius-small: 4px;
  --lv-radius: 4px;
  --lv-radius-large: 4px;
  --lv-content: 1440px;
  --lv-header-height: 66px;
  --lv-sidebar-width: 236px;
  --lv-font-ui: "Hanken Grotesk", "Assistant", "Noto Sans Hebrew", InterVariable, Inter, Arial, sans-serif;
  --lv-font-display: "Noto Serif Hebrew", "Frank Ruhl Libre", "Noto Serif", serif;
  --lv-font-brand: var(--lv-font-display);
}

body,
button,
input,
select,
textarea {
  font-weight: 400;
}

body,
.page-main,
.page-main-wrap {
  background: var(--lv-canvas) !important;
}

/* Desktop application shell: a permanent archive rail and quiet top bar. */
@media (min-width: 901px) {
  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: var(--lv-header-height) 0 0 var(--lv-sidebar-width) !important;
  }

  .page-header {
    position: fixed !important;
    inset: 0 0 auto var(--lv-sidebar-width) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr);
    width: auto !important;
    height: var(--lv-header-height) !important;
    padding: 0 32px !important;
    column-gap: 24px;
    align-items: center;
    background: rgba(10, 10, 10, 0.94) !important;
    border-bottom: 1px solid var(--lv-line) !important;
    backdrop-filter: blur(20px);
    z-index: 1050 !important;
  }

  .page-header-left {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    left: calc(-1 * var(--lv-sidebar-width)) !important;
    z-index: 1030;
    display: flex !important;
    grid-column: auto !important;
    width: var(--lv-sidebar-width) !important;
    height: 94px !important;
    align-items: center;
    background: #221e19 !important;
  }

  .page-header-left > div {
    width: 100%;
    justify-content: flex-start !important;
    padding: 8px 24px;
  }

  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 172px !important;
    height: 56px !important;
  }

  .logo a::after {
    background-position: left center;
  }

  .search-field-wrap {
    position: static !important;
    grid-column: 2;
    width: 100% !important;
    height: auto !important;
    justify-self: stretch;
  }

  .search-field-wrap > div > form > div {
    height: 38px;
    background: #40392f !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.04);
  }

  .search-field-wrap input {
    min-height: 38px;
    font-size: 14px !important;
  }

  .page-header-right {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    height: auto !important;
    justify-self: start;
  }

  .page-header-right > div {
    height: auto;
  }

  .page-header-right .sign-in-wrap a,
  .page-header-right .sign-in {
    min-width: 96px;
    height: 36px;
    min-height: 36px;
    padding: 7px 12px !important;
    background: transparent !important;
    border: 1px solid rgba(240, 228, 207, 0.36) !important;
    border-radius: 4px !important;
    color: var(--lv-gold) !important;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1040 !important;
    display: block !important;
    width: var(--lv-sidebar-width) !important;
    height: 100vh !important;
    padding-top: 108px;
    overflow: hidden !important;
    transform: none !important;
    pointer-events: auto;
    background: #221e19 !important;
    border-right: 1px solid var(--lv-line) !important;
  }

  .page-sidebar-inner {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 16px 24px !important;
  }

  .page-sidebar .nav-menu:first-child {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  .page-sidebar .nav-menu:first-child nav,
  .page-sidebar .nav-menu:first-child ul {
    width: 100%;
    height: auto;
  }

  .page-sidebar .nav-menu:first-child ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-sidebar .nav-menu:first-child .link-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    color: var(--lv-muted-strong) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
  }

  .page-sidebar .nav-menu:first-child .link-item a {
    display: flex !important;
    width: 100%;
    min-height: 48px;
    padding: 0 14px !important;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    direction: ltr;
    color: inherit !important;
    box-shadow: none !important;
  }

  .page-sidebar .menu-item-icon {
    display: flex !important;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .page-sidebar .menu-item-icon .material-icons {
    font-size: 20px !important;
  }

  .page-sidebar .link-item > a > span:last-child {
    min-width: 0;
    flex: 1;
    direction: rtl;
    font-size: 0 !important;
    text-align: right;
  }

  .page-sidebar .link-item > a > span:last-child::after {
    font-family: var(--lv-font-ui);
    font-size: 15px;
    font-weight: 600;
  }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active,
  .page-sidebar .link-item:has(a[aria-current="page"]),
  body:has(#page-home) .page-sidebar .nav-item-home,
  body:has(#page-categories) .page-sidebar .nav-item-categories,
  body:has(#page-tags) .page-sidebar .nav-item-tags {
    background: #312b24 !important;
    color: var(--lv-gold) !important;
    box-shadow: inset -2px 0 var(--lv-gold);
  }
}

/* Home frame and cinematic feature. */
#page-home .page-main {
  padding-bottom: 96px !important;
}

#page-home .media-list-wrapper {
  width: min(100%, var(--lv-content)) !important;
  max-width: var(--lv-content) !important;
  padding: 32px 48px 0 !important;
}

#page-home .media-list-row {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#page-home .media-list-row.safra-hero .item:first-child,
#page-home .media-list-row.safra-hero .item:first-child .item-content,
#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  height: clamp(460px, 40vw, 620px) !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-content {
  background: #2b2620 !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb {
  background-image:
    linear-gradient(90deg, rgba(34, 30, 25, 0.8) 0%, rgba(34, 30, 25, 0.54) 48%, rgba(34, 30, 25, 0.06) 77%),
    url("/static/images/rov_hero.png") !important;
  background-position: center, right center !important;
  background-size: cover, auto 103% !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb::before {
  background: linear-gradient(180deg, rgba(34, 30, 25, 0.02) 52%, rgba(34, 30, 25, 0.64) 100%);
}

#page-home .media-list-row.safra-hero .item:first-child .item-content::before {
  display: none;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main {
  bottom: 108px !important;
  left: clamp(40px, 4.2vw, 64px) !important;
  width: min(61%, 720px) !important;
  gap: 14px;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  order: 0 !important;
  width: fit-content;
  margin: 0 !important;
  padding: 5px 10px;
  color: var(--lv-gold);
  background: rgba(240, 228, 207, 0.1);
  border: 1px solid rgba(240, 228, 207, 0.34);
  border-radius: 8px;
  font-family: var(--lv-font-ui) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main::after {
  content: "א רײכער ארכיוו פון הייליגע דברי תורה, צוגעגרייט צו הערן און לערנען.";
  order: 2;
  max-width: 46ch;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  text-align: right;
  text-wrap: pretty;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 {
  height: auto !important;
  overflow: visible !important;
  direction: rtl;
  text-align: right !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(2.25rem, 3.45vw, 3.8rem) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-shadow: none;
  text-wrap: balance;
}

#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  content: "קוקט איצטער  ←";
  bottom: 42px;
  left: clamp(40px, 4.2vw, 64px);
  min-width: 142px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--lv-gold);
  border: 0;
  border-radius: 4px;
  color: #2b2620;
  font-family: var(--lv-font-ui) !important;
  font-size: 14px;
  font-weight: 600;
}

.hero-dots {
  right: clamp(28px, 3vw, 48px);
  bottom: 38px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  background: rgba(241, 235, 231, 0.34);
}

.hero-dot.on {
  background: var(--lv-gold);
}

/* The generated navigation tiles become the mockup's compact filter bar. */
.safra-tiles {
  display: flex;
  min-height: 64px;
  margin: 24px 0 0;
  padding: 8px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  direction: rtl;
  overflow-x: auto;
  background: #312b24;
  border: 1px solid var(--lv-line);
  border-radius: 8px;
  scrollbar-width: none;
}

.safra-tiles::-webkit-scrollbar {
  display: none;
}

.safra-tile,
.safra-tile.t1,
.safra-tile.t2,
.safra-tile.t3,
.safra-tile.t4,
.safra-tile.t5 {
  flex: 0 0 auto;
  width: auto;
  height: 42px;
  min-height: 42px;
  aspect-ratio: auto;
  padding: 0 15px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--lv-muted-strong) !important;
  background: #37312a;
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-weight: 500;
}

.safra-tile::before {
  display: none;
}

.safra-tile.t1 {
  color: var(--lv-gold) !important;
  background: rgba(240, 228, 207, 0.09);
  border-color: rgba(240, 228, 207, 0.28);
}

.safra-tile:hover {
  transform: none;
  filter: none;
  color: var(--lv-text) !important;
  background: #40392f;
}

/* Editorial shelves: four quiet cards and generous section rhythm. */
.parsha-row,
#page-home .media-list-row.safra-grid {
  margin-top: 64px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.parsha-row-head,
#page-home .media-list-row.safra-grid .media-list-header h2::after {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

.parsha-row-head {
  margin-bottom: 18px;
  gap: 10px;
}

.parsha-row-more {
  color: var(--lv-gold);
}

.parsha-rail,
#page-home .media-list-row.safra-grid .items-list {
  grid-auto-columns: calc((100% - 48px) / 4);
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  direction: rtl;
}

.parsha-card,
#page-home .media-list-row.safra-grid .item-content {
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
  transform-origin: center;
  transition: transform 180ms ease;
}

.parsha-card:hover,
#page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-content {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(240, 228, 207, 0.08),
    inset 0 -2px var(--lv-gold);
}

.pc-thumb,
#page-home .media-list-row.safra-grid .item-thumb {
  border-radius: 4px 4px 0 0 !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06) !important;
}

.pc-title,
#page-home .media-list-row.safra-grid .item-main {
  min-height: 76px !important;
  padding: 13px 14px 15px !important;
  background: var(--lv-surface) !important;
}

.pc-title,
#page-home .media-list-row.safra-grid .item-main h3 a,
#page-home .media-list-row.safra-grid .item-main h3 a span {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

#page-home .media-list-row.safra-grid .media-list-header {
  min-height: 40px;
  margin-bottom: 18px !important;
}

@media (max-width: 900px) {
  :root {
    --lv-header-height: 68px;
    --lv-sidebar-width: 0px;
  }

  #page-home .media-list-wrapper {
    padding: 16px 16px 0 !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child,
  #page-home .media-list-row.safra-hero .item:first-child .item-content,
  #page-home .media-list-row.safra-hero .item:first-child .item-thumb {
    height: 430px !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main {
    right: 20px !important;
    bottom: 106px !important;
    left: 20px !important;
    width: auto !important;
    gap: 10px;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
    font-size: 2rem !important;
    line-height: 1.22 !important;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
    bottom: 22px;
    left: 20px;
    min-width: 132px;
    min-height: 44px;
  }

  .safra-tiles {
    min-height: 60px;
    margin: 14px -16px 0;
    padding: 8px 16px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    scroll-padding-inline: 16px;
  }

  .safra-tile,
  .safra-tile.t1,
  .safra-tile.t2,
  .safra-tile.t3,
  .safra-tile.t4,
  .safra-tile.t5 {
    height: 44px;
    min-height: 44px;
    padding: 0 15px;
    font-size: 16px;
  }

  .parsha-row,
  #page-home .media-list-row.safra-grid {
    margin-top: 44px !important;
  }

  .parsha-row-head,
  #page-home .media-list-row.safra-grid .media-list-header h2::after {
    font-size: 1.65rem !important;
  }

  .parsha-rail {
    grid-template-columns: none !important;
    grid-auto-columns: min(82vw, 310px);
  }

  #page-home .media-list-row.safra-grid .items-list {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 318px);
  }

  .pc-title,
  #page-home .media-list-row.safra-grid .item-main {
    min-height: 74px !important;
  }

  .pc-title,
  #page-home .media-list-row.safra-grid .item-main h3 a,
  #page-home .media-list-row.safra-grid .item-main h3 a span {
    font-size: 18px !important;
  }
}

/* =====================================================================
   Safra Archive System
   Pass 2: viewing room, archive profile, search and taxonomy pages.
   Every route now sits on the same four-column editorial frame.
   ===================================================================== */

/* Shared inner-page frame and heading language. */
#page-media .page-main,
#page-profile-media .page-main,
#page-search .page-main,
#page-categories .page-main,
#page-tags .page-main {
  color: var(--lv-text) !important;
  background: var(--lv-canvas) !important;
}

#page-profile-media .profile-page-content,
#page-search .search-results-wrap,
#page-categories .media-list-wrapper,
#page-tags .media-list-wrapper {
  width: min(100%, 1164px) !important;
  max-width: 1164px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 64px !important;
  padding-left: 64px !important;
}

#page-profile-media .profile-page-content .media-list-header,
#page-search .media-list-header,
#page-categories .media-list-header,
#page-tags .media-list-header {
  min-height: 42px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  align-items: center;
  justify-content: flex-end;
}

#page-profile-media .profile-page-content .media-list-header h2::after,
#page-search .media-list-header h2::after,
#page-categories .media-list-header h2::after,
#page-tags .media-list-header h2::after {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.75rem, 2.15vw, 2.15rem) !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: 0;
}

#page-profile-media .profile-page-content .media-list-header h2,
#page-search .media-list-header h2,
#page-categories .media-list-header h2,
#page-tags .media-list-header h2 {
  width: 100%;
  direction: rtl;
  text-align: right !important;
}

/* Viewing room: a wider film, a compact queue, and information that reads
   like editorial notes instead of a stack of generic social controls. */
#page-media .page-main {
  padding: 32px 0 96px !important;
}

#page-media .viewer-section {
  grid-template-columns: minmax(0, 1fr) 276px !important;
  gap: 0 20px !important;
  width: min(calc(100% - 128px), 1036px) !important;
  max-width: 1036px !important;
}

#page-media .player-container,
#page-media .player-container-inner,
#page-media .video-player,
#page-media .video-js-wrapper,
#page-media .video-js {
  border-radius: 4px !important;
}

#page-media .video-js {
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.08) !important;
}

#page-media .auto-play-header {
  min-height: 42px;
  margin: 0 0 12px !important;
  border-color: var(--lv-line) !important;
}

#page-media .next-label::after {
  font-family: var(--lv-font-display) !important;
  font-size: 1.4rem;
  font-weight: 600;
}

#page-media .next-label {
  display: block !important;
  width: 100%;
  direction: rtl;
  text-align: right;
}

#page-media .viewer-sidebar .items-list {
  gap: 14px !important;
}

#page-media .viewer-sidebar .item-content {
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
  transition: transform 180ms ease;
}

#page-media .viewer-sidebar .item:has(a:hover) .item-content {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(240, 228, 207, 0.08),
    inset 0 -2px var(--lv-gold);
}

#page-media .viewer-sidebar .item-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 4px 4px 0 0 !important;
}

#page-media .viewer-sidebar .item-main {
  padding: 12px 13px 14px !important;
  background: var(--lv-surface) !important;
}

#page-media .viewer-sidebar .item-main > a {
  padding-top: 0 !important;
}

#page-media .viewer-sidebar .item-main h3 span {
  font-family: var(--lv-font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

#page-media .viewer-info-inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-media .media-title-banner {
  padding: 28px 0 22px !important;
}

#page-media .media-title-banner h1 {
  max-width: 26ch;
  margin-bottom: 20px !important;
  font-size: clamp(2rem, 2.7vw, 2.65rem) !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
}

#page-media .media-views-actions {
  min-height: 42px;
  align-items: center;
}

#page-media .media-actions > div {
  gap: 8px;
}

#page-media .media-actions button,
#page-media .more-options > span > button {
  min-height: 40px;
  padding: 8px 12px !important;
  background: var(--lv-surface) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.07);
  color: var(--lv-muted-strong) !important;
}

#page-media .media-actions button:hover,
#page-media .more-options > span > button:hover {
  background: var(--lv-surface-raised) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 228, 207, 0.08),
    inset 0 -2px var(--lv-gold);
}

#page-media .media-author-banner {
  min-height: 84px;
  padding: 16px 0 !important;
}

#page-media .author-banner-thumb {
  width: 50px !important;
  height: 50px !important;
  flex-basis: 50px;
  border-radius: 4px !important;
}

#page-media .media-content-banner {
  padding: 20px 0 !important;
}

#page-media .comments-list-inner {
  padding-top: 24px !important;
}

#page-media .comments-form .circle-icon-button.thumbnail,
#page-media .form-textarea-wrap,
#page-media .form-buttons a {
  border-radius: 4px !important;
}

/* Archive profile: a restrained cinematic masthead, compact identity block,
   and shelves that share the exact card system used by search and home. */
#page-profile-media .profile-banner-wrap {
  position: relative;
  width: min(calc(100% - 128px), 1036px) !important;
  max-width: 1036px !important;
  height: 220px !important;
  margin: 32px auto 0 !important;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
}

#page-profile-media .profile-banner {
  width: 100% !important;
  height: 220px !important;
  background-image:
    linear-gradient(90deg, rgba(34, 30, 25, 0.92) 0%, rgba(34, 30, 25, 0.6) 46%, rgba(34, 30, 25, 0.12) 82%),
    linear-gradient(180deg, transparent 50%, rgba(34, 30, 25, 0.54) 100%),
    url("/static/images/rov_hero.png") !important;
  background-position: center, center, right 34% !important;
  background-size: cover, cover, cover !important;
  border: 0 !important;
  border-radius: 4px;
}

#page-profile-media .profile-info-nav-wrap {
  width: min(calc(100% - 128px), 1036px) !important;
  max-width: 1036px !important;
  padding: 0 !important;
}

#page-profile-media .profile-info {
  min-height: 104px;
  margin-top: -84px !important;
  padding: 0 28px !important;
}

#page-profile-media .profile-info-inner {
  gap: 16px;
}

#page-profile-media .profile-info-inner > div:first-child {
  width: 88px !important;
  height: 88px !important;
  flex-basis: 88px;
  background-size: 78% !important;
  border-color: rgba(240, 228, 207, 0.25) !important;
  border-radius: 4px !important;
}

#page-profile-media .profile-name-edit-wrapper {
  padding-bottom: 10px;
}

#page-profile-media .profile-name-edit-wrapper h1::after {
  font-size: clamp(2.4rem, 3.4vw, 3.35rem);
  line-height: 1;
}

#page-profile-media .profile-name-edit-wrapper::after {
  margin-top: 7px;
  color: var(--lv-gold);
  font-family: var(--lv-font-ui);
  font-size: 13px;
}

#page-profile-media .profile-nav {
  width: 100% !important;
  min-height: 52px;
  margin: 8px 0 0 !important;
  background: rgba(43, 38, 32, 0.76) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 4px;
}

#page-profile-media .profile-nav .items-list-wrap {
  min-height: 50px;
  padding: 4px 7px !important;
  gap: 2px;
}

#page-profile-media .profile-nav li > a {
  min-height: 42px;
  padding: 0 14px !important;
  border-radius: 4px !important;
}

#page-profile-media .profile-nav li.active > a,
#page-profile-media .profile-nav li > a:hover {
  color: var(--lv-gold) !important;
  background: rgba(240, 228, 207, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.22) !important;
}

#page-profile-media .profile-nav .circle-icon-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  margin: 0 2px !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.07);
}

#page-profile-media .profile-page-content {
  padding-top: 54px !important;
  padding-bottom: 92px !important;
}

#page-profile-media .profile-page-content .media-list-row,
#page-search .media-list-row {
  width: 100% !important;
  margin: 0 !important;
}

/* Shared four-slot cards. Sparse shelves stay on the RTL scan edge instead
   of changing card width or jumping into the middle of the page. */
#page-profile-media .profile-page-content .items-list,
#page-search .items-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  direction: rtl;
}

#page-profile-media .profile-page-content .item-content,
#page-search .video-item .item-content {
  overflow: hidden !important;
  background: var(--lv-surface) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
  transition: transform 180ms ease;
}

#page-profile-media .profile-page-content .video-item:has(a:hover) .item-content,
#page-search .video-item:has(a:hover) .item-content {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(240, 228, 207, 0.08),
    inset 0 -2px var(--lv-gold);
}

#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: none !important;
}

#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  min-height: 76px !important;
  padding: 13px 14px 15px !important;
  background: var(--lv-surface) !important;
}

#page-profile-media .profile-page-content .item-main h3 a,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a,
#page-search .video-item .item-main h3 a span {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* Search: title and filters share one calm utility row; results inherit the
   exact profile-card scale. */
#page-search .search-results-wrap {
  padding-top: 52px !important;
  padding-bottom: 96px !important;
}

#page-search .media-list-row {
  min-height: 360px;
}

#page-search .media-list-header {
  padding-left: 140px !important;
}

#page-search .mi-filters-toggle {
  top: 0 !important;
  left: 0 !important;
}

#page-search .mi-filters-toggle button {
  min-height: 40px;
  padding: 8px 13px !important;
  background: var(--lv-surface) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.07);
}

#page-search .mi-filters-toggle button:hover {
  background: var(--lv-surface-raised) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 228, 207, 0.08),
    inset 0 -2px var(--lv-gold);
}

#page-search .mi-filters-row:not(.hidden) {
  margin: 8px 0 24px !important;
  padding: 20px !important;
  background: #312b24 !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 4px !important;
}

#page-search .mi-filter-options button {
  border-radius: 4px !important;
}

#page-search .items-list-outer {
  margin-top: 18px !important;
}

/* Taxonomy empty states: centered content is appropriate only here, where
   the absence itself is the page's message. */
#page-categories .media-list-wrapper,
#page-tags .media-list-wrapper {
  padding-top: 52px !important;
  padding-bottom: 96px !important;
}

#page-categories .items-list-wrap,
#page-tags .media-list-row {
  min-height: 300px;
  margin-top: 8px;
  padding: 40px 24px;
  background-image:
    radial-gradient(circle at 50% 34%, rgba(240, 228, 207, 0.08), transparent 38%),
    linear-gradient(135deg, #37312a, #312b24) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.06);
}

#page-categories .items-list-wrap {
  background-image:
    radial-gradient(circle at 50% 34%, rgba(240, 228, 207, 0.08), transparent 38%),
    url("/media/brand/safra_mark.png"),
    linear-gradient(135deg, #37312a, #312b24) !important;
  background-position: center, 50% calc(50% - 72px), center;
  background-size: cover, 64px auto, cover;
}

#page-categories .items-list-wrap::before,
#page-tags .media-list-row::before {
  color: var(--lv-text);
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 600;
}

#page-categories .items-list-wrap::before {
  margin-top: 70px;
}

#page-categories .items-list-wrap::after,
#page-tags .media-list-row::after {
  max-width: 44ch;
  margin-top: 10px;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 15px;
}

@media (max-width: 900px) {
  #page-profile-media .profile-page-content,
  #page-search .search-results-wrap,
  #page-categories .media-list-wrapper,
  #page-tags .media-list-wrapper {
    width: 100% !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #page-media .page-main {
    padding-top: 0 !important;
    padding-bottom: 64px !important;
  }

  #page-media .viewer-section {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
  }

  #page-media .player-container,
  #page-media .player-container-inner,
  #page-media .video-player,
  #page-media .video-js-wrapper,
  #page-media .video-js {
    border-radius: 0 !important;
  }

  #page-media .viewer-info {
    padding: 0 16px !important;
  }

  #page-media .viewer-info-inner {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #page-media .media-title-banner {
    padding: 24px 0 20px !important;
  }

  #page-media .media-title-banner h1 {
    font-size: 1.85rem !important;
    line-height: 1.28 !important;
  }

  #page-media .media-views-actions {
    gap: 12px;
  }

  #page-media .media-actions button,
  #page-media .more-options > span > button {
    min-width: 44px;
    min-height: 44px;
    padding: 9px 11px !important;
  }

  #page-media .viewer-sidebar {
    padding: 40px 16px 0 !important;
  }

  #page-media .auto-play-header {
    margin-bottom: 14px !important;
  }

  #page-media .viewer-sidebar .item-main h3 span {
    font-size: 17px !important;
  }

  #page-profile-media .profile-banner-wrap {
    width: calc(100% - 32px) !important;
    height: 188px !important;
    margin-top: 16px !important;
  }

  #page-profile-media .profile-banner {
    height: 188px !important;
    background-position: center, center, 66% center !important;
  }

  #page-profile-media .profile-info-nav-wrap {
    width: 100% !important;
    padding: 0 16px !important;
  }

  #page-profile-media .profile-info {
    min-height: 94px;
    margin-top: -68px !important;
    padding: 0 14px !important;
  }

  #page-profile-media .profile-info-inner > div:first-child {
    width: 76px !important;
    height: 76px !important;
    flex-basis: 76px;
  }

  #page-profile-media .profile-name-edit-wrapper {
    padding-bottom: 7px;
  }

  #page-profile-media .profile-name-edit-wrapper h1::after {
    font-size: 2.35rem;
  }

  #page-profile-media .profile-nav {
    margin-top: 8px !important;
  }

  #page-profile-media .profile-nav .items-list-wrap {
    padding: 4px !important;
    gap: 1px;
  }

  #page-profile-media .profile-nav li > a {
    min-height: 42px;
    padding: 0 9px !important;
  }

  #page-profile-media .profile-nav li > a::after {
    font-size: 12px;
  }

  #page-profile-media .profile-nav .circle-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    margin: 0 !important;
  }

  #page-profile-media .profile-page-content,
  #page-search .search-results-wrap,
  #page-categories .media-list-wrapper,
  #page-tags .media-list-wrapper {
    padding-top: 40px !important;
    padding-bottom: 72px !important;
  }

  #page-profile-media .profile-page-content .media-list-header,
  #page-search .media-list-header,
  #page-categories .media-list-header,
  #page-tags .media-list-header {
    margin-bottom: 16px !important;
  }

  #page-profile-media .profile-page-content .items-list,
  #page-search .items-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  #page-profile-media .profile-page-content .item-main,
  #page-search .video-item .item-main {
    min-height: 74px !important;
    padding: 13px 14px 15px !important;
  }

  #page-profile-media .profile-page-content .item-main h3 a,
  #page-profile-media .profile-page-content .item-main h3 a span,
  #page-search .video-item .item-main h3 a,
  #page-search .video-item .item-main h3 a span {
    font-size: 17px !important;
  }

  #page-search .media-list-header {
    padding-left: 112px !important;
  }

  #page-search .mi-filters-toggle button {
    min-height: 42px;
  }

  #page-search .mi-filters-row:not(.hidden) {
    padding: 16px !important;
  }

  #page-categories .items-list-wrap,
  #page-tags .media-list-row {
    min-height: 306px;
    padding: 34px 20px;
  }

  #page-categories .items-list-wrap::before,
  #page-tags .media-list-row::before {
    font-size: 2rem;
    line-height: 1.35;
  }
}

/* =====================================================================
   Safra Archive System
   Pass 3: final frame alignment, touch behavior and responsive polish.
   ===================================================================== */

@media (min-width: 901px) {
  /* All main content begins on the same 64px editorial inset. */
  #page-home .media-list-wrapper {
    padding-right: 64px !important;
    padding-left: 64px !important;
  }

  #page-profile-media .profile-banner-wrap,
  #page-profile-media .profile-info-nav-wrap {
    float: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Yiddish reads from the right: the permanent archive rail belongs on
     that side, with its active edge facing the content. */
  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: var(--lv-header-height) var(--lv-sidebar-width) 0 0 !important;
  }

  .page-header {
    inset: 0 var(--lv-sidebar-width) auto 0 !important;
  }

  .page-header-left {
    right: calc(-1 * var(--lv-sidebar-width)) !important;
    left: auto !important;
  }

  .page-header-left > div {
    justify-content: flex-end !important;
  }

  .logo a::after {
    background-position: right center;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: 0 0 0 auto !important;
    border-right: 0 !important;
    border-left: 1px solid var(--lv-line) !important;
  }

  .page-sidebar .nav-menu:first-child .link-item a {
    direction: rtl;
  }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active,
  .page-sidebar .link-item:has(a[aria-current="page"]),
  body:has(#page-home) .page-sidebar .nav-item-home,
  body:has(#page-categories) .page-sidebar .nav-item-categories,
  body:has(#page-tags) .page-sidebar .nav-item-tags {
    box-shadow: inset 2px 0 var(--lv-gold);
  }
}

@media (max-width: 900px) {
  /* Stock MediaCMS max-widths shaved an unexplained gutter from mobile
     shelves. Restore the intended 16px page edge and true full-bleed rails. */
  #page-home .media-list-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .safra-tiles,
  #page-home .media-list-row.safra-grid .items-list {
    width: calc(100% + 32px) !important;
  }

  #page-profile-media .profile-banner-wrap {
    float: none !important;
    margin: 16px auto 0 !important;
  }

  #page-profile-media .profile-info-nav-wrap {
    float: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* The mobile drawer and its trigger follow the same RTL edge. */
  .toggle-sidebar {
    right: 8px !important;
    left: auto !important;
  }

  .page-header-right {
    right: auto !important;
    left: 6px !important;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    right: 0 !important;
    left: auto !important;
    border-right: 0 !important;
    border-left: 1px solid var(--lv-line) !important;
  }

  .page-sidebar {
    transform: translateX(100%) !important;
  }

  body.visible-sidebar .page-sidebar {
    transform: translateX(0) !important;
  }

  .page-sidebar .link-item a {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl;
    align-items: center;
    gap: 12px;
  }

  #page-profile-media .profile-nav li > a {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  #page-profile-media .profile-nav .circle-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  #page-home .media-list-row.safra-grid .item-main {
    min-height: 84px !important;
  }
}

@media (hover: none) {
  .parsha-card:hover,
  #page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-content,
  #page-profile-media .profile-page-content .video-item:has(a:hover) .item-content,
  #page-search .video-item:has(a:hover) .item-content,
  #page-media .viewer-sidebar .item:has(a:hover) .item-content {
    transform: none;
  }
}

/* =====================================================================
   Safra Archive System
   Pass 4: RTL application chrome. The permanent rail now anchors the
   Yiddish reading edge; mobile already uses the matching right drawer.
   ===================================================================== */
@media (min-width: 901px) {
  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: var(--lv-header-height) var(--lv-sidebar-width) 0 0 !important;
  }

  .page-header {
    inset: 0 var(--lv-sidebar-width) auto 0 !important;
  }

  .page-header-left {
    right: calc(-1 * var(--lv-sidebar-width)) !important;
    left: auto !important;
  }

  .page-header-left > div {
    padding-right: 16px;
    padding-left: 16px;
    justify-content: center !important;
  }

  .logo a::after {
    background-position: center;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: 0 0 0 auto !important;
    border-right: 0 !important;
    border-left: 1px solid var(--lv-line) !important;
  }

  .page-sidebar .nav-menu:first-child .link-item a {
    direction: rtl;
  }

  .page-sidebar .link-item > a > span:last-child {
    text-align: right;
  }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active,
  .page-sidebar .link-item:has(a[aria-current="page"]),
  body:has(#page-home) .page-sidebar .nav-item-home,
  body:has(#page-categories) .page-sidebar .nav-item-categories,
  body:has(#page-tags) .page-sidebar .nav-item-tags {
    box-shadow: inset 2px 0 var(--lv-gold);
  }
}

/* The stock profile header used an off-canvas pseudo-surface to compensate
   for its former float. The centered editorial frame no longer needs it. */
#page-profile-media .profile-info-nav-wrap::before {
  display: none !important;
}

/* =====================================================================
   Safra Archive System
   Pass 5: simplify the feature action, keep archive shelves horizontal,
   and anchor the wide viewing room to the RTL navigation edge.
   ===================================================================== */

/* The title already establishes the feature. A second label added visual
   noise without adding meaning. */
#page-home .media-list-row.safra-hero .item:first-child .item-main::before {
  display: none !important;
}

/* The whole feature remains the link; this is its compact visual affordance.
   Keep a full 52px target for mouse, touch, and keyboard users. */
#page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
  content: "\2190" !important;
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
}

@media (min-width: 901px) {
  /* Four cards stay visible at the established scale; additional items
     continue along one RTL rail instead of wrapping into an orphaned row. */
  #page-home .media-list-row.safra-grid .items-list {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 4);
    gap: 16px !important;
    overflow-x: auto;
    scroll-padding-inline: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #page-home .media-list-row.safra-grid .items-list::-webkit-scrollbar {
    display: none;
  }

  #page-home .media-list-row.safra-grid .item {
    min-width: 0;
    scroll-snap-align: start;
  }

  /* At laptop width this preserves the existing balanced frame. On wider
     screens the player grows and stays close to the right-side rail. */
  #page-media .viewer-section {
    grid-template-columns: minmax(0, 1fr) clamp(276px, 18vw, 340px) !important;
    width: min(calc(100% - 128px), 1360px) !important;
    max-width: 1360px !important;
    margin-right: 64px !important;
    margin-left: auto !important;
  }
}

@media (max-width: 900px) {
  #page-home .media-list-row.safra-hero .item:first-child .item-thumb::after {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
  }
}

/* =====================================================================
   Safra Archive System
   Pass 6: real loading skeletons plus a whole-frame carousel transition.
   The JS state lasts 920ms so the skeleton registers on fast responses.
   ===================================================================== */

/* React paints the stock rows before the synthetic feature is attached.
   Hold that incomplete frame for a few milliseconds so it never flashes. */
#page-home:not(:has(.media-list-row.safra-hero)) .media-list-wrapper {
  visibility: hidden;
}

.safra-shimmer {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  contain: paint;
}

.safra-shimmer::before,
#page-home .media-list-row.safra-hero .item:first-child .item-content.safra-shimmer::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(#4a4237 0 0) right 16px bottom 40px / 62% 14px no-repeat,
    linear-gradient(#40392f 0 0) right 16px bottom 18px / 42% 10px no-repeat,
    linear-gradient(#37312a 0 0) 0 0 / 100% 68% no-repeat,
    #312b24;
  animation: safra-skeleton-release 860ms ease-out both;
}

.safra-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0 35%,
    rgba(196, 175, 136, 0.04) 42%,
    rgba(255, 246, 236, 0.22) 50%,
    rgba(240, 228, 207, 0.08) 58%,
    transparent 65% 100%
  );
  background-size: 240% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: background-position, opacity;
  animation: safra-skeleton-shimmer 680ms cubic-bezier(0.4, 0, 0.2, 1) 80ms both;
}

#page-home .media-list-row.safra-hero .item:first-child .item-content.safra-shimmer::before {
  background:
    linear-gradient(#4a4237 0 0) 50% 66% / min(48%, 520px) 36px no-repeat,
    linear-gradient(#40392f 0 0) 50% 74% / min(35%, 380px) 14px no-repeat,
    radial-gradient(circle, #4a4237 0 52%, transparent 54%) left 40px bottom 40px / 52px 52px no-repeat,
    linear-gradient(115deg, #312b24 0%, #37312a 48%, #312b24 100%);
}

@keyframes safra-skeleton-release {
  0%, 76% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes safra-skeleton-shimmer {
  0% {
    opacity: 0;
    background-position: 150% 0;
  }
  12%, 82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -50% 0;
  }
}

/* The portrait is intentionally shared across slides. Move and relight the
   whole feature briefly so a title change feels like a carousel transition. */
#page-home .media-list-row.safra-hero .item:first-child .item-content.is-changing .item-thumb {
  transform-origin: center;
  animation: safra-hero-frame-change 560ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#page-home .media-list-row.safra-hero .item:first-child .item-content.is-changing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 246, 236, 0.09) 48%,
    rgba(196, 175, 136, 0.04) 56%,
    transparent 78%
  );
  animation: safra-hero-light-change 560ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes safra-hero-frame-change {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    opacity: 0.88;
    transform: scale(1.008);
  }
}

@keyframes safra-hero-light-change {
  0% {
    opacity: 0;
    transform: translate3d(36%, 0, 0);
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-36%, 0, 0);
  }
}

@media (max-width: 900px) {
  #page-home .media-list-row.safra-hero .item:first-child .item-content.safra-shimmer::before {
    background:
      linear-gradient(#4a4237 0 0) 50% 64% / 72% 28px no-repeat,
      linear-gradient(#40392f 0 0) 50% 73% / 56% 12px no-repeat,
      radial-gradient(circle, #4a4237 0 52%, transparent 54%) left 20px bottom 22px / 52px 52px no-repeat,
      linear-gradient(115deg, #312b24 0%, #37312a 48%, #312b24 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .safra-shimmer::before {
    animation: none;
    opacity: 1;
  }

  .safra-shimmer::after,
  #page-home .media-list-row.safra-hero .item:first-child .item-content.is-changing::after {
    animation: none;
    opacity: 0;
  }

  #page-home .media-list-row.safra-hero .item:first-child .item-content.is-changing .item-thumb {
    animation: none;
  }

  .media-list-row.safra-hero .item-main h3 a span {
    transition: none !important;
  }
}

/* =====================================================================
   Pass 9 / Safra brand system (designer handoff, 2026-08-24)
   Palette: #fffaf0 / #f0e4cf text + active; #2b2620 / #574d3f / #c4af88 /
   #4a4237 grounds, borders and resting icons. Type: Publico Banner Hebrew
   (display), Almoni ML v5 (UI). Assets live in brand/ and are served from
   media_files/brand (live-mounted on every deploy, no restart needed).
   ===================================================================== */

@font-face {
  font-family: "Almoni";
  src: url("/media/brand/fonts/almoni-light.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Almoni";
  src: url("/media/brand/fonts/almoni-bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publico Banner Hebrew";
  src: url("/media/brand/fonts/publico-banner-hebrew-roman.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Publico Banner Hebrew";
  src: url("/media/brand/fonts/publico-banner-hebrew-bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lv-font-ui: "Almoni", "Assistant", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --lv-font-display: "Publico Banner Hebrew", "Noto Serif Hebrew", "Frank Ruhl Libre", "David Libre", serif;
  --lv-font-brand: var(--lv-font-display);
  --lv-icon-rest: #c4af88;
}

body,
button,
input,
select,
textarea {
  font-weight: 400;
  font-feature-settings: normal;
}

strong,
b {
  font-weight: 700;
}

/* Resting icons sit in the muted gold; the active route and hover lift to
   the cream text colour, per the palette sheet. */
.page-sidebar .menu-item-icon .material-icons,
.page-sidebar .link-item .material-icons {
  color: var(--lv-icon-rest) !important;
}

.page-sidebar .link-item:hover .material-icons,
.page-sidebar .link-item.active .material-icons,
.page-sidebar .link-item:has(a[aria-current="page"]) .material-icons,
body:has(#page-home) .page-sidebar .nav-item-home .material-icons,
body:has(#page-categories) .page-sidebar .nav-item-categories .material-icons,
body:has(#page-tags) .page-sidebar .nav-item-tags .material-icons {
  color: var(--lv-text) !important;
}

.page-sidebar .link-item a,
.page-sidebar .link-item a span {
  color: var(--lv-muted-strong) !important;
}

.page-sidebar .link-item:hover a,
.page-sidebar .link-item:hover a span,
.page-sidebar .link-item.active a,
.page-sidebar .link-item.active a span,
.page-sidebar .link-item:has(a[aria-current="page"]) a span,
body:has(#page-home) .page-sidebar .nav-item-home a span,
body:has(#page-categories) .page-sidebar .nav-item-categories a span,
body:has(#page-tags) .page-sidebar .nav-item-tags a span {
  color: var(--lv-text) !important;
}

#page-media .media-actions .circle-icon-button i,
#page-media .more-options > span > button i,
.search-field-wrap .material-icons,
.mobile-search-toggle .material-icons,
.toggle-sidebar .material-icons {
  color: var(--lv-icon-rest) !important;
}

#page-media .media-actions button:hover .circle-icon-button i,
#page-media .more-options > span > button:hover i,
.search-field-wrap button:hover .material-icons,
.mobile-search-toggle:hover .material-icons,
.toggle-sidebar:hover .material-icons {
  color: var(--lv-text) !important;
}

/* Channel avatars: the arch mark on a warm surface. */
#page-media .author-banner-thumb span,
#page-media .comments-form .circle-icon-button.thumbnail,
#page-profile-media .profile-info-thumb span,
#page-profile-media .profile-info-thumb img + span {
  background-color: var(--lv-surface-raised) !important;
  background-size: 62% auto !important;
}

::selection {
  background: var(--lv-gold);
  color: var(--lv-canvas);
}

/* Type scale. Publico Banner is a banner cut: under ~24px its natural fit
   closes up into a squashed slab, so small display sizes get real tracking
   and the true headline sizes a lighter touch. Faces stay as designed. */
#page-media .next-label,
#page-media .next-label::after,
#page-media .viewer-sidebar .item-main h3 span,
#page-home .media-list-row.safra-grid .item-main h3 a,
#page-home .media-list-row.safra-grid .item-main h3 a span,
#page-profile-media .profile-page-content .item-main h3 a,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a,
#page-search .video-item .item-main h3 a span,
#page-home .media-list-row.safra-hero .item:first-child .item-content::before,
.safra-tile {
  letter-spacing: 0.04em !important;
}

#page-media .viewer-sidebar .item-main h3 span,
#page-home .media-list-row.safra-grid .item-main h3 a span,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a span {
  line-height: 1.45 !important;
}

.media-list-header h2,
.media-list-header h2::after,
.parsha-row-head,
#page-media .media-title-banner h1,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span,
#page-categories .items-list-wrap::before,
#page-tags .media-list-row::before,
#page-search .media-list-header h2::after,
#page-profile-media .profile-page-content .media-list-header h2::after,
#page-profile-media .profile-name-edit-wrapper h1 {
  letter-spacing: 0.015em !important;
}

/* Brand covers. Every frame of the karaoke videos looks alike, so landau.js
   replaces the thumbnail with a cover built from the catalog's
   "parsha · year" description: parsha large, year, tone keyed to the sefer.
   Cards without a recognisable parsha keep their video frame. */
.item-thumb.has-cover,
.pc-thumb.has-cover {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
  background-color: #37312a !important;
  container-type: inline-size;
}

.has-cover img,
.has-cover video {
  opacity: 0 !important;
}

.safra-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 7% 9%;
  overflow: hidden;
  direction: rtl;
  text-align: right;
  color: var(--lv-text);
  border-radius: inherit;
  pointer-events: none;
  --sc-a: #4a4237;
  --sc-b: #2b2620;
  background: linear-gradient(135deg, var(--sc-a), var(--sc-b));
}


.sc-arch {
  position: absolute;
  left: -13%;
  bottom: -34%;
  width: 72%;
  aspect-ratio: 1;
  background: url("/media/brand/safra_mark.png") center / contain no-repeat;
  opacity: 0.13;
}

.sc-mark {
  position: absolute;
  top: 7%;
  left: 5%;
  width: 11%;
  aspect-ratio: 1;
  background: url("/media/brand/safra_mark.png") center / contain no-repeat;
}

.sc-eyebrow {
  position: relative;
  margin-bottom: 0.25em;
  color: rgba(240, 228, 207, 0.72);
  font-family: var(--lv-font-ui);
  font-size: 12px;
  font-size: clamp(11px, 5cqw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.sc-parsha {
  position: relative;
  max-width: 88%;
  color: var(--lv-text);
  font-family: var(--lv-font-display);
  font-size: 30px;
  font-size: clamp(20px, 13cqw, 40px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.sc-year {
  position: relative;
  margin-top: 0.35em;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 15px;
  font-size: clamp(13px, 6.5cqw, 18px);
  font-weight: 700;
  line-height: 1.2;
}

.sc-duration,
.has-cover .item-duration {
  position: absolute !important;
  left: 4% !important;
  right: auto !important;
  bottom: 7% !important;
  top: auto !important;
  z-index: 2;
  margin: 0 !important;
  padding: 3px 7px !important;
  background: rgba(34, 30, 25, 0.86) !important;
  border-radius: 4px !important;
  color: var(--lv-text) !important;
  font-family: var(--lv-font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  direction: ltr;
}

.has-cover .item-duration > * {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Section heads rest in the beige text tone; they lift to cream-white on
   hover, the same rest/active logic the icons follow. Hero and page titles
   stay cream-white at the top of the hierarchy. */
.media-list-header h2,
.media-list-header h2::after,
.parsha-row-head,
#page-media .next-label,
#page-media .next-label::after {
  color: var(--lv-muted-strong) !important;
}

.parsha-row-head:hover,
.media-list-header h2 a:hover {
  color: var(--lv-text) !important;
}

/* No chevron on the parsha row heads; the whole heading is the link. */
.parsha-row-head {
  gap: 0 !important;
}

.parsha-row-more {
  display: none !important;
}

/* Cover tone variants: the sefer sets the hue, the year nudges it, so a row
   of one parsha across several years still reads as distinct objects. */

/* Cover hues: the sefer picks the family, the parsha its hue inside it, and
   the year nudges the tone (falls back to the plain hue where color-mix is
   unsupported). */
.safra-cover.sc-bereishis.sc-h0 { --sc-a: #5c4131; }
.safra-cover.sc-bereishis.sc-h1 { --sc-a: #7a5a3a; }
.safra-cover.sc-bereishis.sc-h2 { --sc-a: #4e3b3b; }
.safra-cover.sc-bereishis.sc-h3 { --sc-a: #6b4a2c; }
.safra-cover.sc-shemos.sc-h0 { --sc-a: #6b3f33; }
.safra-cover.sc-shemos.sc-h1 { --sc-a: #8a5a3a; }
.safra-cover.sc-shemos.sc-h2 { --sc-a: #5e3630; }
.safra-cover.sc-shemos.sc-h3 { --sc-a: #7a4f45; }
.safra-cover.sc-vayikra.sc-h0 { --sc-a: #7a5c2a; }
.safra-cover.sc-vayikra.sc-h1 { --sc-a: #8f7a3a; }
.safra-cover.sc-vayikra.sc-h2 { --sc-a: #6b4f2a; }
.safra-cover.sc-vayikra.sc-h3 { --sc-a: #7d6a4a; }
.safra-cover.sc-bamidbar.sc-h0 { --sc-a: #4f5a34; }
.safra-cover.sc-bamidbar.sc-h1 { --sc-a: #3f5a45; }
.safra-cover.sc-bamidbar.sc-h2 { --sc-a: #6a6a35; }
.safra-cover.sc-bamidbar.sc-h3 { --sc-a: #4a5a55; }
.safra-cover.sc-devarim.sc-h0 { --sc-a: #574d3f; }
.safra-cover.sc-devarim.sc-h1 { --sc-a: #7a6a3a; }
.safra-cover.sc-devarim.sc-h2 { --sc-a: #6b4a30; }
.safra-cover.sc-devarim.sc-h3 { --sc-a: #5a5a48; }
.safra-cover.sc-moed.sc-h0 { --sc-a: #5a3a4a; }
.safra-cover.sc-moed.sc-h1 { --sc-a: #4a3a5a; }
.safra-cover.sc-moed.sc-h2 { --sc-a: #6a3a40; }
.safra-cover.sc-moed.sc-h3 { --sc-a: #6a4a5a; }

.safra-cover.sc-v1 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc-a) 74%, #c4af88), var(--sc-b));
}

.safra-cover.sc-v2 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc-a) 66%, #2b2620), var(--sc-b));
}

/* =====================================================================
   Pass 10 / Modern shell: top navigation, contrast, cleaner cards, air.
   Palette and type stay the designer's; this pass changes structure.
   ===================================================================== */

/* 1. Contrast. Secondary text and resting icons step up from the palette's
   soft gold to a lighter warm tone (~6:1 on the lifted ground); borders keep
   the browns. */
:root {
  --lv-muted: #c4af88;
  --lv-icon-rest: #c4af88;
}

.search-field-wrap form:has(input:placeholder-shown)::before {
  color: var(--lv-muted) !important;
}

/* 2. Navigation. The permanent rail becomes a top navigation: a strip under
   the brand row on ordinary desktops, and inline with the brand row on wide
   screens. Mobile keeps its drawer. */
@media (min-width: 901px) {
  :root {
    --lv-header-height: 72px;
    --lv-nav-height: 52px;
    --lv-sidebar-width: 0px;
  }

  .page-main-wrap,
  body.visible-sidebar .page-main-wrap {
    padding: calc(var(--lv-header-height) + var(--lv-nav-height)) 0 0 0 !important;
  }

  .page-header {
    inset: 0 0 auto 0 !important;
    grid-template-columns: auto minmax(220px, 340px) minmax(0, 1fr) auto !important;
    width: 100% !important;
    padding: 0 40px !important;
    column-gap: 20px;
    background: rgba(34, 30, 25, 0.94) !important;
  }

  .page-header-left {
    position: static !important;
    grid-column: 4;
    grid-row: 1;
    width: auto !important;
    height: auto !important;
    justify-self: end;
    background: transparent !important;
  }

  .page-header-left > div {
    padding: 0 !important;
    justify-content: flex-end !important;
  }

  .search-field-wrap {
    grid-column: 2;
  }

  .page-header-right {
    grid-column: 1;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: var(--lv-header-height) 0 auto 0 !important;
    width: 100% !important;
    height: var(--lv-nav-height) !important;
    padding: 0 !important;
    overflow: visible !important;
    background: rgba(34, 30, 25, 0.94) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lv-line) !important;
    backdrop-filter: blur(20px);
  }

  .page-sidebar-inner {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 40px !important;
    align-items: stretch;
    direction: rtl;
  }

  .page-sidebar .nav-menu:not(:first-child),
  .page-sidebar .sidebar-theme-switcher,
  .page-sidebar .page-sidebar-bottom {
    display: none !important;
  }

  .page-sidebar .nav-menu:first-child,
  .page-sidebar .nav-menu:first-child nav,
  .page-sidebar .nav-menu:first-child ul {
    width: auto !important;
    height: 100% !important;
  }

  .page-sidebar .nav-menu:first-child ul {
    flex-direction: row !important;
    align-items: stretch;
    gap: 2px;
  }

  .page-sidebar .nav-menu:first-child .link-item {
    width: auto !important;
    height: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--lv-muted-strong) !important;
  }

  .page-sidebar .nav-menu:first-child .link-item a {
    height: 100%;
    min-height: 0;
    padding: 0 14px !important;
    gap: 8px;
    direction: rtl;
    box-shadow: inset 0 -2px 0 transparent !important;
    transition: color 150ms ease, box-shadow 150ms ease;
  }

  .page-sidebar .link-item > a > span:last-child {
    flex: none;
  }

  .page-sidebar .link-item > a > span:last-child::after {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .page-sidebar .menu-item-icon .material-icons {
    font-size: 19px !important;
  }

  .page-sidebar .link-item:hover,
  .page-sidebar .link-item.active,
  .page-sidebar .link-item:has(a[aria-current="page"]),
  body:has(#page-home) .page-sidebar .nav-item-home,
  body:has(#page-categories) .page-sidebar .nav-item-categories,
  body:has(#page-tags) .page-sidebar .nav-item-tags {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--lv-text) !important;
  }

  .page-sidebar .link-item:hover a {
    box-shadow: inset 0 -2px 0 rgba(240, 228, 207, 0.4) !important;
  }

  .page-sidebar .link-item.active a,
  .page-sidebar .link-item:has(a[aria-current="page"]) a,
  body:has(#page-home) .page-sidebar .nav-item-home a,
  body:has(#page-categories) .page-sidebar .nav-item-categories a,
  body:has(#page-tags) .page-sidebar .nav-item-tags a {
    box-shadow: inset 0 -2px 0 var(--lv-gold) !important;
  }
}

@media (min-width: 1500px) {
  :root {
    --lv-nav-height: 0px;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: 0 252px auto auto !important;
    width: auto !important;
    height: var(--lv-header-height) !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none;
    z-index: 1051 !important;
  }

  .page-sidebar-inner {
    width: auto !important;
    padding: 0 !important;
  }
}

/* 3. Cards. One container language everywhere: a quiet rounded surface, a
   cover with nothing behind its text, the title block with real padding,
   and a lift on hover. */
.sc-arch {
  display: none !important;
}

.safra-cover {
  padding: 10px 8% 9%;
}

.parsha-card,
#page-home .media-list-row.safra-grid .item-content,
#page-profile-media .profile-page-content .item-content,
#page-search .video-item .item-content,
#page-media .viewer-sidebar .item-content {
  background: var(--lv-surface) !important;
  border: 1px solid var(--lv-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.parsha-card:hover,
#page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-content,
#page-profile-media .profile-page-content .video-item:has(a:hover) .item-content,
#page-search .video-item:has(a:hover) .item-content,
#page-media .viewer-sidebar .item:has(a:hover) .item-content {
  border-color: var(--lv-line-strong) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
  transform: translateY(-2px) !important;
}

.pc-title,
#page-home .media-list-row.safra-grid .item-main,
#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main,
#page-media .viewer-sidebar .item-main {
  padding: 12px 14px 14px !important;
}

.pc-thumb,
#page-home .media-list-row.safra-grid .item-thumb,
#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb,
#page-media .viewer-sidebar .item-thumb {
  border-radius: 0 !important;
}

/* 4. Rhythm. A 24px gutter, four across on wide screens and three on
   ordinary desktops, and more air between sections. */
@media (min-width: 901px) {
  #page-home .page-main {
    padding-bottom: 120px !important;
  }

  #page-home .media-list-wrapper {
    padding: 40px 56px 0 !important;
  }

  .safra-tiles {
    margin-top: 28px !important;
  }

  .parsha-row,
  #page-home .media-list-row.safra-grid {
    margin-top: 64px !important;
  }

  .parsha-row-head,
  #page-home .media-list-row.safra-grid .media-list-header {
    margin-bottom: 22px !important;
  }

  .parsha-rail,
  #page-home .media-list-row.safra-grid .items-list,
  #page-profile-media .profile-page-content .items-list,
  #page-search .items-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .parsha-rail {
    grid-auto-columns: calc((100% - 72px) / 4);
  }

  #page-media .viewer-sidebar .items-list {
    gap: 18px !important;
  }

  #page-media .page-main {
    padding: 40px 40px 96px !important;
  }

  #page-media .viewer-section {
    gap: 0 40px;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .parsha-rail,
  #page-home .media-list-row.safra-grid .items-list,
  #page-profile-media .profile-page-content .items-list,
  #page-search .items-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .parsha-rail {
    grid-auto-columns: calc((100% - 48px) / 3);
  }
}

/* The chip row under the hero repeated the navigation; on desktop the top
   navigation carries it, and the page breathes. Mobile keeps the chips. */
@media (min-width: 901px) {
  .safra-tiles {
    display: none !important;
  }
}

/* Latest is a wrapping grid on desktop (rows of four, three on narrower
   desktops), not a shelf; the parsha shelves keep scrolling with every
   column the same width. */
@media (min-width: 901px) {
  #page-home .media-list-row.safra-grid .items-list {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .parsha-rail {
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 72px) / 4) !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  #page-home .media-list-row.safra-grid .items-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .parsha-rail {
    grid-auto-columns: calc((100% - 48px) / 3) !important;
  }
}

/* Finishing the top navigation: a slimmer, lighter strip on mid-size
   desktops, and the login as quiet text so the far corner stays calm. */
@media (min-width: 901px) and (max-width: 1499px) {
  :root {
    --lv-nav-height: 48px;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    background: rgba(34, 30, 25, 0.9) !important;
    border-bottom-color: rgba(74, 66, 55, 0.7) !important;
  }
}

@media (min-width: 901px) {
  .page-header-right .sign-in-wrap a,
  .page-header-right .sign-in {
    min-width: 0;
    padding: 7px 6px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--lv-muted-strong) !important;
    font-weight: 700;
  }

  .page-header-right .sign-in-wrap a:hover,
  .page-header-right .sign-in:hover {
    color: var(--lv-text) !important;
  }
}

/* =====================================================================
   Pass 11 / Reading room: the watch-page queue becomes a compact lesson
   list, cards carry a views · date line, headings get a gold hairline,
   and the brand carries its tagline. (After the designer's reference.)
   ===================================================================== */

/* Meta line under titles. */
.safra-meta {
  display: flex;
  margin-top: 5px;
  align-items: center;
  gap: 7px;
  direction: rtl;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.safra-meta .sm-sep {
  color: var(--lv-icon-rest);
}

.pc-title {
  padding-bottom: 4px !important;
}

.pc-meta {
  padding: 0 14px 13px;
}

#page-home .media-list-row.safra-grid .item-main,
#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  min-height: 0 !important;
}

/* "See more" after a list. */
.safra-more {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  gap: 8px;
  direction: rtl;
  color: var(--lv-muted-strong) !important;
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: color 150ms ease;
}

.safra-more:hover {
  color: var(--lv-text) !important;
}

#page-home .media-list-row.safra-grid .safra-more {
  margin-top: 22px;
}

/* Gold hairline under section heads and the queue heading. */
.parsha-row-head,
#page-home .media-list-row.safra-grid .media-list-header h2 {
  padding-bottom: 10px !important;
  background: linear-gradient(to left, rgba(196, 175, 136, 0.75), rgba(196, 175, 136, 0)) right bottom / 100% 1px no-repeat;
}

#page-media .auto-play-header {
  min-height: 0;
  margin: 0 0 4px !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  background: linear-gradient(to left, rgba(196, 175, 136, 0.75), rgba(196, 175, 136, 0) 80%) right bottom / 100% 1px no-repeat;
}

/* The queue: a compact list — title and meta at the right, duration at the
   left, hairline dividers, a gold edge on the hovered row. */
#page-media .viewer-sidebar .items-list {
  gap: 0 !important;
}

#page-media .viewer-sidebar .item-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: center;
  column-gap: 12px;
  padding: 13px 12px 13px 8px !important;
  direction: rtl;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lv-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, box-shadow 150ms ease !important;
}

#page-media .viewer-sidebar .item:has(a:hover) .item-content {
  background: rgba(74, 66, 55, 0.35) !important;
  box-shadow: inset -3px 0 0 var(--lv-icon-rest) !important;
  transform: none !important;
}

#page-media .viewer-sidebar .item-thumb {
  grid-column: 2;
  width: 52px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  align-self: center;
  background: none !important;
  border-radius: 0 !important;
  text-align: left;
  direction: ltr;
}

#page-media .viewer-sidebar .item-thumb .item-duration,
#page-media .viewer-sidebar .item-thumb .item-duration > * {
  position: static !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  color: var(--lv-muted-strong) !important;
  font-family: var(--lv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

#page-media .viewer-sidebar .item-main {
  grid-column: 1;
  padding: 0 !important;
  background: transparent !important;
}

#page-media .viewer-sidebar .item-main h3 span {
  font-family: var(--lv-font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
}

#page-media .viewer-sidebar .safra-meta {
  margin-top: 3px;
  font-size: 12px;
}

#page-media .viewer-sidebar .safra-more {
  margin-top: 16px;
}

/* Tagline under the wordmark on desktop. */
@media (min-width: 901px) {
  .logo,
  .logo a,
  .logo a > span {
    height: 64px !important;
  }

  .logo a {
    position: relative;
  }

  .logo a::after {
    height: 46px;
    background-position: right center;
  }

  .logo a::before {
    content: "דברות קודש";
    position: absolute;
    right: 2px;
    bottom: 0;
    direction: rtl;
    color: var(--lv-muted);
    font-family: var(--lv-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    line-height: 1;
    white-space: nowrap;
  }
}

.pc-title {
  min-height: 0 !important;
}

#page-media .viewer-sidebar .item-thumb,
#page-media .viewer-sidebar .item-main {
  grid-row: 1;
}

#page-media .viewer-sidebar .item-thumb::before,
#page-media .viewer-sidebar .item-thumb::after {
  display: none !important;
}

#page-media .viewer-sidebar .item-thumb,
#page-media .viewer-sidebar .item-thumb .item-duration,
#page-media .viewer-sidebar .item-thumb .item-duration > * {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

/* =====================================================================
   Pass 12 / Editorial cards. Same grid, but the card stops being a boxed
   SaaS tile: no rounded container, no border, no corner badge, no pill.
   A flat-toned cover with paper grain, and the title and meta set as a
   caption beneath it. Section heads rule across the whole measure.
   ===================================================================== */

/* Covers keep the look that worked: gradient tone, the faint arch, the
   mark, the duration pill. Only the card around them changes. */
.sc-arch,
.sc-mark {
  display: block !important;
}

.sc-duration {
  display: inline-block !important;
}

/* Cards: cover + caption, no box. */
.parsha-card,
#page-home .media-list-row.safra-grid .item-content,
#page-profile-media .profile-page-content .item-content,
#page-search .video-item .item-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.parsha-card:hover,
#page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-content,
#page-profile-media .profile-page-content .video-item:has(a:hover) .item-content,
#page-search .video-item:has(a:hover) .item-content {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.pc-thumb,
#page-home .media-list-row.safra-grid .item-thumb,
#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb {
  border-radius: 2px !important;
  overflow: hidden !important;
  transition: filter 160ms ease;
}

.parsha-card:hover .pc-thumb,
#page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-thumb,
#page-profile-media .profile-page-content .video-item:has(a:hover) .item-thumb,
#page-search .video-item:has(a:hover) .item-thumb {
  filter: brightness(1.07);
}

.pc-title,
#page-home .media-list-row.safra-grid .item-main,
#page-profile-media .profile-page-content .item-main,
#page-search .video-item .item-main {
  padding: 12px 2px 0 !important;
  background: transparent !important;
}

.pc-title {
  padding-bottom: 2px !important;
}

.pc-meta {
  padding: 0 2px 0;
}

.pc-title,
#page-home .media-list-row.safra-grid .item-main h3 a span,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a span {
  font-size: 16.5px !important;
  line-height: 1.4 !important;
  transition: color 150ms ease;
}

.parsha-card:hover .pc-title,
#page-home .media-list-row.safra-grid .video-item:has(a:hover) .item-main h3 a span,
#page-profile-media .profile-page-content .video-item:has(a:hover) .item-main h3 a span,
#page-search .video-item:has(a:hover) .item-main h3 a span {
  color: var(--lv-gold) !important;
}

/* Section heads rule across the whole measure. */
.parsha-row-head,
#page-home .media-list-row.safra-grid .media-list-header h2 {
  display: flex !important;
  width: 100% !important;
  padding-bottom: 12px !important;
  background: linear-gradient(to left, rgba(196, 175, 136, 0.8), rgba(196, 175, 136, 0.18)) right bottom / 100% 1px no-repeat;
}

@media (min-width: 901px) {
  .parsha-row-head,
  #page-home .media-list-row.safra-grid .media-list-header {
    margin-bottom: 24px !important;
  }
}

.has-cover .item-duration,
.has-cover .item-duration > * {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.sc-duration,
.has-cover .item-duration {
  padding: 3px 7px !important;
  background: rgba(34, 30, 25, 0.86) !important;
  border-radius: 4px !important;
  color: var(--lv-text) !important;
  text-shadow: none;
}

.pc-thumb,
#page-home .media-list-row.safra-grid .item-thumb,
#page-profile-media .profile-page-content .item-thumb,
#page-search .video-item .item-thumb {
  border-radius: 6px !important;
}

/* No tagline under the wordmark; the logo stands alone. */
.logo a::before {
  content: none !important;
}

@media (min-width: 901px) {
  .logo,
  .logo a,
  .logo a > span {
    height: 56px !important;
  }

  .logo a::after {
    height: 56px;
    background-position: center;
  }
}

/* Display type: the font's own kerning pairs on, plus the tracking above —
   the closest the web gets to InDesign's "optical" fit. */
h1,
h2,
h3,
.sc-parsha,
.media-list-header h2::after,
.parsha-row-head,
#page-media .media-title-banner h1,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Logo a step smaller. */
@media (min-width: 901px) {
  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 144px !important;
    height: 47px !important;
  }

  .page-sidebar,
  .visible-sidebar .page-sidebar {
    --lv-logo-gutter: 224px;
  }
}

@media (min-width: 1500px) {
  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: 0 224px auto auto !important;
  }
}

/* Logo smaller still, and closer to the right edge. */
@media (min-width: 901px) {
  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 124px !important;
    height: 40px !important;
  }

  .page-header {
    padding-right: 22px !important;
  }
}

@media (min-width: 1500px) {
  .page-sidebar,
  .visible-sidebar .page-sidebar {
    inset: 0 182px auto auto !important;
  }
}

/* Generic list routes (/latest, /featured, /recommended, …) had no page
   rules: the stock English meta stayed visible and, being a left float,
   squeezed the Yiddish line beside it on phones. Hide the stock line on
   every list, make ours a full-width line, and give these routes the same
   caption card as the home page. Page-specific rules still win. */
.items-list .item:not(.safra-hero .item) .item-meta {
  display: none !important;
}

.item-main .safra-meta {
  display: flex !important;
  float: none !important;
  clear: both;
  width: 100% !important;
  flex: 0 0 100%;
}

.items-list .item .item-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.items-list .item .item-thumb {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.items-list .item .item-main {
  padding: 12px 2px 0 !important;
  background: transparent !important;
  text-align: right;
}

.items-list .item .item-main h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.items-list .item .item-main h3 a,
.items-list .item .item-main h3 a span {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  transition: color 150ms ease;
}

.items-list .item:has(a:hover) .item-main h3 a span {
  color: var(--lv-gold) !important;
}

@media (min-width: 901px) {
  .page-main:not(#page-home):not(#page-media):not(#page-search):not(#page-profile-media) .items-list {
    gap: 30px 24px !important;
  }
}

/* Generic list routes: RTL fill, and the home heading language. */
.page-main:not(#page-home):not(#page-media):not(#page-search):not(#page-profile-media) .items-list {
  direction: rtl;
}

.media-list-header h2[data-safra-localized] {
  display: flex !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 0 12px !important;
  direction: rtl;
  color: var(--lv-muted-strong) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  line-height: 1.2 !important;
  text-align: right;
  background: linear-gradient(to left, rgba(196, 175, 136, 0.8), rgba(196, 175, 136, 0.18)) right bottom / 100% 1px no-repeat;
}

@media (min-width: 901px) {
  .page-main:not(#page-home):not(#page-media):not(#page-search):not(#page-profile-media) .media-list-wrapper {
    width: min(100%, var(--lv-content)) !important;
    max-width: var(--lv-content) !important;
    margin: 0 auto !important;
    padding: 40px 56px 0 !important;
  }
}

/* Home: "new in the archive" is one row of the newest; the full list lives
   on /latest behind the see-more link. */
@media (min-width: 1280px) {
  #page-home .media-list-row.safra-grid .items-list > .item:nth-child(n + 5) {
    display: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  #page-home .media-list-row.safra-grid .items-list > .item:nth-child(n + 4) {
    display: none !important;
  }
}

/* Home shelves: one for this week's parsha, one disjoint archive grid. */
.parsha-row-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--lv-icon-rest);
  font-family: var(--lv-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.parsha-row-head {
  flex-direction: column;
  align-items: flex-end;
}

.parsha-row .safra-more {
  margin-top: 22px;
}

@media (min-width: 901px) {
  .parsha-rail.parsha-grid {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .parsha-rail.parsha-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.parsha-row-head {
  align-items: flex-start;
  text-align: right;
}

/* Hover reveals the actual video frame beneath the cover (pointer devices). */
@media (hover: hover) and (min-width: 901px) {
  .item-thumb.has-cover,
  .pc-thumb.has-cover {
    background-image: var(--sc-frame, none) !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #37312a !important;
  }

  .has-cover .safra-cover {
    transition: opacity 320ms ease;
  }

  .parsha-card:hover .pc-thumb.has-cover .safra-cover,
  .item:has(a:hover) .item-thumb.has-cover .safra-cover {
    opacity: 0;
  }
}

/* This week: three large cards. The archive: compact rows with imagery. */
@media (min-width: 901px) {
  .parsha-row:not(.parsha-row-grid) .parsha-rail {
    grid-auto-columns: calc((100% - 48px) / 3) !important;
  }

  .parsha-rail.parsha-grid {
    display: block !important;
  }

  .parsha-rail.parsha-grid .parsha-card {
    display: grid !important;
    grid-template-columns: clamp(180px, 17vw, 240px) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(20px, 2.4vw, 32px);
    padding: 18px 0 !important;
    direction: rtl;
    border-bottom: 1px solid var(--lv-line);
  }

  .parsha-rail.parsha-grid .parsha-card:first-child {
    padding-top: 4px !important;
  }

  .parsha-rail.parsha-grid .pc-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .parsha-rail.parsha-grid .pc-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding: 0 !important;
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .parsha-rail.parsha-grid .pc-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 8px;
    padding: 0 !important;
    font-size: 13px;
  }

  .parsha-row-grid .safra-more {
    margin-top: 18px;
  }
}

@media (max-width: 900px) {
  .parsha-rail.parsha-grid {
    display: block !important;
  }

  .parsha-rail.parsha-grid .parsha-card {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 14px 0 !important;
    direction: rtl;
    border-bottom: 1px solid var(--lv-line);
  }

  .parsha-rail.parsha-grid .pc-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .parsha-rail.parsha-grid .pc-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .parsha-rail.parsha-grid .pc-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 6px;
    padding: 0 !important;
  }
}

.parsha-rail.parsha-grid .pc-title {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
}

/* Archive rows in two columns on desktop. */
@media (min-width: 901px) {
  .parsha-rail.parsha-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    column-gap: 48px;
    row-gap: 0;
    overflow: visible !important;
  }

  .parsha-rail.parsha-grid .parsha-card {
    grid-template-columns: clamp(150px, 13vw, 200px) minmax(0, 1fr);
    column-gap: 20px;
    min-width: 0;
  }

  .parsha-rail.parsha-grid .parsha-card:nth-child(2) {
    padding-top: 4px !important;
  }

  .parsha-rail.parsha-grid .pc-title {
    font-size: 17.5px !important;
  }
}

/* Row cards must not clip glyph ink at the line start (the thumb clips itself). */
.parsha-rail.parsha-grid .parsha-card {
  overflow: visible !important;
}

.parsha-rail.parsha-grid .pc-title {
  padding-left: 4px !important;
}

/* Row layout is not a scrolling shelf: no edge fade, no scroll clipping. */
#page-home .parsha-rail.parsha-grid,
#page-home .parsha-rail.parsha-grid:has(> :nth-child(2)) {
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Public chrome: no login entry point (admins use /accounts/login/ directly). */
.page-header .sign-in-wrap,
.page-header .register-wrap,
.page-header .user-options {
  display: none !important;
}

/* Hero chevrons are text glyphs; RTL bidi mirroring flipped them inward. */
.hero-nav {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Home section titles in cream-white. */
.parsha-row-head,
.parsha-row-head > span:not(.parsha-row-eyebrow) {
  color: var(--lv-text) !important;
}

/* Optical sizing on, for any face that carries an opsz axis. */
html,
body {
  font-optical-sizing: auto;
}

/* =====================================================================
   Designer type update (2026-08-25): the main face is Frank Ruhl — served
   as Frank Ruhl Libre from Google Fonts. Publico Banner stays only as a
   fallback. A text face needs no opening tracking.
   ===================================================================== */
:root {
  --lv-font-display: "Frank Ruhl Libre", "Publico Banner Hebrew", "Noto Serif Hebrew", "David Libre", serif;
  --lv-font-brand: var(--lv-font-display);
}

#page-media .next-label,
#page-media .next-label::after,
#page-media .viewer-sidebar .item-main h3 span,
#page-home .media-list-row.safra-grid .item-main h3 a,
#page-home .media-list-row.safra-grid .item-main h3 a span,
#page-profile-media .profile-page-content .item-main h3 a,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a,
#page-search .video-item .item-main h3 a span,
#page-home .media-list-row.safra-hero .item:first-child .item-content::before,
.safra-tile,
.pc-title,
.items-list .item .item-main h3 a,
.items-list .item .item-main h3 a span,
.parsha-rail.parsha-grid .pc-title {
  letter-spacing: 0.005em !important;
}

.media-list-header h2,
.media-list-header h2::after,
.media-list-header h2[data-safra-localized],
.parsha-row-head,
#page-media .media-title-banner h1,
#page-home .media-list-row.safra-hero .item:first-child .item-main h3 a span,
#page-categories .items-list-wrap::before,
#page-tags .media-list-row::before,
#page-search .media-list-header h2::after,
#page-profile-media .profile-page-content .media-list-header h2::after,
#page-profile-media .profile-name-edit-wrapper h1,
.sc-parsha,
.pi-title {
  letter-spacing: 0 !important;
}

/* Frank Ruhl sets a touch smaller than Publico at the same size. */
.pc-title,
#page-home .media-list-row.safra-grid .item-main h3 a span,
#page-profile-media .profile-page-content .item-main h3 a span,
#page-search .video-item .item-main h3 a span,
.items-list .item .item-main h3 a span {
  font-size: 17.5px !important;
}

.parsha-rail.parsha-grid .pc-title {
  font-size: 18.5px !important;
}

#page-media .viewer-sidebar .item-main h3 span {
  font-size: 16px !important;
}

/* The designer's own cut: FrankRuhl Universal (Light 300, Strong 700),
   self-hosted. Replaces the Google Frank Ruhl Libre stand-in. */
@font-face {
  font-family: "FrankRuhl Universal";
  src: url("/media/brand/fonts/frankruhl-universal-light.woff2") format("woff2");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FrankRuhl Universal";
  src: url("/media/brand/fonts/frankruhl-universal-strong.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lv-font-display: "FrankRuhl Universal", "Frank Ruhl Libre", "Publico Banner Hebrew", "Noto Serif Hebrew", serif;
  --lv-font-brand: var(--lv-font-display);
}

/* Inscription over the hero's empty upper field. */
.hero-epigraph {
  position: absolute;
  top: 44px;
  right: 42%;
  left: 56px;
  z-index: 5;
  margin: 0;
  direction: rtl;
  text-align: right;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-display);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(34, 30, 25, 0.6);
  pointer-events: none;
}

.hero-epigraph span {
  display: block;
}

.hero-epigraph::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 18px 0 0 auto;
  background: linear-gradient(to left, #c4af88, transparent);
}

@media (max-width: 900px) {
  .hero-epigraph {
    top: 18px;
    right: 20px;
    left: 20px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-epigraph::after {
    width: 44px;
    margin-top: 10px;
  }
}

/* No blurb under the hero title; the title cluster sits higher. */
#page-home .media-list-row.safra-hero .item:first-child .item-main::after {
  content: none !important;
  display: none !important;
}

#page-home .media-list-row.safra-hero .item:first-child .item-main {
  bottom: 150px !important;
}

@media (max-width: 900px) {
  #page-home .media-list-row.safra-hero .item:first-child .item-main {
    bottom: 126px !important;
  }
}

@media (max-width: 900px) {
  .hero-epigraph span {
    display: inline;
  }
}

@media (max-width: 900px) {
  .hero-epigraph span + span::before {
    content: " ";
  }
}

/* Hero title higher still. */
#page-home .media-list-row.safra-hero .item:first-child .item-main {
  bottom: 245px !important;
}

@media (max-width: 900px) {
  #page-home .media-list-row.safra-hero .item:first-child .item-main {
    bottom: 150px !important;
  }
}

/* Inscription a size up. */
.hero-epigraph {
  right: 38%;
  font-size: clamp(24px, 1.95vw, 31px);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .hero-epigraph {
    font-size: 17.5px;
    line-height: 1.5;
  }
}

@media (max-width: 900px) {
  .hero-epigraph {
    right: 20px;
    left: 20px;
    font-size: 16.5px;
  }
}

/* Category pictures (from the admin panel): picture tiles under the hero,
   a blurb line under each shelf title, and category covers on the cards. */
.safra-tiles.safra-cats {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 15.5%, 200px);
  gap: 12px;
  min-height: 0;
  margin: 26px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  direction: rtl;
  scrollbar-width: none;
}
.safra-tiles.safra-cats .safra-tile.safra-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #312b24 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.08);
  transition: transform 180ms ease;
}
.safra-tiles.safra-cats .safra-tile.safra-cat:hover {
  transform: scale(1.03);
  background-color: #37312a;
  filter: none;
}
.safra-tiles.safra-cats .safra-tile.safra-cat:not(.safra-shimmer)::before { display: none; }
.safra-tiles.safra-cats .safra-tile.safra-cat.no-cover {
  background-image: linear-gradient(160deg, #4a4237, #2b2620);
}
.safra-tiles.safra-cats .safra-cat-name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, 0.82) 100%);
  color: #fffaf0;
  font-family: var(--lv-font-display);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.parsha-row-blurb {
  max-width: 62ch;
  margin: -8px 0 18px;
  color: var(--lv-muted-strong, #b9ad97);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  text-align: right;
}
.pc-thumb.pc-cover {
  background-size: cover !important;
  background-position: center !important;
}
@media (max-width: 900px) {
  .safra-tiles.safra-cats { grid-auto-columns: 44%; }
}
/* The plain chip row stays hidden on desktop (see above), but the category
   picture tiles are content, not navigation: show them at every width. */
@media (min-width: 901px) {
  .safra-tiles.safra-cats { display: grid !important; }
}

/* Rails: more room under the banner; edge fades and chevrons on anything
   that scrolls sideways (category tiles, shelf rails). */
.safra-tiles.safra-cats { margin-top: 48px !important; }
.safra-railwrap { position: relative; }
.safra-railwrap::before,
.safra-railwrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 84px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.safra-railwrap::before { left: 0; background: linear-gradient(90deg, var(--lv-bg, #2b2620) 8%, rgba(43, 38, 32, 0)); }
.safra-railwrap::after { right: 0; background: linear-gradient(270deg, var(--lv-bg, #2b2620) 8%, rgba(43, 38, 32, 0)); }
.safra-railwrap.at-end::before,
.safra-railwrap.at-start::after,
.safra-railwrap.no-scroll::before,
.safra-railwrap.no-scroll::after { opacity: 0; }
.safra-rail-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 0 4px;
  transform: translateY(-50%);
  border: 1px solid rgba(240, 228, 207, 0.22);
  border-radius: 50%;
  background: rgba(43, 38, 32, 0.9);
  color: var(--lv-gold, #d3b574);
  font-family: var(--lv-font-ui);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, opacity 180ms ease;
}
.safra-rail-btn:hover { background: rgba(64, 57, 47, 0.95); }
.safra-rail-btn.next { left: 10px; }
.safra-rail-btn.prev { right: 10px; }
/* ‹ › are mirrored characters: in the RTL page they flipped, so the right
   button pointed inward. LTR keeps each one pointing out, toward its edge. */
.safra-rail-btn { direction: ltr; unicode-bidi: isolate; }
.safra-railwrap.at-end .safra-rail-btn.next,
.safra-railwrap.at-start .safra-rail-btn.prev,
.safra-railwrap.no-scroll .safra-rail-btn { opacity: 0; pointer-events: none; }
.parsha-row .safra-railwrap .safra-rail-btn { top: 30%; }
@media (max-width: 900px) {
  .safra-rail-btn { display: none; }
  .safra-railwrap::before, .safra-railwrap::after { width: 40px; }
}

/* Category tiles take the same skeleton-then-release as the cards. */
.safra-tiles.safra-cats .safra-tile.safra-cat.safra-shimmer::before {
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(#4a4237 0 0) right 12px bottom 12px / 46% 11px no-repeat,
    linear-gradient(115deg, #312b24 0%, #37312a 48%, #312b24 100%);
}

/* Epigraph between the category tiles and the shelves. */
.safra-quote {
  position: relative;
  max-width: 58ch;
  margin: 112px auto 48px;
  padding: 0 44px;
  direction: rtl;
  text-align: center;
}
.safra-quote p {
  margin: 0;
  color: var(--lv-muted-strong, #f0e4cf);
  font-family: var(--lv-font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: 500;
  line-height: 1.7;
}
.safra-quote::before,
.safra-quote::after {
  position: absolute;
  top: -0.35em;
  color: var(--lv-gold, #f0e4cf);
  font-family: var(--lv-font-display);
  font-size: 3.2rem;
  line-height: 1;
  opacity: 0.55;
}
.safra-quote::before { content: "\201D"; right: 0; }
.safra-quote::after { content: "\201C"; left: 0; top: auto; bottom: -0.55em; }
@media (max-width: 900px) {
  .safra-quote { margin: 64px auto 24px; padding: 0 28px; }
  .safra-quote::before, .safra-quote::after { font-size: 2.4rem; }
}

/* Category browser on /search?q=<category>/... — same tree as the panel. */
#page-search.safra-browsing .search-results-wrap { display: none !important; }
/* While landau.js works out whether this "search" is really a category, keep
   the raw result list out of sight (no flash of a search page). */
html.safra-browse-wait #page-search .search-results-wrap { visibility: hidden; }
.sb-skel .sk { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(240,228,207,.06) 0%, rgba(240,228,207,.13) 50%, rgba(240,228,207,.06) 100%); background-size: 200% 100%; animation: sb-skel-shine 1.2s ease-in-out infinite; }
.sb-skel .sk-crumb { width: 180px; height: 14px; margin-bottom: 18px; }
.sb-skel .sk-banner { width: 100%; height: clamp(150px, 22vw, 260px); border-radius: 12px; margin: 0 0 26px; }
.sb-skel .sb-row { pointer-events: none; }
.sb-skel .sk-ic { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.sb-skel .sk-name { width: 140px; height: 18px; }
.sb-skel .sk-count { width: 60px; height: 12px; margin-inline-start: auto; }
@keyframes sb-skel-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sb-skel .sk { animation: none; } }
.safra-browse { direction: rtl; max-width: var(--lv-content, 1480px); margin: 8px auto 80px; padding: 16px 56px 0; box-sizing: border-box; }
@media (max-width: 900px) { .safra-browse { padding: 8px 16px 0; } }
.sb-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--lv-font-ui); font-size: 14px; color: var(--lv-muted, #c4af88); }
.sb-crumb a { color: var(--lv-muted-strong, #f0e4cf); text-decoration: none !important; }
.sb-crumb a:hover { color: var(--lv-gold, #f0e4cf); }
.sb-crumb .sb-cur { color: var(--lv-text); }
.sb-crumb .sb-sep { opacity: .55; }
.sb-head { display: flex; align-items: center; gap: 22px; margin: 14px 0 26px; }
.sb-cover { flex: 0 0 auto; width: clamp(160px, 18vw, 250px); aspect-ratio: 16 / 9; border-radius: 6px; background: #312b24 center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.08); }
.sb-title { margin: 0; color: var(--lv-text); font-family: var(--lv-font-display); font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.sb-blurb { max-width: 60ch; margin: 8px 0 0; color: var(--lv-muted-strong, #f0e4cf); font-family: var(--lv-font-ui); font-size: 15px; font-style: italic; line-height: 1.5; }
.sb-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(240, 228, 207, 0.12); }
.sb-row { display: flex; align-items: center; gap: 16px; padding: 16px 10px; border-bottom: 1px solid rgba(240, 228, 207, 0.12); color: var(--lv-text) !important; text-decoration: none !important; transition: background 150ms ease; }
.sb-row:hover { background: rgba(240, 228, 207, 0.05); }
.sb-ic { width: 18px; height: 18px; flex: none; fill: var(--lv-muted, #c4af88); }
.sb-row:hover .sb-ic { fill: var(--lv-gold, #f0e4cf); }
.sb-name { flex: 1; min-width: 0; font-family: var(--lv-font-display); font-size: 1.2rem; font-weight: 600; }
.sb-count { font-family: var(--lv-font-ui); font-size: 13px; color: var(--lv-muted, #c4af88); white-space: nowrap; }
.sb-chev { font-size: 22px; line-height: 1; color: var(--lv-muted, #c4af88); }
.sb-section { margin: 30px 0 12px; font-family: var(--lv-font-ui); font-size: 14px; color: var(--lv-muted, #c4af88); }
.sb-grid { margin-top: 18px; }
.sb-year { display: block; padding: 0 14px 12px; color: var(--lv-muted, #c4af88); font-family: var(--lv-font-ui); font-size: 13px; }
.sb-empty { margin: 26px 0; color: var(--lv-muted, #c4af88); font-family: var(--lv-font-ui); }
@media (max-width: 900px) {
  .sb-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sb-cover { width: 100%; }
}
/* Empty category: the structure stays visible, dimmed, with a note. */
.sb-row.is-empty { opacity: .45; cursor: default; }
.sb-row.is-empty:hover { background: transparent; }
.sb-row.is-empty:hover .sb-ic { fill: var(--lv-muted, #c4af88); }
.sb-note { margin: 26px 0 0; color: var(--lv-muted-strong, #f0e4cf); font-family: var(--lv-font-ui); font-size: 15px; font-style: italic; }
/* Phones: the picture strip stays inside the page (the generic full-bleed
   rule pushed its first tile off the edge); fades only where more hides. */
@media (max-width: 900px) {
  .safra-tiles.safra-cats {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .safra-railwrap::before, .safra-railwrap::after { width: 56px; }
}

/* /categories: the panel's categories as picture cards (replaces the
   placeholder once the feed has answered). */
#page-categories.safra-cats-ready .items-list-wrap { display: none !important; }
.safra-catgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
  direction: rtl;
}
.safra-catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #312b24 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 207, 0.08);
  text-decoration: none !important;
  transition: transform 180ms ease;
}
.safra-catcard:hover { transform: scale(1.02); }
.safra-catcard.no-cover { background-image: linear-gradient(160deg, #4a4237, #2b2620); }
.safra-catcard-name, .safra-catcard-count {
  position: relative;
  z-index: 1;
  padding: 0 14px;
  text-align: right;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.safra-catcard-name {
  color: #fffaf0;
  font-family: var(--lv-font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.safra-catcard-count {
  padding-bottom: 12px;
  color: var(--lv-muted-strong, #f0e4cf);
  font-family: var(--lv-font-ui);
  font-size: 13px;
}
.safra-catcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0) 45%, rgba(10, 9, 8, 0.85) 100%);
}
.safra-catcard-name { padding-top: 40px; }
.safra-catcard:not(:has(.safra-catcard-count)) .safra-catcard-name { padding-bottom: 12px; }
@media (max-width: 900px) { .safra-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* /featured: the carousel videos, from the panel. */
#page-featured.safra-feat-ready .items-list-wrap,
#page-featured.safra-feat-ready .items-list-outer { display: none !important; }
#page-featured .safra-featgrid { margin-top: 26px; direction: rtl; }
#page-featured .safra-featgrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 40px 28px !important;
  margin-top: 34px !important;
}
#page-featured .safra-featgrid .parsha-card { display: block !important; width: auto !important; max-width: none !important; }
#page-featured .safra-featgrid .pc-thumb { display: block !important; width: 100% !important; aspect-ratio: 16 / 9; }
#page-featured .safra-featgrid .pc-title, #page-featured .safra-featgrid .pc-meta { display: block !important; }
@media (max-width: 900px) { #page-featured .safra-featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }

/* Quiet motion. Cards fade up a touch as their shelf scrolls in (once, with
   a small stagger); on hover the cover's arch drifts and swells a little. */
.parsha-card.safra-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.parsha-card.safra-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 560ms ease, transform 180ms ease;
  transition-delay: 0ms;
}
.parsha-card .sc-arch { transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 900ms ease; will-change: transform; }
.parsha-card:hover .sc-arch { transform: translate(2%, -3%) scale(1.06); opacity: 0.17; }
.parsha-card .sc-mark { transition: transform 700ms ease; }
.parsha-card:hover .sc-mark { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .parsha-card.safra-reveal { opacity: 1; transform: none; transition: none; }
  .parsha-card .sc-arch, .parsha-card .sc-mark { transition: none; }
  .parsha-card:hover .sc-arch, .parsha-card:hover .sc-mark { transform: none; }
}

/* Our own card grids (category browser leaf, featured page): plain wrapping
   grids of the standard cards — not Codex's row-list `.parsha-grid`. */
.sb-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 40px 28px !important;
  margin-top: 26px;
  direction: rtl;
  overflow: visible !important;
}
.sb-grid .parsha-card {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}
.sb-grid .pc-thumb { display: block !important; width: 100% !important; aspect-ratio: 16 / 9; }
.sb-grid .pc-title, .sb-grid .pc-meta { display: block !important; }
@media (max-width: 1200px) { .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 10px !important; } }

/* Search field: no divider line between the field and the button. */
.search-field-wrap input[type=text] { border-right-width: 0 !important; }
.search-field-wrap button[type=submit] { border-left-width: 0 !important; box-shadow: none !important; }
/* …and none while typing either: no focus outline/ring on the field. */
.search-field-wrap input[type=text]:focus,
.search-field-wrap input[type=text]:focus-visible,
.search-field-wrap input[type=text]:active {
  outline: none !important;
  box-shadow: none !important;
  border-right-width: 0 !important;
}
.search-field-wrap form:focus-within button[type=submit],
.search-field-wrap button[type=submit]:focus,
.search-field-wrap button[type=submit]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-left-width: 0 !important;
}

/* Profile page: banner, tabs and the video grid share one container. */
#page-profile-media .profile-page-header,
#page-profile-media .profile-page-content {
  width: min(100%, var(--lv-content)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}
#page-profile-media .profile-page-header { padding-top: 24px !important; }
#page-profile-media .profile-page-content .media-list-wrapper,
#page-profile-media .profile-page-content .media-list-row,
#page-profile-media .profile-page-content .items-list-outer,
#page-profile-media .profile-page-content .items-list-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#page-profile-media .profile-page-content .items-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) { #page-profile-media .profile-page-content .items-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) {
  #page-profile-media .profile-page-header, #page-profile-media .profile-page-content { padding-left: 16px !important; padding-right: 16px !important; }
  #page-profile-media .profile-page-content .items-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#page-profile-media .profile-banner-wrap,
#page-profile-media .profile-info-nav-wrap,
#page-profile-media .profile-info,
#page-profile-media .profile-nav,
#page-profile-media .profile-nav-inner {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#page-profile-media .profile-page-content .items-list,
#page-profile-media .profile-page-content .media-list-header,
#page-profile-media .profile-page-content .items-list-ver {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Same 56px gutters as the home page, for banner, tabs and grid alike. */
#page-profile-media .page-main .profile-page-header,
#page-profile-media .page-main .profile-page-content {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
#page-profile-media .page-main .profile-page-content .items-list-ver.media-list-wrapper,
#page-profile-media .page-main .profile-page-content .media-list-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 900px) {
  #page-profile-media .page-main .profile-page-header,
  #page-profile-media .page-main .profile-page-content { padding-left: 16px !important; padding-right: 16px !important; }
}
#page-profile-media .page-main .profile-page-content .media-list-row,
#page-profile-media .page-main .profile-page-content .items-list-outer,
#page-profile-media .page-main .profile-page-content .items-list-wrap,
#page-profile-media .page-main .profile-page-content .items-list,
#page-profile-media .page-main .profile-page-content .media-list-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
/* Codex's `.page-main:not(#page-profile-media)` exclusion never matches (the
   id is on the parent), and its four-id weight wins; meet it at equal weight. */
#page-profile-media .page-main:not(#page-home):not(#page-media):not(#page-search) .profile-page-content .media-list-wrapper {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* =====================================================================
   Pass 13 / Round 2 (2026-10-15): lighter ground with a real gold accent,
   five muted hues for tiles and folders, נגינה + גליונות in the navigation,
   the gilyonos library, per-video cover pictures and captions.
   ===================================================================== */
:root {
  --lv-hue-0: #3e6b6a; /* petrol */
  --lv-hue-1: #7a4a55; /* wine */
  --lv-hue-2: #6b6a3e; /* olive */
  --lv-hue-3: #45507a; /* indigo */
  --lv-hue-4: #8a5a3a; /* copper */
  --lv-paper: #efe6d3;
}
.hue-0 { --hue: var(--lv-hue-0); }
.hue-1 { --hue: var(--lv-hue-1); }
.hue-2 { --hue: var(--lv-hue-2); }
.hue-3 { --hue: var(--lv-hue-3); }
.hue-4 { --hue: var(--lv-hue-4); }

/* Navigation: נגינה and גליונות replace Recommended / Latest / Tags (the
   routes still answer; they are just no longer offered). */
body .page-sidebar .nav-menu .link-item.nav-item-recommended,
body .page-sidebar .nav-menu .link-item.nav-item-latest,
body .page-sidebar .nav-menu .link-item.nav-item-tags {
  display: none !important;
}
.nav-item-safra-negina > a > span:last-child::after { content: "נגינה"; }
.nav-item-safra-gilyonos > a > span:last-child::after { content: "גליונות"; }

/* Category tiles and cards: the name sits on a band of the tile's hue. */
.safra-tiles.safra-cats .safra-tile.safra-cat .safra-cat-name {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--hue, #2b2620) 78%, #0e0c0a) 78%);
}
.safra-tiles.safra-cats .safra-tile.safra-cat.no-cover,
.safra-catcard.no-cover {
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--hue, #574d3f) 88%, #fff), color-mix(in srgb, var(--hue, #574d3f) 55%, #1b1713)) !important;
}
.safra-catcard::before {
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--hue, #2b2620) 72%, #0e0c0a) 100%) !important;
}

/* Rail fades end on the page ground. */
.safra-railwrap::before { background: linear-gradient(90deg, var(--lv-canvas) 8%, transparent) !important; }
.safra-railwrap::after { background: linear-gradient(270deg, var(--lv-canvas) 8%, transparent) !important; }

/* Cover pictures from the panel: the whole picture, no generated art. */
.pc-thumb.safra-art,
.item-thumb.safra-art {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
  background-color: var(--lv-surface) !important;
  isolation: isolate;
}
.art-fill,
.art-img {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}
.art-fill { inset: -16px; background-size: cover; background-position: center; filter: blur(16px) brightness(0.6) saturate(1.1); }
.art-img { inset: 0; background-size: contain; background-position: center; }
.item-thumb.safra-art img { opacity: 0 !important; }
.item-thumb.safra-art::before,
.item-thumb.safra-art::after { opacity: 0 !important; }

/* Hero: a slide with its own picture shows it where the portrait stands. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.has-art .hero-art { display: block; }
.ha-fill,
.ha-img {
  position: absolute;
  background-repeat: no-repeat;
}
.ha-fill {
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.1) brightness(0.55);
}
.ha-img {
  top: 7%;
  right: 3%;
  bottom: 14%;
  width: 33%;
  background-size: contain;
  background-position: right center;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 17, 14, 0.62) 0%, rgba(20, 17, 14, 0.25) 50%, transparent 62%);
}
@media (max-width: 900px) {
  #page-home .media-list-row.safra-hero .item:first-child .item-content.has-art .item-main {
    bottom: 72px !important;
  }
  .ha-img {
    top: 16px;
    right: 16px;
    left: 16px;
    bottom: 36%;
    width: auto;
    background-position: center top;
  }
  .hero-art::after { background: linear-gradient(180deg, transparent 45%, rgba(20, 17, 14, 0.82) 78%); }
  .has-art .hero-epigraph { opacity: 0; }
}
.hero-epigraph { transition: opacity 220ms ease; }

/* Audio-only items: a music-note pill where videos show their duration,
   and the generated covers take the indigo/wine pair. */
.sc-audio {
  position: absolute;
  bottom: 7%;
  left: 4%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 4px;
  background: rgba(34, 30, 25, 0.86);
  color: var(--lv-text);
  font-family: var(--lv-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.sc-audio .material-icons { color: var(--lv-gold-bright); font-size: 15px; line-height: 1; }
.pc-thumb.safra-art,
.item-thumb.safra-art { position: relative !important; }
.pc-thumb.safra-art > .sc-duration {
  position: absolute !important;
  bottom: 7% !important;
  left: 4% !important;
  z-index: 2;
}
.safra-cover.sc-music { --sc-a: #45507a; --sc-b: #241f2b; }
.safra-cover.sc-music.sc-v1 { --sc-a: #7a4a55; }
.safra-cover.sc-music.sc-v2 { --sc-a: #3e6b6a; }

/* Watch page, audio: our own player replaces the stock black box. */
#page-media.safra-audio-page .viewer-container .player-container { display: none !important; }
.safra-player {
  overflow: hidden;
  border-radius: 12px;
  background: var(--lv-surface);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.06);
  direction: ltr;
}
.sp-stage {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  cursor: pointer;
}
.sp-fill {
  position: absolute;
  inset: -40px;
  background: center / cover no-repeat;
  filter: blur(38px) saturate(1.15) brightness(0.5);
}
.sp-stage:not(.has-picture) .sp-fill {
  inset: 0;
  filter: none;
  background: radial-gradient(90% 120% at 50% 30%, #45507a 0%, #2c2f45 45%, #1d1b22 100%);
}
.sp-art {
  position: absolute;
  top: 9%;
  bottom: 9%;
  left: 50%;
  aspect-ratio: 1 / 1;
  max-width: 86%;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 10px;
  background: center / contain no-repeat;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sp-stage.has-picture .sp-art { box-shadow: none; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45)); }
.safra-player.is-playing .sp-art { transform: translateX(-50%) scale(1.02); }
.sp-tag {
  position: absolute;
  top: 16px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.55);
  color: var(--lv-text);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-weight: 700;
  direction: rtl;
}
.sp-tag .material-icons { color: var(--lv-gold-bright); font-size: 17px; }
.sp-controls { padding: 16px 22px 18px; }
.sp-seekrow { display: flex; align-items: center; gap: 14px; }
.sp-time {
  min-width: 3.2em;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-tot { text-align: right; }
.sp-seek {
  --p: 0%;
  flex: 1;
  height: 5px;
  margin: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lv-gold) var(--p), rgba(255, 250, 240, 0.18) var(--p)) !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sp-seek::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.sp-art .sc-audio { display: none; }
.sp-seek::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255, 250, 240, 0.16); }
.sp-seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--lv-gold); }
.sp-seek::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--lv-gold-bright);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  -webkit-appearance: none;
  appearance: none;
}
.sp-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--lv-gold-bright); }
.sp-seek:focus-visible { outline: none !important; }
.sp-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(242, 202, 80, 0.35); }
.sp-buttons { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 8px; }
.sp-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lv-muted-strong);
  cursor: pointer;
}
.sp-btn .material-icons { font-size: 28px; line-height: 1; }
.sp-btn:hover { color: var(--lv-text); background: rgba(255, 250, 240, 0.06); }
.sp-play { width: 60px; height: 60px; background: var(--lv-gold); color: #221e19; }
.sp-play .material-icons { font-size: 36px; }
.sp-play:hover { background: var(--lv-gold-bright); color: #221e19; }
.sp-btn:focus-visible { outline: 2px solid var(--lv-gold-bright) !important; outline-offset: 3px !important; }
@media (max-width: 900px) {
  .safra-player { border-radius: 0; }
  .sp-stage { aspect-ratio: 1 / 0.86; }
  .sp-controls { padding: 14px 16px 16px; }
  .sp-buttons { gap: 28px; }
}
#page-media .media-actions .download a > span:last-child { font-size: 0 !important; }
#page-media .media-actions .download a > span:last-child::after { content: "אראפלאדן"; font-size: 12px; }

/* Category header: the picture is a banner behind the title, the blurb
   and the count, not a small tile beside a lonely title. */
.sb-head.has-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  min-height: clamp(190px, 22vw, 300px);
  margin: 16px 0 30px;
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}
.sb-head.has-cover .sb-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.sb-head.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(270deg, rgba(25, 21, 17, 0.9) 0%, rgba(25, 21, 17, 0.6) 45%, rgba(25, 21, 17, 0.15) 100%),
    linear-gradient(0deg, rgba(25, 21, 17, 0.7), transparent 60%);
}
.sb-head.has-cover .sb-title { font-size: clamp(2rem, 3.4vw, 3rem); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
.sb-head.has-cover .sb-blurb { color: var(--lv-muted-strong); }
.sb-count-line {
  margin: 8px 0 0;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.sb-head:not(.has-cover) .sb-count-line { color: var(--lv-muted); }
@media (max-width: 900px) {
  .sb-head.has-cover { min-height: 180px; padding: 18px; }
  .sb-head.has-cover::before { background: linear-gradient(0deg, rgba(25, 21, 17, 0.92) 0%, rgba(25, 21, 17, 0.5) 60%, rgba(25, 21, 17, 0.2) 100%); }
}
.sb-grid .pc-meta.safra-meta { display: flex !important; padding: 2px 2px 0; }

/* Gilyonos: folders are booklet stacks on a tinted ground. */
.gil-folder {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--lv-text) !important;
  text-decoration: none !important;
  direction: rtl;
}
.gf-stack {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--hue, #574d3f) 100%, #fff 10%) 0%, var(--hue, #574d3f) 46%, color-mix(in srgb, var(--hue, #574d3f) 52%, #15120f) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.07);
}
.gf-cover,
.gf-sheet {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  aspect-ratio: 210 / 297;
  border-radius: 3px;
  background: var(--lv-paper);
  transform-origin: 50% 100%;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gf-sheet { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
.gf-s2 { transform: translateX(-50%) translateX(-26%) rotate(-8deg); opacity: 0.55; }
.gf-s1 { transform: translateX(-50%) translateX(22%) rotate(6deg); opacity: 0.78; }
.gf-cover {
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.gf-img,
.gb-img,
.gs-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.gf-cover.no-img,
.gb-cover.no-img,
.gs-cover.no-img {
  background: var(--lv-paper) url("/media/brand/safra_mark.png") center / 44% no-repeat;
}
.gf-cover::after,
.gb-cover::after {
  /* Hebrew booklets bind on the right: a faint spine shadow there. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent 7%);
  pointer-events: none;
}
.gil-folder:hover .gf-cover { transform: translateX(-50%) translateY(-6px); }
.gil-folder:hover .gf-s2 { transform: translateX(-50%) translateX(-34%) rotate(-11deg); }
.gil-folder:hover .gf-s1 { transform: translateX(-50%) translateX(30%) rotate(9deg); }
.gf-name {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  font-family: var(--lv-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gf-count {
  margin-top: 3px;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.gil-folder:hover .gf-name { color: var(--lv-gold-bright); }
.gil-folder.is-empty { opacity: 0.5; cursor: default; }
.gil-folder.is-empty:hover .gf-name { color: inherit; }
.gil-folder.is-empty:hover .gf-cover { transform: translateX(-50%); }

/* Library page */
.gil-head { margin: 14px 0 30px; }
.gil-head .sb-title { text-wrap: balance; }
.gil-sub {
  margin: 6px 0 0;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.gil-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 30px 24px;
}
.gil-section {
  margin: 52px 0 22px;
  padding-bottom: 12px;
  background: linear-gradient(to left, rgba(196, 175, 136, 0.8), rgba(196, 175, 136, 0.18)) right bottom / 100% 1px no-repeat;
  color: var(--lv-text);
  font-family: var(--lv-font-display);
  font-size: 1.45rem;
  font-weight: 600;
}
.gil-books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 34px 26px;
}
.gil-book {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--lv-text) !important;
  text-decoration: none !important;
}
.gb-cover {
  position: relative;
  display: block;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: 4px;
  background: var(--lv-paper);
  outline: 1px solid rgba(255, 250, 240, 0.1);
  outline-offset: -1px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 200ms ease;
}
.gil-book:hover .gb-cover { transform: translateY(-4px); }
.gil-book:hover .gb-title { color: var(--lv-gold-bright); }
.gb-title {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  font-family: var(--lv-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gb-meta {
  margin-top: 3px;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#page-search.safra-gil .page-main > :not(.safra-browse) { display: none !important; }
@media (max-width: 900px) {
  .gil-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .gil-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .gf-name { font-size: 1.1rem; }
  .gil-section { margin-top: 40px; }
}

/* Booklet shelves (home and the library): narrow portrait covers, six to a row. */
.parsha-row.safra-gil-row .parsha-rail.gil-rail {
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 120px) / 6) !important;
  gap: 24px !important;
  padding-top: 6px;
  padding-bottom: 10px;
}
@media (min-width: 901px) and (max-width: 1279px) {
  .parsha-row.safra-gil-row .parsha-rail.gil-rail { grid-auto-columns: calc((100% - 96px) / 5) !important; }
}
@media (max-width: 900px) {
  .parsha-row.safra-gil-row .parsha-rail.gil-rail { grid-auto-columns: 38vw !important; gap: 14px !important; }
}
.gb-path {
  margin-top: 3px;
  overflow: hidden;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gil-browse .parsha-row.safra-gil-row { margin: 0 0 40px; }
.gil-browse .parsha-row.safra-gil-row .safra-more { margin-top: 14px; }

/* Booklet sheet: a centred card on desktop, a bottom sheet on phones. */
html.gil-sheet-open,
html.gil-sheet-open body { overflow: hidden !important; }
.gil-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  direction: rtl;
}
.gs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 14, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.gs-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  width: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 32px;
  border-radius: 16px;
  background: var(--lv-surface);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.07), 0 30px 80px rgba(0, 0, 0, 0.45);
  color: var(--lv-text);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gil-sheet.is-open .gs-backdrop { opacity: 1; }
.gil-sheet.is-open .gs-panel { opacity: 1; transform: none; }
.gs-close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.06);
  color: var(--lv-muted-strong);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.gs-close:hover { background: rgba(255, 250, 240, 0.12); color: var(--lv-text); }
.gs-cover {
  position: relative;
  display: block;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: 5px;
  background: var(--lv-paper);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.gs-body { min-width: 0; text-align: right; }
.gs-path {
  margin: 0 0 8px;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 14px;
}
.gs-title {
  margin: 0;
  color: var(--lv-text);
  font-family: var(--lv-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.gs-meta {
  margin: 10px 0 0;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.gs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--lv-font-ui) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.gs-ic { display: inline-flex; }
.gs-ic .material-icons { font-size: 21px; line-height: 1; }
.gs-read { background: var(--lv-gold); color: #221e19 !important; }
.gs-read:hover { background: var(--lv-gold-bright); }
.gs-dl {
  border-color: color-mix(in srgb, var(--lv-gold) 70%, transparent);
  background: rgba(226, 184, 79, 0.08);
  color: var(--lv-gold-bright) !important;
}
.gs-dl:hover { background: rgba(226, 184, 79, 0.16); }
.gs-dl[aria-busy] { cursor: progress; }
.gs-share { background: transparent; color: var(--lv-muted-strong) !important; padding: 0 12px; }
.gs-share:hover { color: var(--lv-text) !important; background: rgba(255, 250, 240, 0.06); }
.gs-btn:focus-visible { outline: 2px solid var(--lv-gold-bright) !important; outline-offset: 2px !important; }
@media (max-width: 640px) {
  .gil-sheet { place-items: end stretch; padding: 0; }
  .gs-panel {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px 16px;
    align-items: start;
    width: 100%;
    max-height: 90dvh;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    transform: translateY(40px);
  }
  .gs-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: rgba(255, 250, 240, 0.18);
  }
  .gs-close { top: 10px; left: 8px; }
  .gs-body { display: contents; }
  .gs-cover { grid-column: 1; grid-row: 1 / span 3; }
  .gs-path, .gs-title, .gs-meta { grid-column: 2; margin: 0; padding-left: 40px; }
  .gs-path { align-self: end; padding-top: 14px; }
  .gs-title { font-size: 1.35rem; }
  .gs-meta { align-self: start; font-size: 15px; }
  .gs-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; }
  .gs-btn { min-height: 50px; font-size: 17px; }
  .gs-share { grid-column: 1 / -1; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-panel, .gs-backdrop, .gf-cover, .gf-sheet, .gb-cover { transition: none; }
}

/* Watch page: the caption under the title, line breaks as written. */
.safra-caption {
  max-width: 68ch;
  margin: 10px 0 4px;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  text-align: right;
  white-space: pre-line;
  text-wrap: pretty;
}
.video-js.safra-has-art .vjs-poster img { object-fit: contain; background: var(--lv-ink); }

/* Header logo (2026-10-15): the gold arch, book and quill with its own
   "ספרא" lettering, shown alone. Trimmed 2x web copies in brand/. */
.logo a::after {
  background-image: url("/media/brand/safra_logo_gold.png") !important;
  background-image: image-set(url("/media/brand/safra_logo_gold.webp") type("image/webp"), url("/media/brand/safra_logo_gold.png") type("image/png")) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
@media (min-width: 901px) {
  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 52px !important;
    height: 56px !important;
  }
}
@media (max-width: 900px) {
  .logo,
  .logo a,
  .logo a > span,
  .logo a::after {
    width: 46px !important;
    height: 50px !important;
  }
  .logo { top: 8px; }
}
/* Channel avatars (watch page author line, profile) carry the gold logo too. */
#page-media .author-banner-thumb span,
#page-media .comments-form .circle-icon-button.thumbnail,
#page-profile-media .profile-info-inner > div:first-child,
#page-profile-media .profile-info-thumb span,
#page-profile-media .profile-info-thumb img + span {
  background-image: url("/media/brand/safra_logo_gold.png") !important;
  background-size: auto 78% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: var(--lv-surface) !important;
}

/* Home sections (spec F): one head pattern for every content type - gold
   icon + title on the right, "all" on the left - with more air between
   sections than between the shelves inside one. */
#page-home .safra-section {
  margin-top: clamp(72px, 7.5vw, 112px);
  direction: rtl;
}
#page-home .safra-shelves { margin-top: clamp(40px, 4vw, 64px); direction: rtl; }
#page-home .safra-shelves > .parsha-row:first-child { margin-top: 0; }
#page-home .ss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(196, 175, 136, 0.38);
}
#page-home .ss-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--lv-text);
  font-family: var(--lv-font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
}
#page-home .ss-icon {
  color: var(--lv-gold);
  font-size: 0.82em;
  line-height: 1;
}
#page-home .ss-all {
  flex: none;
  color: var(--lv-gold-bright) !important;
  font-family: var(--lv-font-ui);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
}
#page-home .ss-all:hover { color: var(--lv-text) !important; }
/* Shelves inside a section: a quieter sub-head, no second rule. */
#page-home .safra-section .parsha-row { margin: 40px 0 0; }
#page-home .safra-section > .ss-head + .parsha-row,
#page-home .safra-section > .ss-head + .safra-railwrap { margin-top: 0 !important; }
#page-home .safra-section .parsha-row-head {
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
  background: none !important;
  font-size: clamp(19px, 1.35vw, 22px) !important;
}
#page-home .safra-section .safra-tiles.safra-cats { margin-top: 0 !important; }
#page-home .safra-section .parsha-row-blurb { margin-top: -4px; }
/* Shapes per type: videos 16:9, gilyonos upright booklets, נגינה square. */
#page-home .parsha-rail.negina-rail {
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 100px) / 6) !important;
  gap: 20px !important;
}
#page-home .negina-rail .pc-thumb { aspect-ratio: 1 / 1 !important; }
#page-home .parsha-rail.gil-series {
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 96px) / 5) !important;
  gap: 24px !important;
  padding-bottom: 6px;
}
@media (min-width: 901px) and (max-width: 1279px) {
  #page-home .parsha-rail.negina-rail { grid-auto-columns: calc((100% - 80px) / 5) !important; }
  #page-home .parsha-rail.gil-series { grid-auto-columns: calc((100% - 72px) / 4) !important; }
}
@media (max-width: 900px) {
  #page-home .ss-head { margin-bottom: 18px; padding-bottom: 12px; }
  #page-home .ss-title { font-size: 1.65rem; gap: 10px; }
  #page-home .safra-section .parsha-row { margin-top: 30px; }
  #page-home .parsha-rail.negina-rail { grid-auto-columns: 42vw !important; gap: 14px !important; }
  #page-home .parsha-rail.gil-series { grid-auto-columns: 60vw !important; gap: 14px !important; }
}

/* Carousel slides for a booklet (kind "gilyon") or an audio niggun: the
   booklet's path under the title and a labelled action. Video slides keep
   the round arrow. */
#page-home .safra-hero .hero-sub {
  order: 2;
  display: none;
  margin: 10px 0 0;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 17px;
  text-align: right;
}
#page-home .media-list-row.safra-hero .item:first-child .item-main .hero-cta {
  order: 3;
  display: none;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 18px 0 0 auto;
  padding: 0 14px 0 20px;
  min-height: 46px;
  border-radius: 999px;
  background: var(--lv-gold) !important;
  color: #221e19 !important;
  font-family: var(--lv-font-ui);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none !important;
  pointer-events: auto;
}
/* Booklet and audio slides: the same text slot as a video slide, set lower
   so title, path and button never reach the inscription above. */
#page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main,
#page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="audio"] .item-main {
  top: auto !important;
  bottom: 96px !important;
}
#page-home .safra-hero .hero-cta .material-icons { font-size: 22px; }
#page-home .media-list-row.safra-hero .item:first-child .item-main .hero-cta:hover { background: var(--lv-gold-bright) !important; }
#page-home .safra-hero .item-content[data-kind="gilyon"] .hero-sub:not(:empty) { display: block; }
#page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main .hero-cta,
#page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="audio"] .item-main .hero-cta { display: inline-flex; }
#page-home .safra-hero .item-content[data-kind="gilyon"] .item-thumb::after,
#page-home .safra-hero .item-content[data-kind="audio"] .item-thumb::after { opacity: 0 !important; }
#page-home .safra-hero .item-content[data-kind="gilyon"] .ha-img { filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.55)); }
#page-featured .safra-featbooks { margin-top: 8px; direction: rtl; }
@media (max-width: 900px) {
  #page-home .safra-hero .hero-sub { font-size: 15px; margin-top: 6px; }
  #page-home .media-list-row.safra-hero .item:first-child .item-main .hero-cta { margin-top: 12px; min-height: 44px; font-size: 16px; }
  /* Phones: a smaller upright booklet at the top, the text below it. */
  #page-home .safra-hero .item-content[data-kind="gilyon"] .ha-img,
  #page-home .safra-hero .item-content[data-kind="audio"] .ha-img { top: 18px; bottom: 50%; }
  #page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main,
  #page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="audio"] .item-main { top: auto !important; bottom: 52px !important; }
}

/* Booklet slide, side by side: the upright cover on the left over a blurred
   copy of itself; on the right (the reading start) path, title, page count
   and "read", centred top to bottom. The inscription steps aside. */
#page-home .safra-hero .item-content[data-kind="gilyon"] .hero-epigraph { opacity: 0 !important; }
#page-home .safra-hero .item-content[data-kind="gilyon"] .ha-img {
  top: 8%;
  bottom: 8%;
  left: 7%;
  right: auto;
  width: 34%;
  background-position: center;
}
#page-home .safra-hero .item-content[data-kind="gilyon"] .hero-art::after {
  background: linear-gradient(270deg, rgba(20, 17, 14, 0.72) 0%, rgba(20, 17, 14, 0.35) 45%, transparent 70%);
}
#page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main {
  top: 50% !important;
  bottom: auto !important;
  right: 7% !important;
  left: 48% !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%);
}
#page-home .safra-hero .item-content[data-kind="gilyon"] .hero-sub { order: 0; margin: 0 0 10px; color: var(--lv-gold-bright); }
#page-home .safra-hero .item-content[data-kind="gilyon"] .item-main h3 { order: 1; }
#page-home .safra-hero .hero-meta {
  order: 2;
  display: none;
  margin: 8px 0 0;
  color: var(--lv-muted-strong);
  font-family: var(--lv-font-ui);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#page-home .safra-hero .item-content[data-kind="gilyon"] .hero-meta:not(:empty) { display: block; }
@media (max-width: 900px) {
  #page-home .safra-hero .item-content[data-kind="gilyon"] .ha-img {
    top: 50%;
    bottom: auto;
    left: 16px;
    width: 40%;
    height: auto;
    aspect-ratio: 210 / 297;
    transform: translateY(-58%);
  }
  #page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main {
    top: 50% !important;
    bottom: auto !important;
    right: 16px !important;
    left: calc(40% + 30px) !important;
    transform: translateY(-58%);
  }
  #page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main h3 a,
  #page-home .media-list-row.safra-hero .item:first-child .item-content[data-kind="gilyon"] .item-main h3 a span {
    font-size: 1.7rem !important;
  }
  #page-home .safra-hero .item-content[data-kind="gilyon"] .hero-sub { font-size: 14px; margin-bottom: 6px; }
  #page-home .safra-hero .item-content[data-kind="gilyon"] .hero-meta { font-size: 14px; }
}

/* Same-title neighbours (a video shelf and a gilyonos shelf for one parsha)
   share one heading; each row gets a small label instead of its own title. */
.shelf-group > .parsha-row { margin: 18px 0 0 !important; }
.shelf-group > .parsha-row-head + .parsha-row { margin-top: 4px !important; }
.parsha-row-head.sub-head {
  display: block !important;
  width: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  color: var(--lv-muted) !important;
  font-family: var(--lv-font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}
.parsha-row-head.sub-head:hover { color: var(--lv-gold-bright) !important; }

/* Navigation (2026-10-15), in the home page's order: היים · אויסגעקליבן · דברות קודש · גליונות · נגינה.
   The stock Featured and Categories items give way to the skin's own, so the
   order is ours; "דברות קודש" is the categories page. */
body .page-sidebar .nav-menu .link-item.nav-item-featured,
body .page-sidebar .nav-menu .link-item.nav-item-categories {
  display: none !important;
}
.nav-item-safra-dk > a > span:last-child::after { content: "דברות קודש"; }
.nav-item-safra-featured > a > span:last-child::after { content: "אויסגעקליבן"; }
#page-categories .media-list-header h2::after { content: "דברות קודש" !important; }

/* Home shelf titles ("פרשת נח") use the section head style ("דברות קודש"):
   same size, weight, colour, rule and spacing. On the left of the same line:
   "N שיעורים" and/or "אלע"; small sub-labels stay small. */
#page-home .safra-shelves > .parsha-row { margin-top: clamp(72px, 7.5vw, 112px); }
#page-home .safra-shelves > .parsha-row:first-child { margin-top: 0; }
#page-home .sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(196, 175, 136, 0.38);
}
#page-home .sh-head > .parsha-row-head {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: right;
}
#page-home .sh-head > .parsha-row-head > span:last-child {
  color: var(--lv-text) !important;
  font-family: var(--lv-font-display) !important;
  font-size: clamp(1.75rem, 2.5vw, 2.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
#page-home .sh-head .parsha-row-eyebrow { margin-bottom: 6px; }
#page-home .sh-side { display: flex; flex: none; align-items: center; gap: 18px; }
#page-home .sh-count {
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#page-home .sh-side .safra-more {
  margin: 0 !important;
  color: var(--lv-gold-bright) !important;
  font-size: 16px;
  font-weight: 700;
}
#page-home .shelf-group > .parsha-row:first-of-type { margin-top: 0 !important; }
@media (max-width: 900px) {
  #page-home .sh-head { margin-bottom: 18px; padding-bottom: 12px; }
  #page-home .sh-head > .parsha-row-head > span:last-child { font-size: 1.65rem !important; }
  #page-home .sh-count { font-size: 14px; }
}

/* Search results: matching gilyonos above the media results. */
#page-search .safra-search-gil {
  direction: rtl;
  width: min(100%, var(--lv-content, 1440px));
  margin: 8px auto 40px;
  padding: 0 56px;
  box-sizing: border-box;
}
#page-search .safra-search-gil .gil-section { margin-top: 18px; }
@media (max-width: 900px) { #page-search .safra-search-gil { padding: 0 16px; } }

/* Meta line separators keep their spacing in our own grids too. */
.sb-grid .safra-meta .sm-sep,
.safra-featgrid .safra-meta .sm-sep { margin: 0 6px; }

/* No comments on the site: hide MediaCMS's comment list and form on every
   media page (the per-video enable_comments flag doesn't stick). */
#page-media .comments-list,
#page-media .comments-form,
.comments-list,
.comments-form {
  display: none !important;
}

/* Video page: below the title keep only the share button and our caption.
   No likes, downloads, "more" menu, channel box or the panel's tag line. */
#page-media .media-actions .like,
#page-media .media-actions .video-downloads,
#page-media .media-actions .more-options,
#page-media .media-author-banner,
#page-media .media-content-description {
  display: none !important;
}

/* The side list spans both grid rows; let it take the extra height in the
   second row so the player's row hugs the video (no gap above the title). */
#page-media .viewer-section {
  grid-template-rows: auto 1fr !important;
}
#page-media .viewer-container,
#page-media .viewer-info {
  align-self: start !important;
}
/* With the description hidden its banner is empty: drop it and the rule
   under the title so no stray lines are left. */
#page-media .media-info-content {
  display: none !important;
}
#page-media .media-title-banner {
  border-bottom: 0 !important;
}
/* Title (and our caption) start on the right, above the share button. */
#page-media .media-title-banner {
  text-align: right !important;
}
#page-media .media-title-banner h1,
#page-media .safra-caption {
  direction: rtl;
  text-align: right !important;
}
#page-media .safra-caption {
  margin-left: auto !important;
}

/* The hero's upper field carries the site title, not a quote. */
.hero-epigraph.hero-site-title {
  color: var(--lv-gold);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

/* No view counts anywhere (MediaCMS's own counters included). */
.item-views,
#page-media .media-views {
  display: none !important;
}

/* ---- autoplay: the "ווייטער" switch in the player, and the next-up card ---- */
.safra-ap { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; background: transparent; color: var(--lv-muted-strong, #f0e4cf); font-family: var(--lv-font-ui); font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; }
.safra-ap:hover { color: var(--lv-text, #fffaf0); }
.safra-ap-pill { position: relative; flex: none; width: 30px; height: 16px; border-radius: 999px; background: rgba(255, 250, 240, 0.32); direction: ltr; transition: background 160ms ease; }
.safra-ap-pill i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fffaf0; transition: transform 160ms ease; }
.safra-ap.is-on .safra-ap-pill { background: var(--lv-gold, #d9b25c); }
.safra-ap.is-on .safra-ap-pill i { transform: translateX(14px); }
.safra-ap:focus-visible { outline: 2px solid var(--lv-gold-bright, #f2ca50) !important; outline-offset: 2px !important; border-radius: 6px; }
/* inside video.js: a control of its own width, same height as the others */
.video-js .vjs-control-bar .safra-ap.vjs-control { width: auto; height: 100%; color: #fff; }
/* our audio player: at the end of the buttons row */
.sp-buttons { position: relative; }
.sp-buttons .safra-ap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); flex-direction: row-reverse; }
@media (max-width: 520px) { .sp-buttons .safra-ap .safra-ap-label { display: none; } }

.safra-next { position: absolute; right: 16px; bottom: 64px; z-index: 6; max-width: min(340px, calc(100% - 32px)); padding: 12px 14px; border: 1px solid rgba(240, 228, 207, 0.18); border-radius: 10px; background: rgba(24, 20, 16, 0.94); color: var(--lv-text, #fffaf0); font-family: var(--lv-font-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); cursor: default; text-align: right; }
.sp-stage .safra-next { bottom: 16px; }
.safra-next .sn-k { display: block; color: var(--lv-gold, #d9b25c); font-size: 12px; margin-bottom: 4px; }
.safra-next .sn-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--lv-font-display); font-size: 16px; font-weight: 600; line-height: 1.3; }
.safra-next .sn-row { display: flex; gap: 8px; margin-top: 10px; }
.safra-next button { padding: 7px 12px; border-radius: 999px; font-family: var(--lv-font-ui); font-size: 13px; cursor: pointer; }
.safra-next .sn-now { border: 0; background: var(--lv-gold, #d9b25c); color: #221e19; font-weight: 600; }
.safra-next .sn-stop { border: 1px solid rgba(240, 228, 207, 0.3); background: transparent; color: var(--lv-muted-strong, #f0e4cf); }

/* Home: the stock "Latest" list stays hidden while our shelves load (shown
   again only if building the page fails); a skeleton holds the shelves' place. */
#page-home .media-list-row.safra-wait { display: none !important; }
.safra-shelf-skel { max-width: var(--lv-content, 1480px); margin: 34px auto 0; padding: 0 56px; box-sizing: border-box; }
@media (max-width: 900px) { .safra-shelf-skel { padding: 0 16px; } }
.safra-shelf-skel .sk { border-radius: 8px; background: linear-gradient(90deg, rgba(240,228,207,.05) 0%, rgba(240,228,207,.11) 50%, rgba(240,228,207,.05) 100%); background-size: 200% 100%; animation: sb-skel-shine 1.2s ease-in-out infinite; }
.safra-shelf-skel .sk-head { width: 220px; height: 34px; margin: 0 0 22px auto; }
.safra-shelf-skel .sk-cards { display: flex; flex-direction: row-reverse; gap: 22px; overflow: hidden; }
.safra-shelf-skel .sk-card { flex: 0 0 calc((100% - 44px) / 3); aspect-ratio: 16 / 9; border-radius: 10px; }
@media (max-width: 900px) { .safra-shelf-skel .sk-card { flex-basis: 78%; } }