/* May the LORD bless you: the Hebrew behind Numbers 6:24-26. A full-screen piece that opens from the article
   "What Is the Aaronic Blessing?". Built from the John 21 piece (piece/style.css) with the same type and layout.
   Type follows christianpure.com (design system D-047): GT Sectra headings, GT Pantheon Text reading, GT Pantheon Micro
   small text, loaded from the site. Hebrew is set in Noto Serif Hebrew (The Noto Project Authors, SIL Open Font
   License), shipped with the piece, because the house faces have no Hebrew letters.
   Rank: 1 the blessing with God's name marked in each line; 2 the finding and its pattern (3, 5, 7 words);
   3 the word you tap (a column beside the passage on a laptop, a sheet from the foot of a phone); 4 the notes. */

@font-face { font-family: 'GT Sectra'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Sectra-Medium.woff') format('woff'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Sectra-Medium.woff') format('woff'); }
@font-face { font-family: 'GT Pantheon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Regular-Italic.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Regular-Italic.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Text-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Text-Medium.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Micro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Micro-Regular.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Micro-Regular.woff2') format('woff2'); }
@font-face { font-family: 'GT Pantheon Micro'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/GT-Pantheon-Micro-Medium.woff2') format('woff2'), url('https://christianpure.com/wp-content/uploads/fonts/GT-Pantheon-Micro-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/noto-serif-hebrew-400.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Noto Serif Hebrew'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/noto-serif-hebrew-600.woff2') format('woff2'); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  --page: #fbf8f3;     /* design system stone */
  --band: #f5ede1;     /* stone deep */
  --ink: #002159;     /* design system ink */
  --muted: #67625d;   /* design system ink-muted */
  --gold: #c58c23;
  --line: #e6ded3;
  --focus: #2d6db0;
  --a: #8f6418;        /* the LORD (YHWH): gold ink, 4.9:1 on stone */
  --a-soft: #f3e6c9;
  --p: #a5402a;        /* peace (shalom): brick, 5.9:1 on stone */
  --p-soft: #f6dfd6;
  --pair: #2d6db0;
  --head-font: 'GT Sectra', Georgia, 'Times New Roman', serif;
  --body-font: 'GT Pantheon Text', Georgia, 'Times New Roman', serif;
  --label-font: 'GT Pantheon Micro', Georgia, 'Times New Roman', serif;
  --greek-font: 'Noto Serif Hebrew', 'SBL Hebrew', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font-family: var(--body-font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--a); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.gk { font-family: var(--greek-font); font-feature-settings: 'kern'; direction: rtl; unicode-bidi: isolate; }
i, cite { font-style: italic; }

/* ---------- header, as on the other pieces ---------- */
.head {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 4px 12px; padding-top: max(4px, env(safe-area-inset-top)); background: var(--page); border-bottom: 1px solid var(--line);
}
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; padding: 0 6px 0 2px; font: 400 16px/1 var(--body-font); color: var(--ink); text-decoration: none; white-space: nowrap; }
.back-arrow { font: 400 30px/1 var(--body-font); margin-top: -3px; }
.back-more, .title-more { display: none; }
.back-more { margin-left: 0.24em; }
.back:hover .back-word, .back:hover .back-more { text-decoration: underline; text-underline-offset: 3px; }
.head h1 { margin: 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 19px/1.15 var(--head-font); letter-spacing: -0.005em; }
.about-btn, .btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; font: 400 16px/1 var(--label-font); color: var(--ink); }
.about-btn:hover, .btn:hover { border-color: var(--gold); }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 900px) {
  .head { padding: 6px 24px; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); }
  .back, .about-btn { font-size: 17px; }
  .back-more, .title-more { display: inline; }
  .head h1 { font-size: 24px; }
  .about-btn { justify-self: end; }
}

/* ---------- page and columns ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 0 16px 80px; }
.cols { display: block; }
.read { min-width: 0; }
@media (min-width: 1000px) {
  .page { padding: 0 32px 72px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
  .read { max-width: 700px; }
}
@media (min-width: 1300px) { .cols { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; } }

/* ---------- 2: the finding and its pattern ---------- */
.finding { margin: 20px 0 14px; font: 500 25px/1.25 var(--head-font); letter-spacing: -0.01em; max-width: 30ch; }
.finding b { font-weight: 500; }
.finding .a, .pattern .a { color: var(--a); }
.finding .p, .pattern .p { color: var(--p); }
@media (min-width: 900px) { .finding { font-size: 32px; margin-top: 32px; } }

