/* ─────────────────────────────────────────────────────────────────────────
   Сайт рава Элияу Левина — «живая библиотека».
   Светлый пергамент, корешки книг в цветном переплёте (изумруд, сапфир,
   терракота, горчица, слива), золотое тиснение. На главной — книга,
   которая раскрывается. Шапка — светлое стекло с полосой корешков,
   футер и плеер — изумрудный тканевый переплёт.
   Акцентный цвет (кнопки, ссылки) выбирается в админке: html[data-accent].
   Шрифты: Alegreya (заголовки и текст), Alegreya Sans (кнопки, меню,
   цифры), Frank Ruhl (иврит).
   Всё лежит на сайте, без внешних запросов; строгий CSP.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Alegreya"; font-weight: 400 900; font-style: normal; font-display: swap; src: url(fonts/alegreya-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-weight: 400 900; font-style: normal; font-display: swap; src: url(fonts/alegreya-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Alegreya"; font-weight: 400 900; font-style: italic; font-display: swap; src: url(fonts/alegreya-cyrillic-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-weight: 400 900; font-style: italic; font-display: swap; src: url(fonts/alegreya-latin-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-cyrillic-800.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(fonts/alegreyasans-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Frank Ruhl"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/frankruhl-hebrew-500.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Accent (buttons, links): terracotta by default, html[data-accent] switches it */
  --acc: #A8361B; --acc-h: #84280F; --acc-wash: rgb(168 54 27 / .09); --acc-top: #C2441F; --acc-bottom: #A3361A; --acc-edge: #74240E;
  --acc-d: #F4AA8E; --acc-d-h: #F9C3AE; --acc-d-wash: rgb(244 170 142 / .13); --acc-d-top: #F0A586; --acc-d-bottom: #D9805C; --acc-d-edge: #9A4A2E;
  --bg: #F6ECD8; --sheet: #FFFBF2; --sheet-2: #F2E6CC; --sheet-3: #E8D7B4;
  --ink: #2A1C12; --ink-2: #4A3726; --ink-3: #6A533A;
  --line: rgb(90 60 28 / .17); --line-2: rgb(90 60 28 / .32);
  --wine: var(--acc); --wine-hover: var(--acc-h); --wine-wash: var(--acc-wash);
  --btn-top: var(--acc-top); --btn-bottom: var(--acc-bottom); --btn-edge: var(--acc-edge); --on-wine: #FFF8EA;
  --gold: #7E560C; --gold-bright: #D9A136; --gold-soft: rgb(217 161 54 / .2); --gold-line: rgb(190 138 48 / .5);
  --olive: #3F6B1F; --lapis: #2453A0; --plum: #7A2E68; --slate: #55504A; --ochre: #8A5A0E;
  /* Book cloth: the colours of the spines */
  --cloth-emerald: #1E6B4F; --cloth-sapphire: #24519C; --cloth-terracotta: #A63D1E; --cloth-mustard: #C8901A; --cloth-plum: #6E2C63; --cloth-teal: #16626A; --cloth-ochre: #8A5A0E;
  --spines: linear-gradient(90deg, var(--cloth-emerald) 0 16%, var(--cloth-mustard) 16% 24%, var(--cloth-sapphire) 24% 44%, var(--cloth-terracotta) 44% 58%, var(--cloth-plum) 58% 70%, var(--cloth-teal) 70% 86%, var(--cloth-mustard) 86% 100%);
  /* Binding (footer, player, tab-bar accents): emerald cloth with gold tooling */
  --leather: #133A31; --leather-2: #1C4A3F; --leather-ink: #F6EDD6; --leather-ink-2: #CBDACB; --leather-gold: #EBC067;
  --binding: linear-gradient(165deg, #1E5245, #123329 70%);
  --hdr-bg: rgb(255 250 240 / .84); --hdr-solid: #FFF9EE; --hdr-ink: #2A1C12; --hdr-ink-2: #5A4430;
  --focus: var(--acc);
  --mark: rgb(217 161 54 / .36);
  --card-glow: rgb(255 255 255 / .7);
  --display: "Alegreya", Georgia, "Times New Roman", serif;
  --italic: "Alegreya", Georgia, serif;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hebrew: "Frank Ruhl", "SBL Hebrew", "Times New Roman", serif;
  --wrap: 1280px; --gutter: 20px; --header-h: 68px; --tabbar-h: 0px;
  --r-xl: 22px; --r-lg: 16px; --r: 12px; --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --prose-size: 1.16rem;
  --shadow-1: 0 1px 1px rgb(70 40 10 / .08), 0 2px 6px rgb(70 40 10 / .07);
  --shadow-2: 0 2px 3px rgb(70 40 10 / .08), 0 16px 34px -16px rgb(70 40 10 / .38);
  --shadow-pop: 0 6px 16px rgb(40 20 5 / .18), 0 40px 80px -28px rgb(40 20 5 / .55);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .33 0 0 0 0 .13 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'%3E%3Cg fill='none' stroke='%23A8782A' stroke-width='1.2'%3E%3Cpath d='M0 7h68M112 7h68'/%3E%3Cpath d='M74 7c4-5 8-5 12 0s8 5 12 0' /%3E%3Cpath d='M82 7c4 5 8 5 12 0s8-5 12 0'/%3E%3C/g%3E%3Cpath d='M90 2l3.5 5L90 12l-3.5-5z' fill='%238A2316'/%3E%3C/svg%3E");
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%23A8782A' stroke-width='1.2'%3E%3Cpath d='M2 26V8a6 6 0 0 1 6-6h18'/%3E%3Cpath d='M6 26V12a6 6 0 0 1 6-6h14'/%3E%3Ccircle cx='9.5' cy='9.5' r='2' fill='%23A8782A'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(-1 0 0 1 28 0)'%3E%3Cg fill='none' stroke='%23A8782A' stroke-width='1.2'%3E%3Cpath d='M2 26V8a6 6 0 0 1 6-6h18'/%3E%3Cpath d='M6 26V12a6 6 0 0 1 6-6h14'/%3E%3Ccircle cx='9.5' cy='9.5' r='2' fill='%23A8782A'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(1 0 0 -1 0 28)'%3E%3Cg fill='none' stroke='%23A8782A' stroke-width='1.2'%3E%3Cpath d='M2 26V8a6 6 0 0 1 6-6h18'/%3E%3Cpath d='M6 26V12a6 6 0 0 1 6-6h14'/%3E%3Ccircle cx='9.5' cy='9.5' r='2' fill='%23A8782A'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='matrix(-1 0 0 -1 28 28)'%3E%3Cg fill='none' stroke='%23A8782A' stroke-width='1.2'%3E%3Cpath d='M2 26V8a6 6 0 0 1 6-6h18'/%3E%3Cpath d='M6 26V12a6 6 0 0 1 6-6h14'/%3E%3Ccircle cx='9.5' cy='9.5' r='2' fill='%23A8782A'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236A5238' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2E251C; --sheet: #3A2F23; --sheet-2: #45382A; --sheet-3: #514230;
    --ink: #F3E7CD; --ink-2: #DFCDAA; --ink-3: #C9B38E;
    --line: rgb(239 224 194 / .12); --line-2: rgb(239 224 194 / .24);
    --wine: var(--acc-d); --wine-hover: var(--acc-d-h); --wine-wash: var(--acc-d-wash);
    --btn-top: var(--acc-d-top); --btn-bottom: var(--acc-d-bottom); --btn-edge: var(--acc-d-edge); --on-wine: #1A0F08;
    --gold: #EBC676; --gold-bright: #EBC676; --gold-soft: rgb(227 184 102 / .16); --gold-line: rgb(227 184 102 / .45);
    --olive: #C5D28C; --lapis: #A3C1F0; --plum: #E6B0D4; --slate: #CEC6BA; --ochre: #EBC676;
    --hdr-bg: rgb(46 37 28 / .86); --hdr-solid: #33291F; --hdr-ink: #F3E7CD; --hdr-ink-2: #D9C6A2;
    --focus: #EBC676; --mark: rgb(227 184 102 / .3);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 2px 4px rgb(0 0 0 / .45), 0 18px 40px -18px rgb(0 0 0 / .85);
    --shadow-pop: 0 6px 16px rgb(0 0 0 / .5), 0 40px 80px -28px rgb(0 0 0 / .95);
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9B38E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    --card-glow: rgb(255 235 200 / .05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2E251C; --sheet: #3A2F23; --sheet-2: #45382A; --sheet-3: #514230;
  --ink: #F3E7CD; --ink-2: #DFCDAA; --ink-3: #C9B38E;
  --line: rgb(239 224 194 / .12); --line-2: rgb(239 224 194 / .24);
  --wine: var(--acc-d); --wine-hover: var(--acc-d-h); --wine-wash: var(--acc-d-wash);
  --btn-top: var(--acc-d-top); --btn-bottom: var(--acc-d-bottom); --btn-edge: var(--acc-d-edge); --on-wine: #1A0F08;
  --gold: #EBC676; --gold-bright: #EBC676; --gold-soft: rgb(227 184 102 / .16); --gold-line: rgb(227 184 102 / .45);
  --olive: #C5D28C; --lapis: #A3C1F0; --plum: #E6B0D4; --slate: #CEC6BA; --ochre: #EBC676;
  --hdr-bg: rgb(46 37 28 / .86); --hdr-solid: #33291F; --hdr-ink: #F3E7CD; --hdr-ink-2: #D9C6A2;
  --focus: #EBC676; --mark: rgb(227 184 102 / .3);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .45), 0 18px 40px -18px rgb(0 0 0 / .85);
  --shadow-pop: 0 6px 16px rgb(0 0 0 / .5), 0 40px 80px -28px rgb(0 0 0 / .95);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9B38E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  --card-glow: rgb(255 235 200 / .05);
    color-scheme: dark;
}
/* Accent colours chosen in the admin («Главная страница» → «Цвет сайта»). */
:root[data-accent="emerald"] { --acc: #1D6B4E; --acc-h: #14523B; --acc-wash: rgb(29 107 78 / .1); --acc-top: #23805E; --acc-bottom: #1A644A; --acc-edge: #114634;
  --acc-d: #8FD6B4; --acc-d-h: #B0E5CB; --acc-d-wash: rgb(143 214 180 / .13); --acc-d-top: #8ED1AE; --acc-d-bottom: #5FB18A; --acc-d-edge: #2E7A57; }
:root[data-accent="sapphire"] { --acc: #2453A0; --acc-h: #1A3F7C; --acc-wash: rgb(36 83 160 / .09); --acc-top: #2C62B8; --acc-bottom: #1F4C93; --acc-edge: #15356A;
  --acc-d: #A9C4F5; --acc-d-h: #C6D8FA; --acc-d-wash: rgb(169 196 245 / .13); --acc-d-top: #A6C2F2; --acc-d-bottom: #7A9FE0; --acc-d-edge: #3F64A8; }
:root[data-accent="wine"] { --acc: #8A2316; --acc-h: #6E1A10; --acc-wash: rgb(138 35 22 / .09); --acc-top: #9C2A1B; --acc-bottom: #7A1E12; --acc-edge: #5A140B;
  --acc-d: #F2A0A0; --acc-d-h: #F8BDBD; --acc-d-wash: rgb(242 160 160 / .13); --acc-d-top: #EFA0A0; --acc-d-bottom: #D87878; --acc-d-edge: #9A3C3C; }
:root[data-accent="plum"] { --acc: #7A2E68; --acc-h: #5E2250; --acc-wash: rgb(122 46 104 / .09); --acc-top: #8E3779; --acc-bottom: #6E2A5E; --acc-edge: #4E1C42;
  --acc-d: #E8B3DA; --acc-d-h: #F2CDE8; --acc-d-wash: rgb(232 179 218 / .13); --acc-d-top: #E3AED6; --acc-d-bottom: #C985B8; --acc-d-edge: #8A4A7A; }

/* Sepia reading mode: warmer, softer paper for long texts (both themes). */
:root[data-reading="sepia"] {
  --bg: #F1E3C2; --sheet: #F7ECD3; --sheet-2: #EADBB6; --sheet-3: #DFCB9F;
  --ink: #33261A; --ink-2: #4E3E2C; --ink-3: #66553F;
  --line: rgb(90 60 28 / .2); --line-2: rgb(90 60 28 / .34);
  --wine: var(--acc); --on-wine: #FFF8EA; --btn-top: var(--acc-top); --btn-bottom: var(--acc-bottom); --btn-edge: var(--acc-edge);
  --gold: #7E560C; --focus: var(--acc);
  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.6 var(--sans); font-variant-numeric: lining-nums; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgb(110 70 25 / .1) 100%) fixed, var(--paper-grain), var(--fibers), var(--bg); }
h1, h2, h3, h4 { margin: 0 0 .45em; color: var(--ink); overflow-wrap: break-word; text-wrap: balance; }
h1 { font: 800 clamp(2.3rem, 4.8vw, 3.7rem)/1.04 var(--display); letter-spacing: -.012em; }
h2 { font: 700 clamp(1.65rem, 2.8vw, 2.3rem)/1.12 var(--display); letter-spacing: -.006em; }
h3 { font: 700 1.1rem/1.35 var(--sans); letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s var(--ease), text-decoration-color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
a:hover { color: var(--wine); text-decoration-color: currentColor; }
img, video { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 700; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--gold-bright); color: #1A0F08; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: var(--r-sm); background: var(--leather); color: var(--leather-ink); font: 700 .9rem var(--sans); text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main { display: block; outline: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }
.section { padding-block: clamp(40px, 6vw, 80px); }
.section-tight { padding-block: clamp(28px, 4vw, 48px); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.lead { font: 400 clamp(1.06rem, 1.5vw, 1.2rem)/1.65 var(--serif); color: var(--ink-2); max-width: 62ch; }
.hint { margin: 0; font: 400 .9rem/1.55 var(--serif); color: var(--ink-3); }
.kbd { display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--sheet-2); font: 700 .78rem/1 var(--sans); color: var(--ink-3); }
@media (pointer: coarse), (max-width: 640px) { .kbd { display: none; } }
html.is-loading main { opacity: .6; transition: opacity .2s .1s; }
html.sheet-open { overflow: hidden; }

/* Rubric: small caps between gold diamonds — the book's own label */
.rubric { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 .8em; font: 800 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wine); }
.rubric::before { content: ""; width: 7px; height: 7px; flex: none; rotate: 45deg; background: var(--gold-bright); }
.rubric .icon { width: 15px; height: 15px; }
.rubric a { color: inherit; text-decoration: none; }
.rubric a:hover { text-decoration: underline; }

/* Framed cards: lighter parchment with a gold inner rule and corner flourishes */
.framed, .lead-article, .shabbat-card, .sent-card, .letter-paper, .auth-panel, .day-panel, .cal-subscribe-card {
  position: relative; background: linear-gradient(180deg, var(--card-glow), transparent 60%), var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px var(--gold-line), var(--shadow-2); }
.lead-article::after, .shabbat-card::after, .sent-card::after, .letter-paper::after, .auth-panel::after, .cal-subscribe-card::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  background: var(--corner-tl) left top / 24px no-repeat, var(--corner-tr) right top / 24px no-repeat, var(--corner-bl) left bottom / 24px no-repeat, var(--corner-br) right bottom / 24px no-repeat; }
.card, .margin-block, .form-sheet, .empty-state, .letter, .ask-notes, .week-card, .sub-card, .upcoming-card, .moon-card, .toc-row, .qa-item, .series-step, .series-register a {
  background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

/* ── Buttons & links ────────────────────────────────────────────────────── */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r); background: none;
  font: 700 .94rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), translate .15s var(--ease), filter .2s var(--ease); }
.button:active { translate: 0 1px; }
.button .icon { width: 1.1em; height: 1.1em; }
.button-ink { background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); color: var(--on-wine); border-color: var(--btn-edge);
  box-shadow: inset 0 0 0 1px rgb(226 182 92 / .5), inset 0 1px 0 rgb(255 230 180 / .35), 0 2px 0 var(--btn-edge), 0 10px 18px -10px rgb(90 20 11 / .7); }
