/* Layout: an Israeli print poster. Flat blocks of the app's own te'amim colours carry the structure (no hairline rules, no cards); every feature is stamped with its Hebrew word on a colour block; headings take the desk's solid disjunctive underline. The sample page keeps the desk's paper and ink exactly, so it reads as the product itself. Logical properties throughout so a Hebrew (RTL) edition flips cleanly. */
@font-face { font-family: "Ezra SIL"; src: url("fonts/EzraSIL.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Noto Sans Hebrew Local"; src: url("fonts/NotoSansHebrew.ttf") format("truetype"); font-display: swap; }

:root {
  /* ground */
  --bg: #F4F5F2;
  --fg: #15171A;
  --mute: #585E66;
  --line: #C9CEC8;
  --panel: #FFFFFF;
  /* te'amim, straight from taamim/taamim_palette.json */
  --etnahta: #D55E00;
  --tipha: #E69F00;
  --zaqef: #0072B2;
  --zaqef-g: #003F66;
  --pashta: #56B4E9;
  --revia: #009E73;
  --segol: #CC79A7;
  --tevir: #8C5A2B;
  --geresh: #F0E442;
  --silluq: #A6400A;
  --act: var(--zaqef);
  --act-fg: #FFFFFF;
  --opener-bg: #D55E00;   /* etnachta: the strongest pause inside a verse */
  --opener-fg: #15171A;
  --deep-bg: #003F66;     /* zakef gadol */
  --deep-fg: #FFFFFF;
  /* the desk's own page (DESIGN.md) */
  --paper: #F4EFE4;
  --ink: #211D17;
  --dim: #6E6558;
  --rule: #E0D8C9;
  --tint-dis: 0.35;
  --tint-con: 0.12;

  /* type */
  --display: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --body: "Assistant", "Arial Hebrew", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sefer: "Ezra SIL", "SBL Hebrew", "Times New Roman", serif;
  --label: "Noto Sans Hebrew Local", "Noto Sans Hebrew", "Arial Hebrew", sans-serif;

  --t-body: 1.125rem;
  --measure: 38rem;
  --page: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --fg: #ECEEEA; --mute: #9BA3AB; --line: #2E343A; --panel: #1A1E22;
    --etnahta: #F0813A; --tipha: #F2B23A; --zaqef: #4DA3E0; --zaqef-g: #0B5A8C; --pashta: #7CC6EE;
    --revia: #26C49A; --segol: #E39AC4; --tevir: #C08A5A; --geresh: #F3E86A; --silluq: #E0703A;
    --act: #4DA3E0; --act-fg: #0B1217;
    --paper: #1A1713; --ink: #EDE6D7; --dim: #A79D8C; --rule: #352F27; --tint-dis: 0.45; --tint-con: 0.18;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121417; --fg: #ECEEEA; --mute: #9BA3AB; --line: #2E343A; --panel: #1A1E22;
  --etnahta: #F0813A; --tipha: #F2B23A; --zaqef: #4DA3E0; --zaqef-g: #0B5A8C; --pashta: #7CC6EE;
  --revia: #26C49A; --segol: #E39AC4; --tevir: #C08A5A; --geresh: #F3E86A; --silluq: #E0703A;
  --act: #4DA3E0; --act-fg: #0B1217;
  --paper: #1A1713; --ink: #EDE6D7; --dim: #A79D8C; --rule: #352F27; --tint-dis: 0.45; --tint-con: 0.18;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-body)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--page); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
a { color: inherit; text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--act); }
:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
:not(html)[lang="he"], .he { font-family: var(--sefer); }
kbd {
  font: 500 0.78em/1 var(--mono);
  padding: 0.25em 0.45em 0.2em;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.eyebrow { font: 700 0.78rem/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 0.6rem; }
.eyebrow::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--c, var(--fg)); flex: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; margin: 0; text-wrap: balance; line-height: 1.05; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.55rem; line-height: 1.15; }
/* the desk's disjunctive underline, as a heading device */
.ul { text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; text-decoration-color: var(--c, var(--etnahta)); text-decoration-skip-ink: none; }
p { margin: 0; text-wrap: pretty; }

