/* המדף — כביש אחד. נוקה אוטומטית (26/10/2026): נשארו רק כללים שחלים על הדף באחד המצבים. */
@font-face { font-family: SimplerPro; src: url("/wp-content/uploads/2022/08/SimplerPro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: SimplerPro; src: url("/wp-content/uploads/2022/08/SimplerPro-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: FrankG; src: url("/wp-content/uploads/2026/07/FrankG-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: FrankG; src: url("/wp-content/uploads/2026/07/FrankG-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: FrankG; src: url("/wp-content/uploads/2026/07/FrankG-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root { --bg: #212121; --ink: #fff; --ink-dim: rgba(255, 255, 255, .7); --yellow: #ffff50; --gray: #333; --red: #fd4032; --sans: "SimplerPro", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0px; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 18px; overflow: hidden; }
body { -webkit-font-smoothing: antialiased; }
#stage { z-index: 1; }
#stage { position: fixed; inset: 0px; width: 100%; height: 100%; display: block; touch-action: none; opacity: 0; transition: opacity 1s; }
body.is-ready #stage { opacity: 1; }
.top { position: fixed; inset: 0px 0px auto; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 3vw, 36px); z-index: 5; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.icon-btn { background: var(--gray); border: 0px; color: var(--ink); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background 0.2s; }
.icon-btn:hover { background: rgb(68, 68, 68); }
#sound[data-on="1"] .mute, #sound[data-on="0"] .wave { display: none; }
#tip { position: fixed; left: 0px; top: 0px; z-index: 4; pointer-events: none; background: var(--gray); color: var(--ink); padding: 8px 14px 9px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 24px; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
#tip::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; background: var(--gray); transform: translateX(-50%) rotate(45deg); }
.t-title { font-weight: 700; font-size: 18px; }
.t-meta { font-size: 15px; color: var(--ink-dim); }
#scrim { position: fixed; inset: 0px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.7s; }
body.has-book #scrim { opacity: 1; }
#panel { position: fixed; z-index: 6; top: 0px; bottom: 0px; right: clamp(20px, 5vw, 96px); width: min(500px, 40vw); display: flex; flex-direction: column; justify-content: center; opacity: 0; pointer-events: none; transform: translateX(-16px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
#panel.show { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.35s; }
#panel .p-scroll { max-height: 78vh; overflow-y: auto; padding: 8px 4px 40px 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; mask-image: linear-gradient(rgb(0, 0, 0) calc(100% - 50px), transparent); }
#panel #p-close { position: absolute; top: max(24px, 6vh); right: 0px; z-index: 1; }
.desc { margin-top: 18px; }
.desc p { margin: 0px 0px 0.9em; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.badge { display: inline-block; background: var(--yellow); color: var(--bg); font-size: 16px; font-weight: 700; padding: 2px 12px 3px; border-radius: 5px; margin-bottom: 14px; }
.author { margin: 8px 0px 0px; color: var(--ink-dim); font-size: 20px; }
.tag { margin: 24px 0px 0px; font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--ink); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
#hint { position: fixed; bottom: clamp(18px, 4vh, 36px); left: 0px; right: 0px; text-align: center; margin: 0px; font-size: 16px; color: var(--ink-dim); opacity: 0; transition: opacity 0.8s; pointer-events: none; z-index: 2; }
#hint.show { opacity: 1; }
body.has-book #hint, body.has-book #pan { opacity: 0 !important; }
#pan { position: fixed; bottom: clamp(52px, 8vh, 80px); left: 50%; width: 90px; height: 3px; margin-left: -45px; background: rgba(255, 255, 255, 0.18); border-radius: 3px; z-index: 2; opacity: 0; transition: opacity 0.5s; overflow: hidden; }
#pan span { position: absolute; top: 0px; bottom: 0px; width: 30px; background: var(--yellow); border-radius: 3px; }
#loader { position: fixed; inset: auto 0px 18vh; display: grid; place-items: center; z-index: 10; pointer-events: none; transition: opacity 0.8s; }
#loader span { width: 120px; height: 2px; background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; border-radius: 2px; }
#loader span::after { content: ""; position: absolute; inset: 0px; background: var(--yellow); transform: translateX(100%); animation: 1.2s ease-in-out 0s infinite normal none running load; }
@keyframes load { 
  100% { transform: translateX(-100%); }
}
body.is-ready #loader { opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
@media (max-aspect-ratio: 19 / 20) {
  #panel { inset: auto 0px 0px; width: auto; transform: translateY(30px); padding: 0px 20px; display: block; }
  #panel.show { transform: none; }
  #panel .p-scroll { max-height: 46vh; padding: 18px 0 calc(40px + env(safe-area-inset-bottom)); }
  #panel #p-close { top: 14px; right: auto; left: 16px; }
  .desc p { font-size: 17px; }
  .author { font-size: 17px; margin-top: 4px; }
  .tag { font-size: 18px; margin-top: 16px; padding-top: 14px; line-height: 1.4; }
  .badge { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01s !important; animation: auto ease 0s 1 normal none running none !important; }
}
.edge { position: fixed; top: 62%; z-index: 4; width: 52px; height: 52px; border-radius: 50%; border: 0px; background: rgb(255, 255, 255); color: var(--bg); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.2s; box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 20px; }
.edge.right { right: clamp(12px, 2vw, 32px); }
.edge.left { left: clamp(12px, 2vw, 32px); }
.edge:hover { transform: scale(1.06); }
body.pannable.pan-start .edge.right, body.pannable.pan-end .edge.left, body.has-book .edge { opacity: 0 !important; pointer-events: none !important; }
@media (hover: none) {
  .edge { display: none; }
}
#read-close { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -10px); z-index: 7; background: var(--gray); color: var(--ink); border: 0px; border-radius: 5px; padding: 8px 18px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 17px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
body.reading #read-close { opacity: 1; pointer-events: auto; transform: translate(-50%, 0px); }
body.reading #panel, body.reading #scrim { opacity: 0 !important; pointer-events: none !important; }
.desc p { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
body[data-panel="1"] #scrim { background: linear-gradient(to left, var(--tint) 36%, transparent 54%); }
@media (max-aspect-ratio: 19 / 20) {
  .desc p { font-size: 18px; }
  body[data-panel="1"] #scrim { background: linear-gradient(to top, var(--tint) 44%, transparent 56%); }
  #panel { padding: 0px 10px; }
}
body[data-panel="1"] #panel, body[data-panel="3"] #panel, body[data-panel="5"] #panel { --fg: var(--on-tint, #fff); color: var(--fg); }
body[data-panel="1"] .author, body[data-panel="3"] .author, body[data-panel="5"] .author, body[data-panel="1"] .link, body[data-panel="3"] .link, body[data-panel="5"] .link { color: color-mix(in srgb, var(--fg) 75%, transparent); }
body[data-panel="1"] .tag, body[data-panel="3"] .tag, body[data-panel="5"] .tag { color: var(--fg); border-top-color: color-mix(in srgb, var(--fg) 25%, transparent); }
body[data-panel="1"] .desc p, body[data-panel="3"] .desc p, body[data-panel="5"] .desc p { color: color-mix(in srgb, var(--fg) 92%, transparent); }
body.tint-light #p-close { background: rgba(0, 0, 0, 0.75); }
#panel .p-scroll > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s 0.3s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s; }
#panel.show .p-scroll > * { opacity: 1; transform: none; }
#panel.show .p-scroll > :nth-child(n+5) { transition-delay: 0.42s, 0.47s; }
#sidenav { position: fixed; left: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 7; display: flex; flex-direction: column; gap: 2px; }
#sidenav .tick { position: relative; display: flex; align-items: center; height: 14px; padding: 0px 6px 0px 0px; border: 0px; background: none; cursor: pointer; }
#sidenav .tick i { display: block; width: 16px; height: 3px; border-radius: 2px; background: currentcolor; color: var(--ink); opacity: 0.3; transition: opacity 0.2s, width 0.25s; }
#sidenav .tick:hover i, #sidenav .tick.on i { opacity: 1; }
#sidenav .tick.on i { width: 28px; }
#sidenav .tick span { position: absolute; left: 40px; white-space: nowrap; font-size: 15px; color: var(--ink); background: rgba(0, 0, 0, 0.72); padding: 3px 10px 4px; border-radius: 4px; opacity: 0; transform: translateX(-5px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
#sidenav .tick:hover span { opacity: 1; transform: none; }
body.tint-light.has-book #sidenav .tick i { color: rgb(29, 26, 23); }
@media (max-width: 899px), (hover: none) {
  #sidenav { display: none; }
}
#panel { inset: 0px 0px 0px auto; width: min(600px, 44vw); display: block; padding: 0px; transform: translateX(24px); }
#panel.show { transform: none; }
#panel #p-close { top: max(20px, 3vh); right: auto; left: 20px; background: rgba(0, 0, 0, 0.28); color: rgb(255, 255, 255); }
#panel .p-scroll { height: 100%; max-height: none; overflow-y: auto; padding: 0px; mask-image: none; scroll-behavior: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
#panel .p-scroll > * { opacity: 1; transform: none; transition: none; }
.bk { --fg: var(--on-tint, #fff); background: var(--tint); color: var(--fg); min-height: 100vh; padding: 16vh clamp(28px, 4.2vw, 68px) 14vh; box-sizing: border-box; }
.bk .badge { background: var(--fg); color: var(--tint); }
.bk .bk-title { margin: 0px; font-weight: 700; font-size: clamp(32px, 3vw, 46px); line-height: 1.12; color: var(--fg); }
.bk .author { margin: 10px 0px 0px; font-size: 21px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.bk .rule { display: block; width: 60px; height: 1px; background: var(--fg); margin: 22px 0px 26px; }
.bk .tag { margin: 46px 0px 0px; padding-top: 0px; border: 0px; font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--fg); }
.bk .tag::before { content: ""; display: block; width: 60px; height: 1px; background: var(--fg); margin-bottom: 22px; }
.bk .desc { margin-top: 18px; }
.bk .desc p { margin: 0px 0px 0.95em; font-size: 19px; line-height: 1.6; color: var(--fg); }
body[data-panel="1"] #scrim { background: linear-gradient(to left, var(--tint) calc(min(600px, 44vw) - 2px), transparent calc(min(600px, 44vw) + 22vw)); }
@media (max-aspect-ratio: 19 / 20) {
  #panel { inset: auto 0px 0px; width: auto; height: 50vh; padding: 0px; transform: translateY(30px); }
  #panel #p-close { top: 12px; left: 12px; }
  .bk { min-height: 50vh; padding: 26px 20px 44px; }
  .bk .bk-title { font-size: 28px; padding-left: 52px; }
  .bk .author { font-size: 17px; }
  .bk .rule { margin: 14px 0px 18px; }
  .bk .tag { margin-top: 30px; font-size: 19px; }
  .bk .desc p { font-size: 17px; }
  body[data-panel="1"] #scrim { background: linear-gradient(to top, var(--tint) 49%, transparent 64%); }
}
html.pile, html:has(body.pile), body.pile { overflow: hidden auto; height: auto; }
html.lock, html.lock body { overflow: hidden !important; }
body.pile { background: rgb(31, 27, 25); }
#spacer { display: none; }
body.pile #spacer { display: block; width: 1px; }
body.pile #stage { touch-action: pan-y; }
#panel { width: min(560px, 42vw); }
#panel .p-scroll { padding: 0px; }
.bk { display: none; background: transparent; min-height: 0px; padding: 14vh clamp(28px, 4vw, 64px) 10vh; }
.bk.active { display: block; animation: 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running bkIn; }
@keyframes bkIn { 
  0% { opacity: 0; transform: translateY(18px); }
}
body[data-panel="1"] #scrim { background: none !important; }
#panel #p-close { background: color-mix(in srgb, var(--on-tint, #fff) 16%, transparent); color: var(--on-tint, #fff); }
.bk .desc { position: relative; }
.bk:not(.open) .desc { max-height: 12.5em; overflow: hidden; mask-image: linear-gradient(rgb(0, 0, 0) 55%, transparent); }
.next-book { margin-top: 48px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 0px 0px; background: none; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); color: var(--fg); font: inherit; cursor: pointer; text-align: right; }
.next-book .nb-k { font-size: 14px; opacity: 0.7; }
.next-book .nb-t { flex: 1 1 0%; font-size: 20px; font-weight: 700; }
.next-book svg { transition: transform 0.3s; }
.next-book:hover svg { transform: translateX(-5px); }
@keyframes flipBook { 
  0%, 35% { transform: rotateY(0deg); }
  50%, 85% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.tile .soon, .pill .soon, .seg .soon { position: absolute; top: -9px; left: 10px; font-style: normal; font-size: 12px; font-weight: 700; background: var(--fg); color: var(--tint); padding: 1px 8px; border-radius: 3px; }
.golink { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font-size: 17px; border-bottom: 1px solid color-mix(in srgb, var(--fg) 50%, transparent); padding-bottom: 2px; }
.golink svg { width: 18px; height: 18px; }
.opts-3 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border: 1px solid var(--fg); border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 17px; transition: background 0.2s, color 0.2s; }
.pill .p-name { font-weight: 700; }
.pill .p-price { opacity: 0.85; }
.pill:hover { background: var(--fg); color: var(--tint); }
.pill.primary { background: var(--yellow); border-color: var(--yellow); color: rgb(33, 33, 33); }
.pill.primary:hover { filter: brightness(1.05); background: var(--yellow); color: rgb(33, 33, 33); }
.pill.off { opacity: 0.55; cursor: default; }
.pill.off:hover { background: none; color: var(--fg); }
@media (max-aspect-ratio: 19 / 20) {
  #panel { width: auto; height: 52vh; }
  .bk { padding: 24px 20px 40px; }
  #panel .p-scroll { background: transparent; }
}
.opts { margin-top: 4px; }
body.scrolled #hint { opacity: 0 !important; }
#panel .p-scroll { overflow: hidden; height: 100%; }
.bk.active { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 11vh clamp(28px, 4vw, 64px) 4vh; }
.bk .d-scroll { flex: 1 1 0%; min-height: 0px; overflow-y: auto; margin-top: 30px; padding-left: 10px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 40%, transparent) transparent; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 22px, rgb(0, 0, 0) calc(100% - 50px), transparent); }
.bk .d-scroll .tag { margin-top: 18px; }
.bk .d-scroll .tag::before { display: none; }
.bk .d-scroll .desc { max-height: none !important; mask-image: none !important; }
.bk .next-book { margin-top: 14px; flex: 0 0 auto; }
.pill.primary { background: var(--fg); border-color: var(--fg); color: var(--tint); }
.pill.primary:hover { background: var(--fg); color: var(--tint); filter: none; transform: translateY(-1px); }
.pill:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--fg); }
.pill .soon { background: var(--fg); color: var(--tint); }
.p-tools .icon-btn, #panel #p-close { width: 40px; height: 40px; background: color-mix(in srgb, var(--on-tint, #fff) 14%, transparent); color: var(--on-tint, #fff); border: 0px; text-decoration: none; }
.p-tools .icon-btn:hover, #panel #p-close:hover { background: color-mix(in srgb, var(--on-tint, #fff) 26%, transparent); }
@media (max-aspect-ratio: 19 / 20) {
  .bk.active { padding: 22px 20px 16px; }
  .bk .d-scroll { margin-top: 18px; }
  .bk .bk-title { padding-left: 110px; }
}
body.pile.scrolled:not(.has-book) .top { background: linear-gradient(rgba(28, 24, 22, 0.85), rgba(28, 24, 22, 0)); }
.brand { display: flex; flex-direction: column; gap: 2px; border: 0px; padding: 0px; line-height: 1.2; }
.brand b { font-size: 18px; font-weight: 700; }
.brand h1 { font-size: 16px; font-weight: 400; color: var(--ink-dim); font-family: FrankG, "Frank Ruhl Libre", serif; }
body.pile.scrolled:not(.has-book) .top { background: none; }
body.has-book .brand h1 { color: color-mix(in srgb, var(--on-tint, #fff) 75%, transparent); }
body.has-book .brand b { color: var(--on-tint, #fff); }
.bk .badge { align-self: flex-start; background: none; color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 11px 3px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; }
.bk .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
.bk .desc p { white-space: pre-line; }
.top { flex-direction: row-reverse; align-items: flex-start; }
.brand { align-items: flex-end; text-align: left; }
.brand b { font-size: 15px; font-weight: 400; color: var(--ink-dim); order: 1; }
.brand h1 { order: 2; font-family: FrankG, "Frank Ruhl Libre", serif; font-weight: 900; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.05; color: var(--ink); }
.top { display: grid; grid-template-columns: auto 1fr; }
.top .brand { grid-area: 1 / 1; justify-self: end; }
.top #sound { grid-area: 1 / 2; justify-self: end; }
.promo { grid-area: 2 / 1; justify-self: end; margin: 10px 0px 0px; background: var(--yellow); color: rgb(33, 33, 33); font-weight: 700; font-size: 14px; padding: 4px 12px 5px; border-radius: 999px; pointer-events: auto; white-space: nowrap; }
body.has-book .brand h1 { color: var(--on-tint, #fff); }
.opts-3 { flex-wrap: nowrap; }
.opts-3 .pill { flex: 0 1 auto; white-space: nowrap; }
@media (max-aspect-ratio: 19 / 20) {
  .brand h1 { font-size: 24px; }
  .promo { font-size: 13px; }
  #panel .p-scroll { overflow-y: auto; }
  .bk.active { display: block; height: auto; padding-bottom: 28px; }
  .bk .d-scroll { overflow: visible; mask-image: none; padding-left: 0px; }
  .opts-3 .pill { flex: 1 1 0px; justify-content: center; padding: 12px 10px; }
}
.top { direction: ltr; grid-template-columns: auto 1fr; }
.top .brand, .top .promo { direction: rtl; justify-self: start; }
.brand { align-items: flex-start; text-align: right; }
.top #sound { justify-self: end; }
.brand b { font-size: 13px; }
.brand h1 { font-size: clamp(20px, 1.6vw, 25px); }
.promo { background: none; color: var(--yellow); padding: 0px; margin-top: 6px; font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 6px; }
.promo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
body.has-book .promo { color: var(--on-tint, #fff); opacity: 0.8; }
body.has-book .promo::before { background: var(--on-tint, #fff); }
.top #sound { position: fixed; left: clamp(16px, 2vw, 28px); bottom: 18px; top: auto; width: 34px; height: 34px; opacity: 0.7; }
.top #sound:hover { opacity: 1; }
#panel #p-close { position: fixed; top: 18px; left: clamp(16px, 2vw, 28px); right: auto; width: 44px; height: 44px; z-index: 8; }
body.has-book .top .brand, body.has-book .top .promo { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.bk.active { padding-top: 9vh; }
.bk-foot { flex: 0 0 auto; margin-top: 14px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-foot .golink { margin: 0px; font-weight: 700; border-bottom: 0px; font-size: 17px; }
.bk-foot .golink:hover span { text-decoration: underline; text-underline-offset: 4px; }
.bk-foot .pub { font-size: 14px; color: color-mix(in srgb, var(--fg) 65%, transparent); }
.bk .d-scroll .next-book { display: none; }
.bk .rule { display: none; }
.bk .opts { margin-top: 22px; }
.bk .d-scroll .tag { font-weight: 400; font-size: 21px; line-height: 1.45; font-family: FrankG, "Frank Ruhl Libre", serif; }
@media (max-aspect-ratio: 19 / 20) {
  .bk .d-scroll .next-book { display: flex; }
  .bk-foot { margin-top: 18px; }
  #panel #p-close { top: 14px; }
  .top #sound { inset: 16px 16px auto auto; }
}
.bk .d-scroll .tag { font-family: var(--sans); font-weight: 700; font-size: 21px; }
.top .brand { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); align-items: center; text-align: center; }
.top .promo { position: absolute; left: 50%; transform: translateX(-50%); top: calc(39.6px + (1.05 * clamp(20px, 1.6vw, 25px))); }
.promo::before { display: none; }
@media (max-aspect-ratio: 19 / 20) {
  .top .brand { top: 14px; }
  .top .promo { top: calc(60.8px); }
}
.top { flex-direction: column; align-items: center; direction: rtl; padding-top: 22px; gap: 0px; display: flex !important; }
.top .brand, .top .promo { position: static; transform: none; justify-self: auto; }
.top .brand { align-items: center; text-align: center; }
.brand h1 { font-size: clamp(30px, 2.8vw, 44px); }
.brand b { font-size: 15px; }
.top .promo { margin-top: 8px; font-size: 15px; }
@media (max-aspect-ratio: 19 / 20) {
  .brand h1 { font-size: 30px; }
  .top { padding-top: 64px; }
  .top .promo { font-size: 14px; }
}
body.pile .top { position: absolute; }
.top { padding-top: clamp(48px, 7vh, 80px); }
.brand b { font-size: 18px; }
.brand h1 { font-size: clamp(38px, 3.6vw, 58px); margin-top: 4px; }
.top .promo { font-size: 18px; margin-top: 12px; }
@media (max-aspect-ratio: 19 / 20) {
  .top { padding-top: 72px; }
  .brand h1 { font-size: 34px; }
  .brand b { font-size: 15px; }
  .top .promo { font-size: 15px; }
}
.brand b { font-size: clamp(18px, 1.5vw, 22px); color: rgba(255, 255, 255, 0.75); }
.brand h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 4.4vw, 68px); line-height: 1.05; margin-top: 6px; letter-spacing: -0.01em; }
.top .promo { color: var(--ink); background: none; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 6px 18px 7px; font-size: 17px; font-weight: 400; margin-top: 16px; }
@media (max-aspect-ratio: 19 / 20) {
  .brand b { font-size: 16px; }
  .brand h1 { font-size: 36px; }
  .top .promo { font-size: 14px; padding: 5px 14px 6px; }
}
#stage { transition: opacity 0.45s; }
.top, #sidenav { transition: opacity 0.45s; }
#loader { display: grid; place-items: center; inset: 0px !important; }
#loader span { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; position: relative; }
#loader span::after { display: none; }
#loader i { position: absolute; inset: 0px auto 0px 0px; width: 4%; background: rgb(255, 255, 255); border-radius: 2px; transition: width 0.35s; }
body.is-ready #loader { opacity: 0; transition: opacity 0.3s; }
.pill { font-size: 19px; }
.bk .bk-title, .bk .d-scroll .tag { text-wrap: balance; }
.bk .desc p { text-wrap: pretty; }
.next-pull { display: none; }
@media (max-aspect-ratio: 19 / 20) {
  #panel { bottom: 0px; top: 0px !important; height: auto !important; padding: 0px !important; transform: none !important; }
  #panel .p-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .bk.active { height: auto; display: block !important; padding: 54vh 20px 0px !important; }
  .bk .opts-3 { position: sticky; top: 0px; z-index: 4; background: var(--tint); margin: 16px -20px 0px; padding: 10px 20px 10px 72px; }
  .pill { font-size: 17px; }
  .bk .desc p { font-size: 17px; }
  .bk .d-scroll .next-book, .bk .next-book { display: none !important; }
  .next-pull { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 70vh; padding-top: 48px; color: color-mix(in srgb, var(--fg) 70%, transparent); text-align: center; }
  .next-pull span { font-size: 14px; }
  .next-pull b { font-size: 20px; color: var(--fg); }
  .next-pull i { font-style: normal; font-size: 22px; animation: 1.6s ease-in-out 0s infinite normal none running nudge; }
  @keyframes nudge { 
  50% { transform: translateY(6px); }
}
  body[data-panel="1"] #scrim { background: none !important; }
  body.has-book .top #sound { display: none; }
  #panel #p-close { top: 10px !important; left: 14px; }
}
.brand { cursor: default; }
@media (max-aspect-ratio: 19 / 20) {
  .bk .opts-3 { background: transparent; transition: box-shadow 0.25s; }
  .bk .opts-3.stuck { box-shadow: rgba(0, 0, 0, 0.55) 0px 10px 18px -12px; }
  .bk .opts-3 .pill:not(.primary) { background: var(--tint); }
}
@media (max-aspect-ratio: 19 / 20) {
  .bk .opts-3 { background: var(--tint); }
}
@media (max-aspect-ratio: 19 / 20) {
  .bk .bk-title, .bk .author, .bk .d-scroll .tag { text-align: center; }
  .bk .bk-title { padding-left: 0px !important; }
  .bk .badge { align-self: center; display: table; margin-left: auto; margin-right: auto; }
  .bk .opts-3 { justify-content: center; padding-left: 20px; padding-right: 20px; }
  .bk .opts-3.stuck { padding-left: 72px; }
}
body.pile #hint { position: absolute; top: calc(-54px + 100vh); bottom: auto; }
@media (max-height: 700px) {
  body.pile #hint { display: none; }
}
@media (max-aspect-ratio: 19 / 20) {
  .bk .opts-3 { background: transparent; padding-left: 20px !important; padding-right: 20px !important; }
  .bk .opts-3.stuck { background: var(--tint); }
  body.bar-stuck #panel #p-close { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
}
@media (max-aspect-ratio: 19 / 20) {
  body.pile .top { padding-top: 18px; }
  .brand b { font-size: 14px; }
  .brand h1 { font-size: min(34px, 8.6vw); white-space: nowrap; text-wrap-style: initial; margin-top: 2px; }
  .top .promo { margin-top: 8px; font-size: 13px; padding: 4px 12px 5px; }
}
@media (max-aspect-ratio: 19 / 20) {
  .bk .opts-3 { padding-top: 6px; padding-bottom: 6px; }
  .opts-3 .pill { padding-top: 8px; padding-bottom: 8px; }
  .pill .soon { top: -8px; }
}
html { background: rgb(31, 27, 25); }

/* כללים שהסורק לא ראה (ריחוף, טעינה, מצב מדף צר, עטיפת האתר) — שוחזרו ידנית */
#tip.show { opacity: 1; }
body.pannable #pan { opacity: 1; }
body.pannable .edge { opacity: 1; pointer-events: auto; }
body:not(.is-ready) .top, body:not(.is-ready) #sidenav, body:not(.is-ready) #hint, body:not(.is-ready) #sound { opacity: 0 !important; }
body .lnf-shelf h2 { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
body .lnf-shelf button { text-transform: none; letter-spacing: 0; }
/* הכותרת הראשית (h1): בלי השפעות של ערכת אלמנטור */
.brand h1 { margin: 0; font-style: normal; }
body .lnf-shelf .brand h1 { font-family: var(--sans); font-weight: 700; color: var(--ink); text-transform: none; }
#tip.side { align-items: flex-end; }
#tip.side::after { bottom: auto; top: 50%; left: auto; right: -5px; transform: translateY(-50%) rotate(45deg); }

/* מדף בדסקטופ: הכותרת בצד ימין, ממורכזת לגובה */
@media (min-aspect-ratio: 19/20) {
  body:not(.pile) .top { position: fixed; top: 0; bottom: 0; right: 6vw; left: auto; width: 36vw; transform: none; padding: 0; justify-content: center; align-items: flex-start; } /* בלי transform — אחרת כפתור הצליל (fixed) נגרר איתו */
  body:not(.pile) .top .brand { align-items: flex-start; text-align: right; }
  body:not(.pile) .brand h1 { white-space: nowrap; font-size: clamp(34px, 3.3vw, 62px); line-height: 1.05; }
  body:not(.pile) .top .promo { align-self: flex-start; }
  body:not(.pile) #hint { left: auto; right: 6vw; width: 34vw; text-align: right; }
}