.button-ink:hover { color: var(--on-wine); filter: brightness(1.1); }
.button-line, .button-outline { background: var(--sheet); border: 1.5px solid var(--ink-3); color: var(--ink); box-shadow: 0 2px 0 var(--line-2); }
.button-line:hover, .button-outline:hover { background: var(--sheet-2); border-color: var(--wine); color: var(--wine); }
.button-danger { background: #9B1C1C; color: #fff; border-color: #6E1010; }
:root[data-theme="dark"] .button-danger { background: #F09A9A; color: #1A0F08; }
.button-danger:hover { filter: brightness(1.1); color: inherit; }
.button-wide { width: 100%; }
.button-small { min-height: 44px; padding: 0 16px; font-size: .86rem; }
.button:disabled { opacity: .55; cursor: progress; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 700 .92rem var(--sans); color: var(--wine); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: .25em; cursor: pointer; }
.text-link:hover { text-decoration-color: currentColor; }
.text-link.small { font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 .9rem var(--sans); color: var(--wine); text-decoration: none; white-space: nowrap; }
.more-link:hover { color: var(--wine-hover); text-decoration: underline; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.icon-button:hover { background: var(--gold-soft); color: var(--wine); }
.icon-button .icon { width: 21px; height: 21px; }

/* ── Header: light glass with a stripe of book spines ───────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; color: var(--hdr-ink); background: var(--hdr-bg); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgb(70 40 10 / .5); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--spines); opacity: .92; pointer-events: none; }
.site-footer :focus-visible, .miniplayer :focus-visible { outline-color: var(--leather-gold); }
.header-row { display: flex; align-items: center; gap: 22px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 44px; color: var(--hdr-ink); text-decoration: none; border-radius: var(--r-sm); }
.logo:hover { color: var(--wine); }
.logo-seal { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding-bottom: 3px;
  background: radial-gradient(circle at 35% 30%, var(--acc-top), var(--acc-bottom) 60%, var(--acc-edge)); color: #F6D995; font: 500 1.65rem/1 var(--hebrew);
  box-shadow: inset 0 0 0 2px rgb(246 217 149 / .6), inset 0 0 0 4px var(--acc-bottom), inset 0 0 0 5px rgb(246 217 149 / .35), 0 4px 10px -2px rgb(90 30 10 / .45); transition: rotate .5s var(--ease); }
.logo:hover .logo-seal { rotate: -12deg; }
.logo-text { display: grid; gap: 4px; line-height: 1; }
.logo-text strong { font: 800 1.24rem/1 var(--display); letter-spacing: .002em; white-space: nowrap; }
.logo-text span { font: 700 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-sheet-title { display: none; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 999px; font: 700 .95rem var(--sans); color: var(--hdr-ink-2); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.main-nav a:hover { color: var(--hdr-ink); background: var(--gold-soft); }
.main-nav a[aria-current="page"] { color: var(--wine); background: var(--wine-wash); }
.nav-only-mobile { display: none; }
.header-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.header-tools .icon-button { color: var(--hdr-ink-2); }
.header-tools .icon-button:hover { background: var(--gold-soft); color: var(--wine); }
.header-login { margin: 0 6px; padding: 0 8px; color: var(--hdr-ink); text-decoration-color: var(--gold-line); }
.header-login:hover { color: var(--wine); }
.header-ask { min-height: 42px; padding: 0 16px; margin-left: 6px; font-size: .88rem; }
.avatar-link { display: inline-grid; place-items: center; width: 44px; height: 44px; text-decoration: none; border-radius: 50%; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cloth-emerald); font: 800 .76rem var(--sans); color: #FFF8EA; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px var(--gold-line); }
.avatar-link:hover .avatar, .avatar-link[aria-current="page"] .avatar { background: var(--wine); }
.menu-toggle { display: none; }
@media (max-width: 1180px) { .header-ask { display: none; } }

/* ── Announcement bar (admin «Главная страница» → «Объявление») ──────────── */
.announce { position: relative; z-index: 51; color: #FFF8EA; background: linear-gradient(90deg, var(--cloth-emerald), var(--cloth-teal) 55%, var(--cloth-sapphire)); }
.announce-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 700 .92rem/1.4 var(--sans); }
.announce-row > .icon { flex: none; color: #F6D995; }
.announce-row p { flex: 1; margin: 0; padding-block: 8px; }
.announce-row a { color: #F6D995; text-decoration-color: rgb(246 217 149 / .6); white-space: nowrap; }
.announce-row a:hover { color: #fff; }
.announce-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: #FFF8EA; cursor: pointer; }
.announce-close:hover { background: rgb(255 255 255 / .14); }
.announce :focus-visible { outline-color: #F6D995; }

/* ── Running head ───────────────────────────────────────────────────────── */
.running-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--gold-soft), transparent); }
.running-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; min-height: 36px; font: 700 .68rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.running-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.running-dates { display: inline-flex; gap: 10px; white-space: nowrap; }
.running-dates .sep { color: var(--gold-bright); font-size: .6rem; }
.running-right { justify-self: end; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 760px) {
  .running-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; letter-spacing: .1em; }
  .running-dates time, .running-dates .sep, .running-right { display: none; }
}

/* ── Section heads, breadcrumbs, page titles ────────────────────────────── */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; margin-bottom: 22px; padding-bottom: 16px; background: var(--ornament) left bottom / 180px 14px no-repeat; }
.section-head .rubric { grid-column: 1 / -1; margin-bottom: .4em; }
.section-head h2 { margin: 0; }
.section-head .more-link { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gold-line); border-radius: 999px; background: var(--sheet); }
.section-head .more-link:hover { background: var(--wine); border-color: var(--wine); color: var(--on-wine); text-decoration: none; }
.section-lead { margin: -6px 0 22px; max-width: 62ch; font: 400 1.05rem/1.6 var(--serif); color: var(--ink-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 14px; padding: 0; list-style: none; font: 600 .84rem/1.5 var(--sans); color: var(--ink-3); }
.breadcrumbs li { min-width: 0; }
.breadcrumbs li + li::before { content: "◆"; margin: 0 9px; font-size: .55rem; vertical-align: .18em; color: var(--gold-bright); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--wine); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink-3); }
.page-title { position: relative; padding-block: clamp(28px, 4.5vw, 52px) clamp(22px, 3vw, 34px); background: var(--ornament) left bottom / 180px 14px no-repeat; }
.page-title h1 { max-width: 24ch; margin-bottom: .3em; }
.page-title h1 em { font-style: italic; color: var(--wine); }
.page-title .lead { margin-bottom: 0; }
.page-title > .button { margin-top: 22px; }
.page-title .search-line { margin-top: 22px; }
.series-title-page .rubric { font-variant-numeric: tabular-nums; }

/* ── HOME: title page with the opening book ───────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 4.5vw, 64px) 0 clamp(30px, 4.5vw, 64px);
  background: radial-gradient(ellipse 90% 70% at 70% 40%, rgb(255 246 222 / .9), transparent 70%), linear-gradient(180deg, #FFF8EA, transparent); }
:root[data-theme="dark"] .hero { background: radial-gradient(ellipse 90% 70% at 70% 40%, rgb(94 72 44 / .55), transparent 70%), linear-gradient(180deg, #3A2F23, transparent); }
.hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow { position: absolute; width: 48vmax; height: 48vmax; border-radius: 50%; background: radial-gradient(circle, var(--c) 0, transparent 64%); animation: drift 24s ease-in-out infinite alternate; }
.glow-1 { --c: rgb(30 107 79 / .26); left: -16vmax; top: -18vmax; }
.glow-2 { --c: rgb(36 81 156 / .2); right: -16vmax; top: -10vmax; animation-duration: 28s; animation-delay: -7s; }
.glow-3 { --c: rgb(217 161 54 / .32); left: 30%; bottom: -30vmax; animation-duration: 32s; }
.glow-4 { --c: rgb(166 61 30 / .18); right: 4%; bottom: -24vmax; animation-duration: 26s; animation-delay: -13s; }
:root[data-theme="dark"] .glow { opacity: .8; }
@keyframes drift { 50% { transform: translate(4vmax, 3vmax) scale(1.08); } 100% { transform: translate(-3vmax, 5vmax) scale(.94); } }
.dust { position: absolute; inset: 0; }
.dust i { position: absolute; bottom: -12px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #FFF1C4 0, rgb(226 172 66 / .85) 45%, transparent 72%); animation: rise 15s linear infinite; }
.dust i:nth-child(1) { left: 33.1%; width: 3px; height: 3px; animation-duration: 12.4s; animation-delay: -13.0s; --dx: 45px; }
.dust i:nth-child(2) { left: 53.4%; width: 6px; height: 6px; animation-duration: 14.3s; animation-delay: -1.2s; --dx: -33px; }
.dust i:nth-child(3) { left: 5.6%; width: 3px; height: 3px; animation-duration: 14.9s; animation-delay: -1.4s; --dx: 10px; }
.dust i:nth-child(4) { left: 42.8%; width: 4px; height: 4px; animation-duration: 18.4s; animation-delay: -2.5s; --dx: 20px; }
.dust i:nth-child(5) { left: 62.2%; width: 5px; height: 5px; animation-duration: 19.5s; animation-delay: -11.5s; --dx: -54px; }
.dust i:nth-child(6) { left: 95.7%; width: 4px; height: 4px; animation-duration: 11.4s; animation-delay: -17.2s; --dx: -7px; }
.dust i:nth-child(7) { left: 15.8%; width: 4px; height: 4px; animation-duration: 12.1s; animation-delay: -6.2s; --dx: -47px; }
.dust i:nth-child(8) { left: 57.8%; width: 6px; height: 6px; animation-duration: 16.8s; animation-delay: -7.4s; --dx: 31px; }
.dust i:nth-child(9) { left: 8.0%; width: 6px; height: 6px; animation-duration: 11.5s; animation-delay: -4.1s; --dx: -6px; }
.dust i:nth-child(10) { left: 76.6%; width: 4px; height: 4px; animation-duration: 15.2s; animation-delay: -18.5s; --dx: -22px; }
.dust i:nth-child(11) { left: 25.8%; width: 3px; height: 3px; animation-duration: 12.6s; animation-delay: -15.6s; --dx: 13px; }
.dust i:nth-child(12) { left: 30.8%; width: 5px; height: 5px; animation-duration: 15.5s; animation-delay: -6.9s; --dx: -24px; }
.dust i:nth-child(13) { left: 60.5%; width: 4px; height: 4px; animation-duration: 11.7s; animation-delay: -10.2s; --dx: 36px; }
.dust i:nth-child(14) { left: 34.8%; width: 3px; height: 3px; animation-duration: 19.4s; animation-delay: -8.4s; --dx: 37px; }
.dust i:nth-child(15) { left: 55.6%; width: 4px; height: 4px; animation-duration: 18.1s; animation-delay: -16.4s; --dx: 28px; }
.dust i:nth-child(16) { left: 35.6%; width: 3px; height: 3px; animation-duration: 15.5s; animation-delay: -15.9s; --dx: 47px; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 85% { opacity: .6; } 100% { transform: translate(var(--dx, 20px), -720px); opacity: 0; } }
.hero-photo-img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.hero.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--bg) 0%, rgb(246 236 216 / .92) 38%, rgb(246 236 216 / .25) 75%, transparent); }
:root[data-theme="dark"] .hero.hero-photo::before { background: linear-gradient(90deg, var(--bg) 0%, rgb(46 37 28 / .92) 38%, rgb(46 37 28 / .3) 75%, transparent); }
.hero.hero-photo { min-height: min(78vh, 680px); display: grid; align-items: center; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.hero-photo .hero-grid, .hero-plain:not(:has(.portrait-plate)) .hero-grid { grid-template-columns: minmax(0, 760px); }
.hero-copy { min-width: 0; }
.hero-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px 7px 12px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgb(255 252 244 / .8); font: 700 .84rem/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px -12px rgb(90 55 20 / .6); }
:root[data-theme="dark"] .hero-badge { background: rgb(0 0 0 / .22); }
.hero-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cloth-emerald); box-shadow: 0 0 0 3px rgb(30 107 79 / .2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(30 107 79 / 0); } }
.masthead { margin: 0; font: 800 clamp(2.9rem, 7vw, 5.9rem)/.96 var(--display); letter-spacing: -.02em; text-wrap: balance;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 35%, var(--wine) 70%, var(--cloth-plum) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ink-flow 9s ease-in-out infinite alternate; }
:root[data-theme="dark"] .masthead { background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 35%, var(--wine) 70%, var(--gold) 100%); }
@keyframes ink-flow { to { background-position: 100% 0; } }
.masthead-pre { display: block; margin-bottom: .04em; font: italic 600 .5em/1 var(--italic); letter-spacing: 0; color: var(--wine); -webkit-text-fill-color: var(--wine); }
.masthead-intro { margin: 18px 0 24px; max-width: 50ch; font: 400 clamp(1.08rem, 1.5vw, 1.24rem)/1.6 var(--serif); color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 22px; }
.button-big { min-height: 56px; padding: 0 28px; font-size: 1.04rem; border-radius: 14px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gold-line); border-radius: 999px; background: rgb(255 252 244 / .75); font: 700 .9rem var(--sans); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), translate .2s var(--ease); }
:root[data-theme="dark"] .hero-chips a { background: rgb(0 0 0 / .2); }
.hero-chips a:hover { background: var(--wine); border-color: var(--wine); color: var(--on-wine); translate: 0 -2px; }
.hero-side { display: grid; gap: 18px; min-width: 0; }
.hero-side .portrait-plate { max-width: 300px; justify-self: center; }

/* ── The siddur on the title page ───────────────────────────────────────
   Leather cover with gold tooling, gilt edges, framed pages. Leaf i holds two pages
   (front = right page, back = left page of the next spread); .turned lies on the left.
   Depth comes from --z, so turned leaves stack in reverse order by themselves.
   The open state is the base style: without JS or animation the book is simply open. */
