Chattanooga, Tennessee
... opened / architect / access / ownership / fee
Blue names the field, gray states it. `data-f` is also the parse handle
tools/sync-tags.mjs reads to derive the facet tags, which is why it is an
attribute and not a class. ------------------------------------------------ */
.lr-data {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: var(--rule-major) solid var(--ink);
border-bottom: var(--rule-major) solid var(--ink);
margin: 0 0 34px;
}
.lr-data > [data-f] {
margin: 0;
padding: 12px 14px;
border-right: var(--rule-hair) solid var(--gray-30);
border-bottom: var(--rule-hair) solid var(--gray-30);
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .05em;
color: var(--gray);
font-variant-numeric: tabular-nums;
}
.lr-data > [data-f]::before {
display: block;
margin-bottom: 5px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--blue);
}
.lr-data > [data-f="location"]::before { content: "Location"; }
.lr-data > [data-f="opened"]::before { content: "Opened"; }
.lr-data > [data-f="architect"]::before { content: "Architect"; }
.lr-data > [data-f="access"]::before { content: "Access"; }
.lr-data > [data-f="ownership"]::before { content: "Ownership"; }
.lr-data > [data-f="fee"]::before { content: "Green fee"; }
.lr-data > [data-f]:nth-child(3n) { border-right: none; }
.lr-data > [data-f]:nth-child(n + 4) { border-bottom: none; }
.lr-data > [data-f]:nth-child(3n + 1) { padding-left: 0; }
/* An empty cell renders an em dash. ::before is not a child node, so :empty
still matches a cell whose value is missing. Never a hidden row. */
.lr-data > [data-f]:empty::after { content: "\2014"; }
/* Narrow stock drops to 2x3. Three columns inside --wrap at 375px leaves about
90px of text per cell, and DM Mono 11.5px values like "Chattanooga,
Tennessee" wrap inside the cell. The reference solves the identical problem
the same way (.datagrid is 2 columns under 640px, 4 above). Still six cells,
still never hidden — only the grid geometry changes. */
@media (max-width: 639px) {
.lr-data { grid-template-columns: repeat(2, 1fr); }
.lr-data > [data-f]:nth-child(3n) { border-right: var(--rule-hair) solid var(--gray-30); }
.lr-data > [data-f]:nth-child(n + 4) { border-bottom: var(--rule-hair) solid var(--gray-30); }
.lr-data > [data-f]:nth-child(3n + 1) { padding-left: 14px; }
.lr-data > [data-f]:nth-child(2n) { border-right: none; }
.lr-data > [data-f]:nth-child(2n + 1) { padding-left: 0; }
.lr-data > [data-f]:nth-child(n + 5) { border-bottom: none; }
}
/* ---- body ---- */
.lr-body p { margin: 0 0 20px; }
/* The lede — larger serif, the finding stated first. CSS-only, no author
markup: the first paragraph of the body reads as the lede automatically. */
.lr-body > p:first-of-type {
font-size: 21px;
line-height: 1.5;
}
.lr-body > p:first-of-type strong { font-weight: 600; }
.lr-body h2 {
font-family: var(--display);
font-weight: 600;
text-transform: uppercase;
font-size: 27px;
letter-spacing: .03em;
line-height: 1.06;
margin: 42px 0 4px;
}
.lr-body h2 + p { margin-top: 0; }
.lr-body hr {
border: 0;
height: var(--rule-hair);
background: var(--gray-30);
margin: 40px 0;
}
.lr-body em { font-style: italic; }
.lr-body strong { font-weight: 600; }
.lr-body figcaption {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .05em;
color: var(--gray);
margin-top: 8px;
}
.lr-body blockquote {
margin: 24px 0;
padding: 0 0 0 16px;
border-left: 3px solid var(--blue);
}
.lr-body blockquote p {
margin: 0;
font-size: 20px;
line-height: 1.45;
}
.lr-body blockquote cite {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gray);
font-style: normal;
margin-top: 9px;
}
/* ==========================================================================
In-body components. {{content}} arrives as one blob — a theme cannot
inject a partial into the middle of it — so these are CSS components
styled from author markup delivered by Ghost editor snippets
(docs/snippets.md). See content-model.md §6.
========================================================================== */
/* Pull figure. Ruling in docs/design-spec.md: the rule is ink, not pencil —
yellow is the number box and nothing else. The figure itself is not blue
either; figures are never blue. */
.lr-pull {
border-left: 3px solid var(--ink);
padding: 2px 0 2px 16px;
margin: 26px 0;
}
.lr-pull-fig {
font-family: var(--display);
font-weight: 700;
font-size: clamp(32px, 9vw, 40px);
line-height: 1;
letter-spacing: .01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.lr-pull-cap {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--gray);
margin-top: 7px;
line-height: 1.5;
}
/* Points — titled argument blocks. CSS only, on h3 + p runs. No wrapper,
no author burden: an h3 in the body is a point title by definition,
because h2 already owns the section-header role above. */
.lr-body h3 {
font-family: var(--display);
font-weight: 600;
text-transform: uppercase;
font-size: 20px;
letter-spacing: .03em;
margin: 26px 0 6px;
padding-top: 16px;
border-top: var(--rule-hair) solid var(--gray-30);
}
.lr-body h3:first-of-type {
border-top: var(--rule-major) solid var(--ink);
margin-top: 26px;
}
.lr-body h3 + p {
margin-top: 0;
padding-bottom: 16px;
border-bottom: var(--rule-hair) solid var(--gray-30);
}
/* THE GAP. The label is theme ::before content, supplied once here, so it
cannot be misspelled or drift from entry to entry. Required editorial
component, not a callout widget: dashed border and panel fill keep it
visually distinct from the rest of the reading layer. */
.lr-gap {
background: var(--paper-lt);
border: 1px dashed var(--gray-30);
padding: 16px 18px;
margin: 26px 0;
}
.lr-gap::before {
content: "The Gap";
display: block;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 8px;
}
.lr-gap p {
margin: 0 0 10px;
font-size: 16px;
color: var(--ink-70);
}
.lr-gap p:last-child { margin-bottom: 0; }
/* Sources / Next colophon. */
.lr-colophon {
margin-top: 52px;
padding-top: 18px;
border-top: var(--rule-major) solid var(--ink);
}
.lr-colophon p {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .08em;
color: var(--gray);
margin: 0 0 9px;
line-height: 1.7;
}
.lr-colophon .lr-label {
display: block;
color: var(--blue);
text-transform: uppercase;
letter-spacing: .17em;
font-size: 9px;
}
/* ---- the wordmark is a link on every page ---------------------------------
It must look identical to the text it replaced: the mark is the mark, not a
link in the reading layer, so it takes none of the blue-underline treatment
that body links get. Colour and decoration are inherited, so the wordmark
stays ink and the tagline stays blue. Focus IS visible, because removing the
only route back to the archive from keyboard users would be worse than a
ring that never shows for mouse users. */
.lr-wordmark a,
.lr-sitebar-mark a {
color: inherit;
text-decoration: none;
background: none;
border: 0;
}
/* The wordmark was the only link on the site with no mouse affordance at all.
It may not change ink — it is the mark — so it dims slightly instead. This is
the one navigational link present on every page: home. */
.lr-wordmark a:hover,
.lr-sitebar-mark a:hover { opacity: .74; }
.lr-wordmark a:focus-visible,
.lr-sitebar-mark a:focus-visible {
outline: var(--rule-major) solid var(--blue);
outline-offset: 3px;
}
/* ---- long tokens must not widen the page -----------------------------------
Body content is author HTML and will contain URLs, code and long unbroken
strings. Without this a single token wider than the viewport widens the whole
layout, and because .lr-entry-head is a flex row the No. NN box is pushed off
screen entirely — the page looks like the numbox is missing rather than like
it overflowed. Found at 375px with an inline