@font-face {
  font-family: 'Shlomo semiStam';
  src: url('fonts/shlomo-semi-stam.woff2') format('woff2');
  font-display: swap;
  size-adjust: 122%;
  unicode-range: U+0591-05C7, U+05D0-05EA, U+05F3-05F4, U+FB1D-FB4F;
}
/* Monarcha (Daniel's licensed web font, the same files biblion serves) is the
   serif for all non-Hebrew text. Its Fontspring web licence covers embedding
   with @font-face on sites Daniel owns, within the pageview limit on his receipt.
   Glyphs it lacks fall through to Georgia per character. */
@font-face { font-family: 'Monarcha'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/monarcha-400.woff2') format('woff2'); unicode-range: U+0-9F, U+A1-10FFFF; }
@font-face { font-family: 'Monarcha'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('fonts/monarcha-bold-v2.woff2') format('woff2'); unicode-range: U+0-9F, U+A1-10FFFF; }
@font-face { font-family: 'Monarcha'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/monarcha-400-italic.woff2') format('woff2'); unicode-range: U+0-9F, U+A1-10FFFF; }

/* Day (default): olive on sage (Daniel, 2026-11-14; was tekhelet blue on cool white).
   Dark (header toggle, sets <html data-theme="dark">): warm brown with zayit (olive) accent (argaman was tried and dropped, 2026-11-14). */
:root {
  --bg: #f5f6f0; --fg: #222619; --muted: #626a57; --line: #dde1d2;
  --accent: #5b6b2e; --on-accent: #ffffff; --card: #fdfdf9; --he: #2c3514;
}
:root[data-theme="dark"] {
  --bg: #1b1916; --fg: #e8e1d6; --muted: #a39887; --line: #3a352e;
  --accent: #a9b77a; --on-accent: #1b1916; --card: #24211d; --he: #f6efe3;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  /* Shlomo first: its unicode-range limits it to Hebrew, so every Hebrew
     character on any page uses it and Latin text falls through to Georgia. */
  font: 17px/1.6 'Shlomo semiStam', 'Monarcha', Georgia, 'Charis SIL', serif;
}
.top { padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.top a { color: var(--accent); text-decoration: none; font-weight: bold; }
/* Site title: Monarcha capitals, slightly larger and spaced. */
.top > a:first-child { font-size: 17px; text-transform: uppercase; letter-spacing: .09em; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; }
h1 { font-size: 2em; margin: 0 0 4px; line-height: 1.2; }
h2 { margin-top: 2.2em; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.kicker { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.goal { color: var(--muted); font-style: italic; margin-top: 0; }
a { color: var(--accent); }

.he {
  font-family: 'Shlomo semiStam', 'SBL Hebrew', 'Ezra SIL', serif;
  font-size: 1.2em; line-height: 1.3; color: var(--he);
  unicode-bidi: isolate; font-style: normal;
}
blockquote {
  margin: 1.2em 0; padding: 16px 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; text-align: center;
}
blockquote p { margin: 4px 0; }
blockquote .he { font-size: 1.9em; line-height: 1.7; }

table { border-collapse: collapse; width: 100%; margin: 1em 0; background: var(--card); border-radius: 8px; overflow: hidden; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 14px; color: var(--muted); font-weight: normal; text-transform: uppercase; letter-spacing: .05em; }
td:first-child .he { font-size: 1.9em; }
table.drill.hidden td:not(:first-child) { color: transparent; text-shadow: none; }
table.drill.hidden td:not(:first-child) * { color: transparent; }
table.drill.hidden td:not(:first-child):hover, table.drill.hidden td:not(:first-child):hover * { color: var(--fg); }

.toggle, details.answers summary {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--accent);
  background: none; border: 1px solid var(--accent); border-radius: 999px; padding: 4px 14px;
}
details.answers { margin-top: 2.2em; }
details.answers summary { display: inline-block; list-style: none; }
details.answers[open] summary { margin-bottom: 12px; }

ol.lessons { list-style: none; padding: 0; }
ol.lessons a { display: flex; gap: 16px; align-items: center; padding: 14px 16px; margin: 10px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); }
ol.lessons .n { font-size: 1.6em; color: var(--accent); min-width: 1.5em; text-align: center; }
ol.lessons small { color: var(--muted); }
code { background: var(--card); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* Background music (assets/music.js) */
header.top { display: flex; align-items: center; gap: 6px; }
.theme-btn { margin-left: auto; font: inherit; font-size: 14px; cursor: pointer; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
.music { margin-left: auto; position: relative; }
.theme-btn + .music { margin-left: 0; }
.music-btn { font: inherit; font-size: 14px; cursor: pointer; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.music-btn.on { color: var(--accent); border-color: var(--accent); }
.music-btn.waiting { animation: music-pulse 1.6s ease-in-out infinite; }
@keyframes music-pulse { 50% { opacity: .45; } }
.music-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: min(320px, calc(100vw - 32px));
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: 15px; }
.music-panel[hidden] { display: none; }
.music-panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.music-on { font-weight: bold; }
.music-hint { margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
.music-panel ul { list-style: none; margin: 0; padding: 0; }
.music-panel li { padding: 6px 0; border-top: 1px solid var(--line); }
.music-panel li input[type=range], .music-master input { width: 100%; accent-color: var(--accent); }
.music-panel li.loading span::after { content: ' · loading…'; color: var(--muted); font-size: 13px; }
.music-panel li.error span::after { content: ' · could not load'; color: var(--muted); font-size: 13px; }
.music-master { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.music-master input { flex: 1; }
.music-panel input[type=checkbox] { accent-color: var(--accent); }

.music-set { margin: 10px 0 2px; gap: 10px; }
.music-set[hidden] { display: none; }
.music-set select {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--accent); cursor: pointer;
  background-color: var(--bg); border: 1px solid var(--accent); border-radius: 999px;
  padding: 4px 34px 4px 14px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.music-set select:hover, .music-set select:focus { background-color: var(--card); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.music-set select option { color: var(--fg); background: var(--card); }

a.toggle { display: inline-block; text-decoration: none; }
/* Language switch (EN / SK), first of the header buttons. */
.lang-btn { margin-left: auto; font-size: 14px; letter-spacing: .04em; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; }
.lang-btn:hover { color: var(--accent); border-color: var(--accent); }
.lang-btn + .theme-btn { margin-left: 0; }

/* Lesson video (assets/video.js), adapted from biblion's film player: a 16:9 frame,
   poster until play, and a pill that widens into the control bar. The frame is dark
   in both themes, like a screen; the pill's disc takes the course accent. */
.film { margin: 8px 0 28px; }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #14171c; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 24, 30, .22), 0 1px 3px rgba(20, 24, 30, .2);
  container-type: inline-size; isolation: isolate; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; }
.film-frame:focus { outline: none; }
.film-frame.is-idle { cursor: none; }
.film-video, .film-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.film-video { object-fit: contain; background: #14171c; }
.film-poster { object-fit: cover; transition: opacity .4s ease; }
.film.is-started .film-poster { opacity: 0; pointer-events: none; }
.film-cue { position: absolute; left: 6%; right: 6%; bottom: 74px; z-index: 2; text-align: center; pointer-events: none; }
.film-cue span { display: inline; white-space: pre-line; padding: .1em .4em; border-radius: 4px; color: #fff;
  background: rgba(0, 0, 0, .66); font-size: clamp(14px, 3.2cqi, 26px); line-height: 1.5; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.film-dock { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center;
  gap: 10px; pointer-events: none; transition: opacity .25s ease, visibility 0s linear 0s; }
.film-dock > * { pointer-events: auto; }
.film-frame.is-idle .film-dock { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.film-frame.is-idle .film-dock > * { pointer-events: none; }
.film-bar { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 10px 5px 5px; border-radius: 999px;
  color: #e9e6df; background: rgba(14, 18, 23, .62); border: 1px solid rgba(147, 171, 217, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s, border-color .15s; }
.film-bar:hover, .film-bar:focus-within { color: #f4f1ea; background: rgba(14, 18, 23, .8); border-color: rgba(147, 171, 217, .7); }
.film-bar.is-live { flex: 1 1 auto; }
.film-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 2px 4px 2px 2px; color: inherit; background: none;
  border: 0; font: inherit; font-size: 15px; cursor: pointer; }
.film-disc { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--on-accent); background: var(--accent); }
.film-disc svg { width: 14px; height: 14px; }
.film-disc .i-play { transform: translateX(1px); }
.film-disc .i-pause, .film-toggle.is-pause .i-play { display: none; }
.film-toggle.is-pause .i-pause { display: block; }
.film-bar.is-busy .film-disc svg { visibility: hidden; }
.film-bar.is-busy .film-disc::after { content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9); border-right-color: transparent; animation: film-spin .8s linear infinite; }
@keyframes film-spin { to { transform: rotate(360deg); } }
.film-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-controls { display: none; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.film-bar.is-live .film-label { display: none; }
.film-bar.is-live .film-controls { display: flex; }
.film-bar.is-error { border-color: rgba(230, 120, 110, .7); }
.film-seek { flex: 1 1 auto; min-width: 48px; margin: 0; accent-color: #e9e6df; }
.film-time { flex: 0 0 auto; font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; }
.film-btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; color: inherit; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.film-btn svg { width: 20px; height: 20px; }
.film-btn:hover { background: rgba(147, 171, 217, .18); }
.film-btn[aria-pressed="true"] { background: rgba(59, 130, 246, .42); }
.film-mute .i-off, .film-mute[aria-pressed="true"] .i-on, .film-full .i-exit, .film-frame.is-full .film-full .i-enter { display: none; }
.film-mute[aria-pressed="true"] .i-off, .film-frame.is-full .film-full .i-exit { display: block; }
.film-btn:focus-visible, .film-toggle:focus-visible { outline: 2px solid #93abd9; outline-offset: 2px; }
.film-note { margin: 8px 2px 0; font-size: 14px; color: var(--muted); }

/* No video yet: a quiet strip in the same place, not an empty 16:9 screen. */
.film-soon { display: flex; align-items: center; gap: 14px; margin: 8px 0 28px; padding: 14px 18px; border-radius: 12px;
  border: 1px dashed var(--line); color: var(--muted); background: var(--card); }
.film-soon .film-disc { background: var(--line); color: var(--muted); }
.film-soon strong { color: var(--fg); font-weight: 700; }

/* Progress (assets/progress.js): the "done" box on lessons, marks on the home page,
   and the statistics page. Bars use --chart, checked for contrast on --card in both themes. */
:root { --chart: #66782f; --ok: #2e7d4f; }
:root[data-theme="dark"] { --chart: #8a9c3c; --ok: #8fc49a; }
.done-box { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 40px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.mark-done { font: inherit; font-size: 16px; cursor: pointer; padding: 8px 20px; border-radius: 999px;
  color: var(--accent); background: none; border: 1px solid var(--accent); }
.mark-done.is-done { color: var(--on-accent); background: var(--accent); cursor: default; }
.done-note { color: var(--muted); font-size: 14px; }
.link-btn { font: inherit; font-size: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
ol.lessons a { position: relative; }
.lesson-mark { margin-left: auto; align-self: center; font-size: 15px; color: var(--muted); }
.lesson-mark.is-done { color: var(--ok); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 20px 0 28px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile-value { font-size: 26px; white-space: nowrap; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 17px; font-weight: 400; color: var(--muted); }
.tile-sub { font-size: 14px; color: var(--muted); }
.chart-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px 14px; margin-bottom: 28px; }
.chart-box h2 { font-size: 18px; border: 0; margin: 14px 0 8px; }
.chart-wrap { position: relative; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--muted); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .mark { fill: var(--chart); }
.chart .hit { fill: transparent; }
.chart g.bar { cursor: default; outline: none; }
.chart g.bar.on .hit { fill: var(--line); opacity: .5; }
.chart-wrap .tip { position: absolute; top: -6px; padding: 4px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap;
  background: var(--fg); color: var(--bg); pointer-events: none; }
.table-view summary { cursor: pointer; color: var(--accent); font-size: 14px; margin-top: 8px; }
.table-view table, .lesson-table { width: 100%; font-size: 15px; }
.lesson-table .ok { color: var(--ok); font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Home page buttons and the lesson's previous / next links. */
.home-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle .fa, .lang-btn .fa, .theme-btn .fa, .music-btn .fa { margin-right: 3px; }
.lesson-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 28px 0 8px; font-size: 15px; }
.lesson-nav a { color: var(--accent); text-decoration: none; }
.lesson-nav a:hover { text-decoration: underline; }
.lesson-nav .lesson-all { color: var(--muted); }
.lesson-mark .fa { font-size: 17px; }
.mark-done .fa { margin-right: 4px; }

/* Header mark: the bet with dagesh (tools/build_brand.py), in the header link's colour. */
header.top a.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 24px; height: 24px; flex: 0 0 auto; }

/* Lesson text sits on a soft card, so the hills frame the page instead of running behind
   the text (Daniel's choice, 2026-11-14). Lesson pages only: the home page and the
   progress page are made of cards already. */
body[data-lesson] main { max-width: 820px; margin: 20px auto 40px; padding: 28px 36px 60px; border-radius: 18px;
  /* No backdrop blur here: on a card as tall as a lesson it made the browser re-blur
     the whole card on every scrolled frame (audit, 2026-11-15). Near-opaque instead. */
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 10px 30px rgba(20, 24, 30, .08); }
:root[data-theme="dark"] body[data-lesson] main { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
@media (max-width: 640px) { body[data-lesson] main { margin: 8px 6px 24px; padding: 18px 16px 40px; border-radius: 14px; } }

/* Header links: lessons, sign in / account. They push the buttons to the right. */
.nav-btn { font-size: 14px; text-decoration: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.nav-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-btn .fa { margin-right: 3px; }
.nav-lessons { margin-left: auto; }
.nav-btn ~ .lang-btn { margin-left: 0; }
@media (max-width: 640px) {
  .nav-btn span, .theme-btn span, .music-btn span { display: none; }
  header.top a.brand { font-size: 13px; letter-spacing: .05em; }
}

/* Forms: sign in, register, reset, account. */
.form-card { max-width: 460px; margin: 24px auto; padding: 28px 30px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 24, 30, .08); }
.form-card h1 { margin-top: 0; }
.form-card h2 { font-size: 19px; margin: 28px 0 8px; border: 0; }
.form { display: grid; gap: 14px; margin: 12px 0; }
.field { display: grid; gap: 4px; }
.field span { font-size: 14px; color: var(--muted); }
.field input { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field small { color: var(--muted); font-size: 13px; }
.btn-main, .btn-line, .btn-danger { font: inherit; font-size: 16px; cursor: pointer; border-radius: 999px; padding: 9px 20px;
  justify-self: start; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.btn-main { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font-weight: 700; }
.btn-line { background: none; color: var(--accent); border: 1px solid var(--accent); }
.btn-danger { background: none; color: #b3261e; border: 1px solid #b3261e; }
:root[data-theme="dark"] .btn-danger { color: #f2a59e; border-color: #f2a59e; }
.form-links, .form-note { font-size: 15px; color: var(--muted); }
.form-links a { color: var(--accent); }
.form-error { color: #b3261e; background: color-mix(in srgb, #b3261e 9%, transparent); padding: 8px 12px; border-radius: 10px; }
:root[data-theme="dark"] .form-error { color: #f2a59e; }
.form-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 8px 12px; border-radius: 10px; }
.recovery-code { font: 700 22px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-align: center;
  padding: 14px; border: 2px dashed var(--accent); border-radius: 12px; user-select: all; word-break: break-all; }

/* Landing page: Moreh Ezra's study fills the screen; the course is chalked onto his board.
   The picture is 16:9 and the stage covers the screen at that ratio, so the board's place
   in it (left 29-97 %, top 2.5-80 %) is known. */
body.landing::before { display: none; }
/* The header and the points below the picture follow day and dark like every other page;
   only the picture and the board are the same in both. */
body.landing { background: var(--bg); }
body.landing header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.landing header.top .nav-btn, body.landing header.top .lang-btn, body.landing header.top .theme-btn,
body.landing header.top .music-btn { background: var(--card); }
body.landing main { max-width: none; padding: 0; margin: 0; }
.hero { position: relative; height: 100vh; overflow: hidden; }
.hero .stage { position: absolute; width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hero .stage img { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .hero .stage::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 6, .38); pointer-events: none; }
.board { position: absolute; z-index: 1; left: 33%; top: 8%; width: 60%; height: 62%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 1.2vmin; color: #f4f1e8; }
.board .he { font-size: max(46px, 8.4vmin); line-height: 1.2; color: #f4f1e8; opacity: .94;
  text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 6px rgba(255, 255, 255, .12); }
.board h1 { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: max(22px, 3.6vmin); margin: 0; color: #f4f1e8; }
.board p { margin: 0; max-width: 34em; color: rgba(244, 241, 232, .8); font-size: max(15px, 2.15vmin); font-style: italic; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 2vmin; }
.cta a { font-size: max(15px, 2vmin); text-decoration: none; color: #f4f1e8; border: 2px solid rgba(244, 241, 232, .78);
  border-radius: 999px; padding: .55em 1.3em; display: inline-flex; gap: .5em; align-items: center; }
.cta a.main { background: #f4f1e8; color: #22303f; border-color: #f4f1e8; font-weight: 700; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto;
  padding: 40px 16px 64px; color: var(--fg); }
.point { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.point .fa { font-size: 22px; color: var(--accent); }
.point h2 { font-size: 19px; margin: 10px 0 6px; border: 0; color: var(--fg); }
.point p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .points { grid-template-columns: 1fr; } }
/* Phone held upright: the picture on top, cropped to Moreh Ezra; the board's words below it on a slate. */
/* Narrower than 3:2 (a tablet, a small or half-screen window, a phone): the board's writing no
   longer fits on the painted board, which is cut off at the sides. So the picture is shown whole
   on top and the words go below it on a slate of their own (2026-11-15). */
@media (max-aspect-ratio: 3/2) {
  .hero { height: auto; }
  .hero .stage { position: relative; width: 100%; height: auto; left: 0; top: 0; transform: none; }
  .hero .stage img { height: auto; }
  .board { position: static; width: auto; height: auto; padding: 28px 20px 40px; gap: 10px;
    background: #2f3133 radial-gradient(ellipse at 50% 30%, #3a3d3f, #2a2c2e 75%); }
  .board .he { font-size: 56px; } .board h1 { font-size: 24px; } .board p { font-size: 16px; } .cta a { font-size: 16px; }
  .board .ltr-tip, .board .wotd { font-size: 15px; } .board .say { font-size: 16px; }
}
/* Phone held upright: the picture cropped to Moreh Ezra. */
@media (max-aspect-ratio: 4/5) {
  .hero .stage img { height: 58vh; object-fit: cover; object-position: 18% 50%; }
}

/* The logo and the "Biblical Hebrew" name: black by day, white at night (Daniel, 2026-11-14). */
header.top a.brand, body.landing header.top a.brand { color: #111111; }
:root[data-theme="dark"] header.top a.brand, :root[data-theme="dark"] body.landing header.top a.brand { color: #ffffff; }
/* A larger name and logo in the header (Daniel, 2026-11-14). */
header.top a.brand { font-size: 15px; gap: 10px; }



/* A slimmer header with a smaller name and no logo (Daniel, 2026-11-14). The bet stays as
   the tab and phone icon. */
.top { padding: 6px 16px; font-size: 14px; }
.nav-btn, .lang-btn, .theme-btn, .music-btn { font-size: 13px; padding: 1px 10px; }
header.top a.brand { font-size: 15px; }
header.top a.brand { white-space: nowrap; }
@media (max-width: 640px) {
  header.top a.brand { font-size: 13px; letter-spacing: .04em; }
  header.top > span { display: none; }   /* the "/ Lesson 4" crumb: the page title says it */
  .nav-btn, .lang-btn, .theme-btn, .music-btn { padding: 1px 8px; }
  header.top { gap: 4px; }
}

/* Interactive exercises (assets/exercises.js). */
.ex { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); }
.ex.is-right { border-left-color: var(--ok); }
.ex.is-wrong { border-left-color: #b3261e; }
.ex-q { margin: 0 0 12px; font-weight: 700; }
/* Shlomo's ink runs from 0.42em below the baseline (qubuts, final letters) to 1.06em above it (lamed),
   so Hebrew in tiles gets line-height 1.6: the whole letter, marks included, fits inside the border. */
.ex-q .he, .ex-opt .he { font-size: 1.5em; line-height: 1.6; }
.ex-options, .ex-col { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-match { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ex-col { flex-direction: column; }
.ex-opt, .ex-key { font: inherit; cursor: pointer; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); min-width: 48px; text-align: center; }
.ex-opt:hover, .ex-key:hover { border-color: var(--accent); }
.ex-opt.picked { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ex-opt.good { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.ex-opt.bad { border-color: #b3261e; background: color-mix(in srgb, #b3261e 12%, var(--card)); }
.ex-opt:disabled { cursor: default; opacity: .85; }
.ex-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-input { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 0; flex: 1 1 180px; }
.ex-help { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ex-built { min-height: 1.6em; line-height: 1.6; font-size: 2.2em; text-align: center; padding: 4px 10px; margin-bottom: 10px;
  border-bottom: 2px dashed var(--line); }
.ex-keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; direction: rtl; }
.ex-key { font-family: 'Shlomo semiStam', serif; font-size: 1.6em; line-height: 1.6; padding: 4px 12px; }
.ex-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ex-feedback { margin: 10px 0 0; min-height: 1.2em; }
.ex-feedback.ok { color: var(--ok); }
.ex-feedback.no { color: #b3261e; }
:root[data-theme="dark"] .ex-feedback.no { color: #f2a59e; }
.ex-score-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 6px; padding: 14px 18px;
  border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.ex-meter { flex: 1 1 160px; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ex-meter span { display: block; height: 100%; background: var(--chart); border-radius: 999px; transition: width .3s; }
@media (max-width: 640px) { .ex-match { gap: 8px; } .ex { padding: 14px 12px; } }

/* A lesson in parts (assets/exercises.js): step bar, the "continue" step, the end. */
.part-bar { margin: 18px 0 26px; }
.part-meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.part-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; }
.part-bar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.part-bar button { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.part-bar .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--fg); font-size: 12px; font-weight: 700; }
.part-bar li.current button { border-color: var(--accent); color: var(--fg); }
.part-bar li.current .n { background: var(--accent); color: var(--on-accent); }
.part-bar li.done .n { background: var(--ok); color: #fff; }
.part-bar li.locked button { opacity: .55; cursor: default; }
.part { scroll-margin-top: 70px; }
.part + .part { border-top: 1px dashed var(--line); margin-top: 28px; padding-top: 6px; }
.part-next { margin: 26px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.part-next button:disabled { opacity: .5; cursor: not-allowed; }
.part-left { margin: 0; color: var(--muted); font-size: 15px; flex: 1 1 100%; }
.part-left:empty { display: none; }
.part-done { margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); }
.part-done .fa { color: var(--ok); }
@media (max-width: 640px) { .part-bar .t { display: none; } .part-bar button { padding: 4px; } }
[hidden] { display: none !important; }
.ex-key.is-mark { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 8px 4px; min-width: 64px; }
.ex-key.is-mark .mk { font-family: 'Times New Roman', 'Ezra SIL', 'SBL Hebrew', serif; font-size: 1.1em; line-height: 1.3; }
.ex-key.is-mark small { font-family: 'Monarcha', Georgia, serif; font-size: 11px; color: var(--muted); direction: ltr; }

/* The slim header stays at the top while the page scrolls (Daniel, 2026-11-15).
   Headings and parts jumped to land below it. */
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
h2, h3, .part, .ex { scroll-margin-top: 64px; }
.part-bar .part-reset, .part-bar .part-sound { margin-top: 12px; padding: 7px 16px; gap: 8px; font-size: 14px;
  color: var(--muted); text-decoration: none; }
.part-bar .part-reset:hover, .part-bar .part-sound:hover { border-color: var(--accent); color: var(--fg); }
.part-bar .part-sound { margin-left: 10px; }

/* The site's own confirmation dialog (assets/dialog.js) */
.hb-dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--fg);
  padding: 24px 26px 20px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.hb-dialog::backdrop { background: rgba(20, 22, 14, .45); backdrop-filter: blur(2px); }
.hb-dialog form { margin: 0; display: grid; gap: 12px; }
.hb-dialog-title { margin: 0; padding: 0; border: 0; font-size: 21px; line-height: 1.3; }
.hb-dialog-text { margin: 0; color: var(--muted); line-height: 1.55; }
.hb-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.hb-dialog-actions button { min-height: 44px; }
.hb-dialog-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-danger-fill { font: inherit; font-size: 16px; cursor: pointer; border-radius: 999px; padding: 9px 20px;
  background: #b3261e; color: #fff; border: 1px solid #b3261e; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .hb-dialog[open] { animation: hb-dialog-in .16s ease-out; }
  @keyframes hb-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* Buttons are filled, never see-through (Daniel, 2026-11-15): primary = olive fill
   (.btn-main, .mark-done.is-done), secondary pills = solid card fill with an outline. */
.toggle, details.answers summary, .theme-btn, .music-btn, .nav-btn, .btn-line, .btn-danger,
.mark-done:not(.is-done), .part-bar button { background: var(--card); }
.toggle:hover, details.answers summary:hover, .theme-btn:hover, .music-btn:hover, .nav-btn:hover,
.btn-line:hover, .mark-done:not(.is-done):hover, .part-bar .part-reset:hover, .part-bar .part-sound:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); }

/* A lesson beyond the free ones (page_locked in app.php). */
.paywall { margin: 28px 0; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); text-align: center; }
.paywall > .fa { font-size: 28px; color: var(--accent); }
.paywall h2 { margin: 10px 0 6px; }
.paywall p { max-width: 52ch; margin: 8px auto; }
.paywall .price { font-weight: 700; font-size: 20px; color: var(--accent); }
ol.lessons .fa-lock { font-size: .8em; color: var(--muted); margin-left: 4px; }

/* Landing board in chalk (Daniel's pick, 2026-11-15: "fine grain"). The SVG filters #chalk and
   #chalk-s are in the page (page_landing). The word is written right to left as the page opens,
   the rest follows; nothing moves for people who ask for less motion. */
.chalk-defs { position: absolute; width: 0; height: 0; }
.board .he, .board h1 { color: #fffdf6; filter: url(#chalk); text-shadow: none; opacity: 1; }
.board h1 { font-weight: 400; letter-spacing: .1em; }
.board p { filter: url(#chalk-s); color: #fffdf6; }
@media (prefers-reduced-motion: no-preference) {
  .board .he { animation: chalk-write 1.6s cubic-bezier(.4, 0, .2, 1) .2s both; }
  .board h1 { animation: chalk-rise .6s ease 1.6s both; }
  .board p { animation: chalk-rise .6s ease 1.85s both; }
  .board .cta { animation: chalk-rise .6s ease 2.1s both; }
}
@keyframes chalk-write { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes chalk-rise { from { opacity: 0; transform: translateY(10px); } }

/* Landing board: the first word, letter by letter, a speaker, the word of the day (landing.js). */
.word-row { display: flex; align-items: center; justify-content: center; gap: .3em; }
.board-word { display: inline-flex; direction: rtl; }
.board-word .ltr { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 6px; transition: background-color .15s; margin: 0; }
.board-word .ltr:hover, .board-word .ltr.on { background: rgba(255, 253, 246, .1); }
.board-word .ltr:focus-visible { outline: 2px dashed rgba(255, 253, 246, .7); outline-offset: 2px; }
.board .say { font-size: max(16px, 2.2vmin); width: 2.3em; height: 2.3em; border-radius: 50%; cursor: pointer; color: #fffdf6;
  background: rgba(255, 253, 246, .08); border: 1.5px solid rgba(255, 253, 246, .55);
  display: inline-flex; align-items: center; justify-content: center; }
.board .say:hover, .board .say.playing { background: rgba(255, 253, 246, .22); }
.board .ltr-tip { min-height: 1.6em; margin: 0; font-style: normal; text-wrap: balance; font-size: max(14px, 1.9vmin); color: rgba(255, 253, 246, .85); }
.board .wotd { margin-top: 1.4vmin; font-style: normal; font-size: max(14px, 1.9vmin); }
.board .wotd .he { font-size: 1.5em; }
.board .wotd-k { text-transform: uppercase; letter-spacing: .08em; font-size: .85em; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .board .he { animation: none; }
  .board .word-row { animation: chalk-write 1.6s cubic-bezier(.4, 0, .2, 1) .2s both; }
  .board .ltr-tip, .board .wotd { animation: chalk-rise .6s ease 2.3s both; }
}

/* Moreh Ezra's idle loop over the still (landing.js). */
.hero .stage video.idle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .8s ease; }
.hero .stage video.idle.on { opacity: 1; }
.board .ltr-tip em { font-style: italic; }
/* The transliteration under the board's word: the course's transcription face (Monarcha italic,
   as in the lessons), in the same fine-grain chalk as the rest of the board (Daniel, 2026-11-15). */
.board .translit { margin: -.4vmin 0 0; filter: url(#chalk); font-family: 'Monarcha', Georgia, 'Charis SIL', serif; font-style: normal;
  font-size: max(17px, 2.6vmin); color: #fffdf6; }
.board .translit em { font-style: italic; font-size: 1.15em; }
.board .ltr-tip { font-family: 'Monarcha', Georgia, 'Charis SIL', serif; font-size: max(15px, 2.1vmin); color: #fffdf6; } /* bright, in the transliteration's face and chalk (Daniel, 2026-11-15) */
@media (prefers-reduced-motion: no-preference) { .board .translit { animation: chalk-rise .6s ease 1.5s both; } }
@media (max-aspect-ratio: 3/2) { .board .translit { font-size: 18px; } .board .ltr-tip { font-size: 16px; } }
/* Small writing on the board (the title, the transliteration, the line under it, the letter tip, the
   word of the day): its own chalk, #chalk-t, with a coarser grain sized for small letters (seen at
   normal screen size) and slightly rough edges: chalky but legible (Daniel, 2026-11-15). */
.board h1, .board .translit, .board p, .board .ltr-tip, .board .wotd { filter: url(#chalk-t); }
.board .wotd .he { filter: none; } /* the row's #chalk-t covers it; #chalk on top doubled the grain */