.book-stage { position: relative; display: grid; justify-items: center; gap: 14px; min-width: 0; padding: 14px 0 6px; }
.book-stage::before { content: ""; position: absolute; inset: -30% -20%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 45%, rgb(226 172 66 / .16) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle at 50% 45%, #000 0, transparent 58%); mask: radial-gradient(circle at 50% 45%, #000 0, transparent 58%); animation: rays 90s linear infinite; }
@keyframes rays { to { rotate: 360deg; } }
.book { position: relative; width: min(100%, 640px); aspect-ratio: 1.42; outline: none; animation: fade-in .5s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.book-view { position: absolute; inset: 0; perspective: 2400px; container-type: inline-size; transition: transform .7s var(--ease); animation: book-float 7s 2.6s ease-in-out infinite alternate; }
/* No opacity on .book-tilt: it would flatten the 3D scene. */
/* At rest the book lies flat towards the reader, so the clickable copy of the open pages matches it exactly. */
.book-tilt { position: absolute; inset: 0; transform-style: preserve-3d; animation: book-in 2s var(--ease) both; }
@keyframes book-in { 0% { transform: translateX(-25%) rotateX(24deg) rotateZ(-6deg) scale(.9); } 22% { transform: translateX(-25%) rotateX(20deg) rotateZ(-5deg) scale(.94); } 75% { transform: rotateX(8deg) rotateZ(-1deg); } }
@keyframes book-float { to { translate: 0 -8px; } }
.book-shadow { position: absolute; left: 2%; right: 2%; bottom: -8%; height: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgb(60 30 5 / .45), transparent 70%); transform: translateZ(-16px); }
:root[data-theme="dark"] .book-shadow { background: radial-gradient(ellipse, rgb(0 0 0 / .7), transparent 70%); }
.book-board { position: absolute; top: -2.4%; bottom: -2.4%; left: 50%; width: calc(50% + 1.7%); border-radius: 2px 12px 12px 2px; transform: translateZ(-13px);
  background: linear-gradient(90deg, rgb(0 0 0 / .35), transparent 8%), #5E1913; box-shadow: 0 22px 40px -18px rgb(30 10 5 / .75); }
/* Gilt page edges, like a siddur */
.book-block { position: absolute; top: -.9%; bottom: -.9%; left: 50%; width: calc(50% + .9%); border-radius: 0 6px 6px 0; transform: translateZ(-12px);
  background: linear-gradient(180deg, #F6D995, #C8901A 50%, #F1CF7E); box-shadow: inset -2px 0 0 #B8841C, inset -4px 0 0 #F3D48A, inset -6px 0 0 #B8841C, inset -8px 0 0 #F6DB98; }
.l-0 { --z: 10.8px; } .l-1 { --z: 10.35px; } .l-2 { --z: 9.9px; } .l-3 { --z: 9.45px; } .l-4 { --z: 9.0px; } .l-5 { --z: 8.55px; } .l-6 { --z: 8.1px; } .l-7 { --z: 7.65px; } .l-8 { --z: 7.2px; } .l-9 { --z: 6.75px; } .l-10 { --z: 6.3px; } .l-11 { --z: 5.85px; } .l-12 { --z: 5.4px; } .l-13 { --z: 4.95px; } .l-14 { --z: 4.5px; } .l-15 { --z: 4.05px; } .l-16 { --z: 3.6px; } .l-17 { --z: 3.15px; } .l-18 { --z: 2.7px; } .l-19 { --z: 2.25px; } .l-20 { --z: 1.8px; } .l-21 { --z: 1.35px; } .l-22 { --z: 0.9px; } .l-23 { --z: 0.45px; }
.book { --turn: .75s; }
.leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(0deg) translateZ(var(--z)); transition: transform var(--turn) cubic-bezier(.4, .1, .25, 1); will-change: transform; }
.leaf.turned { transform: rotateY(-180deg) translateZ(var(--z)); }
.leaf.intro { animation: open-leaf 1.4s cubic-bezier(.5, 0, .25, 1) .5s both; }
/* Same list of functions at both ends: the browser then turns the leaf through every angle. */
@keyframes open-leaf { from { transform: rotateY(0deg) translateZ(var(--z)); } }
.leaf .face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.leaf .back { transform: rotateY(180deg); }
/* While a leaf turns, light and shadow run across it */
.leaf .face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(60 30 5 / .35), rgb(255 250 235 / .25) 55%, rgb(60 30 5 / .15)); }
.leaf.turning .face::after { animation: leaf-shade var(--turn) ease-in-out; }
@keyframes leaf-shade { 50% { opacity: 1; } }
.leaf.intro .back, .leaf.intro .front { transition: none; }
.cover { top: -2.4%; bottom: -2.4%; width: calc(50% + 1.7%); }
.cover-front { display: grid; place-items: center; align-content: center; gap: 2.2cqi; padding: 8cqi 6cqi; border-radius: 2px 12px 12px 2px; color: #F3D48A; text-align: center;
  background: linear-gradient(90deg, rgb(0 0 0 / .38), rgb(255 255 255 / .06) 4%, transparent 9%), radial-gradient(ellipse at 45% 35%, rgb(255 220 190 / .1), transparent 65%), #6B1C16;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3); }
.cover-frame { position: absolute; inset: 6%; border: 2px solid rgb(243 212 138 / .7); border-radius: 3px; box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgb(243 212 138 / .4); }
.cover-he { font: 500 4.4cqi/1.2 var(--hebrew); text-shadow: 0 1px 0 rgb(0 0 0 / .45); }
.cover-rule { width: 30%; height: 2px; background: linear-gradient(90deg, transparent, #F3D48A, transparent); }
.cover-title { max-width: 86%; font: 800 7.2cqi/1.02 var(--display); letter-spacing: .01em; text-shadow: 0 2px 0 rgb(0 0 0 / .35); text-wrap: balance; }
.cover-sub { font: 700 1.8cqi var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(243 212 138 / .85); }
/* Inside of the cover: the same leather, with the title page glued in */
.cover-inside { border-radius: 12px 2px 2px 12px; background: linear-gradient(270deg, rgb(0 0 0 / .3), transparent 8%), #5E1913; }
.cover-page { position: absolute; top: 2.29%; bottom: 2.29%; right: 0; width: 96.7%; border-radius: 4px 0 0 4px; }
.ribbon { position: absolute; top: 90%; left: 78%; width: 3.2cqi; height: 16%; transform: translateZ(14px); transform-origin: top center; background: linear-gradient(90deg, #1E5245, #2E7A62 50%, #1E5245); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); animation: sway 5s 2.6s ease-in-out infinite alternate; }
@keyframes sway { to { rotate: 4deg; } }

/* Pages */
.book-live { position: absolute; inset: 0; pointer-events: none; animation: live-in 0s 2s both; }
@keyframes live-in { from { visibility: hidden; } }
.book-live.is-on { animation: none; }
.book-live.is-turning { visibility: hidden; }
.live-page { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: auto; }
.live-right { left: 50%; }
.pg { color: #2B1D10; text-align: left; cursor: pointer; background: radial-gradient(ellipse at 60% 30%, #FFFDF6, transparent 70%), #F7EED8; }
.pg.pg-r { border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgb(110 70 25 / .3), transparent 13%), radial-gradient(ellipse at 60% 30%, #FFFDF6, transparent 70%), #F7EED8; }
.pg.pg-l { border-radius: 4px 0 0 4px; background: linear-gradient(270deg, rgb(110 70 25 / .3), transparent 13%), radial-gradient(ellipse at 40% 30%, #FFFDF6, transparent 70%), #F7EED8; }
.pg a, .pg button { cursor: pointer; }
.pg :focus-visible { outline: 3px solid #A8361B; outline-offset: 2px; }
.pg-frame { position: absolute; inset: 5% 6.5% 4.5% 8.5%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.4cqi; padding: 2cqi 2.4cqi 1cqi; border: 1px solid rgb(138 35 22 / .5); box-shadow: inset 0 0 0 3px #F7EED8, inset 0 0 0 4px rgb(190 138 48 / .55); }
.pg.pg-l .pg-frame { inset: 5% 8.5% 4.5% 6.5%; }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqi; padding-bottom: .9cqi; border-bottom: 1px solid rgb(138 35 22 / .35); font: 800 max(10px, 1.45cqi)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8A2316; }
.pg-head span[lang="he"] { font: 500 max(13px, 2.1cqi)/1 var(--hebrew); letter-spacing: 0; text-transform: none; color: #6A533A; }
.pg.pg-l .pg-head { flex-direction: row-reverse; }
.pg-body { display: grid; align-content: start; justify-items: start; gap: 1.2cqi; min-height: 0; overflow: hidden; }
.pg-center .pg-body { align-content: center; justify-items: center; text-align: center; }
.pg-body p { margin: 0; }
.pg-foot { justify-self: center; font: 500 max(12px, 1.9cqi) var(--hebrew); color: #8A6A40; }
.pg-he-big { font: 500 5cqi/1.2 var(--hebrew); color: #6A1D15; }
.pg-cover-title { font: 800 4.6cqi/1.05 var(--display); color: #2B1D10; }
.pg-titlepage .book-verse, .pg-titlepage .book-verse::before { margin-top: 0; }
.pg-titlepage .book-verse blockquote { font-size: 3.6cqi; }
.pg-titlepage .book-verse::after { display: none; }
.pg-titlepage .book-verse::before { width: 0; height: 0; }
.pg-rule, .pg-ornament { display: block; width: 60%; height: 12px; background: var(--ornament) center / contain no-repeat; }
.pg-ornament { width: 80%; height: 30px; }
.pg-author { font: italic 600 2.6cqi var(--serif); color: #4A3726; }
.pg-small { font: 700 max(10px, 1.45cqi) var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8A6A40; }
.pg-kicker { font: 800 max(10px, 1.45cqi)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #1E6B4F; }
.pg-title { margin: 0; font: 800 max(17px, 3cqi)/1.12 var(--display); color: #2B1D10; text-wrap: balance; }
.pg-title a { text-decoration: none; color: inherit; }
.pg-title a:hover { color: #A8361B; text-decoration: underline; text-decoration-color: rgb(168 54 27 / .4); }
.pg-text { font: 400 max(13px, 2cqi)/1.5 var(--serif); color: #4A3726; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1cqi; font: 700 max(11px, 1.6cqi) var(--sans); color: #6A533A; }
.pg-meta .icon { width: 2.4cqi; height: 2.4cqi; min-width: 14px; min-height: 14px; }
.pg-button { display: inline-flex; align-items: center; gap: 1cqi; min-height: 44px; padding: 0 2.6cqi; border-radius: 10px; background: linear-gradient(180deg, var(--acc-top), var(--acc-bottom)); color: #FFF8EA; font: 700 max(13px, 1.9cqi) var(--sans); text-decoration: none; box-shadow: 0 2px 0 var(--acc-edge); }
.pg-button:hover { color: #fff; filter: brightness(1.08); }
.pg-list { display: grid; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
.pg-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4cqi; border-bottom: 1px dashed rgb(90 60 28 / .25); }
.pg-list a { display: flex; align-items: center; min-height: 40px; font: 600 max(13px, 1.95cqi)/1.3 var(--serif); color: #2B1D10; text-decoration: none; }
.pg-list a:hover { color: #A8361B; text-decoration: underline; }
.pg-list span { flex: none; font: 700 max(11px, 1.55cqi) var(--sans); color: #8A6A40; }
.pg-center .pg-list { justify-items: center; }
.pg-center .pg-list li { justify-content: center; border: 0; }
.pg-toc { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.pg-toc button { display: flex; align-items: baseline; gap: 1cqi; width: 100%; min-height: 40px; padding: .6cqi 0; border: 0; background: none; font: 600 max(13px, 2cqi)/1.25 var(--serif); color: #2B1D10; text-align: left; }
.pg-toc button:hover { color: #A8361B; }
.pg-toc button span { text-align: left; }
.pg-toc i { flex: 1; min-width: 2cqi; border-bottom: 2px dotted rgb(90 60 28 / .4); translate: 0 -.3em; }
.pg-toc b { font: 500 max(13px, 2cqi) var(--hebrew); color: #8A2316; }
.pg-times { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqi; width: 100%; margin: 0; }
.pg-times div { padding: 1cqi 1.4cqi; border-radius: 8px; background: rgb(217 161 54 / .18); }
.pg-times dt { font: 700 max(10px, 1.4cqi) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6A533A; }
.pg-times dd { margin: 0; font: 800 max(17px, 3cqi)/1.1 var(--display); color: #2B1D10; }
.pg-today .pg-body, .pg-calendar .pg-body { gap: .9cqi; }
.page-date-he { font: 500 4.4cqi/1.2 var(--hebrew); color: #2B1D10; }
.page-date { font: italic 500 max(13px, 2.3cqi)/1.3 var(--serif); color: #5A4430; }
.page-label { margin-top: 1cqi !important; font: 800 max(10px, 1.45cqi)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #1E6B4F; }
.page-parasha { font: 800 max(19px, 3.6cqi)/1.05 var(--display); color: #2B1D10; }
.page-candles { display: flex; align-items: center; gap: 1cqi; margin-top: 1cqi !important; padding: .9cqi 1.6cqi; border-radius: 999px; background: rgb(217 161 54 / .2); font: 700 max(11px, 1.6cqi)/1.2 var(--sans); color: #4A3726; }
.page-candles .icon { width: 2.6cqi; height: 2.6cqi; color: #8A5A0E; }
.page-candles b { margin-left: .8cqi; font: 800 max(14px, 2.3cqi) var(--display); color: #2B1D10; }
.book-link { display: inline-flex; align-items: center; min-height: 40px; font: 800 max(12px, 1.8cqi) var(--sans); color: #A8361B; text-decoration-color: rgb(168 54 27 / .4); }
.book-link:hover { color: #74240E; }
.book-verse { display: grid; align-content: center; justify-items: center; gap: 2cqi; margin: 0; text-align: center; }
.book-verse::before, .book-verse::after { content: ""; width: 50%; height: 10px; background: var(--ornament) center / contain no-repeat; }
.book-verse blockquote { margin: 0; font: 500 4.6cqi/1.35 var(--hebrew); color: #2B1D10; text-wrap: balance; }
.book-verse figcaption { display: grid; gap: 1cqi; }
.book-verse-ru { font: italic 500 max(13px, 2.3cqi)/1.4 var(--serif); color: #4A3726; text-wrap: balance; }
.book-verse cite { font: 700 max(10px, 1.5cqi) var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #A8361B; }
/* A corner that lifts under the pointer: the page invites to be turned */
.live-right.pg::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; background: linear-gradient(135deg, transparent 50%, #E6D5AE 50%, #FFF8E6); box-shadow: -3px -3px 6px rgb(90 55 20 / .2); border-top-left-radius: 6px; transition: width .25s var(--ease), height .25s var(--ease); }
.live-right.pg:hover::after { width: 6cqi; height: 6cqi; }

/* Navigation under the book: arrows, where am I, ribbon bookmarks */
.book-nav { display: flex; align-items: center; justify-content: center; gap: 12px; width: min(100%, 640px); }
.book-turn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1.5px solid var(--gold-line); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--line-2); transition: background-color .2s var(--ease), color .2s var(--ease), translate .2s var(--ease); }
.book-turn:hover:not(:disabled) { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }
.book-turn:disabled { opacity: .4; cursor: default; }
.book-turn .icon { width: 22px; height: 22px; }
.book-where { flex: 1; margin: 0; text-align: center; font: 700 .92rem/1.3 var(--sans); color: var(--ink-2); }
.book-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.book-tab { --c: var(--cloth-terracotta); position: relative; min-height: 44px; padding: 6px 14px 12px; border: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgb(255 255 255 / .16), transparent 40%), var(--c); color: #FFF8EA; font: 700 .86rem var(--sans); cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); transition: translate .2s var(--ease), filter .2s var(--ease); }
.book-tab:hover { translate: 0 2px; filter: brightness(1.1); }
.book-tab.tab-1 { --c: var(--cloth-emerald); } .book-tab.tab-2 { --c: var(--cloth-sapphire); } .book-tab.tab-3 { --c: var(--cloth-plum); }
.book-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.book-tab[aria-current="true"] { translate: 0 4px; }
.book-stage:not(.ready) .book-nav, .book-stage:not(.ready) .book-tabs { visibility: hidden; }
.hero.still *, .hero.still *::before, .hero.still *::after { animation: none !important; }
.hero.still .dust { display: none; }

/* Search: a command line on parchment */
.search-line { display: flex; align-items: center; gap: 10px; max-width: 640px; min-height: 60px; padding: 6px 6px 6px 18px; border: 1.5px solid var(--ink-3); border-radius: var(--r-lg); background: var(--sheet);
  box-shadow: inset 0 2px 4px rgb(90 55 20 / .12), 0 2px 0 var(--line-2); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.search-line:focus-within { border-color: var(--wine); box-shadow: 0 0 0 4px var(--wine-wash), inset 0 2px 4px rgb(90 55 20 / .12); }
.search-line > .icon { color: var(--wine); width: 21px; height: 21px; }
.search-line input { flex: 1; width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; outline: none; font: 600 1.02rem var(--sans); color: var(--ink); }
.search-line input::placeholder { color: var(--ink-3); font-weight: 500; opacity: 1; }
.search-line .button { min-height: 46px; padding: 0 22px; }
.search-line-small { max-width: none; min-height: 52px; padding: 2px 6px 2px 16px; }
.search-line-small input { font-size: .98rem; }

/* «Новый урок» — feature card */
.lead-article { padding: clamp(24px, 3vw, 34px); }
.lead-article > .rubric { margin-bottom: .2em; }
.lead-title { margin: .45em 0 .35em; font: 800 clamp(1.5rem, 2.5vw, 2.05rem)/1.12 var(--display); letter-spacing: -.015em; }
.lead-title a { text-decoration: none; }
.lead-title a:hover { color: var(--wine); }
.lead-text { margin: 0; font: 400 1rem/1.6 var(--serif); color: var(--ink-2); }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.lead-actions .button { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.lead-meta { font: 700 .82rem/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-side .portrait-plate { display: none; }
  /* Phone: the book opens right under the name, then the text and buttons */
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-badge { justify-self: start; }
  .hero-badge, .masthead, .book-stage { order: -1; }
  .book-stage { padding: 14px 0 26px; }
  .book { width: min(100%, 560px); }
  .hero.hero-photo::before { background: linear-gradient(180deg, rgb(246 236 216 / .7), var(--bg) 70%); }
  :root[data-theme="dark"] .hero.hero-photo::before { background: linear-gradient(180deg, rgb(46 37 28 / .7), var(--bg) 70%); }
}
@media (max-width: 640px) {
  /* Phone: one page at a time — the double spread slides under a page-sized window */
  .book { width: min(100%, 420px); aspect-ratio: .71; overflow: clip; overflow-clip-margin: 14px; }
  .book-view { inset: 0 auto 0 0; width: 200%; transform: translateX(-50%); }
  .book[data-side="left"] .book-view { transform: none; }
  .book-tilt { animation: none; }
  .book-stage::before { inset: -10% -30%; }
  .search-line { padding-left: 14px; }
  .search-line .button { padding: 0 16px; }
  .hero-actions .button { flex: 1 1 auto; }
}

/* «Рекомендуем» / «Новый урок»: a wide card under the title page */
.featured { padding-block: clamp(4px, 1.5vw, 14px) clamp(14px, 2.5vw, 26px); }
.feature-card { position: relative; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(14px, 2vw, 20px); overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--card-glow), transparent 60%), var(--sheet); box-shadow: var(--shadow-2); }
.feature-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--spines); }
.feature-cover { --c: var(--cloth-emerald); position: relative; display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px 16px 16px 8px; color: #FFF5DF; text-decoration: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .05) 10px, rgb(255 255 255 / .1) 13px, transparent 30%), radial-gradient(ellipse at 70% 20%, rgb(255 255 255 / .18), transparent 60%), var(--paper-grain), var(--c);
  box-shadow: inset 0 0 0 8px var(--c), inset 0 0 0 9px rgb(246 217 149 / .7), 0 16px 30px -18px rgb(40 20 5 / .8); transition: translate .3s var(--ease); }
.feature-cover:hover { color: #fff; translate: 0 -3px; }
.feature-cover .icon { width: 44px; height: 44px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: rgb(255 255 255 / .14); color: #F6D995; }
.feature-cover-title { max-width: 80%; font: 800 1.5rem/1.15 var(--display); text-align: center; color: #F6E2B4; }
.feature-cover.has-image { box-shadow: 0 16px 30px -18px rgb(40 20 5 / .8); }
.feature-cover img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { min-width: 0; padding-right: clamp(0px, 2vw, 20px); }
.feature-body .rubric { margin-bottom: .3em; }
.feature-title { margin: .2em 0 .35em; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.08 var(--display); }
.feature-title a { text-decoration: none; }
.feature-title a:hover { color: var(--wine); }
.feature-text { margin: 0; max-width: 62ch; font: 400 1.06rem/1.6 var(--serif); color: var(--ink-2); }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.feature-actions .button { min-height: 52px; padding: 0 26px; font-size: 1rem; }
@media (max-width: 760px) { .feature-card { grid-template-columns: minmax(0, 1fr); } .feature-cover { aspect-ratio: 16 / 8; } }
.portrait-margin { margin: 0; }
.portrait-margin figcaption a { display: inline-flex; min-height: 44px; align-items: center; font: 700 .9rem var(--sans); color: var(--wine); }

/* This week: Shabbat, dates, subscription */
.home-week { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .9fr); gap: 18px; align-items: stretch; padding-block: clamp(16px, 2.5vw, 28px); }
@media (max-width: 1100px) { .home-week { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .home-week .shabbat-card { grid-column: 1 / -1; } }
@media (max-width: 700px) { .home-week { grid-template-columns: minmax(0, 1fr); } }
.shabbat-card { display: grid; gap: 14px; align-content: start; padding: 24px 24px 20px; }
.shabbat-parasha { margin: 0; font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); }
.shabbat-label { display: block; margin-bottom: 4px; font: italic 500 .62em/1 var(--italic); color: var(--wine); }
.shabbat-special { margin: 0; font: 700 .86rem var(--sans); color: var(--plum); }
.shabbat-desc { margin: 0; font: 400 .98rem/1.55 var(--serif); color: var(--ink-2); }
.shabbat-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.shabbat-times > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--sheet-2); border: 1px solid var(--line); }
.shabbat-times .icon { grid-row: span 2; width: 30px; height: 30px; padding: 5px; border-radius: 50%; }
.time-candles .icon { background: rgb(201 149 46 / .25); color: var(--gold); }
.time-havdalah .icon { background: var(--wine-wash); color: var(--wine); }
.shabbat-times dt { font: 700 .72rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.shabbat-times dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.shabbat-times time { font: 800 1.75rem/1.1 var(--display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.shabbat-times dd span { font: 600 .78rem var(--sans); color: var(--ink-3); }
.countdown { margin: 0; font: 700 .9rem var(--sans); color: var(--wine); }
.countdown:empty { display: none; }
.shabbat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shabbat-card.compact .shabbat-times time { font-size: 1.45rem; }
@media (max-width: 420px) { .shabbat-times { grid-template-columns: 1fr; } }
.week-card, .sub-card, .upcoming-card { display: grid; align-content: start; gap: 10px; padding: 22px; }
.week-card > .rubric, .sub-card > .rubric, .upcoming-card > .rubric { margin: 0; }
.sub-card h2 { margin: 0; font-size: 1.45rem; }
.sub-card p { margin: 0; font: 400 .95rem/1.55 var(--serif); color: var(--ink-2); }
.upcoming { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.upcoming a { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; margin-inline: -8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.upcoming a:hover { background: var(--sheet-2); color: var(--ink); }
.up-when { display: grid; line-height: 1.2; }
.up-when b { font: 800 .84rem var(--sans); color: var(--wine); }
.up-when small { font: 600 .76rem var(--sans); color: var(--ink-3); }
.up-title { position: relative; padding-left: 14px; font: 700 .95rem/1.3 var(--sans); }
.up-title::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; rotate: 45deg; background: var(--c, var(--gold-bright)); }
.ev-yomtov { --c: var(--wine); } .ev-holiday { --c: var(--gold-bright); } .ev-fast { --c: var(--slate); } .ev-roshchodesh { --c: var(--olive); } .ev-modern { --c: var(--lapis); } .ev-shabbat { --c: var(--plum); } .ev-erev { --c: var(--ochre); } .ev-omer { --c: var(--ink-3); }

/* Subscription form */
.subscribe { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe input[type="email"] { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--ink-3); border-radius: var(--r); background: var(--sheet); font: 500 1rem var(--sans); color: var(--ink); }
.subscribe input[type="email"]:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 4px var(--wine-wash); }
.subscribe .button { flex: 0 0 auto; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Topic tiles: book covers in cloth of different colours */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.topic-tile { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-height: 140px; padding: 18px 18px 16px; border-radius: 6px 14px 14px 6px; color: #FBF1DC; text-decoration: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(90deg, rgb(0 0 0 / .28) 0, rgb(0 0 0 / .05) 9px, rgb(255 255 255 / .1) 12px, transparent 30%), radial-gradient(ellipse at 80% 0%, rgb(255 255 255 / .2), transparent 55%), var(--paper-grain), var(--c);
  box-shadow: inset 0 0 0 6px var(--c), inset 0 0 0 7px rgb(233 199 122 / .7), 0 3px 0 rgb(0 0 0 / .25), 0 14px 24px -14px rgb(40 20 5 / .8); transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.topic-tile:hover { color: #fff; translate: 0 -3px; box-shadow: inset 0 0 0 6px var(--c), inset 0 0 0 7px #E9C77A, 0 3px 0 rgb(0 0 0 / .25), 0 22px 32px -16px rgb(40 20 5 / .85); }
.tone-0 { --c: var(--cloth-terracotta); } .tone-1 { --c: var(--cloth-emerald); } .tone-2 { --c: var(--cloth-sapphire); } .tone-3 { --c: var(--cloth-ochre); } .tone-4 { --c: var(--cloth-plum); } .tone-5 { --c: var(--cloth-teal); }
.topic-num { font: 700 .82rem/1 var(--display); letter-spacing: .08em; color: #E9C77A; }
.topic-title { align-self: end; font: 700 1.28rem/1.15 var(--display); }
.topic-count { justify-self: start; padding: 4px 10px; border: 1px solid rgb(233 199 122 / .6); border-radius: 999px; font: 700 .78rem/1.3 var(--sans); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .topic-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .topic-tile { min-height: 120px; padding: 15px; } .topic-title { font-size: 1.08rem; } }

/* Home: lessons + margin */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 36px); align-items: start; padding-block: clamp(12px, 2vw, 24px) clamp(32px, 5vw, 64px); }
.home-main { min-width: 0; }
.margin { min-width: 0; font: 500 .92rem/1.55 var(--sans); color: var(--ink-2); }
.margin-right { position: sticky; top: calc(var(--header-h) + 20px); display: grid; align-content: start; gap: 14px; }
@media (max-width: 999px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .margin-right { position: static; } }
.margin-note { margin: 10px 0 4px; font-size: .9rem; color: var(--ink-3); }
.margin-note a { display: inline-flex; align-items: center; min-height: 40px; font: 700 .9rem/1.2 var(--sans); color: var(--wine); text-decoration: none; }
.margin-note a:hover { text-decoration: underline; }
.margin-block { padding: 18px 18px 8px; }
.margin-block .rubric { margin-bottom: .5em; }
.margin-list { margin: 0 -8px; padding: 0; list-style: none; }
.margin-list li + li { border-top: 1px dashed var(--line-2); }
.margin-list a { display: grid; gap: 6px; min-height: 44px; padding: 10px 8px; border-radius: var(--r-sm); font: 400 .95rem/1.45 var(--serif); color: var(--ink); text-decoration: none; }
.margin-list a:hover { background: var(--sheet-2); color: var(--wine); }
.margin-list .continue-meta { font: 600 .78rem var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.letter-teaser { position: relative; display: grid; gap: 8px; padding: 22px 22px 12px; border-radius: var(--r-lg); color: var(--leather-ink); text-decoration: none; overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgb(226 182 92 / .25), transparent 55%), var(--paper-grain), linear-gradient(160deg, #983519, #6A220F);
  box-shadow: inset 0 0 0 5px #85301A, inset 0 0 0 6px rgb(226 182 92 / .6), var(--shadow-2); transition: translate .25s var(--ease); }
.letter-teaser:hover { color: #fff; translate: 0 -2px; }
.letter-teaser .rubric { margin: 0; color: var(--leather-gold); }
.letter-teaser .rubric::before { background: var(--leather-gold); }
.letter-teaser-title { font: 800 1.5rem/1.15 var(--display); }
.letter-teaser-text { font: 400 .94rem/1.55 var(--serif); color: #EBD7B0; }
.letter-teaser .more-link { min-height: 40px; color: var(--leather-gold); }

/* ── Lesson lists ───────────────────────────────────────────────────────── */
.toc { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.toc-row { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 18px 20px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), translate .25s var(--ease); }
.toc-row:hover { border-color: var(--wine); box-shadow: var(--shadow-2); translate: 0 -2px; }
.toc-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--wine-wash); border: 1px solid var(--gold-line); font: 700 .95rem/1 var(--display); color: var(--wine); font-variant-numeric: lining-nums tabular-nums; transition: background-color .25s var(--ease), color .25s var(--ease); }
.toc-row:hover .toc-num, .qa-item:hover .toc-num { background: var(--wine); color: var(--on-wine); }
.toc-body { min-width: 0; }
.toc-kicker { margin: 0 0 4px; font: 800 .72rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.toc-kicker a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.toc-kicker a:hover { text-decoration: underline; }
.toc-row h3 { margin: 0; font: 700 1.2rem/1.3 var(--display); letter-spacing: -.005em; }
.toc-row h3 a { text-decoration: none; }
.toc-row h3 a::after { content: ""; position: absolute; inset: 0; }
.toc-row:hover h3 a { color: var(--wine); }
.toc-gloss { margin: 6px 0 0; max-width: 70ch; font: 400 .96rem/1.55 var(--serif); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toc-gloss mark, .search-results mark { background: var(--mark); color: var(--ink); padding: 0 .15em; border-radius: 3px; }
.toc-meta { display: grid; justify-items: end; gap: 6px; margin: 0; padding-top: .1rem; font: 600 .8rem/1.3 var(--sans); color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.toc-meta .button { position: relative; z-index: 1; }
.toc-formats { display: inline-flex; gap: 4px; }
.toc-formats .icon { box-sizing: content-box; width: 15px; height: 15px; padding: 6px; border-radius: 8px; border: 1px solid currentColor; }
.toc-formats .fmt-text { color: var(--plum); background: rgb(106 46 87 / .08); }
.toc-formats .fmt-video { color: var(--lapis); background: rgb(44 76 124 / .08); }
.toc-formats .fmt-audio { color: var(--olive); background: rgb(76 90 30 / .09); }
.toc-meta .more-link { position: relative; z-index: 1; min-height: 32px; }
.toc-body .progress { margin-top: 12px; max-width: 320px; }
.saved-mark { display: inline-flex; margin-left: 8px; color: var(--wine); vertical-align: -2px; }
.saved-mark .icon { width: 13px; height: 13px; fill: currentColor; }
@media (min-width: 1000px) { .toc-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px) {
  .toc-row { grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .toc-num { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
  .toc-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 10px; text-align: left; white-space: normal; }
}

/* ── Book shelf of series ───────────────────────────────────────────────── */
.section-shelf { padding-top: clamp(8px, 2vw, 20px); }
.page-title + .section, .page-title + .wrap.section { padding-top: clamp(22px, 3vw, 36px); }
.shelf { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 34px 26px 22px; margin-bottom: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain;
  border-radius: var(--r-lg); border: 1px solid #3B2615;
  background: linear-gradient(#C68B4E, #C68B4E) left bottom 14px / 100% 2px no-repeat local, linear-gradient(180deg, #8A5A2E, #5A3818) left bottom 0 / 100% 16px no-repeat local,
    linear-gradient(180deg, rgb(0 0 0 / .25), transparent 30px), var(--paper-grain), linear-gradient(180deg, #4A2E17, #3A2312);
  box-shadow: inset 0 0 0 1px rgb(226 182 92 / .25), inset 0 12px 30px -10px rgb(0 0 0 / .6), var(--shadow-2); }
.spine { --c: #7A2216; position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 64px; height: 290px; padding: 14px 0 12px; scroll-snap-align: start;
  border-radius: 4px 4px 2px 2px; color: #FBF1DC; text-decoration: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .35) 0, rgb(255 255 255 / .12) 18%, rgb(255 255 255 / .03) 45%, rgb(0 0 0 / .1) 78%, rgb(0 0 0 / .4) 100%), var(--paper-grain), var(--c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 1px rgb(0 0 0 / .3), 0 10px 16px -10px rgb(0 0 0 / .8); transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.spine:hover, .spine:focus-visible { color: #fff; translate: 0 -12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 26px 30px -14px rgb(0 0 0 / .8); }
.spine:focus-visible { outline: 3px solid var(--leather-gold); outline-offset: 3px; }
.shelf > .spine:nth-child(6n+1) { --c: var(--cloth-terracotta); } .shelf > .spine:nth-child(6n+2) { --c: var(--cloth-emerald); } .shelf > .spine:nth-child(6n+3) { --c: var(--cloth-sapphire); } .shelf > .spine:nth-child(6n+4) { --c: var(--cloth-ochre); } .shelf > .spine:nth-child(6n+5) { --c: var(--cloth-plum); } .shelf > .spine:nth-child(6n+6) { --c: var(--cloth-teal); }
.spine.h-0 { height: 290px; } .spine.h-1 { height: 262px; width: 58px; } .spine.h-2 { height: 312px; width: 70px; } .spine.h-3 { height: 276px; }
.spine-band { flex: none; width: calc(100% - 14px); height: 10px; border-block: 2px solid #E2B65C; opacity: .85; }
.spine-band.bottom { margin-top: 10px; }
.spine-title { flex: 1; min-height: 0; margin-block: 14px 10px; overflow: hidden; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 1rem/1.15 var(--display); letter-spacing: .03em; text-align: start; text-wrap: balance; color: #F6E2B4; text-shadow: 0 1px 1px rgb(0 0 0 / .4); }
.spine-count { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgb(226 182 92 / .7); font: 700 .78rem/1 var(--display); color: #F6E2B4; font-variant-numeric: lining-nums; }
.shelf-board { flex: 1 0 12px; align-self: stretch; }
@media (max-width: 640px) { .shelf { padding: 28px 16px 22px; } .spine.h-0 { height: 252px; } .spine.h-1 { height: 230px; } .spine.h-2 { height: 270px; } .spine.h-3 { height: 240px; } }
.series-register { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.series-register a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; color: var(--ink); text-decoration: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.series-register a:hover { color: var(--ink); border-color: var(--wine); box-shadow: var(--shadow-2); }
.series-register .contents-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--wine); color: var(--on-wine); font: 700 .86rem/1 var(--display); }
.series-register-body { display: grid; gap: 4px; min-width: 0; }
.series-register-body strong { font: 700 1.2rem/1.3 var(--display); }
.series-register-body span { font: 400 .95rem/1.55 var(--serif); color: var(--ink-2); }
.series-register a:hover strong { color: var(--wine); }
@media (max-width: 640px) { .series-register a { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 12px; padding: 16px; } .series-register .contents-num { width: 2.2rem; height: 2.2rem; } .series-register .contents-count { grid-column: 2; justify-self: start; } }
.contents-num { flex: none; width: 2.2em; font: 700 .8rem/1 var(--display); color: var(--wine); font-variant-numeric: lining-nums tabular-nums; }
.contents-count { flex: none; padding: 4px 10px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft); font: 700 .78rem/1.2 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Catalog ────────────────────────────────────────────────────────────── */
.catalog { padding-block: 22px clamp(56px, 7vw, 96px); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.filters .search-line { flex: 1 1 280px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-2); min-width: 0; }
.seg { position: relative; display: inline-flex; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 .88rem var(--sans); color: var(--ink-2); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); pointer-events: none; }
.seg:hover span { color: var(--wine); }
.seg input:checked + span { background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); color: var(--on-wine); box-shadow: inset 0 0 0 1px rgb(226 182 92 / .5); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.filter-selects { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.select { display: inline-flex; max-width: 100%; }
.select select { appearance: none; -webkit-appearance: none; min-height: 50px; max-width: 100%; padding: 0 38px 0 16px; border: 1.5px solid var(--ink-3); border-radius: var(--r); background: var(--sheet) var(--select-arrow) no-repeat right 15px center; font: 650 .9rem var(--sans); color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.select select:hover { border-color: var(--wine); }
.select select option, .select select optgroup { background: var(--sheet); color: var(--ink); }
.result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; min-height: 60px; font: 700 .86rem var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; font-variant-numeric: tabular-nums; }
.page-link { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--sheet); font: 700 .95rem var(--display); color: var(--ink); text-decoration: none; }
a.page-link:hover { border-color: var(--wine); color: var(--wine); }
.page-link.current { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }
.page-gap { display: inline-grid; place-items: center; min-width: 28px; color: var(--ink-3); }
.empty-state { padding: clamp(36px, 6vw, 64px) 24px; text-align: center; }
.empty-state .rubric { justify-content: center; }
.empty-state h2 { margin-bottom: .35em; }
.empty-state p:not(.rubric) { max-width: 52ch; margin-inline: auto; font: 400 1.02rem/1.6 var(--serif); color: var(--ink-2); }
.empty-state .row { justify-content: center; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--gold-line); border-radius: 999px; background: var(--sheet); font: 700 .88rem var(--sans); color: var(--ink-2); text-decoration: none; }
.tag:hover { border-color: var(--wine); color: var(--wine); }
.tag.active { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }
@media (max-width: 640px) {
  .filters { gap: 8px; padding: 8px; }
  .segmented { width: 100%; }
  .seg { flex: 1; }
  .seg span { width: 100%; padding: 0 6px; }
  .filter-selects { width: 100%; }
  .filter-selects .select { flex: 1 1 140px; }
  .select select { width: 100%; }
}

/* ── Lesson page ────────────────────────────────────────────────────────── */
.reading-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .reading-progress { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; background: linear-gradient(90deg, var(--wine), var(--gold-bright)); transform-origin: 0 50%; transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
.lesson-head { padding-block: clamp(28px, 4.5vw, 52px) clamp(24px, 3vw, 34px); margin-bottom: clamp(22px, 3vw, 32px); max-width: 940px; background: var(--ornament) left bottom / 180px 14px no-repeat; }
.lesson-title { max-width: 24ch; margin: 0 0 .35em; font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.06 var(--display); letter-spacing: -.02em; }
.lesson-head .lead { margin: 0 0 .9em; }
.lesson-byline { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font: 700 .86rem/1.6 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lesson-daf { display: grid; grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(48px, 6vw, 80px); }
.lesson-main { grid-column: 1; grid-row: 1; min-width: 0; }
.lesson-margin { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; padding: 12px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); scrollbar-width: thin; }
.tools-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet-2); font: 700 .84rem/1.2 var(--sans); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.tool .icon { width: 18px; height: 18px; color: var(--wine); }
.tool:hover { background: var(--sheet-3); border-color: var(--wine); color: var(--ink); }
.tool.is-on { background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); border-color: var(--btn-edge); color: var(--on-wine); }
.tool.is-on .icon { color: inherit; fill: currentColor; }
.tool:disabled { opacity: .6; }
.toc-nav, .series-contents { margin-top: 12px; padding: 12px 4px 4px; border-top: 1px dashed var(--line-2); }
.toc-nav summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0; padding: 0 8px; cursor: pointer; list-style: none; border-radius: var(--r-sm); }
.toc-nav summary.rubric { margin: 0; }
.toc-nav summary::-webkit-details-marker { display: none; }
.toc-nav summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--ink-3); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .2s var(--ease); }
.toc-nav details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.series-contents > .rubric { padding: 0 8px; min-height: 40px; margin: 0; }
.toc-nav ol, .series-contents ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.toc-nav a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font: 400 .94rem/1.4 var(--serif); color: var(--ink-2); text-decoration: none; }
.toc-nav a:hover { background: var(--sheet-2); color: var(--ink); }
.toc-nav a.active { background: var(--wine-wash); color: var(--wine); font-weight: 700; box-shadow: inset 3px 0 0 var(--wine); }
.toc-nav .toc-l3 a { padding-left: 24px; font-size: .9rem; }
.series-contents a { display: flex; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font: 400 .92rem/1.4 var(--serif); color: var(--ink-2); text-decoration: none; }
.series-contents .contents-num { width: 1.6em; padding-top: .2em; }
.series-contents a:hover { background: var(--sheet-2); color: var(--ink); }
.series-contents li[aria-current] a { background: var(--wine-wash); color: var(--wine); font-weight: 700; }
@media (max-width: 999px) {
  .lesson-daf { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lesson-margin { display: contents; }
  .tools-stack { order: -2; display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)) 18px; padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
  .tools-stack::-webkit-scrollbar { display: none; }
  .tool { flex: none; width: auto; padding: 0 16px; border-radius: 999px; background: var(--sheet); border-color: var(--line-2); }
  .toc-nav { order: -1; margin: 0 0 20px; padding: 6px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
  .toc-nav details[open] ol { margin: 4px 0 6px; }
  .lesson-main { order: 0; }
  .series-contents { order: 1; margin-top: 32px; padding: 12px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
}

/* Media: player plate in walnut and brass */
.media { margin-bottom: 26px; }
.media-tabs { display: inline-flex; gap: 3px; margin-bottom: 12px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-2); }
.media-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 700 .88rem var(--sans); color: var(--ink-2); cursor: pointer; }
.media-tabs button .icon { width: 17px; height: 17px; }
.media-tabs button[aria-selected="true"] { background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); color: var(--on-wine); }
.media-tabs button:hover { color: var(--wine); }
.media-tabs button[aria-selected="true"]:hover { color: var(--on-wine); }
.media video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg); border: 6px solid var(--leather); box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-2); }
.audio-plate { position: relative; overflow: hidden; padding: 20px 22px 10px; border-radius: var(--r-lg); color: var(--leather-ink);
  background: radial-gradient(circle at 100% 0, rgb(226 182 92 / .2), transparent 50%), var(--paper-grain), var(--binding);
  box-shadow: inset 0 0 0 5px #143A31, inset 0 0 0 6px rgb(226 182 92 / .55), var(--shadow-2); }
.audio-plate .rubric { margin-bottom: 14px; color: var(--leather-gold); font-variant-numeric: tabular-nums; }
.audio-plate .rubric::before { background: var(--leather-gold); }
.audio-plate audio { width: 100%; margin-bottom: 6px; }
.audio-plate .text-link.small { min-height: 44px; color: var(--leather-ink-2); }
.audio-plate .text-link.small:hover { color: var(--leather-gold); }
.audio-plate :focus-visible { outline-color: var(--leather-gold); }
.player { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "play back fwd seek speed" "play back fwd time speed"; align-items: center; column-gap: 6px; margin-bottom: 4px; }
.player-row { display: contents; }
.player-play { grid-area: play; display: grid; place-items: center; width: 66px; height: 66px; margin-right: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #FBF1DC;
  background: radial-gradient(circle at 35% 30%, #B33A26, #7A1E12 60%, #561208);
  box-shadow: inset 0 0 0 2px rgb(226 182 92 / .7), inset 0 0 0 4px #7A1E12, inset 0 0 0 5px rgb(226 182 92 / .4), 0 8px 18px -6px rgb(0 0 0 / .7); transition: scale .2s var(--ease); }
.player-play:hover { scale: 1.05; }
.player-play:active { scale: .96; }
.player-play .icon { width: 26px; height: 26px; }
.player-skip { display: grid; place-items: center; min-width: 48px; min-height: 44px; padding: 0 8px; border: 1px solid rgb(226 182 92 / .4); border-radius: 999px; background: rgb(255 255 255 / .06); font: 800 .82rem var(--sans); color: var(--leather-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.player-row .player-skip:nth-child(2) { grid-area: back; }
.player-row .player-skip:nth-child(3) { grid-area: fwd; margin-right: 14px; }
.player-skip:hover { background: rgb(226 182 92 / .18); }
.player-seek { grid-area: seek; align-self: end; width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.player-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--leather-gold) var(--pct, 0%), rgb(255 255 255 / .18) var(--pct, 0%)); }
.player-seek::-moz-range-track { height: 6px; border-radius: 999px; background: rgb(255 255 255 / .18); }
.player-seek::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--leather-gold); }
.player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid #7A1E12; border-radius: 50%; background: #F6D995; }
.player-seek::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #7A1E12; border-radius: 50%; background: #F6D995; }
.player-time { grid-area: time; align-self: start; display: flex; justify-content: space-between; padding-top: 2px; font: 700 .8rem var(--sans); color: var(--leather-ink-2); font-variant-numeric: tabular-nums; }
.player-speed { grid-area: speed; position: relative; min-width: 60px; min-height: 40px; margin-left: 14px; padding: 0 12px; border: 1px solid rgb(226 182 92 / .5); border-radius: 999px; background: transparent; font: 800 .82rem var(--sans); color: var(--leather-gold); cursor: pointer; font-variant-numeric: tabular-nums; }
.player-speed::before { content: ""; position: absolute; inset: -3px -1px; }
.player-speed:hover { background: rgb(226 182 92 / .14); }
@media (max-width: 560px) {
  .audio-plate { padding: 18px 16px 10px; }
  .player { grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "seek seek seek seek seek" "time time time time time" "play back fwd . speed"; row-gap: 8px; }
  .player-seek { align-self: center; }
  .player-row .player-skip:nth-child(3) { margin-right: 0; }
}
.resume-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 0; padding: 10px 10px 10px 16px; border: 1px solid var(--gold-line); border-radius: var(--r); background: var(--gold-soft); font: 700 .9rem var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.chapters { margin-top: 14px; padding: 14px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.chapters .rubric { margin-bottom: 8px; }
.chapters ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.chapters button { display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font: 400 1rem/1.4 var(--serif); color: var(--ink); cursor: pointer; }
.chapters button:hover { background: var(--sheet-2); color: var(--wine); }
.chapters button.is-current { background: var(--wine-wash); color: var(--wine); font-weight: 700; }
.chapters time { flex: none; min-width: 3.6em; font: 800 .84rem var(--sans); color: var(--wine); font-variant-numeric: tabular-nums; }

.lesson-summary { position: relative; margin: 0 0 26px; padding: 20px 24px 20px 28px; border-left: 4px solid var(--wine); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--gold-soft); font: italic 400 clamp(1.08rem, 1.5vw, 1.18rem)/1.6 var(--serif); color: var(--ink); }
.reading-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 26px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet); }
.reading-bar .rubric { margin: 0 auto 0 0; }
.chip-button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-2); font: 800 .86rem var(--sans); color: var(--ink); cursor: pointer; }
.chip-button:hover { border-color: var(--wine); color: var(--wine); }
.chip-button[aria-pressed="true"] { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }

/* Prose: PT Serif on parchment, red initial */
.prose { font: 400 var(--prose-size)/1.78 var(--serif); color: var(--ink); overflow-wrap: break-word; hanging-punctuation: first; max-width: 70ch; }
.prose > p:first-of-type::first-letter { float: left; margin: .06em .12em 0 0; padding: 0 .06em; font: 800 3.6em/.82 var(--display); color: var(--wine); }
.prose h2 { margin: 1.8em 0 .5em; padding-bottom: .3em; font: 700 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--display); background: linear-gradient(var(--gold-line), var(--gold-line)) left bottom / 64px 2px no-repeat; }
.prose h3 { margin: 1.5em 0 .4em; font: italic 700 1.25rem/1.3 var(--display); color: var(--ink-2); }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose a { color: var(--wine); text-decoration-color: var(--gold-line); }
.prose a:hover { text-decoration-color: currentColor; }
.prose blockquote { margin: 1.6em 0; padding: 16px 22px; border-left: 4px solid var(--gold-bright); border-radius: 0 var(--r) var(--r) 0; background: var(--gold-soft); font-style: italic; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote p:first-of-type::first-letter { float: none; margin: 0; padding: 0; font: inherit; color: inherit; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .4em; padding-left: .2em; }
.prose ul li::marker { content: "◆  "; color: var(--gold-bright); font-size: .7em; }
.prose ol li::marker { color: var(--wine); font: 800 .9em var(--display); }
.prose hr { margin: 2.4em auto; width: 180px; height: 14px; border: 0; background: var(--ornament) center / contain no-repeat; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose img { margin: 1.6em 0; border-radius: var(--r); border: 6px solid var(--sheet); box-shadow: 0 0 0 1px var(--gold-line), var(--shadow-1); }
.prose code { font: .88em ui-monospace, Consolas, monospace; background: var(--sheet-2); padding: .1em .35em; border-radius: 4px; }
.prose :lang(he), .prose [dir="rtl"] { font-family: var(--hebrew); font-size: 1.12em; }
.prose > :last-child { margin-bottom: 0; }
.source-note { margin: 36px 0 0; padding: 14px 16px; border-radius: var(--r); border: 1px dashed var(--line-2); font: 600 .86rem/1.55 var(--sans); color: var(--ink-3); }
.series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 44px 0 0; }
.series-step { display: grid; align-content: start; gap: 6px; padding: 18px 20px; color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), translate .2s var(--ease); }
.series-step:hover { color: var(--ink); border-color: var(--wine); box-shadow: var(--shadow-2); translate: 0 -2px; }
.series-step .rubric { margin: 0; }
.series-step strong { font: 700 1.1rem/1.35 var(--display); }
.series-step:hover strong { color: var(--wine); }
.series-step.next { justify-items: end; text-align: right; }
.series-step.next .rubric { flex-direction: row-reverse; }
@media (max-width: 600px) { .series-nav { grid-template-columns: 1fr; } .series-nav > span:empty { display: none; } .series-step.next { justify-items: start; text-align: left; } .series-step.next .rubric { flex-direction: row; } }
.letter-cta { position: relative; overflow: hidden; margin-top: 44px; padding: clamp(24px, 3.4vw, 34px); border-radius: var(--r-lg); color: var(--leather-ink);
  background: radial-gradient(circle at 100% 0, rgb(226 182 92 / .22), transparent 55%), var(--paper-grain), linear-gradient(160deg, #983519, #6A220F);
  box-shadow: inset 0 0 0 5px #85301A, inset 0 0 0 6px rgb(226 182 92 / .6), var(--shadow-2); }
.letter-cta .rubric { color: var(--leather-gold); }
.letter-cta .rubric::before { background: var(--leather-gold); }
.letter-cta-title { margin: 0 0 .35em; font: 800 clamp(1.45rem, 2.4vw, 1.85rem)/1.15 var(--display); color: #FBF1DC; }
.letter-cta p:not(.rubric):not(.letter-cta-title) { max-width: 54ch; font: 400 1rem/1.6 var(--serif); color: #EBD7B0; }
.letter-cta .button-ink { background: linear-gradient(180deg, #F6D995, #D9AE55); color: #3A1A08; border-color: #8A6420; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 0 #6E4A12; }
.letter-cta :focus-visible { outline-color: var(--leather-gold); }

/* ── Letters, Q&A ───────────────────────────────────────────────────────── */
.qa-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qa-item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 20px; color: var(--ink); text-decoration: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), translate .25s var(--ease); }
.qa-item:hover { color: var(--ink); border-color: var(--wine); box-shadow: var(--shadow-2); translate: 0 -2px; }
.qa-body { display: grid; gap: 8px; min-width: 0; }
.qa-q { font: 400 1.08rem/1.5 var(--serif); }
.qa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font: 600 .82rem var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qa-meta .more-link { min-height: 0; margin-left: auto; }
.qa-item:hover .qa-q { color: var(--wine); }
.qa-item:has(.status-pill) { grid-template-columns: 10.5rem minmax(0, 1fr); }
@media (max-width: 640px) { .qa-item { grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 12px; padding: 16px; } .qa-item .toc-num { width: 2.2rem; height: 2.2rem; } .qa-item:has(.status-pill) { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }
.status-pill { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin-top: .1rem; padding: 0 11px; border-radius: 999px; border: 1px solid currentColor; font: 800 .76rem/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.status-pill::before { content: ""; width: 7px; height: 7px; rotate: 45deg; background: currentColor; }
.status-pill.status-new { color: var(--wine); background: var(--wine-wash); }
.status-pill.status-in_progress { color: var(--gold); background: var(--gold-soft); }
.status-pill.status-answered { color: var(--olive); background: rgb(76 90 30 / .1); }
.letter { margin: 0 0 16px; padding: clamp(20px, 3vw, 28px); }
.letter-a { border-color: var(--gold-line); box-shadow: inset 4px 0 0 var(--wine), var(--shadow-2); }
.letter-a .prose { font-size: 1.08rem; }
.letter-a .prose > p:first-of-type::first-letter { float: none; margin: 0; padding: 0; font: inherit; color: inherit; }
.message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 1.08rem/1.7 var(--serif); }
.letter-date { margin: 14px 0 0; font: 600 .82rem var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.narrow > h1 { margin-top: 8px; }
.notice { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet-2); font: 600 .92rem/1.55 var(--sans); color: var(--ink); }
.notice .icon { margin-top: 2px; color: var(--wine); }
.notice-error { border-color: var(--wine); background: var(--wine-wash); }
.notice-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wine); color: var(--on-wine); font: 800 .8rem/1 var(--sans); }
.notice-ok { border-color: var(--olive); background: rgb(76 90 30 / .1); }
.context-line, .account-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid var(--gold-line); font: 600 .9rem/1.5 var(--sans); color: var(--ink-2); }
.context-line .icon, .account-note .icon { margin-top: 1px; color: var(--wine); }
.context-line { margin-bottom: 16px; }

/* ── Ask page: a letter on good paper ───────────────────────────────────── */
.ask-page > .breadcrumbs { margin-bottom: 8px; }
.ask-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.letter-paper { display: grid; gap: 20px; padding: clamp(26px, 4vw, 44px); }
.letter-salutation { margin: 0 0 4px; font: italic 700 clamp(1.8rem, 3.4vw, 2.5rem)/1.1 var(--display); letter-spacing: -.01em; }
.field { display: grid; gap: 7px; min-width: 0; }
.label { font: 700 .88rem/1.4 var(--sans); color: var(--ink); }
.label em { margin-left: 6px; font-style: normal; font-weight: 600; color: var(--ink-3); }
.field input, .field textarea, .copy-box input { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--ink-3); border-radius: var(--r); background: rgb(255 252 244 / .7); font: 500 1rem var(--sans); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
:root[data-theme="dark"] :is(.field input, .field textarea, .copy-box input) { background: var(--sheet-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--wine); }
.field input:focus, .field textarea:focus, .copy-box input:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 4px var(--wine-wash); }
.field textarea { min-height: 240px; padding: 12px 14px; resize: vertical; font: 400 1.05rem/1.7 var(--serif); }
textarea.ruled { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.7em - 1px), var(--line) calc(1.7em - 1px) 1.7em); background-attachment: local; background-position: 0 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.counter { justify-self: end; min-height: 1.2em; font: 600 .8rem var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font: 500 .95rem/1.5 var(--sans); color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--wine); cursor: pointer; }
.sign-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sign-choice legend { margin-bottom: 8px; padding: 0; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: rgb(255 252 244 / .6); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
:root[data-theme="dark"] .choice { background: var(--sheet-2); }
.choice:hover { border-color: var(--wine); }
.choice:has(input:checked) { border-color: var(--wine); background: var(--wine-wash); box-shadow: inset 0 0 0 1px var(--wine); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--wine); }
.choice span { display: grid; gap: 3px; }
.choice b { font: 700 1rem var(--sans); color: var(--ink); }
.choice small { font: 400 .9rem/1.45 var(--serif); color: var(--ink-2); }
.letter-paper:has(input[name="anon"][value="1"]:checked) .sign-fields { display: none; }
@media (max-width: 640px) { .sign-choice { grid-template-columns: 1fr; } }
.similar { padding: 14px 16px; border: 1px solid var(--gold-line); border-radius: var(--r); background: var(--gold-soft); font: 500 .94rem/1.5 var(--serif); }
.similar strong { font: 800 .74rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wine); }
.similar ul { margin: 8px 0 0; padding-left: 18px; }
.similar li { margin: 4px 0; }
.letter-paper .button-wide { margin-top: 4px; min-height: 54px; font-size: 1rem; }
.ask-notes { position: sticky; top: calc(var(--header-h) + 20px); padding: 22px; }
.ask-notes h2 { margin-bottom: 14px; font-size: clamp(1.35rem, 2vw, 1.6rem); }
.notes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: note; }
.notes li { position: relative; padding: 14px 14px 14px 52px; border-radius: var(--r); background: var(--sheet-2); counter-increment: note; font: 400 .96rem/1.55 var(--serif); color: var(--ink-2); }
.notes li::before { content: counter(note); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wine); font: 700 .84rem/1 var(--display); color: var(--on-wine); }
.notes b { color: var(--ink); }
@media (max-width: 900px) { .ask-layout { grid-template-columns: minmax(0, 1fr); } .ask-notes { position: static; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .letter-paper { padding: 26px 16px 22px; } }
.sent-card { padding: clamp(28px, 5vw, 48px); }
.sent-card h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.sent-card > p:not(.rubric) { font: 400 1.04rem/1.6 var(--serif); color: var(--ink-2); max-width: 56ch; }
.sent-card > p.small { font: 700 .86rem var(--sans); color: var(--ink); margin-top: 24px; margin-bottom: 0; }
.copy-box { display: flex; gap: 8px; margin: 10px 0 12px; }
.copy-box input { flex: 1; min-width: 0; font: 500 .88rem ui-monospace, "Cascadia Mono", Consolas, monospace; }
@media (max-width: 560px) { .copy-box { flex-direction: column; } }

/* ── Account & auth ─────────────────────────────────────────────────────── */
.account { padding-top: clamp(32px, 4vw, 48px); }
.account-section { margin-bottom: clamp(44px, 6vw, 72px); }
.account-section .section-head .rubric { font-variant-numeric: tabular-nums; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.form-sheet { display: grid; gap: 16px; padding: 22px; }
.form-sheet h3 { margin: 0; font: 700 1.2rem var(--display); }
.form-sheet .button { justify-self: start; }
.danger-zone { border-color: #9B1C1C; }
.danger-zone h3 { color: #9B1C1C; }
:root[data-theme="dark"] .danger-zone h3 { color: #F09A9A; }
@media (max-width: 960px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px); }
.auth-panel { max-width: 520px; width: 100%; padding: clamp(26px, 4vw, 40px); }
.auth-panel h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .3em; }
.auth-panel > .muted { font: 400 1.02rem/1.6 var(--serif); }
.auth-form { display: grid; gap: 18px; margin-top: 18px; }
.auth-form .button-wide { margin-top: 6px; min-height: 54px; font-size: 1rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 18px; font: 600 .9rem var(--sans); color: var(--ink-2); }
.auth-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wine); font-weight: 750; }
.auth-notes { padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
@media (max-width: 860px) { .auth-page { grid-template-columns: minmax(0, 1fr); } }
.portrait-plate { margin: 0; padding: 8px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5px var(--gold-line), var(--shadow-2); }
.portrait-plate img { width: 100%; border-radius: var(--r-sm); filter: sepia(.15); }
.portrait-float { float: right; width: min(40%, 280px); margin: 6px 0 24px 32px; }
@media (max-width: 600px) { .portrait-float { float: none; width: min(70%, 280px); margin: 0 0 24px; } }
.text-page { padding-top: clamp(20px, 3vw, 36px); }
.text-page::after { content: ""; display: block; clear: both; }

/* ── Calendar ───────────────────────────────────────────────────────────── */
.cal-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.cal-title-row > div { flex: 1 1 420px; min-width: 0; }
.he-inline { font: 500 1.08em var(--hebrew); color: var(--wine); white-space: nowrap; }
.cal-city { display: grid; gap: 6px; flex: 0 1 300px; }
.cal-city-label { display: inline-flex; align-items: center; gap: 6px; font: 800 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.city-select select { width: 100%; min-height: 52px; font-size: 1rem; }
.cal-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .75fr); gap: 16px; align-items: stretch; padding-block: 22px 8px; }
@media (max-width: 1100px) { .cal-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cal-top .shabbat-card { grid-column: 1 / -1; } }
@media (max-width: 700px) { .cal-top { grid-template-columns: minmax(0, 1fr); } }
.moon-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.moon-card .rubric { margin-bottom: .3em; }
.moon-name { margin: 0; font: 700 1.25rem var(--display); }
.moon-sub, .moon-next { margin: 0; font: 600 .82rem/1.5 var(--sans); color: var(--ink-3); }
.moon { flex: none; }
.moon-dark { fill: #3A2A1A; stroke: rgb(201 149 46 / .5); stroke-width: .8; }
.moon-lit { fill: #F3DFA8; }
:root[data-theme="dark"] .moon-dark { fill: #1E160E; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; padding-block: 18px 8px; }
.cal-month { min-width: 0; }
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-bar h2 { display: grid; flex: 1; margin: 0; text-align: center; }
.cal-bar h2 span { font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.1 var(--display); }
.cal-bar h2 small { font: 600 .9rem/1.4 var(--serif); color: var(--wine); }
.cal-bar .icon-button { border: 1.5px solid var(--line-2); background: var(--sheet); color: var(--ink); }
.cal-bar .icon-button:hover { border-color: var(--wine); color: var(--wine); }
.cal-today { order: 4; }
.cal-grid { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--sheet); box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5px var(--gold-line), var(--shadow-2); padding: 6px; }
.cal-dow, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow span { padding: 10px 6px 8px; text-align: center; font: 800 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cal-dow .is-shabbat { color: var(--wine); }
.cal-week > div { min-width: 0; }
.day { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 118px; padding: 8px 8px 7px; border: 1px solid var(--line); margin: -.5px; color: var(--ink); text-decoration: none; background: transparent; transition: background-color .15s var(--ease); }
.day:hover { background: var(--sheet-2); color: var(--ink); z-index: 1; }
.day.is-shabbat { background: var(--gold-soft); }
.day.is-yomtov { background: var(--wine-wash); }
.day.is-fast { background: repeating-linear-gradient(135deg, transparent 0 8px, rgb(85 80 74 / .07) 8px 10px); }
.day.is-outside { opacity: .42; }
.day.is-today { box-shadow: inset 0 0 0 2px var(--wine); z-index: 1; }
.day.is-selected { background: var(--wine); color: var(--on-wine); z-index: 2; }
.day.is-selected .day-heb, .day.is-selected .day-parasha, .day.is-selected .day-time { color: var(--on-wine); }
.day.is-selected .chip { background: rgb(255 255 255 / .2); color: var(--on-wine); border-color: transparent; }
.day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.day-num { font: 800 1.2rem/1 var(--display); font-variant-numeric: lining-nums; }
.day-heb { font: 500 .95rem/1 var(--hebrew); color: var(--ink-3); direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-heb b { font: 700 .66rem/1 var(--sans); letter-spacing: .04em; color: var(--wine); direction: ltr; }
.day-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chip { display: block; min-width: 0; padding: 2px 6px; border-radius: 5px; border-left: 3px solid var(--c, var(--gold-bright)); background: var(--sheet-2); font: 700 .7rem/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-yomtov { --c: var(--wine); color: var(--wine); } .chip-holiday { --c: var(--gold-bright); } .chip-fast { --c: var(--slate); } .chip-roshchodesh { --c: var(--olive); color: var(--olive); } .chip-modern { --c: var(--lapis); color: var(--lapis); } .chip-shabbat { --c: var(--plum); color: var(--plum); } .chip-erev { --c: var(--ochre); }
.chip-more { --c: transparent; background: none; color: var(--ink-3); padding-left: 2px; }
.day-parasha { font: italic 700 .76rem/1.25 var(--display); color: var(--wine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: auto; }
.day-time { display: inline-flex; align-items: center; gap: 2px; font: 800 .74rem var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day-time .icon { width: 13px; height: 13px; }
.day-time.candles .icon { color: var(--gold); }
.day-time.havdalah .icon { color: var(--wine); }
.day-moon { margin-left: auto; display: inline-flex; }
.day-dots { display: none; }
.dot { display: inline-block; width: 8px; height: 8px; rotate: 45deg; background: var(--c, var(--gold-bright)); }
.dot-yomtov { --c: var(--wine); } .dot-holiday { --c: var(--gold-bright); } .dot-fast { --c: var(--slate); } .dot-roshchodesh { --c: var(--olive); } .dot-modern { --c: var(--lapis); } .dot-shabbat { --c: var(--plum); } .dot-erev { --c: var(--ochre); } .dot-candles { --c: transparent; border-radius: 50%; rotate: 0deg; box-shadow: inset 0 0 0 2px var(--gold); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font: 600 .82rem var(--sans); color: var(--ink-2); }
.cal-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cal-side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; scrollbar-width: thin; border-radius: var(--r-lg); }
.sheet-close { display: none; }
.day-panel { display: grid; gap: 14px; padding: 22px 20px; }
.day-panel-head h2 { margin: 0; font-size: 1.6rem; }
.day-panel-head .rubric { margin-bottom: .3em; }
.day-panel-heb { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 4px 0 0; font: 600 .95rem var(--serif); color: var(--ink-2); }
.day-panel-heb span[lang="he"] { font: 500 1.15rem var(--hebrew); color: var(--wine); }
.panel-block { padding: 14px 16px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.panel-block .rubric { margin-bottom: .3em; }
.panel-block h3 { margin: 0 0 4px; font: 800 1.3rem var(--display); }
.panel-block p { margin: 0 0 4px; font: 400 .95rem/1.55 var(--serif); color: var(--ink-2); }
.panel-events { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev { display: grid; gap: 3px; padding: 10px 12px 10px 14px; border-radius: var(--r-sm); background: var(--sheet-2); border-left: 4px solid var(--c, var(--gold-bright)); }
.ev-type { font: 800 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--ink-3)); }
:is(.ev-holiday, .ev-erev, .ev-omer) .ev-type { color: var(--gold); }
.ev strong { font: 700 1.05rem/1.3 var(--display); }
.ev-desc { font: 400 .92rem/1.5 var(--serif); color: var(--ink-2); }
.ev-molad { font: 600 .82rem/1.5 var(--sans); color: var(--plum); }
.panel-quiet { margin: 0; font: 400 .95rem var(--serif); color: var(--ink-3); }
.panel-times { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.panel-times li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sheet-2); border: 1px solid var(--line); }
.panel-times .icon { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgb(201 149 46 / .25); color: var(--gold); }
.panel-times .t-havdalah .icon { background: var(--wine-wash); color: var(--wine); }
.panel-times .t-fast .icon { background: rgb(85 80 74 / .12); color: var(--slate); }
.panel-times span { display: grid; min-width: 0; }
.panel-times strong { font: 700 .9rem/1.3 var(--sans); }
.panel-times small { font: 500 .78rem/1.4 var(--sans); color: var(--ink-3); }
.panel-times time { font: 800 1.35rem var(--display); font-variant-numeric: lining-nums tabular-nums; }
.zmanim { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); }
.zmanim summary { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font: 800 .82rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wine); cursor: pointer; }
.zmanim dl { display: grid; margin: 0; padding: 0 14px 6px; }
.zmanim dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--line-2); font: 500 .9rem var(--sans); }
.zmanim dt { color: var(--ink-2); }
.zmanim dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.zmanim .hint { padding: 0 14px 12px; font-size: .82rem; }
.panel-moon { display: flex; align-items: center; gap: 12px; }
.panel-moon span { display: grid; }
.panel-moon strong { font: 700 1rem var(--display); }
.panel-moon small { font: 600 .8rem var(--sans); color: var(--ink-3); }
.agenda { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agenda a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); color: var(--ink); text-decoration: none; }
.agenda a:hover { border-color: var(--wine); color: var(--ink); }
.agenda-date { display: grid; justify-items: center; line-height: 1; }
.agenda-date b { font: 800 1.5rem/1 var(--display); color: var(--wine); font-variant-numeric: lining-nums; }
.agenda-date small { font: 800 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.agenda-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.agenda-body .chip { display: inline-block; max-width: 100%; font-size: .78rem; }
.agenda-body small { flex-basis: 100%; font: 500 .8rem var(--serif); color: var(--ink-3); }
.agenda-parasha { font: italic 700 .92rem var(--display); color: var(--wine); }
.agenda-time { display: inline-flex; align-items: center; gap: 4px; font: 800 .9rem var(--sans); font-variant-numeric: tabular-nums; }
.agenda-time.candles .icon { color: var(--gold); } .agenda-time.havdalah .icon { color: var(--wine); }
.cal-subscribe-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: clamp(24px, 3.4vw, 34px); }
.cal-subscribe-card > div:first-child { flex: 1 1 380px; }
.cal-subscribe-card h2 { margin-bottom: .25em; }
.cal-subscribe-card p { margin: 0; font: 400 1rem/1.6 var(--serif); color: var(--ink-2); }
.cal-subscribe-card .row { margin: 0; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: minmax(0, 1fr) 320px; } .day { min-height: 104px; } }
@media (max-width: 900px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-side { position: fixed; inset: auto 0 0 0; z-index: 80; top: auto; max-height: 86vh; border-radius: 22px 22px 0 0; background: var(--sheet); box-shadow: var(--shadow-pop);
    transform: translateY(105%); transition: transform .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  .cal-side.open { transform: none; }
  .cal-side::before { content: ""; display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-2); }
  .cal-side .day-panel { border: 0; box-shadow: none; background: none; }
  .sheet-close { display: inline-grid; position: absolute; top: 8px; right: 8px; z-index: 2; }
  .day { min-height: 64px; padding: 6px 4px; gap: 2px; align-items: center; }
  .day-top { flex-direction: column; align-items: center; gap: 2px; }
  .day-num { font-size: 1.05rem; }
  .day-heb { font-size: .78rem; }
  .day-heb b { font-size: .56rem; }
  .day-events, .day-parasha, .day-foot { display: none; }
  .day-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: auto; }
  .dot { width: 6px; height: 6px; }
  .cal-grid { padding: 3px; }
  .cal-dow span { padding: 8px 2px 6px; letter-spacing: .04em; }
}
@media (max-width: 420px) { .cal-bar h2 span { font-size: 1.25rem; } .cal-today { display: none; } }

/* ── Footer: emerald cloth binding ────────────────────────────────────────────── */
.site-footer { position: relative; margin-top: clamp(24px, 4vw, 48px); color: var(--leather-ink-2); color-scheme: dark;
  background: var(--paper-grain), var(--binding); border-top: 0; box-shadow: inset 0 5px 0 rgb(0 0 0 / .12); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--spines); }
.colophon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 80px); padding-block: clamp(44px, 6vw, 68px) clamp(28px, 4vw, 40px); }
.colophon-main { max-width: 46ch; }
.colophon .rubric { color: var(--leather-gold); }
.colophon .rubric::before { background: var(--leather-gold); }
.colophon-name { margin: 0 0 .3em; font: 800 clamp(1.8rem, 3.2vw, 2.5rem)/1.05 var(--display); color: var(--leather-ink); }
.colophon-main > p:not(.rubric):not(.colophon-name) { font: 400 1rem/1.6 var(--serif); color: var(--leather-ink-2); }
.colophon-subscribe { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid rgb(226 182 92 / .35); border-radius: var(--r-lg); background: rgb(0 0 0 / .18); }
.colophon-sub-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 1.05rem var(--display); color: var(--leather-ink); }
.colophon-sub-title .icon { color: var(--leather-gold); }
.colophon-subscribe .small { margin: 0; color: var(--leather-ink-2); font: 500 .82rem var(--sans); }
.colophon-subscribe input[type="email"] { background: rgb(255 255 255 / .06); border-color: rgb(226 182 92 / .5); color: var(--leather-ink); }
.colophon-subscribe input[type="email"]::placeholder { color: var(--leather-ink-2); }
.colophon-subscribe input[type="email"]:focus { border-color: var(--leather-gold); box-shadow: 0 0 0 4px rgb(226 182 92 / .2); }
.colophon-subscribe .button-ink { background: linear-gradient(180deg, #F6D995, #D9AE55); color: #3A1A08; border-color: #8A6420; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 0 #6E4A12; }
.colophon-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.colophon-cols ul { margin: 0; padding: 0; list-style: none; }
.colophon-cols a { display: inline-flex; align-items: center; min-height: 40px; font: 500 .96rem var(--serif); color: var(--leather-ink); text-decoration: none; }
.colophon-cols a:hover { color: var(--leather-gold); text-decoration: underline; }
.colophon-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px 28px; border-top: 1px solid rgb(226 182 92 / .25); font: 700 .74rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--leather-ink-2); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .colophon-cols a { min-height: 44px; } }
@media (max-width: 960px) { .colophon { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .colophon-cols { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ── Mobile app shell: tab bar, sheets, mini-player ─────────────────────── */
.tabbar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(26 15 8 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.miniplayer { position: fixed; z-index: 65; right: 20px; bottom: 20px; width: min(420px, calc(100% - 40px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 10px 14px 16px;
  border-radius: var(--r-lg); color: var(--leather-ink); background: var(--paper-grain), var(--binding);
  box-shadow: inset 0 0 0 1px rgb(226 182 92 / .55), var(--shadow-pop); animation: mini-in .3s var(--ease); }
@keyframes mini-in { from { opacity: 0; translate: 0 16px; } }
.mini-title { display: grid; min-width: 0; color: var(--leather-ink); text-decoration: none; }
.mini-title:hover { color: var(--leather-gold); }
.mini-kicker { font: 800 .64rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leather-gold); }
.mini-title strong { font: 700 .98rem/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-controls { display: flex; align-items: center; gap: 2px; }
.mini-play { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; color: #FBF1DC; background: radial-gradient(circle at 35% 30%, #B33A26, #7A1E12 60%, #561208); box-shadow: inset 0 0 0 2px rgb(226 182 92 / .7); }
.mini-play .icon { width: 20px; height: 20px; }
.mini-skip { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: none; font: 800 .78rem var(--sans); color: var(--leather-ink-2); cursor: pointer; }
.mini-skip:hover { color: var(--leather-gold); }
.mini-close { color: var(--leather-ink-2); }
.mini-close:hover { background: rgb(226 182 92 / .14); color: var(--leather-gold); }
.mini-progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .15); overflow: hidden; }
.mini-progress span { display: block; width: 0; height: 100%; background: var(--leather-gold); }
@media (max-width: 900px) {
  :root { --header-h: 60px; --tabbar-h: 64px; }
  /* backdrop-filter would make the header the containing block of the fixed menu sheet */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--hdr-solid); }
  html.sheet-open .site-header { z-index: 85; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  body.has-mini { padding-bottom: calc(var(--tabbar-h) + 76px + env(safe-area-inset-bottom)); }
  .header-row { gap: 10px; }
  .header-tools { margin-left: auto; }
  .header-login, .header-tools .menu-toggle { display: none; }
  .logo-seal { width: 40px; height: 40px; font-size: 1.45rem; }
  .logo-text strong { font-size: 1.08rem; }
  .tabbar { position: fixed; z-index: 75; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--hdr-solid); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px -16px rgb(70 40 10 / .45); }
  .tabbar :focus-visible { outline-color: var(--focus); outline-offset: -3px; }
  .tabbar a, .tabbar button { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 44px; border: 0; background: none; padding: 6px 2px; font: 700 .72rem/1.1 var(--sans); color: var(--ink-3); text-decoration: none; cursor: pointer; }
  .tabbar .icon { width: 30px; height: 30px; padding: 3px 6px; box-sizing: content-box; border-radius: 999px; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .tabbar a[aria-current="page"] { color: var(--wine); }
  .tabbar a[aria-current="page"] .icon { background: var(--wine-wash); }
  .tabbar a { position: relative; }
  .main-nav { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; margin: 0; max-height: 82vh; overflow: auto; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    background: var(--paper-grain), var(--sheet); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-pop); transform: translateY(105%); transition: transform .3s var(--ease); visibility: hidden; }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav::before { content: ""; display: block; width: 44px; height: 5px; margin: 6px auto 10px; border-radius: 3px; background: var(--line-2); }
  .nav-sheet-title { display: block; margin: 0 0 6px; font: 800 1.4rem var(--display); color: var(--ink); }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav li + li { border-top: 1px dashed var(--line-2); }
  .main-nav a, .nav-install { display: flex; width: 100%; min-height: 54px; padding: 0 6px; border: 0; background: none; font: 700 1.12rem var(--display); color: var(--ink); text-align: left; cursor: pointer; }
  .main-nav a::after { display: none; }
  .main-nav a:hover { color: var(--wine); }
  .main-nav a[aria-current="page"] { color: var(--wine); }
  .nav-only-mobile { display: block; }
  .nav-only-mobile a, .nav-install { font: 700 .98rem var(--sans); color: var(--wine); }
  .miniplayer { left: 8px; right: 8px; width: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); padding: 8px 8px 12px 14px; }
  .mini-skip { display: none; }
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
  .site-footer { margin-bottom: 0; }
}
@media (max-width: 480px) { .header-tools .avatar-link { display: none; } .header-tools { gap: 0; } }
@media (max-width: 400px) { :root { --gutter: 16px; } .logo-text span { display: none; } .logo { gap: 9px; } .logo-text strong { font-size: 1rem; } }

/* ── Search overlay, toast, progress ────────────────────────────────────── */
.search-overlay { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: clamp(16px, 11vh, 120px) var(--gutter) 16px; background: rgb(26 15 8 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search-dialog { width: min(100%, 680px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--paper-grain), var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px var(--gold-line), var(--shadow-pop); overflow: hidden; }
.search-form { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 22px; border-bottom: 1px solid var(--line-2); }
.search-form > .icon { width: 22px; height: 22px; color: var(--wine); }
.search-form input { flex: 1; min-width: 0; min-height: 62px; border: 0; background: transparent; outline: none; font: 600 clamp(1.15rem, 2.4vw, 1.4rem) var(--display); color: var(--ink); }
.search-form input::placeholder { color: var(--ink-3); opacity: 1; }
.search-results { overflow: auto; padding: 8px; }
.search-results:empty { display: none; }
.search-results a { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.search-results a strong { font: 700 1.02rem/1.35 var(--display); }
.search-results a .small { font: 600 .8rem var(--sans); color: var(--ink-3); }
.search-results a:hover, .search-results a:focus-visible { background: var(--sheet-2); color: var(--wine); }
.search-results .group { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; font: 800 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.search-results .group::before { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--gold-bright); }
.search-results .empty { margin: 0; padding: 14px; font: 400 .96rem var(--serif); color: var(--ink-3); }
.search-hint { margin: 0; padding: 10px 22px 12px; border-top: 1px solid var(--line-2); background: var(--sheet-2); font: 600 .78rem var(--sans); color: var(--ink-3); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; translate: -50% 0; max-width: calc(100% - 32px); padding: 12px 22px; border-radius: 999px; background: var(--leather); color: var(--leather-ink); font: 700 .88rem var(--sans); box-shadow: inset 0 0 0 1px rgb(226 182 92 / .5), var(--shadow-pop); }
.progress { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--sheet-3); overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wine), var(--gold-bright)); }
.offline-usage { margin-top: 16px; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-side, .topic-tile, .toc-row, .qa-item, .shelf, .lesson-head, .letter-paper, .auth-panel, .shabbat-card, .cal-grid { animation: settle .55s var(--ease) both; }
  .hero-side { animation-delay: .08s; }
  .roller { animation: unroll .7s var(--ease) both; }
  @keyframes unroll { from { opacity: 0; scale: 1 .9; } }
  @keyframes settle { from { opacity: 0; translate: 0 10px; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* Turning a leaf is what the reader asked for: keep it, just short and without the intro and the floating. */
  .leaf { transition: transform .45s ease !important; }
  .spine:hover, .spine:focus-visible, .letter-teaser:hover, .toc-row:hover, .qa-item:hover, .topic-tile:hover, .series-step:hover, .account-ledger a:hover { translate: none; }
}

/* ── Print: only the text of the page ───────────────────────────────────── */
@media print {
  @page { margin: 18mm 16mm; }
  .site-header, .site-footer, .running-head, .reading-progress, .lesson-margin, .tools-stack, .toc-nav, .series-contents, .reading-bar, .media, .chapters, .series-nav, .letter-cta, .search-overlay, .toast, .breadcrumbs, .skip-link, .filters, .pagination, .letter-teaser, .section-shelf, #related-title, .header-tools, .tabbar, .miniplayer, .sheet-backdrop { display: none !important; }
  :root { --bg: #fff; --sheet: #fff; --ink: #000; --ink-2: #222; --ink-3: #444; --line: #bbb; }
  body { background: #fff; color: #000; padding: 0 !important; }
  .lesson, .wrap { width: auto; }
  .lesson-head { background: none; }
  .lesson-daf { display: block; padding: 0; }
  .lesson-title { font-size: 26pt; }
  .lesson-summary { background: none; padding: 0 0 0 12px; font-size: 13pt; }
  .prose { font-size: 11.5pt; line-height: 1.6; color: #000; max-width: none; }
  .prose a { color: #000; text-decoration: none; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose p, .prose blockquote { orphans: 3; widows: 3; }
}

/* Smooth theme switch: a cross-fade of the whole page (site.js wraps the change in a view transition). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; animation-timing-function: ease; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, box-shadow .5s ease !important; }

/* ── Study plan: lesson of the day, holiday lessons, the reader's path ─── */
.study { padding-block: clamp(10px, 2vw, 22px); }
.study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.study-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--card-glow), transparent 60%), var(--sheet); box-shadow: var(--shadow-1); }
.study-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--cloth-emerald)); }
.study-holiday { --c: var(--cloth-mustard); } .study-path { --c: var(--cloth-sapphire); }
.study-card .rubric, .study-card h3, .study-card p { margin: 0; }
.study-card h3 { font: 800 1.35rem/1.2 var(--display); }
.study-card h3 a { text-decoration: none; }
.study-card h3 a:hover { color: var(--wine); }
.study-card > p:not(.rubric):not(.study-actions) { font: 400 .98rem/1.55 var(--serif); color: var(--ink-2); }
.study-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px !important; }
.study-done { display: inline-flex; align-items: center; gap: 6px; font: 800 .86rem var(--sans); color: var(--cloth-emerald); }
:root[data-theme="dark"] .study-done { color: #8FD6B4; }
.path-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.path-stats li { display: grid; padding: 10px 12px; border-radius: var(--r); background: var(--sheet-2); }
.path-stats b { font: 800 1.6rem/1.1 var(--display); color: var(--wine); }
.path-stats span { font: 700 .8rem var(--sans); color: var(--ink-3); }
/* Finished lessons: a green check before the title */
li.is-done h3 a::before, .series-contents li.is-done a > span:last-child::before { content: "✓ "; color: var(--cloth-emerald); font-weight: 800; }
:root[data-theme="dark"] li.is-done h3 a::before, :root[data-theme="dark"] .series-contents li.is-done a > span:last-child::before { color: #8FD6B4; }
.tool-done.is-on { background: var(--cloth-emerald); border-color: var(--cloth-emerald); color: #FFF8EA; }
.tool-wa .icon { color: #1F8F4E; } .tool-tg .icon { color: #2A7DB8; }
:root[data-theme="dark"] .tool-wa .icon { color: #7FD8A2; } :root[data-theme="dark"] .tool-tg .icon { color: #8CC6F0; }
.series-progress { display: grid; gap: 6px; max-width: 420px; margin-top: 18px; }
.series-progress .progress { height: 8px; }
.series-progress p { margin: 0; font: 700 .9rem var(--sans); color: var(--ink-2); }
/* The book stops floating while the reader works with it */
.book-stage:hover .book-view, .book-stage:focus-within .book-view { animation-play-state: paused; }
@media (max-width: 420px) { .book-tabs { gap: 4px; } .book-tab { padding: 6px 9px 12px; font-size: .78rem; } }

/* Transcript of the recording: paragraphs with clickable times */
.transcript { margin-top: 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--sheet); box-shadow: var(--shadow-1); }
.transcript summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; cursor: pointer; font: 800 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wine); list-style: none; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .2s var(--ease); }
.transcript[open] summary::after { rotate: 225deg; translate: 0 2px; }
.transcript summary small { font: 600 .78rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.transcript-body { max-height: 420px; overflow: auto; padding: 4px 18px 16px; border-top: 1px solid var(--line); }
.transcript-body p { margin: 0; padding: 10px 8px; border-radius: var(--r-sm); font: 400 1.04rem/1.65 var(--serif); color: var(--ink-2); transition: background-color .3s var(--ease); }
.transcript-body p:has(.is-current) { background: var(--gold-soft); color: var(--ink); }
.ts-time { min-width: 44px; min-height: 32px; margin-right: 6px; padding: 0 8px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--sheet-2); font: 800 .78rem var(--sans); color: var(--wine); cursor: pointer; font-variant-numeric: tabular-nums; }
.ts-time:hover, .ts-time.is-current { background: var(--wine); border-color: var(--wine); color: var(--on-wine); }
.channel-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0 !important; }
.channel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 700 .88rem var(--sans); color: #FFF8EA; text-decoration: none; }
.channel-tg { background: #1F6AA0; } .channel-wa { background: #1F7A45; }
.channel:hover { color: #fff; filter: brightness(1.1); }

/* Scroll reveal and page change (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .reveal.in { opacity: 1; translate: none; }
  html[data-vt="page"]::view-transition-old(root) { animation: vt-out .28s ease both; }
  html[data-vt="page"]::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; translate: 0 -10px; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 14px; } }
  .topic-tile, .feature-cover, .spine { will-change: auto; }
  .toc-row:hover .toc-num { scale: 1.08; }
  .tabbar a:active .icon { scale: .88; }
  .tabbar .icon { transition: background-color .2s var(--ease), color .2s var(--ease), scale .15s var(--ease); }
}
.colophon-subscribe .channel { justify-self: start; }

/* ── Личный кабинет ─────────────────────────────────────────────────────── */
.account-hero { display: grid; gap: 16px; padding-top: clamp(22px, 3.5vw, 40px); }
.account-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; padding: clamp(18px, 3vw, 28px); overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: radial-gradient(ellipse at 85% 0%, rgb(217 161 54 / .18), transparent 60%), linear-gradient(180deg, var(--card-glow), transparent 60%), var(--sheet); box-shadow: var(--shadow-2); }
.account-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--spines); }
.account-avatar { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font: 800 1.7rem var(--display); color: #FFF5DF;
  background: radial-gradient(circle at 35% 30%, var(--acc-top), var(--acc-bottom) 65%, var(--acc-edge)); box-shadow: inset 0 0 0 3px rgb(246 217 149 / .6), 0 10px 22px -10px rgb(90 30 10 / .6); }
.account-who h1 { margin: 0 0 4px; font-size: clamp(2rem, 4vw, 3rem); }
.account-who .rubric { margin-bottom: .3em; }
.account-mail { margin: 0; font: 600 .95rem var(--sans); color: var(--ink-3); overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.account-actions form { margin: 0; }
.account-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.account-ledger a { position: relative; display: grid; gap: 2px; padding: 18px 20px 16px; border-radius: 8px 16px 16px 8px; color: #FFF5DF; text-decoration: none; font: 700 .9rem var(--sans); overflow: hidden;
  background: linear-gradient(90deg, rgb(0 0 0 / .28) 0, rgb(0 0 0 / .05) 9px, rgb(255 255 255 / .1) 12px, transparent 30%), radial-gradient(ellipse at 90% 0%, rgb(255 255 255 / .2), transparent 55%), var(--c);
  box-shadow: inset 0 0 0 6px var(--c), inset 0 0 0 7px rgb(246 217 149 / .6), var(--shadow-2); transition: translate .2s var(--ease); }
.account-ledger a .icon { position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; color: rgb(246 217 149 / .85); }
.account-ledger a:hover { color: #fff; translate: 0 -3px; }
.ledger-num { font: 800 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--display); color: #FFF8EA; font-variant-numeric: lining-nums tabular-nums; }
.channel-mail { background: var(--cloth-terracotta); }
@media (max-width: 900px) { .account-card { grid-template-columns: auto minmax(0, 1fr); } .account-actions { grid-column: 1 / -1; justify-content: flex-start; } .account-ledger { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .account-avatar { width: 58px; height: 58px; font-size: 1.3rem; } .account-ledger { gap: 8px; } .account-ledger a { padding: 14px 12px; font-size: .82rem; } .account-ledger a .icon { width: 20px; height: 20px; right: 10px; top: 10px; } }