.pattern { border-collapse: collapse; margin: 0 0 22px; font-family: var(--label-font); font-size: 15px; }
.pattern th, .pattern td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.pattern thead th { font-weight: 400; color: var(--muted); font-size: 13px; padding-top: 0; }
.pattern tbody th { font-weight: 400; color: var(--muted); padding-left: 0; white-space: nowrap; }
.pattern td { font-style: italic; font-family: var(--body-font); font-size: 17px; }
.pattern td.a { background: linear-gradient(var(--a-soft), var(--a-soft)) no-repeat 4px 50% / calc(100% - 8px) 70%; }
.pattern td.p { background: linear-gradient(var(--p-soft), var(--p-soft)) no-repeat 4px 50% / calc(100% - 8px) 70%; }
@media (max-width: 380px) { .pattern th, .pattern td { padding: 6px 6px; } .pattern td { font-size: 16px; } }

/* ---------- 1: the passage ---------- */
.passage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.ref { margin: 0; font: 500 19px/1.2 var(--head-font); }
.ref .ver { font: 400 14px/1 var(--label-font); color: var(--muted); margin-left: 6px; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 400 15px/1.2 var(--label-font); cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.hint { margin: 2px 0 6px; font: 400 14px/1.4 var(--label-font); color: var(--muted); }
.loading { color: var(--muted); }

.passage { font-size: 20px; scroll-margin-top: 72px; }
.verse { margin: 0 0 18px; line-height: 2.05; }
.nb { white-space: nowrap; }
@media (min-width: 900px) { .verse { line-height: 2.15; } }
.vn { font: 500 13px/1 var(--label-font); color: var(--muted); vertical-align: 0.5em; margin-right: 4px; }
@media (min-width: 900px) { .passage { font-size: 21px; } }

.w { display: inline; margin: 0; padding: 2px 1px; border: 0; background: none; cursor: pointer; font: inherit; line-height: inherit; color: inherit; text-align: inherit; border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.w:hover { background: rgba(0, 43, 99, 0.07); }
.w.on { background: rgba(0, 43, 99, 0.12); box-shadow: 0 0 0 1px rgba(0, 43, 99, 0.25); }
/* the loves: colour, a thick underline and the Greek verb set under the word, so colour is never alone */
.w.love { position: relative; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.w.love.a { color: var(--a); text-decoration-color: var(--a); }
.w.love.p { color: var(--p); text-decoration-color: var(--p); }
.w .tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -0.62em); white-space: nowrap; pointer-events: none;
  font: italic 400 13px/1 var(--body-font); letter-spacing: 0.01em; }
/* the other pairs, when marked */
.passage.pairs .w.pair { text-decoration: underline dotted; text-decoration-color: var(--pair); text-decoration-thickness: 2px; text-underline-offset: 5px; position: relative; }
.passage.pairs .w.pair .tag { color: var(--pair); }
.passage:not(.pairs) .w.pair .tag { display: none; }

/* the Hebrew line under each verse, read right to left */
.greek { display: none; margin: -8px 0 22px; padding: 6px 0 0; font: 400 25px/2 var(--greek-font); color: var(--ink); direction: rtl; text-align: right; }
.show-greek .greek { display: block; }
.greek .w { padding: 1px 2px; }
.greek .w.love.a, .greek .w.love.p { text-underline-offset: 4px; }

/* ---------- 3: the word (laptop: column; phone: sheet) ---------- */
.detail { outline: none; }
.sheet-bar { display: none; }
@media (min-width: 1000px) {
  .detail { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; margin-top: 32px; padding: 22px 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: 4px; overscroll-behavior: contain; }
  .compare-inline { display: none; }
}
@media (max-width: 999px) {
  .detail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 64vh; display: flex; flex-direction: column; background: #fff; border-top: 1px solid var(--line);
    border-radius: 12px 12px 0 0; box-shadow: 0 -8px 28px rgba(0, 20, 50, 0.18); transform: translateY(105%); transition: transform 0.22s ease; visibility: hidden; padding-bottom: env(safe-area-inset-bottom); }
  .detail.open { transform: none; visibility: visible; }
  .sheet-bar { display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 6px 12px 0; }
  .grab { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .detail-body { overflow: auto; padding: 0 18px 22px; overscroll-behavior: contain; }
  body.sheet-open .page { padding-bottom: 66vh; }
}
@media (prefers-reduced-motion: reduce) { .detail { transition: none; } }

.back-cmp { margin-bottom: 14px; }
.d-en { margin: 0 0 4px; font: 400 14px/1.3 var(--label-font); color: var(--muted); }
.d-gk { margin: 0; font: 400 46px/1.4 var(--greek-font); direction: rtl; text-align: left; unicode-bidi: plaintext; }
.d-note { margin: 10px 0 0; font-size: 16px; line-height: 1.45; }
.d-lemma { margin: 4px 0 0; font: 400 16px/1.4 var(--label-font); color: var(--muted); }
.d-lemma .gk { font-size: 21px; color: var(--ink); }
.d-gloss { margin: 10px 0 0; font: 500 26px/1.2 var(--head-font); }
.d-a .d-gk, .d-a .d-gloss { color: var(--a); }
.d-p .d-gk, .d-p .d-gloss { color: var(--p); }
.d-lead { margin: 10px 0 0; font-size: 17px; line-height: 1.45; }
.d-lead q { quotes: '“' '”'; }
.d-src { margin: 4px 0 0; font: 400 13px/1.35 var(--label-font); color: var(--muted); }
.d-form { margin: 12px 0 0; font: 400 14px/1.4 var(--label-font); color: var(--muted); }
.d-h { margin: 22px 0 6px; font: 500 18px/1.25 var(--head-font); }
.d-facts { margin: 0; font-size: 16px; }
.renders { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.renders li { padding: 3px 9px; border-radius: 3px; background: var(--band); font: 400 14px/1.4 var(--label-font); }
.renders b { font-weight: 500; }
.books { margin: 10px 0 0; display: grid; grid-template-columns: max-content 1fr max-content; gap: 3px 8px; align-items: center; font: 400 13px/1.2 var(--label-font); }
.books .bar { height: 10px; background: var(--line); border-radius: 1px; }
.books .bar i { display: block; height: 100%; background: var(--ink); border-radius: 1px; }
.books .hl, .books .hl + .bar + span { font-weight: 500; }
.books .n { color: var(--muted); text-align: right; }
details.syn { margin: 14px 0 0; padding: 10px 12px; background: var(--band); border-radius: 4px; font-size: 15px; }
details.syn summary { cursor: pointer; font: 500 15px/1.3 var(--label-font); min-height: 24px; }
details.syn p { margin: 8px 0 0; line-height: 1.45; }
.places { margin: 4px 0 0; }
.places h5.else { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.places h5 { margin: 16px 0 4px; font: 500 14px/1.2 var(--label-font); color: var(--muted); }
.place { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.place .r { font: 500 13px/1 var(--label-font); color: var(--muted); margin-right: 6px; white-space: nowrap; }
.place.here { padding: 6px 8px; margin-left: -8px; background: var(--band); border-radius: 3px; }
mark { background: var(--a-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
.d-p mark { background: var(--p-soft); }
.more-btn { margin-top: 8px; }
.capnote { font: 400 13px/1.4 var(--label-font); color: var(--muted); }

/* the default view: the two words side by side */
.cmp h2 { margin: 0 0 4px; font: 500 21px/1.25 var(--head-font); }
.cmp .sub { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-one { padding: 12px 12px 14px; border-radius: 4px; }
.cmp-one.a { background: #fbf4e6; }
.cmp-one.p { background: #fbefea; }
.cmp-one .gk { display: block; font-size: 32px; line-height: 1.3; text-align: left; unicode-bidi: plaintext; }
.cmp-one.a .gk, .cmp-one.a .tr { color: var(--a); }
.cmp-one.p .gk, .cmp-one.p .tr { color: var(--p); }
.cmp-one .tr { margin: 2px 0 0; font: italic 400 17px/1.2 var(--body-font); }
.cmp-one .def { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.cmp-one .num { margin: 10px 0 0; font: 400 14px/1.35 var(--label-font); }
.cmp-one .num b { font: 500 22px/1 var(--head-font); display: block; }
.cmp-one .btn { margin-top: 10px; width: 100%; font-size: 15px; padding: 0 8px; }
.cmp .d-src { margin-top: 10px; }
@media (max-width: 999px) { .compare-inline { margin: 8px 0 28px; padding: 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: 4px; } }
@media (max-width: 380px) { .cmp-grid { gap: 8px; } .cmp-one { padding: 10px 8px 12px; } .cmp-one .gk { font-size: 26px; } }

/* ---------- 4: the notes ----------
   Rank: 1 the heading that states the point (the name is put on the people); 2 the verses that say so;
   3 the oldest copy. No boxes and no side stripes: the levels are made by type size, weight and space alone.
   Four levels only: section heading, part heading, item heading, reading text. */
.debate { margin-top: 72px; }
.debate h2 { margin: 0; max-width: 20ch; font: 500 34px/1.12 var(--head-font); letter-spacing: -0.01em; }
@media (min-width: 900px) { .debate h2 { font-size: 40px; } }
.debate .lede { margin: 14px 0 0; max-width: 58ch; font-size: 18px; line-height: 1.5; }
.debate p { margin: 0; }

.sides { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 760px) { .sides { grid-template-columns: 1fr 1fr; gap: 48px; } }
.side h3 { margin: 0 0 20px; font: 500 26px/1.2 var(--head-font); }
.voice + .voice { margin-top: 22px; }
.who { font: 500 15px/1.3 var(--label-font); }
.say { margin-top: 4px !important; font-size: 17px; line-height: 1.5; }
.src { margin-top: 6px !important; font: 400 13px/1.4 var(--label-font); color: var(--muted); }
.aside { margin-top: 22px !important; font-size: 16px; line-height: 1.45; font-style: italic; color: var(--muted); }

.part-h { margin: 80px 0 0; font: 500 26px/1.2 var(--head-font); }
@media (min-width: 900px) { .side h3, .part-h { font-size: 28px; } }
.group { margin-top: 48px; max-width: 700px; }
.part-h + .group { margin-top: 28px; }
.for { margin-bottom: 14px !important; font: 500 15px/1.3 var(--label-font); color: var(--muted); }
.test + .test { margin-top: 40px; }
.test h4 { margin: 0 0 6px; font: 500 20px/1.3 var(--head-font); }
.test .btn { margin-top: 14px; }
.small { font-size: 15px !important; color: var(--muted); }
.test .small { margin-top: 14px !important; }

/* verses: plain reading text, the Greek word's English marked in its colour, the reference under it */
.pairs { display: grid; gap: 30px; margin-top: 18px; }
.vpair { display: grid; gap: 12px; }
@media (min-width: 640px) { .vpair { grid-template-columns: 1fr 1fr; gap: 32px; } }
.vq { font-size: 16px; line-height: 1.5; }
.vq .r { display: block; margin-top: 4px; font: 400 13px/1.3 var(--label-font); color: var(--muted); }
.vq .r i { font-family: var(--body-font); font-size: 14px; }
.vq.a .r i { color: var(--a); }
.vq.p .r i { color: var(--p); }
.vq mark { padding: 0 1px; border-radius: 2px; color: inherit; background: var(--line); }
.vq.a mark { background: var(--a-soft); }
.vq.p mark { background: var(--p-soft); }

.agree { max-width: 700px; }
.agree .part-h { margin-bottom: 14px; }
.agree > p { font-size: 17px; line-height: 1.55; }
.agree > p + p, .pull + p { margin-top: 14px; }
.pull { margin: 28px 0; padding: 0; }
.pull p { font: italic 500 24px/1.3 var(--head-font); max-width: 26ch; }
@media (min-width: 900px) { .pull p { font-size: 28px; } }
.pull footer { margin-top: 8px; font: 400 14px/1.3 var(--label-font); color: var(--muted); }
.w.inline { display: inline; padding: 0 2px; font-style: italic; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; min-height: 24px; }


/* ---------- about ---------- */
dialog#about { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 6px; background: var(--page); color: var(--ink); }
dialog#about::backdrop { background: rgba(0, 20, 50, 0.45); }
.about-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--page); border-bottom: 1px solid var(--line); }
.about-head h2 { font: 500 22px/1.2 var(--head-font); margin: 0; }
.about-body { padding: 4px 22px 26px; }
.about-body h3 { margin: 22px 0 6px; font: 500 18px/1.25 var(--head-font); }
.about-body p, .about-body li { font-size: 16px; line-height: 1.5; }
.sources { padding-left: 20px; }
.sources li { margin-bottom: 8px; }
.more { padding-left: 20px; }
.debate h2, .debate h3, .debate h4, .pull p { text-wrap: balance; }

/* the pattern table: numbers, not italics */
.pattern td { font-style: normal; font-family: var(--label-font); font-variant-numeric: tabular-nums; }
.pattern td.n { background: none; }
.pattern td b { font: 500 19px/1 var(--head-font); }