.bh-page {
--bh-hair: color-mix(in srgb, var(--color-border) 75%, transparent);
--bh-band: color-mix(in srgb, var(--color-border) 22%, var(--color-surface-solid));
--bh-tint: var(--color-primary-active-bg);
--bh-col-split: minmax(0, 1.35fr) minmax(0, 1fr);
--bh-section-gap: clamp(32px, 5vw, 56px);
}
.bh-card {
background: var(--paper-surface);
border: 1px solid var(--paper-edge);
border-radius: var(--paper-radius);
box-shadow: var(--paper-shadow);
padding: clamp(20px, 3vw, 36px);
}
.bh-section { margin-top: var(--bh-section-gap); }
.bh-overline {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.bh-overline a { color: inherit; text-decoration: none; }
.bh-overline a:hover { color: var(--color-primary); }
.bh-h2 {
margin: 0;
font-family: var(--font-title-serif);
font-weight: 600;
font-size: calc(var(--font-size-2xl) * var(--title-serif-scale));
line-height: var(--leading-tight);
color: var(--color-text);
}
.bh-h3 {
margin: var(--space-xs) 0 var(--space-sm);
font-family: var(--font-title-serif);
font-weight: 600;
font-size: calc(var(--font-size-xl) * var(--title-serif-scale));
line-height: var(--leading-tight);
color: var(--color-text);
}
.bh-section-head { margin-bottom: var(--space-lg); }
.bh-section-sub {
margin: var(--space-xs) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.bh-section-foot {
margin: var(--space-md) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.bh-prose p {
margin: 0 0 1em;
font-family: var(--font-serif);
font-size: var(--font-size-base);
line-height: 1.75;
color: var(--color-text);
}
.bh-prose p:last-child { margin-bottom: 0; }
.bh-prose--sm p { font-size: var(--font-size-md); line-height: 1.7; }
.bh-prose a,
.bh-glance-list a {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
text-underline-offset: 0.18em;
}
.bh-prose a:hover,
.bh-glance-list a:hover { text-decoration-color: currentcolor; }
.bh-link {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
text-decoration: none;
}
.bh-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bh-btn:hover, .bh-btn:focus-visible,
.bh-step-btn:hover, .bh-step-btn:focus-visible,
.bh-word:hover, .bh-word:focus-visible,
.bh-henry:hover, .bh-henry:focus-visible,
.bh-tile:hover, .bh-tile:focus-visible { color: var(--color-text); }
.bh-btn--primary:hover, .bh-btn--primary:focus-visible { color: var(--color-primary-contrast); }
[data-bh-preview] a.trv-link-preview {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 55%, transparent);
padding-bottom: 1px;
cursor: pointer;
}
[data-bh-preview] a.trv-link-preview:hover {
color: var(--color-primary-hover);
border-bottom-color: var(--color-primary);
text-decoration: none;
}
.bh-prose[data-bh-preview] a.bh-ref,
.bh-glance-list[data-bh-preview] a.bh-ref {
font-variant-caps: all-small-caps;
letter-spacing: 0.06em;
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.bh-icon-square,
.bh-henry-icon,
.bh-tile-icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--bh-tint);
color: var(--color-primary);
font-size: var(--font-size-md);
}
.bh-mocknote {
margin: 0 0 var(--space-lg);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.bh-mocknote i { color: var(--color-accent-ink); margin-right: 4px; }
.bh-top {
display: grid;
grid-template-columns: var(--bh-col-split);
gap: clamp(24px, 4vw, 48px);
align-items: start;
}
.bh-top-col { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.bh-top-col--side { gap: var(--space-lg); }
.bh-title {
margin: var(--space-sm) 0 var(--space-md);
font-family: var(--font-title-serif);
font-weight: 600;
font-size: clamp(2.75rem, 7vw, 3.5rem);
line-height: 1;
color: var(--color-text);
}
.bh-identity {
margin: 0;
max-width: 34em;
font-family: var(--font-serif);
font-size: var(--font-size-lg);
line-height: var(--leading-relaxed);
color: var(--color-text);
}
.bh-facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-lg);
margin: var(--space-lg) 0 0;
padding: 0;
list-style: none;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.bh-facts li { display: inline-flex; align-items: center; gap: 8px; }
.bh-facts i { width: 1em; color: var(--color-primary); opacity: 0.85; }
.bh-facts a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.bh-facts a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.bh-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) 10px;
margin-top: var(--space-lg);
}
.bh-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--control-h);
padding: 0 18px;
border: 1px solid var(--bh-hair);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.bh-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border); }
.bh-btn i { color: var(--color-primary); }
.bh-btn .trv-ai-sparkle { width: 15px; height: 15px; }
.bh-btn--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-primary-contrast);
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.bh-btn--primary i { color: inherit; }
.bh-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.bh-soon { padding-bottom: var(--bh-section-gap); }
.bh-btn-meta {
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.bh-card-title {
margin: 0 0 var(--space-md);
font-family: var(--font-title-serif);
font-weight: 600;
font-size: calc(var(--font-size-xl) * var(--title-serif-scale));
line-height: var(--leading-tight);
}
.bh-glance-list { margin: 0; }
.bh-glance-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--bh-hair);
}
.bh-glance-row:first-child { border-top: 0; padding-top: 0; }
.bh-glance-row dt {
display: contents;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.bh-glance-row dt i {
grid-row: span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--bh-tint);
color: var(--color-primary);
font-size: var(--font-size-md);
}
.bh-glance-row dd {
grid-column: 2;
margin: 2px 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.bh-open-prose p { font-size: 1.0625rem; }
.bh-keyverse { margin: 0; }
.bh-scripture {
margin: var(--space-md) 0;
padding: 0;
border: 0;
font-family: var(--font-serif);
font-size: var(--font-size-lg);
line-height: var(--leading-loose);
color: var(--color-text);
}
.bh-keyverse-ref { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.bh-edition {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
color: var(--color-text-muted);
}
.bh-shape .bh-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-xs) var(--space-lg);
}
.bh-shape-grid {
display: grid;
grid-template-columns: var(--cols);
}
.bh-move { min-width: 0; scroll-margin-top: var(--scroll-offset); }
.bh-move + .bh-move { border-left: 1px solid var(--bh-hair); }
.bh-move > :not(.bh-strip) { margin-inline: 18px 20px; }
.bh-move:first-child > :not(.bh-strip) { margin-left: 0; }
.bh-move:last-child > :not(.bh-strip) { margin-right: 0; }
.bh-strip {
position: relative;
height: 52px;
margin-bottom: var(--space-md);
}
.bh-strip::before {
content: "";
position: absolute;
inset: auto 0 14px;
height: 2px;
background: var(--color-border);
}
.bh-strip--end::after {
content: "";
position: absolute;
right: 0;
bottom: 6px;
width: 2px;
height: 18px;
background: var(--color-text-muted);
}
.bh-tick {
position: absolute;
left: calc(var(--at) * 100%);
bottom: 10px;
width: 1px;
height: 10px;
background: var(--color-text-muted);
opacity: 0.55;
}
.bh-tick--chapter {
bottom: 6px;
width: 2px;
height: 18px;
opacity: 1;
}
.bh-pin {
position: absolute;
left: calc(var(--at) * 100%);
bottom: 10px;
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: var(--radius-full);
background: var(--color-accent);
box-shadow: 0 0 0 3px var(--paper-surface);
}
.bh-pin span {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
color: var(--color-accent-ink);
white-space: nowrap;
}
.bh-move-range {
margin-top: 0;
margin-bottom: var(--space-xs);
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.bh-move-title {
margin-top: 0;
margin-bottom: var(--space-sm);
font-family: var(--font-title-serif);
font-weight: 600;
font-size: calc(var(--font-size-lg) * var(--title-serif-scale));
line-height: var(--leading-tight);
color: var(--color-text);
}
.bh-move-summary {
margin-top: 0;
margin-bottom: var(--space-md);
font-family: var(--font-serif);
font-size: var(--font-size-sm);
line-height: 1.7;
color: var(--color-text);
}
.bh-passages {
margin-top: 0;
margin-bottom: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--bh-hair);
}
.bh-passages li { border-bottom: 1px solid var(--bh-hair); }
.bh-passages a {
display: grid;
grid-template-columns: 3.9em minmax(0, 1fr);
gap: 8px;
padding: 9px 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-snug);
color: var(--color-text);
text-decoration: none;
}
.bh-passages a:hover span:last-child { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.bh-passage-ref {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
padding-top: 1px;
}
.bh-move:target .bh-move-title { color: var(--color-primary); }
.bh-minimap { display: none; }
.bh-word-scale,
.bh-word {
display: grid;
grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 4.75rem;
gap: var(--space-lg);
align-items: center;
}
.bh-word-scale { padding-bottom: 6px; }
.bh-word-scale-ch,
.bh-word-strip {
display: grid;
grid-template-columns: var(--cols);
}
.bh-word-scale-ch span {
padding-left: 6px;
border-left: 1px solid var(--bh-hair);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.bh-word-list { margin: 0; padding: 0; list-style: none; }
.bh-word-list li { border-top: 1px solid var(--bh-hair); }
.bh-word {
padding: 14px 0;
color: var(--color-text);
text-decoration: none;
}
.bh-word:hover .bh-word-xlit { color: var(--color-primary); }
.bh-word-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bh-word-head { display: flex; align-items: baseline; gap: 10px; }
.bh-word-he {
font-family: var(--font-serif);
font-size: var(--font-size-xl);
line-height: var(--leading-none);
color: var(--color-text);
}
.bh-word-xlit {
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-style: italic;
font-weight: var(--font-weight-medium);
}
.bh-word-gloss {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.bh-word-strip { height: 30px; }
.bh-word-ch {
position: relative;
border-left: 1px solid var(--bh-hair);
}
.bh-word-ch::before {
content: "";
position: absolute;
inset: 50% 0 auto;
height: 1px;
background: var(--bh-hair);
}
.bh-word-ch:last-child { border-right: 1px solid var(--bh-hair); }
.bh-word-ch i {
position: absolute;
left: calc(var(--at) * 100%);
top: 50%;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-primary);
transform: translate(-50%, -50%);
}
.bh-word-count {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bh-theme-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
}
.bh-theme { padding: clamp(20px, 2.4vw, 28px); }
.bh-christ {
display: grid;
grid-template-columns: var(--bh-col-split);
gap: clamp(24px, 4vw, 56px);
}
.bh-christ .bh-h2 { margin-bottom: var(--space-md); }
.bh-line { margin: 0; }
.bh-line-list {
position: relative;
margin: var(--space-md) 0 0;
padding: 0;
list-style: none;
}
.bh-line-list::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 5px;
width: 2px;
background: var(--color-border);
}
.bh-line-list li {
position: relative;
display: flex;
align-items: baseline;
gap: 10px;
padding: 4px 0 4px 26px;
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
.bh-line-list li::before {
content: "";
position: absolute;
left: 1px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
border-radius: var(--radius-full);
background: var(--paper-surface);
border: 2px solid var(--color-border);
box-sizing: border-box;
}
.bh-line-list a { color: var(--color-text); text-decoration: none; }
.bh-line-list a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.bh-line-list span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bh-line-list .is-here::before { background: var(--color-accent); border-color: var(--color-accent); }
.bh-line-list .is-here a { font-weight: var(--font-weight-medium); }
.bh-line-list .is-king a { font-weight: var(--font-weight-bold); }
.bh-line-list .is-more::before { border-style: dotted; }
.bh-line-list .is-more a { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; }
.bh-line-list .is-christ::before { background: var(--color-primary); border-color: var(--color-primary); }
.bh-line-list .is-christ a {
font-family: var(--font-title-serif);
font-weight: 600;
font-size: var(--font-size-xl);
color: var(--color-primary);
}
.bh-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg);
align-items: start;
}
.bh-rows { margin: 0; padding: 0; list-style: none; }
.bh-rows li { border-top: 1px solid var(--bh-hair); }
.bh-rows li:last-child { border-bottom: 1px solid var(--bh-hair); }
.bh-rows a {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr) auto 12px;
gap: 12px;
align-items: baseline;
padding: 11px 2px;
color: var(--color-text);
text-decoration: none;
font-family: var(--font-sans);
}
.bh-rows a:hover { background: color-mix(in srgb, var(--color-surface-hover) 60%, transparent); }
.bh-rows a:hover .bh-row-name { color: var(--color-primary); }
.bh-row-name { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.bh-row-desc { font-size: var(--font-size-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.bh-row-count {
min-width: 2ch;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bh-rows i { font-size: 11px; color: var(--color-text-muted); }
.bh-rows--plain a { grid-template-columns: minmax(0, 1fr) 12px; }
.bh-rows--plain .bh-row-name { font-weight: var(--font-weight-regular); line-height: var(--leading-snug); }
.bh-map { margin: var(--space-lg) 0 0; }
.bh-map img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--bh-hair);
border-radius: var(--radius-sm);
}
.bh-map figcaption {
margin-top: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.bh-map figcaption a { color: inherit; }
.bh-links {
display: grid;
grid-template-columns: var(--bh-col-split);
gap: clamp(24px, 4vw, 56px);
}
.bh-reach { margin: 0; padding: 0; list-style: none; }
.bh-reach li { padding: 14px 0; border-top: 1px solid var(--bh-hair); }
.bh-reach li:first-child { border-top: 0; padding-top: 0; }
.bh-reach-refs {
margin: 0 0 4px;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
}
.bh-reach-refs a { color: var(--color-primary); text-decoration: none; }
.bh-reach-refs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bh-reach-why {
margin: 0;
font-family: var(--font-serif);
font-size: var(--font-size-md);
line-height: var(--leading-relaxed);
color: var(--color-text);
}
.bh-links-graph { padding-top: 6px; }
.bh-bars {
--max: 63;
margin: var(--space-md) 0 0;
padding: 0;
list-style: none;
}
.bh-bars a {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr) 2.25rem;
gap: 10px;
align-items: center;
padding: 6px 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text);
text-decoration: none;
}
.bh-bars a:hover .bh-bar-name { color: var(--color-primary); }
.bh-bar {
display: block;
width: calc(var(--n) / var(--max) * 100%);
height: 8px;
border-radius: 2px;
background: color-mix(in srgb, var(--color-primary) 55%, var(--color-surface-solid));
}
.bh-bar-n { color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.bh-bars-note {
margin: var(--space-sm) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.bh-era {
--from: 350;
--to: 660;
position: relative;
height: 96px;
margin: 0 0 var(--space-lg);
padding: 0;
list-style: none;
}
.bh-era::before {
content: "";
position: absolute;
inset: 47px 0 auto;
height: 2px;
background: var(--color-border);
}
.bh-era li {
position: absolute;
left: calc((var(--y) - var(--from)) / (var(--to) - var(--from)) * 100%);
top: 0;
bottom: 0;
}
.bh-era a { color: var(--color-text); text-decoration: none; }
.bh-era a:hover .bh-era-name { color: var(--color-primary); }
.bh-era-dot {
position: absolute;
left: 0;
top: 48px;
width: calc(8px + var(--q) * 2px);
height: calc(8px + var(--q) * 2px);
border-radius: var(--radius-full);
background: var(--color-primary);
box-shadow: 0 0 0 3px var(--paper-surface);
transform: translate(-50%, -50%);
}
.bh-era-name,
.bh-era-year {
position: absolute;
left: 0;
transform: translateX(-50%);
font-family: var(--font-sans);
white-space: nowrap;
}
.bh-era-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.bh-era-year { font-size: var(--font-size-3xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bh-era li:nth-child(odd) .bh-era-name { top: 0; }
.bh-era li:nth-child(odd) .bh-era-year { top: 17px; }
.bh-era li:nth-child(even) .bh-era-year { top: 64px; }
.bh-era li:nth-child(even) .bh-era-name { top: 77px; }
.bh-quotes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--bh-hair);
}
.bh-quote { margin: 0; display: flex; flex-direction: column; }
.bh-quote-lead {
margin: 0 0 var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-muted);
}
.bh-quote blockquote {
margin: 0 0 var(--space-md);
padding: 0;
border: 0;
font-family: var(--font-serif);
font-size: var(--font-size-md);
line-height: 1.7;
color: var(--color-text);
}
.bh-quote blockquote::before { content: "“"; }
.bh-quote blockquote::after { content: "”"; }
.bh-quote figcaption {
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.bh-quote figcaption a { color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-medium); }
.bh-quote figcaption a:hover { text-decoration: underline; }
.bh-henry,
.bh-tile {
display: flex;
align-items: center;
gap: 14px;
color: var(--color-text);
text-decoration: none;
}
.bh-henry {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--bh-hair);
}
.bh-henry-text,
.bh-tile-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bh-henry-name { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.bh-henry-line { font-family: var(--font-serif); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bh-henry:hover .bh-henry-name,
.bh-tile:hover .bh-tile-title { color: var(--color-primary); }
.bh-henry > i,
.bh-tile > i { font-size: 11px; color: var(--color-text-muted); }
.bh-more-grid {
display: grid;
grid-template-columns: var(--bh-col-split);
gap: var(--space-lg);
align-items: start;
}
.bh-more-card .bh-rows { margin-top: var(--space-sm); }
.bh-more-side { display: flex; flex-direction: column; gap: var(--space-lg); }
.bh-tile { padding: 18px 22px; }
.bh-tile-icon .trv-ai-sparkle { width: 16px; height: 16px; }
.bh-tile-title { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.bh-step {
display: flex;
justify-content: space-between;
gap: var(--space-md);
margin: var(--bh-section-gap) 0 var(--space-md);
}
.bh-step-btn {
display: inline-flex;
align-items: center;
gap: 14px;
width: min(48%, 280px);
min-height: 56px;
padding: 8px 20px;
border: 1px solid var(--bh-hair);
border-radius: var(--radius-full);
background: var(--color-surface-solid);
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 5%, transparent);
color: var(--color-text);
text-decoration: none;
font-family: var(--font-sans);
}
.bh-step-btn--next { justify-content: flex-end; text-align: right; }
.bh-step-btn > span { display: flex; flex-direction: column; min-width: 0; }
.bh-step-btn i { font-size: 12px; color: var(--color-text-muted); }
.bh-step-btn:hover { background: var(--color-surface-hover); }
.bh-step-name { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.bh-step-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
@media (width <= 967px) {
.bh-top { display: flex; flex-direction: column; gap: var(--space-xl); }
.bh-top-col { display: contents; }
.bh-mast-main { order: 1; }
.bh-glance { order: 2; }
.bh-open-prose { order: 3; }
.bh-keyverse { order: 4; }
.bh-christ,
.bh-links,
.bh-more-grid { grid-template-columns: minmax(0, 1fr); }
.bh-theme-grid { grid-template-columns: minmax(0, 1fr); }
.bh-quotes { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.bh-quote { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--bh-hair); }
.bh-quote:last-child { padding-bottom: 0; border-bottom: 0; }
.bh-minimap {
display: flex;
position: relative;
margin: 0 0 var(--space-lg);
}
.bh-minimap::before {
content: "";
position: absolute;
inset: auto 0 9px;
height: 2px;
background: var(--color-border);
}
.bh-minimap a {
position: relative;
flex: var(--v) 1 0;
min-width: 0;
height: 44px;
border-left: 2px solid var(--color-text-muted);
color: var(--color-text-muted);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
}
.bh-minimap a:last-child { border-right: 2px solid var(--color-text-muted); }
.bh-minimap span { position: absolute; left: 8px; top: 6px; }
.bh-minimap a:hover { color: var(--color-primary); }
.bh-shape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
.bh-move:nth-child(3) { border-left: 0; }
.bh-move:nth-child(odd) > :not(.bh-strip) { margin-left: 0; }
.bh-move:nth-child(even) > :not(.bh-strip) { margin-right: 0; }
.bh-strip--end::after { display: none; }
}
@media (width <= 715px) {
.bh-page { --bh-section-gap: 32px; }
.bh-card { padding: 20px 18px; }
.bh-shape-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
.bh-move + .bh-move { border-left: 0; }
.bh-move > :not(.bh-strip) { margin-inline: 0; }
.bh-strip { height: 44px; margin-bottom: var(--space-sm); }
.bh-word-scale,
.bh-word {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: 8px;
column-gap: var(--space-md);
}
.bh-word-strip { grid-column: 1 / -1; grid-row: 2; }
.bh-word-ch i { width: 6px; height: 6px; }
.bh-word-count { grid-column: 2; grid-row: 1; align-self: start; }
.bh-word-scale > span:first-child,
.bh-word-scale > span:last-child { display: none; }
.bh-word-scale-ch { grid-column: 1 / -1; }
.bh-pair { grid-template-columns: minmax(0, 1fr); }
.bh-rows a {
grid-template-columns: minmax(0, 1fr) auto 12px;
row-gap: 2px;
}
.bh-row-name { grid-column: 1; grid-row: 1; }
.bh-row-desc { grid-column: 1 / -1; grid-row: 2; }
.bh-row-count { grid-column: 2; grid-row: 1; }
.bh-rows i { grid-column: 3; grid-row: 1; }
.bh-rows--plain a { grid-template-columns: minmax(0, 1fr) 12px; }
.bh-rows--plain i { grid-column: 2; }
.bh-era {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px var(--space-md);
height: auto;
}
.bh-era::before { display: none; }
.bh-era li { position: static; }
.bh-era a { display: flex; align-items: center; gap: 10px; }
.bh-era-dot,
.bh-era-name,
.bh-era-year,
.bh-era li:nth-child(n) .bh-era-name,
.bh-era li:nth-child(n) .bh-era-year {
position: static;
transform: none;
}
.bh-era-dot { flex: none; box-shadow: none; }
.bh-era-year { order: 3; margin-left: auto; flex: none; }
.bh-era-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.bh-step-btn { width: calc(50% - 6px); padding-inline: 14px; }
}
.bh-slot {
padding: 14px 16px;
border: 1px dashed color-mix(in srgb, var(--color-text-muted) 45%, transparent);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
color: var(--color-text-muted);
font-style: italic;
}
.bh-slot-field,
.bh-slot-inline {
font-style: normal;
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-accent-ink);
}
.bh-slot-inline {
display: inline-block;
padding: 1px 6px;
border: 1px dashed color-mix(in srgb, var(--color-accent-ink) 50%, transparent);
border-radius: var(--radius-sm);
}
.bh-view { margin: 8px 0 0; }
.bh-view strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.bh-bars--small { margin: 8px 0 10px; }
.bh-bars--small li {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr) 2rem;
gap: 8px;
align-items: center;
padding: 2px 0;
font-size: var(--font-size-xs);
color: var(--color-text);
}
.bh-christ--single { grid-template-columns: minmax(0, 1fr); }
.bh-christ--single .bh-christ-text { max-width: 46em; }
.bh-bookstrip { margin-bottom: var(--space-lg); }
.bh-strip--book { height: 56px; margin-bottom: 0; }
.bh-tick--fine { height: 6px; bottom: 12px; opacity: 0.35; }
.bh-spans { position: relative; height: 38px; }
.bh-span {
position: absolute;
left: calc(var(--at) * 100%);
width: calc(var(--w) * 100%);
top: 0;
display: flex;
flex-direction: column;
gap: 1px;
padding: 4px 8px 0;
border-left: 2px solid var(--color-text-muted);
color: var(--color-text);
text-decoration: none;
font-family: var(--font-sans);
overflow: hidden;
}
.bh-span:last-child { border-right: 2px solid var(--color-text-muted); }
.bh-span-n { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.bh-span-range { font-size: var(--font-size-3xs); color: var(--color-text-muted); white-space: nowrap; }
.bh-span:hover .bh-span-n { color: var(--color-primary); }
.bh-span--narrow { padding-inline: 5px; }
.bh-span--narrow .bh-span-range { display: none; }
.bh-rows-list { display: flex; flex-direction: column; }
.bh-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: var(--space-lg);
padding: var(--space-lg) 0;
border-top: 1px solid var(--bh-hair);
scroll-margin-top: var(--scroll-offset);
}
.bh-row-head { position: relative; padding-left: 42px; }
.bh-row-n {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--radius-full);
background: var(--bh-tint);
color: var(--color-primary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
}
.bh-row:target .bh-row-n { background: var(--color-primary); color: var(--color-primary-contrast); }
.bh-move-slot { margin-top: var(--space-xs); }
.bh-fold summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--control-h-sm);
padding: 6px 12px;
border: 1px solid var(--bh-hair);
border-radius: var(--radius-md);
background: var(--color-surface-solid);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
cursor: pointer;
list-style: none;
}
.bh-fold summary::-webkit-details-marker { display: none; }
.bh-fold summary i { font-size: 11px; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.bh-fold[open] summary i { transform: rotate(180deg); }
.bh-fold[open] summary { margin-bottom: var(--space-sm); }
.bh-row-count {
margin: 0 0 var(--space-xs);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.bh-fold--more { margin-top: var(--space-sm); }
.bh-fold--more summary { justify-content: flex-start; gap: var(--space-xs); width: fit-content; }
.bh-passages--cols { column-width: 15rem; column-gap: var(--space-lg); border-top: 0; }
.bh-passages--cols li { break-inside: avoid; }
.bh-track-scale { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 4.75rem; gap: var(--space-lg); padding-bottom: 6px; }
.bh-track-scale-marks { position: relative; height: 14px; }
.bh-track-scale-marks span {
position: absolute;
left: calc(var(--at) * 100%);
padding-left: 5px;
border-left: 1px solid var(--bh-hair);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}
.bh-track {
position: relative;
height: 30px;
border-left: 1px solid var(--bh-hair);
border-right: 1px solid var(--bh-hair);
}
.bh-track::before {
content: "";
position: absolute;
inset: 50% 0 auto;
height: 1px;
background: var(--bh-hair);
}
.bh-track-mark {
position: absolute;
left: calc(var(--at) * 100%);
top: 0;
bottom: 0;
width: 1px;
background: var(--bh-hair);
}
.bh-track i {
position: absolute;
left: calc(var(--at) * 100%);
top: 50%;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--color-primary);
opacity: 0.85;
transform: translate(-50%, -50%);
}
@media (width <= 967px) {
.bh-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.bh-span-range { display: none; }
}
@media (width <= 715px) {
.bh-track-scale { grid-template-columns: minmax(0, 1fr); }
.bh-track-scale > span:first-child,
.bh-track-scale > span:last-child { display: none; }
.bh-word .bh-track { grid-column: 1 / -1; grid-row: 2; }
.bh-track i { width: 5px; height: 5px; }
.bh-row-head { padding-left: 38px; }
}
@media (width >= 716px) {
.bh-era--lanes { height: 140px; }
.bh-era--lanes::before { top: 69px; }
.bh-era--lanes .bh-era-dot { top: 70px; }
.bh-era--lanes li[data-lane] .bh-era-name,
.bh-era--lanes li[data-lane] .bh-era-year { top: auto; }
.bh-era--lanes li[data-lane="0"] .bh-era-name { top: 0; }
.bh-era--lanes li[data-lane="0"] .bh-era-year { top: 16px; }
.bh-era--lanes li[data-lane="1"] .bh-era-name { top: 30px; }
.bh-era--lanes li[data-lane="1"] .bh-era-year { top: 46px; }
.bh-era--lanes li[data-lane="2"] .bh-era-year { top: 82px; }
.bh-era--lanes li[data-lane="2"] .bh-era-name { top: 95px; }
.bh-era--lanes li[data-lane="3"] .bh-era-year { top: 112px; }
.bh-era--lanes li[data-lane="3"] .bh-era-name { top: 125px; }
}
.bh-map img { max-height: 380px; object-fit: cover; object-position: top; }
.bh-view { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bh-hair); }
.bh-view p { margin: 0; }
.bh-grounds {
margin: 6px 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.bh-grounds-label {
margin-right: 4px;
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
}
.bh-grounds a { color: var(--color-primary); text-decoration: none; }
.bh-grounds a:hover { text-decoration: underline; }
.bh-grounds .bh-ground-father { font-weight: var(--font-weight-medium); }
.bh-readings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-lg);
}
.bh-reading { padding-top: var(--space-md); border-top: 2px solid var(--bh-hair); }
@media (width >= 716px) {
.bh-theme-grid.bh-grid--pairs,
.bh-readings-grid.bh-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bh-reading .bh-h3 { margin-top: 0; }
.bh-plates { --art-accent: var(--color-accent); }
.bh-plate-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
}
.bh-plate {
margin: 0;
padding: var(--space-md) var(--space-md) var(--space-sm);
color: var(--color-text);
}
.bh-plate svg { display: block; width: 100%; height: auto; }
.bh-plate figcaption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding-top: var(--space-xs);
}
.bh-plate-label {
font-family: var(--font-title-serif);
font-size: var(--font-size-md);
font-weight: 600;
}
.bh-plate-ref { font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--color-text-muted); }
@media (width <= 715px) {
.bh-plate-row {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 80%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-xs);
}
.bh-plate { scroll-snap-align: start; }
}