, not a , so the trail Google is told about in
BreadcrumbList JSON-LD is the same trail that's actually in the markup. The
list is flattened back to a line of text — the semantics are for machines and
screen readers, not something to look at. */
.crumbs {
font-size: var(--t-small);
color: var(--muted);
margin-bottom: 1.1rem;
}
.crumbs ol {
list-style: none;
margin: 0;
padding: 0;
}
.crumbs li { display: inline; }
.crumbs a {
display: inline-block;
padding-block: 0.5rem;
color: var(--muted);
text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
}
.crumbs a:hover { color: var(--clay); }
.crumbs span { padding-inline: 0.45rem; }
/* The closing row: two links onward, and nothing else. Contact used to sit here
as a third, clay-tinted card on every page, and before that as a full-width
CTA band. Both are gone. The site informs rather than recruits, so contact
lives in the masthead and footer, where anyone who wants it will find it, and
not in the body of a page. Two deliberate exceptions carry a contact link in
the body: /privacy/, which should name a way to reach whoever holds your
data, and /404.html, where the reader has hit a dead end. Don't add a third
card here that asks for anything. */
.nextprev {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
margin-top: var(--section);
padding-top: 2.5rem;
border-top: 1px solid var(--line);
}
/* When the row is a section's only content, that section's own padding already
supplies the space above it — the margin on top of it doubles the gap and
leaves the rule floating in a void at the foot of the page. */
.section > .nextprev:only-child { margin-top: 0; }
.nextprev a {
display: block;
padding: 1.15rem 1.3rem;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
transition: border-color .16s ease;
}
.nextprev a:hover { border-color: var(--sea); }
.nextprev .eyebrow { margin-bottom: 0.35rem; }
.nextprev strong {
display: block;
font-family: var(--serif);
font-size: 1.08rem;
font-weight: 600;
color: var(--sea);
}
.backtotop {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: 0.4rem;
font-size: var(--t-small);
color: var(--muted);
text-decoration: none;
}
.backtotop::before { content: "\2191"; }
.backtotop:hover { color: var(--clay); }
/* Floating back-to-top, mobile only — the site's first position:fixed element.
It is a JavaScript-only control by nature: it has to know how far down the
page we are to know whether it should exist at all. So it follows the
.nav-toggle pattern — display:none, shown only under .js — rather than
sitting in the markup doing nothing. The treatment is deliberately
.nav-toggle's, hairline on --paper at --radius, so it reads as the same
family of control as the Menu button and not as a floating app button.
.backtotop above is its inline sibling at the foot of /one-anothers/; that
one works with JavaScript off and stays. */
.totop { display: none; }
/* The declarations sit outside the media query and only `display` is gated,
so the one page that needs this control at every width can switch it on
without restating twenty-five properties. That page is the usage survey:
130 screens on a desktop, and between 901px and 999px it had no wayfinding
at all — too wide for this button, too narrow for the sticky index, which
starts at 1000px. */
.js .totop {
place-items: center;
position: fixed;
/* .wrap is padding-inline: var(--gutter), so this lands the button's right
edge on the text column's right edge rather than floating loose. */
right: var(--gutter);
bottom: 1.25rem;
/* Under the masthead (50) and the nav panel inside it (60), so an open menu
covers the button instead of the button floating over the navigation. */
z-index: 40;
width: 44px;
height: 44px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--muted);
/* Inter, not the body serif: its latin subset is the one whose
unicode-range carries U+2191 (section 0). */
font-family: var(--sans);
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
/* visibility rather than display, so it leaves the tab order while hidden
and still gets a fade on the way out. Under prefers-reduced-motion the
blanket transition-duration override in section 2 removes the fade. */
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.totop::before { content: "\2191"; }
.js .totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.totop:hover,
.totop:active { color: var(--clay); border-color: var(--clay); }
/* Mobile everywhere; every width on the usage survey. */
@media (max-width: 900px) {
.js .totop { display: grid; }
}
html.js:has(.appendix) .totop { display: grid; }
/* Where site.js has built the page menu (section 19) its bar carries the
arrow, so the loose button goes. Same specificity as the survey rule above,
(0,3,1), and later, which is what wins — move it above and the survey keeps
both. Scoped to the menu's own breakpoint: from 1000px the survey still
wants this button at every width. */
@media (max-width: 999px) {
html.js.has-pagenav .totop { display: none; }
}
/* --------------------------------------------------------------------------
16. Footer
-------------------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--line);
padding-block: clamp(2.75rem, 6vw, 4rem) 2.25rem;
font-size: 0.93rem;
}
.site-footer__grid {
display: grid;
gap: 2.25rem;
/* 11rem, not 12rem: at the widest wrap there are five cells (the wordmark
plus four link columns), and 12rem fits only four — which dropped the last
column onto a row of its own with three empty cells beside it. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.site-footer h2 {
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--clay);
margin: 0 0 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0; }
/* Footer links were 18px tall — under the WCAG 2.2 target-size floor once
spacing is accounted for. */
.site-footer a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--ink-soft);
text-decoration: none;
}
.site-footer a:hover { color: var(--clay); text-decoration: underline; }
/* Two overrides, both load-bearing.
`white-space: normal` — the masthead wordmark is `nowrap`; the footer one
must not be. At five cells of ~11rem, 20 characters of letter-spaced
uppercase serif overflow the cell by 35px and the wordmark ends up touching
the next column. Five cells is the footer today.
`display: block` + `min-height: 0` — opting out of the 44px tap target that
`.wordmark` and `.site-footer a` both set. That floor is for the link lists.
Applied here it centres the wordmark inside a 44px box, which drops it 12.6px
below the three column headings level with it, and pushes the blurb 16px
below the first link in each list. That was the footer's "not quite aligned"
look on desktop. It was milder rather than absent on mobile: at two columns
the wordmark wraps to two lines and nearly fills the 44px box, so the
centring offset falls from 12.6px to 3.2px. WCAG 2.2 target size is met by the masthead
wordmark — same href, same page, 229x44 — under the equivalent-control
exception.
`width: fit-content` keeps the click area on the words rather than spanning
the whole cell, without the inline-block line box, whose strut is taller than
the wordmark and would push it back down. Browsers without it fall back to
full-cell width, which is harmless. */
.site-footer .wordmark {
display: block;
width: fit-content;
min-height: 0;
font-size: 0.98rem;
white-space: normal;
}
/* 1.2rem, not 0.85rem. A link column puts its first link's *text* 38.3px below
the cell top — a 14.7px heading, 0.9rem of margin, then the centring inside
the 44px row. The wordmark's line box is 18.8px, so 1.2rem lands the blurb's
first line on that same line instead of 16px under it. Measured, not derived:
the arithmetic misses by 3px because the heading and the links are set at
different sizes. */
.site-footer__blurb { color: var(--muted); margin-top: 1.2rem; max-width: 26ch; font-size: 0.9rem; }
.colophon {
margin-top: 2.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: space-between;
/* The Privacy link inherits the footer's 44px tap target, so its box is
taller than the plain text beside it. Centring the row puts all three
on the same baseline; stretching drops "Privacy" 10px. */
align-items: center;
color: var(--muted);
font-size: var(--t-small);
}
.colophon p { margin: 0; }
/* --------------------------------------------------------------------------
17. Video list — click-to-play
--------------------------------------------------------------------------
The only third-party embeds on the site. Each video renders as an ordinary
link to YouTube; site.js swaps in the iframe on click. That is why there is
no thumbnail here, and no ![]()
anywhere — nothing is requested from Google
until a reader presses play, and img-src in public/_headers stays 'self' to
keep it that way. Counters rather than hand-written numbers, so reordering
the list cannot desynchronise them.
Two presentations of the same markup: the default numbered rows, used for
the thirteen on /resources/leadership-series/, and --poster below. */
.video-list {
list-style: none;
counter-reset: v;
margin: 0;
padding: 0;
max-width: 52rem;
}
.video {
counter-increment: v;
display: flex;
align-items: flex-start;
gap: 1rem;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.video:last-child { border-bottom: 1px solid var(--line); }
.video::before {
content: counter(v, decimal-leading-zero);
flex: 0 0 auto;
padding-top: 1.15rem;
font-family: var(--sans);
font-size: var(--t-micro);
letter-spacing: 0.08em;
color: var(--clay);
}
/* The hover mirrors .doorway, but lifts to --paper because this list sits on a
tinted band where --paper-raised is already the ground. */
.video__link {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 1rem;
padding: 0.9rem 0.9rem 0.9rem 0;
border: 1px solid transparent;
border-radius: var(--radius);
text-decoration: none;
transition: border-color .16s ease, background .16s ease;
}
.video__link:hover {
border-color: var(--sea);
background: var(--paper);
}
.video__title {
font-family: var(--serif);
font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
color: var(--sea);
}
.video__title::after { content: " \25B8"; color: var(--clay); }
.video__who {
margin-left: auto;
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
/* Where a class was left, written in by site.js from what the player itself
last reported. It only ever appears on a class that has been started, and
it is what stops a resumed class reading as one that opened in the wrong
place. --clay rather than --muted so it reads as a state, not a byline. */
.video__resume {
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--clay);
}
/* What replaces a link once a class has been activated: a bar naming what is
open and offering the way out, then the frame. Closing swaps the link back
in, so this and .video__link occupy the same slot in the row and carry the
same margins. On a poster list the bar is not built at all — see below — and
the player is the frame alone. */
.video__player {
flex: 1 1 auto;
min-width: 0;
margin: 0.9rem 0.9rem 0.9rem 0;
}
.video__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 0.6rem;
}
.video__playing {
font-family: var(--serif);
font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
color: var(--sea);
}
.video__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.4rem 0.9rem;
background: none;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .16s ease, color .16s ease;
}
.video__close:hover { border-color: var(--sea); color: var(--sea); }
/* The slot the player expands into. */
.video__frame {
aspect-ratio: 16 / 9;
background: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.video__frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* -- .video-list--poster: one video, shown as a player ---------------------
A single video reads as a lone row of a list that isn't there. This gives it
the shape of the thing it becomes: a 16:9 panel the size of the player, with
the title and channel sitting in it.
The play button is drawn — a ring and a triangle from two pseudo-elements —
rather than laid over a YouTube thumbnail. Fetching the thumbnail would mean
widening img-src to i.ytimg.com, which tells Google about every visit to the
page whether or not anyone presses play. That is the whole thing the
click-to-play exists to prevent, and it would be given away by a picture.
Built on --sea-tint rather than --ink: --ink inverts with the colour scheme,
so a panel using it goes near-white in dark mode.
This class is also what site.js reads to decide the player needs no bar and
no Close. A single video has no list to return to, so pressing play swaps
the poster for the frame and that is the end of it. */
.video-list--poster .video {
display: block;
border-top: 0;
}
.video-list--poster .video:last-child { border-bottom: 0; }
.video-list--poster .video::before { content: none; }
.video-list--poster .video__link {
position: relative;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-end;
gap: 0.2rem;
aspect-ratio: 16 / 9;
padding: clamp(1rem, 3vw, 1.6rem);
background: var(--sea-tint);
border-color: var(--line);
}
/* The ring. Centred with a negative margin rather than a transform, so the
whole-page transition-duration override in section 2 has nothing to undo. */
.video-list--poster .video__link::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 4.25rem;
height: 4.25rem;
margin: -2.125rem 0 0 -2.125rem;
border: 1px solid var(--sea);
border-radius: 50%;
transition: background .16s ease;
}
/* The triangle, offset right of true centre so it looks centred in the ring. */
.video-list--poster .video__link::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -0.6rem 0 0 -0.4rem;
border-style: solid;
border-width: 0.6rem 0 0.6rem 1rem;
border-color: transparent transparent transparent var(--sea);
transition: border-color .16s ease;
}
/* Cancels the row version's lift to --paper: repainting a whole 16:9 panel on
hover is a lot of movement for "this is a link". The ring filling says it. */
.video-list--poster .video__link:hover { background: var(--sea-tint); }
.video-list--poster .video__link:hover::before { background: var(--sea); }
.video-list--poster .video__link:hover::after { border-left-color: var(--paper-raised); }
/* The chevron after the title is what says "this opens" in the numbered list.
Here the play button says it, and two of them is one too many. */
.video-list--poster .video__title::after { content: none; }
/* Both of these undo row-layout rules that mean something else in a column.
`margin-left: auto` pushed the channel to the right-hand end of a row; here
it would pin it to the right edge. `flex-basis: 100%` in the narrow-screen
rule below made it a full-width second line; on a column the basis is the
*height*, so it became a full-height block that shoved the title off the
bottom of the poster and up against the top. */
.video-list--poster .video__who { margin-left: 0; flex-basis: auto; }
/* The row version insets the player to match the link it replaces. There is no
inset to match here — the poster is already the full width of the list. */
.video-list--poster .video__player { margin: 0; }
@media (max-width: 33rem) {
/* The teacher's name stops being a right-hand column and becomes a second line. */
.video__who { margin-left: 0; flex-basis: 100%; }
}
/* --------------------------------------------------------------------------
18. Data appendix — the Hebrews 13:17 usage survey
--------------------------------------------------------------------------
One page uses everything below: /leadership/elders/hebrews-13-17/appendix/,
which prints every search hit behind the counts on the translation notes.
It is the only page on the site carrying
, , or a table of
seven columns, so all three are scoped to .appendix rather than added to the
global type scale, where nothing else would ever use them.
Two of the columns in those tables record a judgement — which word stood in
the dative, and whether the setting was counsel or command — and the page
says they are offered for correction. That is why site.js gives the tables a
filter and sortable headers: a reader who wants to re-check one class of hit
should be able to gather them in a few seconds rather than by scrolling. The
controls are injected, so with JavaScript off the tables are still whole. */
/* html carries scroll-padding-top: 6rem so an anchor jump clears the sticky
masthead. This page stacks a second sticky element under it, the filter, so
a jump that cleared only the masthead would land the heading behind the
filter bar. The extra is the stuck bar's height. */
html:has(.appendix) { scroll-padding-top: 10.5rem; }
/* .entry carries scroll-margin-top: 6rem for the rest of the site, and on this
page it added to the scroll-padding above: a section heading landed 264px
down, 147px of it dead air, while an h3 landed flush at 168px. The padding
alone is right here, because here there are two sticky bars. */
.appendix .entry,
.appendix .prose h3[id],
.appendix .prose h4[id] { scroll-margin-top: 0; }
/* --wrap is 1120px everywhere, which is right for a 68ch measure and wrong for
a seven-column table: minus the 15rem index and the gap it leaves a 736px
content column, at 1440, at 1920 and at 2560 alike. The tables wanted 917 to
1425px, so every one of the twenty-six scrolled sideways at every desktop
width, with Setting and Note off the right edge. This page alone gets room;
.prose still holds the running text to its own measure, so only the tables
take the extra. */
.section.appendix { max-width: 87.5rem; }
/* And the in-page index sticks below both of them rather than behind the
filter. 6.25rem elsewhere; here that is 42px inside the stuck bar.
It also has to be able to run out of room. Fourteen sections with the
classical corpus's nine word-forms open is taller than a laptop viewport,
and a sticky box taller than the space it is given simply loses its last
entries off the bottom with no way to reach them. */
@media (min-width: 1000px) {
.appendix .index-nav {
top: 10rem;
max-height: calc(100vh - 11.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* How big a section is, so a reader knows what a click costs: "The classical
corpus / 524 hits" against "Philo / 10 hits". */
.index-nav__count {
display: block;
font-family: var(--sans);
font-size: var(--t-micro);
color: var(--muted);
}
@media (max-width: 999px) {
/* On the chips it would double their height for a number nobody is choosing
between at that size. */
.index-nav__count { display: none; }
}
/* Under the entry's name, not beside it. The links are flex rows for their
44px targets, and a flex row sets a display:block child alongside the text,
so the count sat jammed against the name, or as a narrow second column where
the name wrapped. Stacking the link keeps the target and puts the count on a
line of its own. The phone sheet's links are the same flex rows. */
.index-nav a:has(> .index-nav__count),
.pagenav__sheet a:has(> .index-nav__count) {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
/* Long prose quotations — the public-domain commentators, quoted at length.
Deliberately not .quote: that is a Scripture pull-quote at display size, and
a page of Chrysostom set in it would be unreadable. */
.appendix blockquote {
margin: 1.4rem 0;
padding: 0.15rem 0 0.15rem 1.25rem;
border-left: 2px solid var(--line);
color: var(--ink-soft);
font-size: 0.97rem;
}
.appendix blockquote p { margin-bottom: 0.8em; }
.appendix blockquote p:last-child { margin-bottom: 0; }
/* Search strings, morphology codes and Internet Archive item ids: strings a
reader may want to copy character for character. A mono face and a tint
rather than a size change, which would break the line's rhythm. */
.appendix code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.88em;
background: var(--paper-raised);
border-radius: 3px;
padding: 0.1em 0.32em;
overflow-wrap: anywhere;
}
/* The survey tables. Up to seven columns, one of them a whole Greek clause, so
they ignore .gloss's 52rem measure and stack far later than .gloss--grid:
64rem rather than 48rem, because seven columns on a tablet leave each about
nine characters. Above that they sit in .table-scroll. */
.gloss--data {
max-width: none;
font-size: 0.88rem;
}
.gloss--data th,
.gloss--data td { padding: 0.62rem 1rem 0.62rem 0; }
/* Baseline centring is right for a two-line Greek gloss beside a one-line
rendering (see .gloss above). Here a cell can run to six lines beside a
one-word classification, and centring floats that word in mid-air. */
.gloss--data tbody td { vertical-align: top; }
/* Their header labels stay on baseline, level with the top-aligned rows. */
.gloss--data thead th { vertical-align: baseline; }
.gloss--data td:first-child { color: var(--ink); line-height: 1.5; }
.gloss--data td + td { color: var(--ink-soft); }
/* A survey row is a quotation with a classification on it, not seven equal
fields. Read as seven columns at the width this page can give them, the Greek
clause got 205px and wrapped to eight lines while four one-word judgements
held 489px between them, and the row stood 190px tall. The clause and its
English gloss are one cell now, and the judgements are chips in another, so
the reading matter gets the room and the row is about half as deep. */
/* Column widths belong to the table layout only. Below 64rem every cell is
display:block, and a percentage there is a percentage of the screen: it held
the Greek to 195px and drove the phone document from 285 screens to 420. */
@media (min-width: 64.01rem) {
.gloss--data td:first-child { width: 8rem; }
.gloss--data td[data-label="Text"] { width: 52%; }
.gloss--data td[data-label="Note"] { width: 16%; }
}
.gloss--data td[data-label="Text"] .greek { display: block; }
.rowgloss {
display: block;
margin-top: 0.3rem;
color: var(--ink-soft);
font-size: 0.95em;
}
/* The chips wrap in a column so the eye reads down one kind of judgement at a
time; each is its own word, so they must not run together into a sentence. */
.gloss--data td[data-label="Classification"] { line-height: 1.45; }
@media (min-width: 64.01rem) {
.gloss--data td[data-label="Classification"] { width: 11rem; }
}
.chip {
display: block;
margin-bottom: 0.2rem;
font-family: var(--sans);
font-size: var(--t-micro);
color: var(--ink-soft);
}
.chip:last-child { margin-bottom: 0; }
/* Stacked, the row is already one field per line, so three judgements on three
more lines is three lines spent on six words. They run together on one. */
@media (max-width: 64rem) {
.chip {
display: inline;
margin-bottom: 0;
}
.chip + .chip::before {
content: " · ";
color: var(--muted);
}
}
.chip--dative { color: var(--ink); font-weight: 600; }
.chip--setting { color: var(--clay-deep); }
/* The same join .entry:has(> .gloss) + .entry > h2 already handles, one level
deeper: an entry that ends in a scrolled table still closes itself with the
table's own bottom rule, so the next section's heading must not draw a
second one under it. The wrapper is what hides the table from that rule. */
.entry:has(> .table-scroll) + .entry > h2,
.entry:has(> .gloss--data:last-child) + .entry > h2 { border-top: 0; }
/* A table wider than its column scrolls rather than crushing. It is focusable
and labelled, so it can be scrolled from the keyboard and is announced as
what it is; that is the whole reason for the wrapper. */
.table-scroll {
overflow-x: auto;
margin-top: 1.75rem;
}
.table-scroll > .gloss { margin-top: 0; }
/* The longest table runs to 138 rows, so its headings are gone after one
screen. They stick under the masthead and the stuck filter bar, which is the
same 10.5rem that html:has(.appendix) uses for anchor landings. Only above
the stacking breakpoint: below it the head is visually hidden anyway. */
@media (min-width: 64.01rem) {
.gloss--data thead th {
position: sticky;
top: 9.4rem;
z-index: 1;
background: var(--paper);
padding-top: 0.5rem;
box-shadow: inset 0 -1px 0 var(--line);
}
}
.table-scroll:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
/* There is no width floor any more. It was wrong in both directions: it forced
a scrollbar onto the nine tables whose natural width is 74 to 727px — the
Josephus string counts are 74px wide — while still not giving the wide ones
enough. With the rows restructured, twenty-five of the twenty-six fit the
narrowest desktop column and have left .table-scroll altogether; the
commentaries comparison, at 720px of min-content, is the one that keeps it. */
/* Stacked. The rules repeat .gloss--grid's block because a media query cannot
share them — the same reason given there. */
@media (max-width: 64rem) {
.gloss--data,
.gloss--data thead,
.gloss--data tbody,
.gloss--data tr,
.gloss--data td { display: block; }
/* Visually hidden, not display:none: the column labels still belong to the
table for anyone listening to it. Same technique as .hp. */
.gloss--data thead {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.gloss--data tr {
padding: 0.8rem 0;
border-top: 1px solid var(--line);
}
.gloss--data tbody tr:last-child { border-bottom: 1px solid var(--line); }
.gloss--data td { padding: 0; border-top: 0; }
.gloss--data tbody tr:last-child td { border-bottom: 0; }
.gloss--data td:first-child {
margin-bottom: 0.25rem;
font-weight: 600;
color: var(--ink);
}
.gloss--data td[data-label]::before {
content: attr(data-label);
margin-right: 0.6em;
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--clay);
}
/* An empty cell stacked would print its label over nothing. */
.gloss--data td:empty { display: none; }
}
/* The heading's own link, injected by site.js. Quiet until the heading is
hovered or the link is tabbed to, so eighty of them do not speckle the page,
but never display:none -- a keyboard user has to be able to reach it. */
.headlink {
margin-left: 0.4em;
color: var(--muted);
text-decoration: none;
opacity: 0;
transition: opacity .12s ease;
}
h2:hover > .headlink,
h3:hover > .headlink,
h4:hover > .headlink,
.headlink:focus-visible { opacity: 1; }
.headlink:hover { color: var(--clay); }
/* Sort control, injected into each header cell by site.js. With JavaScript off
the header is plain text and nothing here applies. */
.sortbtn {
display: inline-flex;
align-items: center;
gap: 0.4em;
background: none;
border: 0;
padding: 0;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
text-align: left;
}
.sortbtn::after { content: "\2195"; opacity: 0.4; }
.sortbtn:hover { color: var(--sea); }
.sortbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
th[aria-sort="ascending"] .sortbtn::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .sortbtn::after { content: "\2193"; opacity: 1; }
th[aria-sort] .sortbtn { color: var(--sea); }
/* The filter. It is built by site.js and inserted at the head of the tables,
not in the index beside them: on a page of 743 rows a control nobody finds
is a control nobody has. So it gets a panel of its own, a heading in plain
words, a line saying what it searches, and examples that fill it on a click.
It also sticks, because the row someone wants may be forty screens down.
Stuck, it sheds the explanation and keeps the input — the reader who has
scrolled that far has already read it. It is only sticky while stuck:
site.js lets the whole panel scroll up under the masthead first, and
sticks it once only a bar's depth of it is left showing, so the bar takes
the place of that last strip. Sticky all along, it would pin at full height
and the page would run on underneath it for 548px on a phone before it
shrank. .tablefilter__sentinel is the marker above it, which site.js grows
while it is stuck by what it gave up, so the page below keeps its place. */
.tablefilter {
margin: 0 0 2.25rem;
padding: 1.15rem 1.3rem 1rem;
background: var(--paper-raised);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.tablefilter__sentinel { height: 0; }
.tablefilter label {
display: block;
font-family: var(--sans);
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 0.35rem;
}
.tablefilter__hint {
margin: 0 0 0.85rem;
max-width: 46rem;
font-family: var(--sans);
font-size: var(--t-small);
line-height: 1.5;
color: var(--ink-soft);
}
.tablefilter__row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.tablefilter input {
flex: 1 1 16rem;
max-width: 26rem;
min-width: 0;
font: inherit;
font-size: 1rem;
color: var(--ink);
/* Paper, not paper-raised: the panel is already raised, and an input the
same colour as the panel it sits on does not read as a box to type in. */
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.6rem 0.8rem;
}
.tablefilter input:focus {
outline: 2px solid var(--focus);
outline-offset: 1px;
border-color: transparent;
}
.tablefilter__clear,
.tablefilter__eg {
font-family: var(--sans);
font-size: var(--t-small);
color: var(--sea);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.35rem 0.7rem;
cursor: pointer;
}
.tablefilter__clear:hover,
.tablefilter__eg:hover { border-color: var(--sea); color: var(--sea-deep); }
.tablefilter__clear:focus-visible,
.tablefilter__eg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tablefilter__clear { padding: 0.55rem 0.9rem; }
.tablefilter__examples {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0.75rem 0 0;
font-family: var(--sans);
font-size: var(--t-small);
color: var(--muted);
}
/* The two judgement columns, as buttons. The whole page exists to answer
"where is somebody told to follow a leader, and is it counsel or command?",
and that was a guess at a substring before this. */
.tablefilter__facet {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem;
margin-top: 0.7rem;
}
.tablefilter__facetlabel {
flex: 0 0 4.5rem;
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--clay);
}
.facet {
font-family: var(--sans);
font-size: var(--t-small);
color: var(--ink-soft);
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0.3rem 0.6rem;
cursor: pointer;
}
.facet:hover { border-color: var(--sea); color: var(--sea); }
.facet:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.facet__n { color: var(--muted); }
.facet.is-on {
background: var(--sea-tint);
border-color: var(--sea);
color: var(--sea-deep);
font-weight: 600;
}
.facet.is-on .facet__n { color: inherit; }
/* Stuck, the bar is one line: the box and the count. The facets go with the
explanation, as the examples already do. */
.tablefilter.is-stuck .tablefilter__facet { display: none; }
.tablefilter__count {
display: block;
margin-top: 0.7rem;
font-family: var(--sans);
font-size: var(--t-small);
color: var(--muted);
}
/* Stuck: the heading goes on the same line as the box, and the explanation
and the examples go, so the bar costs about one line of the screen. */
.tablefilter.is-stuck {
position: sticky;
/* Clear of the sticky masthead, which is 71px at every width. */
top: 4.5rem;
z-index: 20;
padding: 0.6rem 1rem;
border-radius: 0 0 var(--radius) var(--radius);
}
.tablefilter.is-stuck .tablefilter__hint,
.tablefilter.is-stuck .tablefilter__examples { display: none; }
.tablefilter.is-stuck label {
font-size: var(--t-small);
margin-bottom: 0;
margin-right: 0.75rem;
}
.tablefilter.is-stuck .tablefilter__count { margin-top: 0.35rem; }
@media (min-width: 34rem) {
.tablefilter.is-stuck {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.75rem;
}
.tablefilter.is-stuck label { flex: 0 0 auto; }
.tablefilter.is-stuck .tablefilter__row { flex: 1 1 14rem; }
.tablefilter.is-stuck .tablefilter__count { flex: 0 0 auto; margin-top: 0; }
}
/* On a phone the three parts stack, and a bar a sixth of the screen deep is a
tax on every screen of the page. Stuck, it keeps the box and the count; the
heading goes to the screen reader only, where the input's label still needs
it. Same visually-hidden technique as the stacked table headers above. */
@media (max-width: 33.999rem) {
.tablefilter.is-stuck { padding: 0.5rem 1rem 0.55rem; }
.tablefilter.is-stuck label {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.tablefilter.is-stuck .tablefilter__count {
margin-top: 0.3rem;
font-size: var(--t-micro);
}
}
/* A stacked row, collapsed to what identifies it: the reference, the first two
lines of the Greek, and the classification. site.js only builds these while
the stacked layout is in use, so above 64rem none of this applies. */
@media (max-width: 64rem) {
.rowtoggle {
display: flex;
align-items: baseline;
gap: 0.5em;
width: 100%;
min-height: 44px;
padding: 0;
font: inherit;
font-weight: 600;
color: var(--ink);
text-align: left;
background: none;
border: 0;
cursor: pointer;
}
.rowtoggle::before {
content: "▸";
flex: 0 0 auto;
color: var(--clay);
transition: transform .12s ease;
}
tr:not(.is-collapsed) > td:first-child > .rowtoggle::before { transform: rotate(90deg); }
.rowtoggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Collapsed, the summary is two lines, not four: the reference and the
classification share the first, the Greek takes the second. Stacked one per
line they cost 85px of a 188px row for two short strings. */
tr.is-collapsed:has(td[data-label="Text"]) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 0.75rem;
align-items: baseline;
}
tr.is-collapsed:has(td[data-label="Text"]) > td:first-child { grid-column: 1; }
tr.is-collapsed:has(td[data-label="Text"]) > td[data-label="Classification"] {
grid-column: 2;
text-align: right;
}
tr.is-collapsed:has(td[data-label="Text"]) > td[data-label="Text"] {
grid-column: 1 / -1;
}
/* The label is redundant once the two share a line. */
tr.is-collapsed td[data-label="Classification"]::before,
tr.is-collapsed td[data-label="Text"]::before { content: none; }
/* Collapsed: the gloss and the note wait, and the Greek shows its first two
lines. The classification stays -- it is what the reader is scanning. */
tr.is-collapsed .rowgloss,
tr.is-collapsed td[data-label="Note"] { display: none; }
tr.is-collapsed td[data-label="Text"] .greek {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Rows and whole tables the filter has ruled out.
The stacked-table blocks above set `display: block` on `.gloss--data tr` and
`.gloss--grid tr` — specificity (0,1,1), against this rule's (0,1,0). Media
queries add nothing to specificity, so below 64rem those won. The filter went
on reporting "39 rows in 11 tables" while 511 of them stayed on screen, on
every phone, every tablet, and in print (a print page box is ~794px, so it is
inside the same breakpoint). Whole tables still vanished, because their
.table-scroll wrapper has no competing display — which is what made it look
like the filter worked.
Matching their specificity fixed it once and then lost again the moment the
collapsed phone row arrived, because that is selected with :has() and no
hand-written selector here can outrank it. This is the one rule on the site
that earns !important: a row the filter has ruled out is not a row any other
rule may put back, and every future layout for these tables would otherwise
have to remember to lose to it. */
.is-filtered { display: none !important; }
/* --------------------------------------------------------------------------
19. Mobile page menu (the in-page index's bar and sheet below 1000px)
-------------------------------------------------------------------------- */
/* Built by site.js on every page whose .index-nav is not --desktop; none of
it is in the HTML, so with scripts off a phone keeps the chips (section 11)
and nothing else. Hidden until those chips have scrolled under the masthead,
then shown the way .totop is (section 15), whose job it takes over here: the
arrow sits in the bar, and the loose button is hidden under html.has-pagenav.
Stacking: 40 closed, like .totop — under the masthead (50) and its panel
(60), so an open site menu covers the bar. 70 open, so the scrim covers
both. The root is never transformed: the scrim inside it is position:fixed,
and a transformed ancestor would become its containing block and shrink it
to the bar. The slide is on the sheet, the lift on the bar. */
.pagenav { display: none; }
@media (max-width: 999px) {
.pagenav {
display: block;
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 40;
/* visibility as well as opacity, so the bar leaves the tab order while
hidden — .totop's reasoning. Reduced motion is the section 2 blanket. */
opacity: 0;
visibility: hidden;
transition: opacity .18s ease, visibility .18s ease;
}
.pagenav.is-shown { opacity: 1; visibility: visible; }
.pagenav.is-open { z-index: 70; }
/* The footer's last lines need the bar's height back. */
.has-pagenav body { padding-bottom: 3.25rem; }
.pagenav__scrim {
position: fixed;
inset: 0;
z-index: 0;
/* Not a token: the nav panel's shadow colour, a shade heavier so it still
reads over dark-mode paper. */
background: rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
.pagenav.is-open .pagenav__scrim { opacity: 1; visibility: visible; }
.pagenav__bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 3.25rem;
padding: 0 var(--gutter);
background: var(--paper);
border-top: 1px solid var(--line);
/* .totop's 4px lift on the way in. */
transform: translateY(4px);
transition: transform .18s ease;
}
.pagenav.is-shown .pagenav__bar { transform: none; }
/* The pill on the bar's top edge, and the strip a finger can take hold of.
The strip is the middle half only, so it never sits over the arrow, and it
is the one place on the bar where touch-action is off — a finger here
drags the sheet, never the page. A tap on it toggles, the same as the
button under it. */
.pagenav__handle {
position: absolute;
top: 0;
left: 25%;
right: 25%;
height: 0.75rem;
touch-action: none;
}
.pagenav__handle::before,
.pagenav__grip::before {
content: "";
position: absolute;
top: 0.3rem;
left: 50%;
width: 2.25rem;
height: 0.25rem;
margin-left: -1.125rem;
border-radius: var(--radius);
background: var(--line);
}
/* One pill at a time: the sheet's own takes over while it is open. */
.pagenav.is-open .pagenav__handle::before { display: none; }
.pagenav__toggle {
position: relative;
/* min-width: 0 is what lets the current line ellipsise instead of pushing
the arrow off the edge. */
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.1rem;
min-height: 44px;
padding: 0.4rem 1.6rem 0.4rem 0;
background: none;
border: 0;
font: inherit;
color: var(--ink);
text-align: left;
cursor: pointer;
}
/* The dropdown chevron from section 4, pointing up: the sheet opens upward. */
.pagenav__toggle::after {
content: "";
position: absolute;
right: 0.4rem;
top: 50%;
width: 0.34rem;
height: 0.34rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
color: var(--muted);
transform: translateY(-30%) rotate(225deg);
transition: transform .15s ease;
}
.pagenav.is-open .pagenav__toggle::after { transform: translateY(-70%) rotate(45deg); }
/* The index's own heading, in its own dress (section 11). */
.pagenav__eyebrow {
font-family: var(--sans);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--clay);
line-height: 1.2;
}
.pagenav__current {
max-width: 100%;
font-size: var(--t-small);
line-height: 1.3;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* .totop's treatment (section 15), sitting in the flow of the bar. */
.pagenav__top {
display: grid;
place-items: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--muted);
font-family: var(--sans);
font-size: 1.05rem;
line-height: 1;
text-decoration: none;
}
.pagenav__top::before { content: "\2191"; }
.pagenav__top:hover,
.pagenav__top:active { color: var(--clay); border-color: var(--clay); }
.pagenav__sheet {
position: absolute;
inset-inline: 0;
bottom: 100%;
z-index: 1;
max-height: 60dvh;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
border-top: 1px solid var(--line);
/* The nav panel's shadow (section 4), thrown upward. */
box-shadow: 0 -18px 32px -24px rgba(0, 0, 0, .4);
transform: translateY(100%);
visibility: hidden;
transition: transform .22s ease, visibility .22s ease;
}
.pagenav.is-open .pagenav__sheet { transform: none; visibility: visible; }
/* While a finger has it, site.js sets the transform; nothing may animate. */
.pagenav__sheet.is-dragging { transition: none; visibility: visible; }
.pagenav__grip {
position: sticky;
top: 0;
z-index: 1;
height: 1.25rem;
background: var(--paper);
touch-action: none;
}
/* The list. Section 11's sidebar rules restated, because the clone lives
outside .index-nav and would otherwise be a bare ; and none of that
section's chip or accordion rules reach it, which is the point — every
level shows here, indented. */
.pagenav__sheet ol {
list-style: none;
margin: 0 var(--gutter) 1rem;
padding: 0;
border-left: 1px solid var(--line);
}
.pagenav__sheet ol ol { margin: 0; border-left: 0; }
.pagenav__sheet li { margin: 0; }
.pagenav__sheet a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0.3rem 0 0.3rem 1rem;
margin-left: -1px;
border-left: 2px solid transparent;
font-size: 0.9rem;
color: var(--ink-soft);
text-decoration: none;
line-height: 1.45;
text-wrap: balance;
}
.pagenav__sheet ol ol a { padding-left: 2rem; font-size: 0.84rem; }
.pagenav__sheet a:hover { color: var(--sea); border-left-color: var(--sand); }
.pagenav__sheet a.is-active { color: var(--sea); border-left-color: var(--clay); font-weight: 500; }
/* Section 18 hides the survey's counts on the chips; the sheet has room. */
.pagenav__sheet .index-nav__count { display: block; }
/* The two parts on the Hebrews notes, restated from section 11 the same
way. Their rows keep 44px here: this list is for thumbs. */
.pagenav__sheet ol:has(> .index-nav__part) { border-left: 0; }
.pagenav__sheet .index-nav__part + .index-nav__part { margin-top: 0.5rem; }
.pagenav__sheet .index-nav__part > a {
padding-left: 0;
margin-left: 0;
border-left: 0;
font-weight: 600;
color: var(--ink);
}
.pagenav__sheet .index-nav__part > a:hover,
.pagenav__sheet .index-nav__part > a.is-active { color: var(--sea); }
.pagenav__sheet .index-nav__part > ol { border-left: 1px solid var(--line); }
.pagenav__sheet .index-nav__part > ol > li > a { padding-left: 1rem; font-size: 0.9rem; }
}
/* --------------------------------------------------------------------------
20. Print
-------------------------------------------------------------------------- */
@media print {
:root {
--paper: #FFF; --paper-raised: #FFF; --ink: #000; --ink-soft: #222;
--sea: #000; --clay: #444; --muted: #555; --line: #BBB;
}
.masthead, .nav, .nav-toggle, .skip, .nextprev, .backtotop, .totop, .pagenav,
.index-nav, .site-footer__grid, .btn-row, .video__close { display: none !important; }
body { font-size: 11pt; line-height: 1.5; }
.layout-index { display: block; }
/* No sidebar on paper, so the short case's band is full width without its
border-image; plain borders print whatever the background setting. */
.layout-index--parts .section--tint { border-image: none; }
a { text-decoration: none; color: #000; }
.entry > h2, .theme { break-inside: avoid-page; break-after: avoid-page; }
.commands li, .commitments li, .qual { break-inside: avoid; }
.notes > li { break-inside: avoid; }
.notes__back { display: none !important; }
/* The map is the summary sheet; it prints. Two columns keeps it to one page. */
.thememap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thememap__card { break-inside: avoid; border-top-width: 2px; }
.thememap__title a::after { content: none; }
.quote { border-left-color: #999; }
/* The survey. A print page box is about 794px, which is inside the 64rem
stacking breakpoint, so it prints as the phone layout: every cell its own
labelled line, and thead visually hidden, which means no column headings at
all. Printing was only ever scoped to /beliefs/ and /one-anothers/; this
makes the one page a reader would most want on paper printable too. */
.appendix .tablefilter,
.appendix .sortbtn::after,
.appendix .headlink,
.appendix .rowtoggle::before { display: none !important; }
/* The contents is front matter, not chrome: a hundred pages of tables with no
way into them is not a document. */
.appendix .index-nav {
display: block !important;
position: static;
max-height: none;
overflow: visible;
break-after: page;
}
.appendix .index-nav ol ol { display: block !important; }
/* Print inside the stacking breakpoint, so undo the phone layout: with the
rows restructured these tables are four columns, which fits a page. A real
table also gets table-header-group, so the headings repeat on every sheet
-- which is the thing the stacked layout cannot do at all. */
.appendix .gloss--data { display: table; width: 100%; }
.appendix .gloss--data thead {
display: table-header-group;
position: static;
width: auto; height: auto;
margin: 0; padding: 0;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
}
.appendix .gloss--data tbody { display: table-row-group; }
/* !important because the collapsed-row layout is selected with :has(), which
outranks anything written here on specificity alone. */
.appendix .gloss--data tr { display: table-row !important; padding: 0; }
.appendix .gloss--data td {
display: table-cell !important;
border-top: 1px solid #BBB;
padding: 0.35rem 0.6rem 0.35rem 0;
vertical-align: top;
}
.appendix .gloss--data td[data-label]::before { content: none; }
.appendix .chip { display: block; }
.appendix .chip + .chip::before { content: none; }
/* Nothing is collapsed on paper, and no row is filtered out of it either. */
.appendix tr.is-collapsed .rowgloss,
.appendix tr.is-collapsed td[data-label="Note"] { display: block !important; }
.appendix tr.is-collapsed td[data-label="Text"] .greek {
display: block !important;
overflow: visible;
}
.appendix .rowtoggle { font-weight: 600; }
/* .table-scroll is overflow-x: auto, and an overflow box does not paginate --
anything past the page edge is dropped with nothing to show for it. */
.appendix .table-scroll { overflow: visible !important; }
/* A classification must not be orphaned from the clause it classifies. */
.appendix tbody tr,
.appendix blockquote { break-inside: avoid; }
.appendix thead { display: table-header-group; }
/* On a page whose whole claim is that every source can be checked, a link
that prints as plain black text is the one thing worth keeping. */
.appendix a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
word-break: break-all;
}
.feature { background: #FFF !important; color: #000 !important; border: 1px solid #BBB; }
.feature h2, .feature__text { color: #000 !important; }
}