/* ── masthead ───────────────────────────── */
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; padding-block: 0.6rem; }
.mark { display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none; }
.mark b { font: 900 1.5rem/1 var(--display); }
.mark span { font: 1.2rem/1 var(--sefer); color: var(--mute); }
.mast nav { display: flex; gap: clamp(0.9rem, 2.5vw, 2rem); font: 600 0.95rem/1 var(--body); flex-wrap: wrap; }
.mast nav a { text-decoration: none; }
.mast nav a:hover { text-decoration: underline; }

/* ── opener: the line that started the app, as a poster ── */
.opener { background: var(--opener-bg); color: var(--opener-fg); padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.opener .wrap { display: grid; gap: 1.5rem; }
.opener blockquote { margin: 0; direction: rtl; font: 900 clamp(2.5rem, 7.4vw, 6.4rem)/1.18 var(--display); text-wrap: balance; max-width: 18ch; }
.opener blockquote span { display: inline-block; }
.opener .tr { font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.35 var(--body); max-width: 34rem; }
.opener .why { font: 700 1.05rem/1.4 var(--body); max-width: 34rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── hero ───────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hero-copy { display: grid; gap: 1.5rem; }
.hero-copy .lede { font-size: 1.25rem; line-height: 1.5; max-width: 32rem; }
.hero-copy .lede i { font-style: normal; font-weight: 600; }
.ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 700 1rem/1 var(--body); text-decoration: none;
  padding: 0.95rem 1.4rem;
  background: var(--act); color: var(--act-fg); border: 2px solid var(--act);
}
.btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.quiet { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.quiet:hover { background: var(--fg); color: var(--bg); }
.hero .fine { font-size: 0.95rem; color: var(--mute); font-weight: 500; }

/* ── the live leaf: the desk itself, in its own paper ── */
.desk { display: grid; gap: 0.9rem; }
.leaf { background: var(--paper); color: var(--ink); border: 2px solid var(--fg); direction: rtl; position: relative; }
.leaf:focus-visible { outline-offset: 4px; }
.rhead {
  display: flex; gap: 2.25rem; align-items: center; height: 40px;
  padding-inline: clamp(16px, 3vw, 32px);
  border-block-end: 1px solid var(--rule);
  font: 13px/1 var(--label); color: var(--dim);
}
.rhead .mode { color: var(--ink); min-width: 3.2em; }
.rhead .focus { margin-inline-start: auto; direction: ltr; font-family: var(--mono); font-size: 11px; }
.rhead .taam { margin-inline-start: auto; color: var(--ink); font: 1rem/1 var(--sefer); }
.page { padding: 30px clamp(16px, 3vw, 32px) 28px; display: grid; gap: 22px; }
.col { position: relative; }
.mikra { font: clamp(20px, 2.15vw, 27px)/1.85 var(--sefer); }
.onk { font: clamp(16px, 1.65vw, 20px)/1.78 var(--sefer); }
.rashi { font: clamp(14px, 1.3vw, 16px)/1.85 var(--sefer); }
.lbl { display: block; font: 12px/1 var(--label); color: var(--dim); margin-block-end: 8px; }
.vn { font: 12px/1 var(--label); color: var(--dim); margin-inline-end: 0.35em; vertical-align: 0.35em; cursor: default; }
.w { padding-block: 0.08em; transition: background-color .15s; }
.leaf.colour .w { cursor: help; }
.leaf.colour .w.dis, .leaf .w.cur.dis { text-decoration: underline solid; text-underline-offset: 0.42em; text-decoration-thickness: 1.5px; }
.leaf.colour .w.con, .leaf .w.cur.con { text-decoration: underline dotted; text-underline-offset: 0.42em; text-decoration-thickness: 1.5px; }
.leaf.learn .w { cursor: pointer; }
.pct { position: absolute; bottom: 12px; right: clamp(16px, 3vw, 32px); font: 12px/1 var(--label); color: var(--dim); }
.desk.learn .onk, .desk.learn .rashi-block, .desk.learn .beats { display: none; }
.desk.learn .page { padding-block-end: 44px; }

.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.beat { padding: 0.6rem 0.8rem; display: grid; gap: 0.25rem; background: var(--panel); color: var(--mute); border: 1.5px solid var(--line); }
.beat b { font: 700 0.72rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.beat span { font: 1.1rem/1.2 var(--sefer); }
.beat.on { background: var(--act); border-color: var(--act); color: var(--act-fg); }

.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ctl {
  font: 700 0.9rem/1 var(--body); color: var(--fg);
  background: transparent; border: 1.5px solid var(--fg);
  padding: 0.6rem 0.8rem; cursor: pointer; display: inline-flex; gap: 0.55rem; align-items: center;
}
.ctl:hover { background: var(--panel); }
.ctl[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ctl.primary { border-color: var(--act); color: var(--act); }
.ctl.primary:hover { background: var(--act); color: var(--act-fg); }
.ctl:disabled { opacity: 0.35; cursor: not-allowed; }
.ctl:disabled:hover { background: transparent; }
.caption { font-size: 1rem; color: var(--mute); min-height: 3em; }
.caption strong { color: var(--fg); font-weight: 700; }

.tip {
  position: fixed; z-index: 10; pointer-events: none;
  background: var(--fg); color: var(--bg);
  font: 500 0.85rem/1.35 var(--body); padding: 0.45rem 0.65rem;
  max-width: 17rem;
}
.tip .he { font-size: 1.05rem; }

/* ── features: each stamped with its Hebrew word on its ta'am's colour ── */
.features { padding-block: clamp(3rem, 7vw, 5.5rem) 2rem; }
.features > .wrap > header { display: grid; gap: 1rem; max-width: 46rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.feature {
  --c: var(--fg); --c-fg: var(--bg);
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4.5vw, 3rem);
  align-items: start;
}
.feature[data-c="zaqef"]   { --c: var(--zaqef);   --c-fg: #fff; }
.feature[data-c="etnahta"] { --c: var(--etnahta); --c-fg: #15171A; }
.feature[data-c="revia"]   { --c: var(--revia);   --c-fg: #fff; }
.feature[data-c="segol"]   { --c: var(--segol);   --c-fg: #15171A; }
.feature[data-c="tipha"]   { --c: var(--tipha);   --c-fg: #15171A; }
.feature[data-c="pashta"]  { --c: var(--pashta);  --c-fg: #15171A; }
.feature[data-c="tevir"]   { --c: var(--tevir);   --c-fg: #fff; }
.feature[data-c="geresh"]  { --c: var(--geresh);  --c-fg: #15171A; }
.feature[data-c="zaqef-g"] { --c: var(--zaqef-g); --c-fg: #fff; }
.feature .margin { display: grid; gap: 0.6rem; align-content: start; }
.feature .stamp { background: var(--c); color: var(--c-fg); font: 900 2.2rem/1 var(--display); padding: 0.55rem 0.7rem 0.45rem; direction: rtl; text-align: start; display: inline-block; justify-self: start; }
.feature .margin .eyebrow { font-size: 0.7rem; }
.feature .margin .eyebrow::before { display: none; }
.feature .body { display: grid; gap: 0.9rem; max-width: var(--measure); }
.feature .body h3 { text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.14em; text-decoration-color: var(--c); text-decoration-skip-ink: none; }
.feature .body .why { color: var(--mute); font-size: 1rem; }
.feature ul.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 1rem; }
.feature ul.facts li { padding-inline-start: 1.2rem; position: relative; }
.feature ul.facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; background: var(--c); }
.specimen { background: color-mix(in srgb, var(--c) 16%, var(--panel)); padding: 1.1rem 1.2rem; display: grid; gap: 0.6rem; align-content: start; }
.specimen .he-line { font: 1.45rem/1.8 var(--sefer); direction: rtl; }
.specimen .note { font: 500 0.85rem/1.45 var(--body); color: var(--mute); }
.keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 0.9rem; align-items: baseline; font-size: 0.98rem; }
.keys > kbd { justify-self: start; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.9rem; }
.swatches span { display: inline-flex; align-items: center; gap: 0.45rem; }
.swatches i { width: 0.9rem; height: 0.9rem; display: inline-block; }

.kspec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; direction: rtl; }
.kspec .he-line { font-size: 1.35rem; }
.qere { position: relative; }
.qere::before { content: ""; position: absolute; top: -0.2em; left: 50%; width: 5px; height: 5px; border: 1px solid var(--dim); border-radius: 50%; transform: translateX(-50%); }
.kg { color: var(--mute); white-space: nowrap; display: inline-flex; gap: 0.35rem; align-items: baseline; }
.kg .he { font-size: 1.1rem; }
.kg small { font: 11px/1 var(--label); }

.lspec { background: var(--paper); color: var(--ink); border: 2px solid var(--fg); direction: rtl; }
.lspec .rhead { height: 34px; gap: 1.25rem; font-size: 12px; padding-inline: 14px; }
.lspec .he-line { padding: 0.6rem 14px 1.6rem; position: relative; }
.lspec .pct { bottom: 8px; right: 14px; }

/* ── what sets it apart: a deep block ───── */
.apart { background: var(--deep-bg); color: var(--deep-fg); padding-block: clamp(3rem, 7vw, 5.5rem); }
.apart .wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.apart header { max-width: 46rem; display: grid; gap: 1rem; }
.apart .eyebrow { color: var(--deep-fg); --c: var(--tipha); }
.apart a { text-decoration-color: var(--tipha); }
.vows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.vow { display: grid; gap: 0.5rem; align-content: start; }
.vow h3 { font-size: 1.35rem; text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.14em; text-decoration-color: var(--tipha); text-decoration-skip-ink: none; }
.vow p { font-size: 1rem; opacity: 0.88; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fig { padding: 1.1rem 1.1rem 1.2rem; background: color-mix(in srgb, var(--deep-fg) 10%, transparent); display: grid; gap: 0.3rem; }
.fig b { font: 900 clamp(2rem, 4vw, 3rem)/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.fig span { font-size: 0.9rem; opacity: 0.88; }

/* ── get it ─────────────────────────────── */
.get { padding-block: clamp(3rem, 7vw, 5.5rem); }
.get .wrap { display: grid; }
.get .copy { display: grid; gap: 1rem; max-width: 32rem; }
.get .eyebrow { --c: var(--revia); }
.next { background: color-mix(in srgb, var(--revia) 16%, var(--panel)); padding: 1.1rem 1.2rem; display: grid; gap: 0.4rem; }
.next h3 { font-size: 1.2rem; }
.next p { font-size: 0.98rem; color: var(--mute); }

/* ── sources / footer ───────────────────── */
footer { border-block-start: 3px solid var(--fg); padding-block: 2.5rem 3rem; font-size: 0.92rem; color: var(--mute); }
footer .wrap { display: grid; gap: 1.5rem; }
footer .eyebrow { --c: var(--segol); }
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.credits div { display: grid; gap: 0.25rem; align-content: start; }
.credits b { color: var(--fg); font-weight: 700; }
footer .last { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block-start: 1.25rem; font-weight: 600; }

/* ── narrow ─────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .margin { grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.9rem; }
  .vows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vows { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhead { gap: 1.25rem; }
  .ctl .lbltext { display: none; }
  .feature .stamp { font-size: 1.7rem; }
}

/* ── language editions ──────────────────── */
/* the switch in the nav is UI text, not sefer text */
.mast nav a[lang] { font-family: var(--body); }
/* Hebrew has no capitals and letter-spacing breaks its words apart */
html[lang="he"] .eyebrow,
html[lang="he"] .opener .why,
html[lang="he"] .beat b,
html[lang="he"] .copybtn { text-transform: none; letter-spacing: 0; }
html[lang="he"] .eyebrow { font-size: 0.92rem; }
html[lang="he"] .opener .why { font-size: 1.15rem; }
html[lang="he"] .beat b { font-size: 0.85rem; }
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3 { letter-spacing: 0; line-height: 1.12; }
html[lang="he"] body { line-height: 1.7; }