) */
main.content li p,
main.content li > p,
main.content ol li p,
main.content ul li p {
text-indent: 0 !important;
}
/* ============================================================
9. SIDEBAR
============================================================ */
.sidebar, #quarto-sidebar, .sidebar-navigation,
nav.sidebar, .bs-sidebar, aside.sidebar,
.sidebar-menu-container {
background-color: var(--book-chrome-bg-solid);
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-size: var(--book-sidebar-font-size);
line-height: 1.3;
}
/* No border anymore — had one while this was first split into its own
box (§9 below), removed on request once the box itself had settled
into place: just the shared --book-chrome-bg-solid fill now (from
the broad .sidebar-menu-container selector above), no hairline edge
drawn around it. */
/* This rail and its right-hand counterpart (#quarto-margin-sidebar,
below) were both sitting at the exact same color as the page itself
(--book-chrome-bg-solid, unchanged since body uses that same
variable) — by original design, so the reading column reads as a
sheet floating on one continuous dark surface. That left neither
rail with any actual visible boundary; a reader only ever perceived
the left one as "a solid block" because 13 tightly-packed chapter
rows happened to fill most of its own height, while the right one's
much shorter per-chapter TOC left a lot of same-colored empty space
below it and read as no block at all. color-mix(), not a semi-
transparent overlay layered on top (background-image: linear-
gradient(rgba(255,255,255,.035),...) was tried first): the right
rail's own box-shadow: 9999px 0 0 9999px trick (below) needs a
literal solid color, not a second background layer it can't inherit
— color-mix() resolves to one, so both the fill and that shadow can
share the exact same lightened value with no seam between the box's
own edge and the shadow bleeding out past it. Second declaration,
not a replacement: an unsupporting browser drops the invalid
color-mix() line and keeps the plain color-mix()-free one right
above it, so this degrades to the old flush-with-the-page look
rather than losing its background outright. Automatic on every
theme (this file's own or any of the 24 in styles/themes/) — it's
relative to whatever --book-chrome-bg-solid already is, not a fixed
color of its own, so nothing here needs per-theme retuning. The
border traces the one edge that actually matters (facing the
reading column) rather than boxing the whole rail in, since both
sides are otherwise flush against the true viewport edge or another
chrome element, not floating with margin around them the way an
ordinary card would be. */
/* No background/border of its own anymore — used to be one continuous
panel wrapping the title and the chapter list together (the ::after
comment above still describes why a panel treatment exists at all).
Split into two separate boxes instead, on request: the title
(.book-sidebar-title, below) and the chapter list (.sidebar-menu-
container, §9 above) each carry their own background/border now,
with the gap between them being wherever the title's own existing
margin-bottom already fell — nothing repositioned, just where the
background/border live. #quarto-sidebar itself goes back to being a
plain positioning container.
!important: #quarto-sidebar is also swept into the broad selector
list at the very top of this section (.sidebar, #quarto-sidebar,
...), which still sets a flat --book-chrome-bg-solid fill — this is
the one place that needs overriding back to nothing, or the "split
into two boxes" look was just the same solid panel with two borders
drawn on top of it instead of an actual gap between two independent
boxes. Scoped to ≥1338px (the Full stage floor) — this element is a
completely different thing below that width (§22/23: an off-canvas
drawer, #quarto-sidebar.book-left-drawer-open, sliding out from
underneath the reading column rather than a docked rail sitting
beside it), and a plain unscoped rule here was making that
drawer fully transparent too, confirmed live via getComputedStyle
(rgba(0, 0, 0, 0)) and by screenshot — the reading column's own text
visibly bled straight through the open drawer instead of the drawer
showing its own solid fill. That drawer never got its own explicit
background (§22's own rule doesn't set one, relying on the shared
fill above), so once this override wasn't there to fight anymore,
it falls back to that shared --book-chrome-bg-solid correctly. */
/* BUG FOUND during the 3-stage consolidation: this was actually still
scoped to the OLD 1120px right-rail floor, not the 1200px value the
comment above always claimed — meaning it silently made the drawer
transparent throughout the entire old 1120–1199.98px range this
whole time, contradicting its own documented intent. Fixed to match
the comment (and the new 1338px Full floor) rather than just carried
forward unchanged. */
@media (min-width: 1338px) {
#quarto-sidebar {
background-color: transparent !important;
}
}
/* No longer a boxed panel — pulled out of the sidebar's own flow
entirely (≥1200px fixed-position rule, §23) so it can float in line
with the navbar's nav-link row above it instead of sitting inside
the chapter-list rail. Transparent: a reader wanted it to read as
floating text, not a box, once it left the rail. */
.book-sidebar-title {
background-color: transparent;
border: none;
}
/* Title, search, "Table of Contents," and the chapter list all live
inside this one wrapper now (include-after-body script physically
moves all four in) — one shared padding is the actual fix for
keeping their left/right edges consistent with each other, replacing
several rounds of independently-tuned padding/margin on each of them
trying to approximate the same numbers (chapter-list-edge
measurements, a margin-left nudge, a correction pass for Bootstrap's
leftover mx-auto silently fighting that nudge — all now moot: with
one shared box there's nothing left for them to drift apart from).
min-width: 0 — #quarto-sidebar is display:flex/flex-direction:
column, and flex items default to min-width:auto, which refuses to
shrink a nowrap-content child (the title, see below) below its own
full unwrapped text width; confirmed live this fed back into the
title-font-scaling IIFE's own width measurement without it, each
resize compounding the previous run's now-too-large font-size into
a still-larger one. */
.book-sidebar-content {
display: block;
min-width: 0;
/* !important: Quarto's own bundled Bootstrap CSS has a generic
#quarto-sidebar > * { padding-right: 1em; } rule (an ID selector,
confirmed live via document.styleSheets — beats this class
selector on specificity alone regardless of source order), which
was silently winning over the padding-right declared here.
27px right padding — title/search/"Table of Contents"/chapter-
list all share this one box, so every one of them insets by the
exact same amount and all four stay flush with each other. This
value used to cause visible per-element drift (0.5rem, then this
same 27px, both tried and reverted earlier) — but that drift's
real cause turned out to be two separate bugs downstream of this
padding entirely: the chapter row's own width was capped instead
of 100% (fixed, § chapter-title.has-chapter-num), and Quarto's
bundled .sidebar-section carried its own padding-left: 0.5em that
silently narrowed the chapter row's available width further
(fixed, § below). With both of those actually fixed, this shared
padding is safe again and every element tracks it identically.
27px matches the reading-column-to-margin-sidebar-text gap on the
opposite side of the page (measured live: #toc-title/margin-tools
text starts 31px right of the reading column's own right edge;
the reading column's border/shadow eats a few of those px on this
side, so 27px here lands the two gaps visually even). */
padding: 1rem 27px 1rem 1rem !important;
}
/* Below the 1338px Full-stage floor only: the compact drawer's own
chapter titles need to reach further right, flush with .book-
mobile-brand's own right edge (now the same font-size as the docked
title, previous comment) — the shared 27px right padding above is
deliberately matched to the opposite rail for the ≥1338px docked
sidebar specifically, so it can't just be lowered unconditionally
without breaking that. Placed after the base rule (same
specificity, both !important) so it actually wins for this
narrower range instead of being silently overridden by source
order. */
@media (max-width: 1337.98px) {
.book-sidebar-content {
padding-right: 8px !important;
}
}
/* max-width: none !important — this element still carries its
original .navbar-brand-container class underneath (not stripped,
just added to; only its Bootstrap mx-auto sibling class was
explicitly removed, in the include-after-body script) and some
bundled Quarto/Bootstrap rule for that class still sets a
responsive max-width (calc(100% - 115px), confirmed live) meant for
its old horizontal-navbar context — silently clipping the title
text and, worse, corrupting the title-font-scaling IIFE's own
"natural width" measurement into a too-small number, which then
scaled the font size up to compensate for a clipped box instead of
the real one (confirmed live: title rendered a clipped "The
Inversion" at 39px instead of the full text at a sane size). */
.book-sidebar-title {
display: block;
max-width: none !important;
margin: 0 0 1rem;
}
/* Below the 1338px Full-stage floor, the site title already lives in
the persistent header bar (.book-mobile-brand) — this drawer's own
copy just repeated it a second time the moment the drawer opened,
right above a "Table of Contents" row that already makes clear what
the drawer itself is. Hidden here, not removed at the source: the
docked ≥1338px rail still needs the real element (its own copy of
the title is this rail's only one). */
@media (max-width: 1337.98px) {
#quarto-sidebar .book-sidebar-title {
display: none !important;
}
}
/* Study mode's own width-independent copy — same reasoning as its
other class-triggered duplicates elsewhere in this file: this needs
to also hide at Stage 1 widths (≥1200px) whenever Study mode forces
the sidebar off-canvas there, or its real title (revealed once the
drawer opens) doubles up with .book-mobile-brand's fixed navbar
copy at the same on-screen position — confirmed live, illegible
overlapping text the moment a reader opened the drawer. */
html.book-study-mode #quarto-sidebar .book-sidebar-title {
display: none !important;
}
/* Unlike the title above, this one isn't width-gated — the header bar's
own search icon (.book-navbar-search-toggle) is now visible at every
width, including the ≥1200px docked rail, so this drawer's copy
(sitting right next to "Table of Contents") is a redundant second
entry point to the same modal everywhere, not just below some
breakpoint. Hidden here, not removed at the source: navSearch itself
still physically lives inside this element (see the sidebar title/
search relocation in _quarto.yml) — it's what the header icon's own
click proxies through to — so the real widget still needs a home in
the DOM even though nothing here is ever shown. */
#quarto-sidebar .book-sidebar-search {
display: none !important;
}
/* .book-mobile-brand — the lightweight clone _quarto.yml leaves behind
in the navbar itself (see the title-relocation IIFE) so the header
still shows a site title even when the real title isn't on-screen —
below 992px it's inside the off-canvas drawer, and from 992px up to
1199.98px it's inside the docked-style drawer too (the fixed rail
itself doesn't exist below 1200px, see §23), so a reader only ever
sees the real title by opening that drawer. Hidden only at ≥1200px,
where the always-visible docked rail's own copy already does this
job — showing both would be a duplicate. No font-scaling override
here (unlike .book-sidebar-title .navbar-brand) — this clone keeps
Bootstrap's own default navbar-brand sizing, which is already right
for a compact header slot. */
.book-mobile-brand {
display: flex;
align-items: center;
color: var(--book-chrome-text) !important;
font-family: Georgia, 'Times New Roman', serif;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: none !important;
}
/* The wrapper's own color/font-size above don't actually reach the
text — Quarto's bundled CSS sets its own explicit color and
font-size directly on .navbar-brand/.navbar-title (the two elements
this clone's own markup actually renders the title text through,
confirmed live via cloneNode(true) carrying them over unchanged),
and an explicit declaration on a descendant always wins over
whatever an ancestor's own color/font-size resolves to, inheritance
or not. That bundled color — confirmed live: rgb(89, 89, 89), a
plain mid-gray — reads fine against Quarto's own white/light-per-
theme secondary-nav bar it was written for, but this clone lives in
the dark header bar instead, where a reader flagged it as "not
gray," not matching the docked rail's own crisp --book-chrome-text
title one width up. Same fix .book-navbar-search-toggle's own
header comment already describes needing for the same reason.
font-size forced back to this wrapper's own 1rem too — the bundled
default was rendering at 23.375px, a good deal larger than the
"compact header slot" sizing the rule above actually intends. */
.book-mobile-brand .navbar-brand,
.book-mobile-brand .navbar-title {
color: var(--book-chrome-text) !important;
/* Matches .book-sidebar-title .navbar-brand's own 1.15rem (§4349) —
was a flat 1rem, on the reasoning that this compact header slot
needed to render smaller than the full desktop sidebar's title.
A reader pointed out the real fix for the compact drawer's own
chapter-list alignment (numbers under the icon, titles flush with
this title's own right edge) was making this title render at the
same size/width it already does in full-width mode, rather than
chasing the gap with padding tweaks on the list below it. */
font-size: var(--book-sidebar-title-font-size, 1.15rem) !important;
font-family: Georgia, 'Times New Roman', serif !important;
}
@media (min-width: 1338px) {
.book-mobile-brand {
display: none !important;
}
}
/* 992–1337.98px only: this bar also carries the full inline nav-link
row here (Home/In Plain Terms/Appendices/…, not yet collapsed into
the hamburger — that's Bootstrap's own native ≥992px behavior). Left
as a normal flex item in .navbar-container, the title sat inside
.navbar's own box — which is only as wide as the reading column, not
the full viewport (§19c) — so it ate into that narrower box's own
left side, shoving the nav-link row (centered *within that box*, not
the page) visibly right of true page-center. Pulled out of flow with
position: fixed instead: left: 1rem lands it at the true viewport
edge regardless of .navbar's own narrower, off-center box, and the
nav-links left behind now center correctly on the reading column
again. #quarto-header (this title's positioned ancestor once
headroom.js's own translateY transform is active on scroll) spans
the full viewport width itself even though .navbar inside it
doesn't, so left: 1rem resolves the same way whether or not that
transform is currently applied — and the title correctly slides out
with the rest of the header when headroom hides it, rather than
staying pinned on-screen. */
@media (max-width: 1337.98px) {
.book-mobile-brand {
position: fixed;
left: 1rem;
top: 0;
height: 52px;
flex: 0 0 auto;
}
}
@media (min-width: 992px) and (max-width: 1337.98px) {
.book-mobile-brand {
/* Pulling the title out of flow (above) fixed its own position,
but the nav-link row is still centered *within .navbar's own
box*, which itself shrinks and slides left as the viewport
narrows toward 992px — "Home" 's own left edge moves as the
window narrows, confirmed live. A flat max-width sized for the
wider end overlapped "Home" at the narrow end. clamp() tracks
the same live-measured relationship instead.
FLAGGED FOR LIVE RE-MEASUREMENT: this clamp's own endpoints
(90px at 992px, 195px at 1199px) were measured against the OLD
1199.98px ceiling of this range — the new 1337.98px ceiling
almost certainly has more room to spare at its own upper end,
so the 195px figure (and possibly the slope) needs re-measuring
against .navbar-nav's actual rect at 1359px before this is
considered correct, not just carried over unchanged. */
max-width: clamp(90px, calc(90px + (100vw - 992px) * 0.5), 195px) !important;
}
}
@media (max-width: 991.98px) {
.book-mobile-brand {
/* Below 992px there's no inline nav-link row to avoid (it's
collapsed into the hamburger entirely at this width) — the
constraint here is the icon cluster now fixed to the opposite
edge instead (.book-margin-tools/.book-navbar-search-toggle,
above), which this title clone started silently overlapping
the moment those two also became position: fixed across this
width too: still a normal, unconstrained flex item until now,
it could grow wide enough (295px, confirmed live at 500px) to
paint over the icon cluster outright, hiding them completely
(confirmed live: elementFromPoint over the icons' own
coordinates returned .book-mobile-brand, not the icons
underneath). ~160px reserved the icon cluster's own width
(search 28px + this row's own ~88px + gaps/insets) regardless
of exactly how many icons are showing at a given moment — but
went stale the moment the Typography/Margin settings dropdowns
(.book-settings-dropdown, two of them, 28px each) were added to
this same cluster later and never fed back into this figure.
Confirmed live: at 375px the icon cluster's own left edge
(.book-settings-dropdown, the Typography toggle, now the
cluster's true leftmost member) sits a constant 145px from the
viewport's right edge — stable across every width tested,
200–991px, since the whole cluster is itself right-anchored via
position: fixed, not flowed — while this rule was only reserving
160px total including the 50px left offset below, works out to
110px of headroom past this box's own right edge, well short of
the real 145px: the title visibly ran into "Aa," the first
dropdown's own icon, exactly as a reader reported ("The
Inversion of Greatn.Aa" with no gap at all, confirmed live via
screenshot at 375px and 320px both). 203px (145 + this rule's
own 50px left offset, below, + 8px of breathing room) is the
real figure now. */
max-width: calc(100vw - 203px) !important;
/* left: 50px, not the shared rule's own 1rem (16px, above) — the
hamburger toggler shares this same left edge below 992px
(unlike 992–1199.98px, where nav-links show inline and the
toggler never appears at all, the context the plain 1rem was
originally written for), and its own box runs to ~40.65px
(confirmed live, stable across every width tested). This title
becoming position: fixed at 1rem here too — the same change
that fixed the icon-cluster overlap, above — silently covered
the toggler with itself instead, since a link now sat directly
on top of the button at those same coordinates: confirmed
live, clicking the toggler navigated home (the title's own
link target) instead of opening the hamburger menu. 50px
clears the toggler's own right edge with a small gap. */
left: 50px !important;
}
}
/* Search, top right of the bar — right after "Resources" below 1200px
(nav-links end, .quarto-navbar-tools picks up immediately after), the
same right edge in that range too. Used to have no width-gated hide
rule at all ("one icon, visible at every breakpoint" — see the
.book-margin-search-toggle comment, further down, for why that's now
split instead): hidden at ≥1200px below, where the right rail's own
icon row carries its own copy (_quarto.yml's marginSearchToggle) as
the docked view's real, always-visible entry point — the same "real
widget in the docked rail, clone in the navbar for everything
narrower" split .book-sidebar-title/.book-mobile-brand already use.
Bare icon on the dark header bar (this bar stays --book-chrome-bg-
solid at every width, unlike the white/dark-per-theme secondary-nav
bar further down), so it needs the light chrome-text color
.book-mobile-brand itself uses, not that bar's hsl(0,0%,35%). */
.book-navbar-search-toggle {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
background: transparent;
border: none;
padding: 0;
width: 28px;
height: 28px;
color: var(--book-chrome-text) !important;
opacity: 0.85;
}
.book-navbar-search-toggle:hover {
opacity: 1;
}
.book-navbar-search-toggle i {
/* 19px, matching Font/Palette (bi-type/bi-droplet-half) in this
same row exactly — was 15px with no line-height set, so the
inherited line-height (1.5) inflated its actual bounding box to
15×22.5 rather than a clean 15×15, reading as visibly bigger
than its neighbors despite a SMALLER nominal font-size.
Confirmed live via getBoundingClientRect(). line-height: 1 here
removes that inflation entirely, and 19px brings the glyph size
itself in line with the other two. */
font-size: 19px;
line-height: 1;
}
@media (max-width: 1119.98px) {
.book-navbar-search-toggle i {
/* Matches .book-margin-search-toggle i.bi exactly (§ its own
comment) — the docked rail's own search icon, same fixed
19×19 box (not font-size alone) as Font/Dark-Light's own
matching fix just below. A first pass here just lowered
font-size (19px, then 12px), scoped to 800-1119.98px only —
got sub-compact's three icons consistent with EACH OTHER and
with the docked rail, but true mobile (<800px) still used the
old flat 19px/no-box version, on direct confirmation still a
real, visible mismatch: "I want the true mobile to have the
same thing." No min-width floor anymore — one rule now covers
every width below the docked/Compact floor uniformly. 17px
matches Font/every other icon in that row (not Dark-Light's
smaller 14px, § its own comment). */
font-size: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
}
}
/* .book-navbar-font-toggle / .book-navbar-dark-light-toggle — Font and
Dark/Light's own independent header clones, same reasoning as
.book-navbar-search-toggle just above (resources/book-scripts.html
has the full comment): the real controls live inside
.book-margin-tools, a genuine DOM child of #quarto-margin-sidebar,
which already works fine pulled into the header at 800-1337.98px and
docked at ≥1338px — the one place it actually breaks is true mobile
(<800px), where opening the off-canvas drawer reverts
#quarto-margin-sidebar's overflow-y from visible back to auto for
its own real scrolling content (nav#TOC), and that auto/scroll
ancestor clips .book-margin-tools's own position:fixed paint (the
same clipping bug this file's closed-state rule already fixes,
just not the open one). Scoped to true mobile only, not
.book-navbar-search-toggle's own wider ≤1119.98px range — the
800-1337.98px range has no drawer-open state to break in the first
place (anchored popup there, not this sliding drawer), so cloning
there too would just be a second, redundant copy alongside the
already-working original. display: none by default, shown only
within the true-mobile block below. */
.book-navbar-font-toggle,
.book-navbar-dark-light-toggle {
display: none;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0;
width: 28px;
height: 28px;
color: var(--book-chrome-text) !important;
opacity: 0.85;
}
.book-navbar-font-toggle:hover,
.book-navbar-dark-light-toggle:hover {
opacity: 1;
}
.book-navbar-font-toggle i,
.book-navbar-dark-light-toggle i {
/* Unscoped fallback only — every real width below the docked/
Compact floor now gets its own override just below, covering both
sub-compact and true mobile alike. */
font-size: 19px;
line-height: 1;
}
@media (max-width: 1119.98px) {
/* Matches the docked rail's own .book-light-dark-toggle i.bi /
.book-margin-search-toggle i.bi exactly (§ each one's own
comment) — on request: "I want the size of the icons to be the
same[,] whether it's in full screen mode or... smaller modes."
A flat font-size on its own doesn't get there: the docked rail's
own icons render a fixed 19×19 BOX regardless of font-size (14px
and 17px both measured 19×19 there, confirmed live) via
display: inline-flex + explicit width/height centering the glyph
inside, not by letting font-size drive the box directly the way
these clones' own line-height: 1 approach does. Two earlier passes
(19px, then 12px) only ever adjusted font-size, scoped to
800-1119.98px only — got sub-compact matching the docked rail, but
true mobile (<800px) still used the old flat 19px/no-box version,
on direct confirmation still a real mismatch: "I want the true
mobile to have the same thing." No min-width floor anymore — one
rule now covers every width below the docked/Compact floor
uniformly. font-size itself still differs from Font's own 17px on
purpose — this is Dark-Light's icon specifically, matching
.book-light-dark-toggle's own smaller 14px (its glyph reads
heavier at the same nominal size, same reasoning as that rule's
own comment). */
.book-navbar-dark-light-toggle i {
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
}
/* Font's own icon — matches .book-margin-search-toggle/every other
icon in that row's shared 17px, not Dark-Light's smaller 14px. */
.book-navbar-font-toggle i {
font-size: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
}
}
@media (min-width: 1120px) {
.book-navbar-search-toggle {
display: none !important;
}
}
/* 992–1199.98px only: mirrors the title's own fix just above — left as
a normal flex item, this icon sat at .navbar's own right edge, which
is only as wide as the reading column, not the full viewport (§19c),
so it read as adrift from the true page edge once the title moved to
sit flush against it on the other side. Pulled out to the true right
edge the same way, via position: fixed. No clamp() needed here like
the title's: the nav-link row's own right edge ("Resources") never
comes closer than ~158px from the true viewport edge anywhere in
this range (confirmed live at 992/1100/1199px), well clear of a
plain 1rem inset. */
@media (max-width: 1119.98px) {
/* Was min-width: 992px too (a "transition width only" range) — a
reader who first asked for this treatment explicitly excluded
"the mobile" at the time, then asked for it there too once they'd
seen it work. Below 992px .navbar itself is already full viewport
width (only the 992–1199.98px range narrows it to mimic the
docked view's own floating bar, §19), so .book-navbar-search-
toggle's base rule (no media query, further up) would otherwise
leave it a normal flex item inside .quarto-navbar-tools instead of
fixed at a predictable right: 1rem — confirmed live at 500px
before this: position: static, sitting ~12.75px off the true
edge, not the exact 16px .book-margin-tools (below) assumes.
Extending this same fixed/right: 1rem treatment down through
every width below 1200px keeps that anchor point consistent
everywhere .book-margin-tools also needs it. */
.book-navbar-search-toggle {
position: fixed;
right: 1rem;
top: 0;
height: 52px;
margin-left: 0;
}
/* The right drawer's own icon row (Dim margin/Font/Layout/Palette —
search excluded, see .book-margin-search-toggle just below) moves
up into the header bar at every width below 1200px instead,
sitting immediately left of .book-navbar-search-toggle above — a
reader wanted these reachable "up in the top menu" without opening
the drawer first, the same way search already was, on mobile too
and not just the 992–1199.98px range this started in. Same fixed/
viewport-right-edge technique .book-navbar-search-toggle itself
uses here, not the --book-navbar-bar-left-relative one .book-
margin-tools uses at ≥1200px (§23) — that positions relative to
the floating nav bar specifically, a different visual target than
this width's simpler edge-anchored header icons. 28px clears
.book-navbar-search-toggle's own 1rem-inset 28px-wide box; 0.75rem
(was 0.5rem) is the same "search sits apart from the rest of the
row" gap the ≥1200px docked view now uses too (§23's own .book-
margin-search-toggle margin-left) — one consistent separation at
every width, not a smaller one here just because this side
happened to reach the right edge first. */
.book-margin-tools {
position: fixed !important;
top: 0 !important;
right: calc(1rem + 28px + 0.75rem) !important;
left: auto !important;
width: auto !important;
height: 52px !important;
margin-bottom: 0 !important;
/* Same stacking-context trap #quarto-sidebar/#quarto-margin-
sidebar themselves needed fixing (§23's own comment has the
full reasoning) — this element is a descendant of #quarto-
margin-sidebar, which carries its own inline z-index: 5 from
Quarto's positioning script at every width too, trapping this
row below #quarto-header's own z-index: 1070 regardless of its
own value here without a matching override. 1075, not 1071 —
1071 only ever needed to clear the header (1070); .book-
running-head (the scrolled-state breadcrumb bar, § its own
rule) sits at 1074, ABOVE that old 1071, and once a reader
scrolls past the top this row's own real Font/Dark-Light/
Search controls sat exactly in the path of that bar sliding
into place — confirmed live: the icons' own rects never
actually moved, they were simply painted over. Directly
reported: "when you're scrolling down in subcompact mode, the
[Aa] and the dark light does not... stay there. It goes up
with the top menu... it's supposed to stick, whatever the
search icon is doing." .book-navbar-search-toggle (the search
icon specifically) never had this problem because it's a
plain descendant of .navbar itself, which the running-head bar
never covers (different stacking branch); this row needed its
own bump to match. */
z-index: 1075 !important;
}
/* Redundant with .book-navbar-search-toggle (above, already covering
every width below 1200px) now that the rest of this row joins it
up here too — hidden rather than removed at the source, matching
every other "real widget vs. narrow-width clone" split in this
file (.book-sidebar-title/.book-mobile-brand, etc.). */
.book-margin-search-toggle {
display: none !important;
}
/* Focus mode / Layout / Chapter Contents / Margin Notes: below this
width both #quarto-sidebar and #quarto-margin-sidebar are already
off-canvas (confirmed live: both measured left/right: -300px at
1072px, book-compact-mode alone — the auto-crunch class — isn't
what pushes them off-canvas; this narrower breakpoint is), so all
four of these buttons control a docked rail that no longer
exists at this width: Focus mode dims a rail that isn't shown,
Layout crunches a sidebar that's already off-canvas regardless,
Chapter Contents/Margin Notes switch content inside a margin rail
that isn't docked either. A reader spotted them sitting in the
header with nothing left to do: "those don't need to be in the
top menu anymore at this stage... it should just be the font,
the search, and the colors." Font (.book-settings-dropdown),
the light/dark toggle, and search are untouched — none of them
depend on a docked rail. */
.book-quick-toggle {
display: none !important;
}
}
/* Layout specifically (not Chapter Contents/Margin Notes, which stay
meaningful all the way down to the 1119.98px cutoff just above) hides
at the wider 1337.98px boundary instead — this button only ever
toggles html.book-study-mode, a manual opt-in for the same crunched
layout html.book-compact-mode already applies AUTOMATICALLY at any
width below 1338px (confirmed: dozens of rules elsewhere in this file
pair the two classes on the identical selector body, e.g. html.book-
compact-mode .book-mobile-brand, html.book-study-mode .book-mobile-
brand — compact-mode alone already satisfies them). Below 1338px,
toggling Layout genuinely changes nothing on screen — on request:
"anything in compact mode or less... if it doesn't have the space for
full mode, does the compact icon hide from view? That way people
don't click it, and it does nothing." :has() targets the button
containing Layout's own distinguishing element (COMPACT_ICON_SVG,
resources/book-scripts.html) rather than Chapter Contents/Margin
Notes, which share the exact same .book-quick-toggle class with no
button-specific class of their own to select by instead. */
@media (max-width: 1337.98px) {
.book-quick-toggle:has(.book-compact-icon) {
display: none !important;
}
}
/* True mobile ONLY (below 800px) — .book-margin-tools (Font/Palette/
dark-mode-toggle/Search) needs to scroll away with the top menu
here, and ONLY here. This range flip-flopped three times live before
landing on this as the actually-confirmed spec: "the right side
icons stay put [at] compact mode... if it's larger than compact
mode, the right side icons stay put... permanent stay put. When it
gets smaller than compact mode, that's when those disappear off the
screen." Full stage (≥1338px, genuinely docked inline, never
position: fixed) and Compact mode (800-1337.98px) both keep the
ORIGINAL always-stationary behavior, full stop — no scroll tie at
all in either. A middle attempt widened this same range to
max-width: 1337.98px (covering Compact too) chasing a DIFFERENT bug
(nav-links + reading-column width, fixed separately, see
.navbar-collapse's own two rules above/below) that only happened to
look similar in symptom — narrowed back to where it always should
have been. .book-margin-tools is the ONLY place Font/dark-mode-
toggle/search actually work below 800px too (.quarto-navbar-tools'
own copy has no font control at all and its native dark-toggle is
deliberately display:none — book-scripts.html hides it in favor of
this custom one), so this can't just disappear outright down there;
it has to keep existing, just tied to the header's own hide state
instead of floating independently. Same html.book-chrome-unpinned
tracker plus top-swap technique .book-running-head/.book-floating-
*-toggle already use (resources/book-scripts.html's own independent
scroll tracker, not Quarto's bundled headroom class directly - see
.book-running-head's own comment for why that distinction matters
here). -52px matches the navbar's own translateY(-100%) hide
distance at this height. */
@media (max-width: 799.98px) {
.book-margin-tools {
/* 200ms linear — matches headroom's own transition timing (§19,
.book-running-head's identical comment) — added back on
direct, repeated correction: an instant snap read as "hiding,"
not as sliding away with the rest of the top menu the way the
nav-links and search icon already visibly do. Removed once
already to fix a real crossing-paths glitch against
.book-running-head's own opposite-direction slide (see git
history) — that trade is being made the other way now, on
explicit request: a smooth slide that visually matches the
navbar is the actual ask, taking priority over the brief
crossover artifact this reintroduces. */
transition: top 200ms linear;
}
html.book-chrome-unpinned .book-margin-tools {
top: -52px !important;
}
/* .book-navbar-search-toggle (the search icon) looked like it
needed the same top-swap .book-margin-tools just got — on
request, "the search icon is already sliding up" while Aa/dark-
mode-toggle weren't. Tried adding the identical rule here first;
confirmed live that it DOUBLE-offset the icon (-104px, not
-52px) instead of fixing anything. Root cause: unlike
.book-margin-tools, this element's parent chain runs through
.quarto-navbar-tools inside .navbar itself — and .navbar carries
its own transform: translateY(-100%) when headroom hides it,
which makes .navbar the containing block for any position:fixed
descendant (the same transform-breaks-fixed-descendant trap
this file has hit before). That's WHY the search icon already
moved correctly with no rule of its own: it rides its
transformed ancestor's own hide motion for free, automatically,
the same way any ordinary child would. Adding a second, separate
-52px on top of that stacked two hides into one. No rule needed
here at all — left alone on purpose. */
/* Font/Dark-Light's own header clones — same free ride as
.book-navbar-search-toggle above (same parent, same reasoning),
so no headroom top-swap rule needed here either. Positioned
immediately left of search (1rem + 28px + 0.75rem per icon,
matching .book-margin-tools's own pulled-up spacing formula
elsewhere in this file), in the same Font/Dark-Light/Search
left-to-right order the drawer itself always used. The real
controls (.book-settings-dropdown/.book-light-dark-toggle) are
hidden for the width of this block — these clones take over
their job entirely down here, the same real-widget/narrow-clone
split .book-navbar-search-toggle/.book-margin-search-toggle
already use. */
.book-navbar-dark-light-toggle {
display: flex;
position: fixed;
right: calc(1rem + 28px + 0.75rem);
top: 0;
height: 52px;
}
.book-navbar-font-toggle {
display: flex;
position: fixed;
right: calc(1rem + (28px + 0.75rem) * 2);
top: 0;
height: 52px;
}
/* .book-light-dark-toggle: plain display:none is enough — its click
handler is a normal listener with no visibility guard of its own.
.book-settings-dropdown needs a different technique: Bootstrap's
own Dropdown component refuses to open a toggle whose element has
display: none (confirmed live — .book-navbar-font-toggle's own
proxy click went through, aria-expanded stayed "false" regardless,
only once display:none was in the way), so it's moved off-screen
instead — display stays non-none, keeping Bootstrap satisfied,
while pointer-events: none and the -9999px offset keep a reader
from ever seeing or reaching it directly. */
.book-settings-dropdown {
position: absolute !important;
left: -9999px !important;
pointer-events: none !important;
}
.book-light-dark-toggle {
display: none !important;
}
}
/* 800-1119.98px: Font/Dark-Light's navbar clones are now the ONLY
version shown at this width, full stop — not gated behind
body.mobile-margin-open the way this range originally had it (that
version only swapped the clones in while the right drawer was open,
to dodge a clipping bug, and left .book-margin-tools's own real
controls as the everyday version the rest of the time). Reverted to
a plain, permanent embed on direct, repeated request: "why are they
doing their own thing? They're supposed to be embedded [in] the top
menu the same way as everything else is." Title, the nav-links, and
search (.book-navbar-search-toggle) are all genuine DOM children of
.navbar and always were — they get the header's own hide/show
motion for free, automatically, with zero synced CSS of any kind.
.book-margin-tools's own real Font/Dark-Light controls live outside
.navbar entirely (inside #quarto-margin-sidebar's own subtree), so
every attempt to make THEM match search's motion needed hand-tuned,
parallel CSS (a top-swap with matching transition timing, a z-index
bump to clear .book-running-head, and still ran into the drawer's
own clipping bug on top of all that) — real motion parity, but never
truly identical, and a second, differently-sized element (§ its own
19px vs the real controls' own smaller glyph, confirmed live) swapped
in on drawer-open, reading as the icons "getting bigger." Making
these two clones (already built, already genuine .navbar children,
already perfectly in sync with search for free) the ONLY version at
this width — same one .book-margin-search-toggle already gets — is
simpler than continuing to hand-sync a second, separate element:
one element, one native mechanism, nothing left to keep in sync. */
@media (min-width: 800px) and (max-width: 1119.98px) {
.book-navbar-dark-light-toggle,
.book-navbar-font-toggle {
display: flex;
position: fixed;
top: 0;
height: 52px;
}
.book-navbar-dark-light-toggle {
right: calc(1rem + 28px + 0.75rem);
}
.book-navbar-font-toggle {
right: calc(1rem + (28px + 0.75rem) * 2);
}
.book-settings-dropdown {
position: absolute !important;
left: -9999px !important;
pointer-events: none !important;
}
.book-light-dark-toggle {
display: none !important;
}
/* .book-margin-tools itself has nothing left to show at this width
once Font/Dark-Light (above) and Search (.book-margin-search-
toggle, already display: none below 1200px, § its own comment)
are both accounted for elsewhere — .book-quick-toggle (Layout/
Chapter Contents/Margin Notes) is already hidden here too (§ its
own rule). Hidden outright rather than left as an empty box still
competing for z-index against .book-running-head or clipped by
the drawer's own overflow — none of that machinery has anything
left to protect. */
.book-margin-tools {
display: none !important;
}
}
/* max-width/overflow overrides: some combination of Bootstrap's/
Quarto's own bundled CSS for these classes (built for their
original spot in a horizontal navbar, where the title needs to
truncate rather than push other nav items around) was clipping the
title to a single truncated line here — "The …" — confirmed live.
white-space stays nowrap deliberately, not switched to wrapping —
see the title-font-scaling IIFE (include-after-body script) just
below, which scales the font-size itself to exactly fill
.book-sidebar-content's own available width on one line, the
"flexible width" behavior this title always had back when it lived
in the navbar, just re-targeted at its new column instead of a
navbar slot. */
.book-sidebar-title .navbar-brand {
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
/* Search sits to the left of "Table of Contents," on the same row (see
.book-sidebar-toc-row) — no longer its own full-width block, no
bottom margin of its own needed. */
.book-sidebar-search {
display: block;
flex: 0 0 auto;
}
/* One row, icon on the left / label on the right — search used to be
styled as a full-width bar (background, border, padding, a
::after: 'Search' label) sitting above "Table of Contents" on its
own line. A reader felt that read as "a real search field" when it
isn't one (Algolia's own detached-search-button markup is a button
that opens a separate modal, not an inline text input, no matter how
it's styled) — shrunk down to what it actually is: a bare icon,
sized and placed the same as the sidebar's own other small icons. */
.book-sidebar-toc-row {
display: flex;
align-items: center;
gap: 0.5rem;
/* 0, not 0.405rem — that value dated from before #toc-title (the
right rail's own equivalent header) was refactored to produce its
own "gap before the list below" via internal padding-bottom
instead of external margin-bottom (see #toc-title's own comment,
"padding-top/-bottom: 0.4rem replaces the old margin-bottom: 0.4rem
here"), specifically so it and .book-sidebar-brand shared one box
model. This row's own margin-bottom never got the matching update,
so it kept adding ~6.9px of external space "Preface" fell into
that "Heading Level Two" (the right rail's own first entry, sitting
flush against #toc-title with zero extra margin) never had — a
reader compared the two side by side and asked for them to match.
Zero here, same as #toc-title's now-zero margin, makes the two
flush the same way. */
margin-bottom: 0;
}
.book-sidebar-search .aa-DetachedSearchButton {
display: flex !important;
align-items: center;
justify-content: center;
/* Sized to exactly match the icon inside it (17×17, see
.aa-SubmitIcon below) — a bigger box centered the icon inside its
own extra padding, insetting the actual glyph a few px right of
the chapter list's own number column instead of sitting flush
with it. */
width: 17px;
height: 17px;
background: transparent !important;
border: none !important;
border-radius: 4px;
padding: 0 !important;
color: var(--book-chrome-text) !important;
/* 0.55 — matches the chapter list's own number column exactly
(.sidebar-chapter-num, confirmed live), not the 0.65 the other
right-rail icons use. */
opacity: 0.55;
transition: opacity 120ms ease;
}
.book-sidebar-search .aa-DetachedSearchButton:hover {
opacity: 1;
}
.book-sidebar-search .aa-DetachedSearchButtonIcon {
display: flex;
flex-shrink: 0;
}
.book-sidebar-search .aa-SubmitIcon {
width: 15px !important;
height: 15px !important;
}
.book-sidebar-search .aa-DetachedSearchButtonPlaceholder,
.book-sidebar-search .aa-DetachedSearchButtonQuery {
display: none;
}
/* 0, not 0.1rem — the last residual sliver once .book-sidebar-toc-row's
own margin-bottom (above) was zeroed to match #toc-title's zero
margin on the right rail; zeroing this too lands "Preface" flush
against "Table of Contents" the same way "Heading Level Two" already
sits flush against "Page Contents." */
#quarto-sidebar .sidebar-menu-container ul.mt-1 {
margin-top: 0 !important;
}
#quarto-sidebar .sidebar-menu-container {
/* Was padding-top: 0 (and no padding at all on the other three
sides) — a reader compared this box to a reference mockup and
pointed out the content ("Table of Contents" and the chapter
list) sat flush against all four of its own edges, confirmed
live (padding: 0px). The mockup's own "inner box" reads as
genuinely inset from its own boundary on every side, not just
visually close to the outer rail. This box's own outer footprint
is left alone (still positioned by .book-sidebar-content's own
padding, one level up) — only this element's own padding
changes, so the chapter list itself reflows a little narrower to
sit inset within the same box rather than the box growing to
accommodate it. */
padding: 0.75rem 1rem !important;
}
/* Docked rail only (≥1338px): 17px left/right, matching #toc-title's
own real inset on the opposite rail (confirmed live: 17px from
#quarto-margin-sidebar's own edges on every side, on the Table of
Contents page specifically) — not the 0 an earlier pass here briefly
used. That zeroing was aimed at a different, narrower comparison
(this box against .book-sidebar-title directly above it, both flush)
and did make those two match each other — but a reader's actual
reference all along was the opposite rail's own already-correct
inset, not flush-against-.book-sidebar-title. .book-sidebar-title's
own matching 17px (§ its own comment, below) keeps the two in sync
with each other again, now both matching the right rail's real
value instead of both matching a flush edge that was never the
target. Every narrower view (true mobile, the 800–1337.98px popup)
keeps the shared rule's own 1rem, unrelated to this comparison and
already tuned separately.
padding-top reverted to the shared rule's own 0.75rem (was briefly
1.5rem): that doubling was aimed at the same superseded flush-title
comparison above, and it pushed "Table of Contents" 12.75px lower
than #toc-title/"Page Contents" on the opposite rail — confirmed
live, a reader compared the two side by side and found them
visibly misaligned, off by exactly the one extra 0.75rem this
rule had added. Back to 0.75rem lines the two up again. */
@media (min-width: 1338px) {
#quarto-sidebar .sidebar-menu-container {
padding-left: 17px !important;
padding-right: 17px !important;
padding-top: 0.75rem !important;
}
}
/* True mobile only (below 800px): the off-canvas drawer's own chapter
titles need to reach further right, flush with .book-mobile-brand's
own right edge — stacked on top of .book-sidebar-content's own 27px
right padding, the combined inset otherwise left chapter titles
ending well short of the drawer's own "The Inversion of Greatness"
title above it. A flat, unscoped version of this same override
previously also hit the ALWAYS-DOCKED ≥1338px sidebar by accident —
a reader confirmed that rail used to be exactly 255px wide, lined up
precisely under the title, and this same change had silently
widened it. Scoping the override to the compact range (max-width:
1337.98px) fixed that, but that same range also covers the Compact-
mode anchored POPUP (800-1337.98px, a different UI entirely, no
.book-mobile-brand title sitting above it to align with) — the zero
right-padding leaked in there too, on request compared directly
against the Page Contents popup: "the table of contents needs a
little bit more padding out to the right... it's too close to the
right edge." Narrowed to max-width: 799.98px, matching only the true
off-canvas drawer this was actually written for; Compact mode's own
popup now keeps the base rule's symmetric 0.75rem/1rem padding on
all four sides, same as it had before this override ever existed. */
@media (max-width: 799.98px) {
#quarto-sidebar .sidebar-menu-container {
padding-right: 0 !important;
}
}
/* !important: this element's own class="sidebar margin-sidebar"
(confirmed live) puts it inside the same broad .sidebar, #quarto-
sidebar, ... selector (§9 above) that still sets a flat
--book-chrome-bg-solid fill — same fix #quarto-sidebar itself needed
for the exact same reason. Scoped to ≥1200px, same as that fix —
below that width this element is a completely different thing (§24:
an off-canvas drawer sliding in over the page, background-color:
var(--book-chrome-bg-solid) set explicitly in that same section),
and this unscoped override was beating that explicit color anyway
(!important vs. none), making the open drawer fully transparent —
confirmed live via getComputedStyle (rgba(0, 0, 0, 0)) and by
screenshot: the reading column's own text visibly bled straight
through it, exactly the "translucent, needs to not be" a reader
reported. */
@media (min-width: 1120px) {
#quarto-margin-sidebar {
background-color: transparent !important;
}
}
#quarto-margin-sidebar {
/* No background/border of its own anymore — split into two separate
boxes on request, same as the left rail (§9 above has the full
reasoning): .book-margin-tools (the icon row, below) and nav#TOC
(the chapter-contents list, below) each carry their own now,
with the gap between them being wherever .book-margin-tools's own
existing margin-bottom already fell. This element goes back to
being a plain positioning container.
min-height: 100vh removed — with a background that now actually
reads as a distinct panel instead of matching the page exactly,
forcing this box to always run the full viewport height left a
short chapter's TOC (a handful of entries) sitting inside a tall
panel that dead-ended in a large blank area below it, the same
"not a block" complaint a reader raised about a bare content-
length mismatch even before this panel treatment existed. Auto
height instead — this rail now closes around whatever it
actually holds, the same way the left rail already does.
padding-top: var(--book-navbar-height, 52px), not a flat 2.1rem —
this unscoped default was quietly the only rule covering the
800–991.98px gap between the transition range's own explicit
override (§ below, 992–1199.98px) and the true-mobile one (§21,
below 799.98px), landing nav#TOC's content ~36px lower than the
header there. Tracking --book-navbar-height instead lands it
flush with the header's own live height in that gap the same way
the ≥1200px docked rail (§24) and the two explicitly-scoped
ranges below now do — a reader compared this rail to the left
one and asked for both flush with the reading column's own top,
at every width, not just ≥1200px. */
padding-top: var(--book-navbar-height, 52px);
padding-left: 1rem;
padding-right: 0.5rem;
/* No max-width cap: the element's own width (set below, ≥1200px) and
the grid track it sits in (body-end/page-end) both read the same
--book-margin-w variable, so they can't drift apart the way a
literal fixed width once did against a narrower track. Letting
this grow unbounded is intentional — on very wide displays the
sidebar should never wrap. */
}
/* Compact mode's own anchored-popup form (800-1337.98px, § the two
ranges below) doesn't need this outer inset at all — nav#TOC inside
it already carries its own full padding: 0.75rem 1rem !important
(§ its own comment), so the two layers stacked: this element's own
1rem/0.5rem PLUS nav#TOC's own 1rem/0.75rem on top of it, well over
double the single-layer inset the left ToC popup uses (its own
.sidebar-menu-container padding, nothing above it). Confirmed live
directly against that popup, on request: "there's way too much
space on the outside... it needs to be looking the same as the
table of contents." Zeroed here, leaving nav#TOC's own padding as
the only layer — same single-layer structure as the left popup,
not attempting to hand-tune two stacked values into looking right
together. Left alone at every other width (≥1338px docked, <800px
drawer) — neither of those stacks with nav#TOC the same way, since
the popup-specific version of nav#TOC's own padding only exists in
this one range. */
@media (min-width: 800px) and (max-width: 1337.98px) {
#quarto-margin-sidebar {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* A "bleed the panel color out to the true viewport edge" mechanism
used to live here (originally a box-shadow: 9999px 0 0 9999px trick,
later a ::after pseudo-element after that shadow's own spread turned
into a giant, wrongly-tall gray block once this box stopped being
forced to min-height: 100vh) — removed outright rather than patched
a third time. Its whole premise was "for whenever this box's own
rendered width is narrower than the grid track it sits in," but
--book-margin-w drives both this box's width (below) and that same
grid track's own size (§19c's grid-template-columns) — the same
variable, not two that could independently drift — so the gap it
was defending against can't actually occur. The pseudo-element
version's own 9999px width also turned out to silently count toward
this box's scrollable overflow (its overflow-y: auto below promotes
overflow-x to auto too, per the CSS Overflow spec, once one axis
isn't visible), creating a phantom horizontal scrollbar confirmed
live as a reader's own report — a second bug from code defending
against a scenario the CSS itself doesn't allow. */
/* Font/Layout/Palette/Dim-margin — moved here from the navbar
(include-after-body script's marginToolsHome) so the right sidebar
reads the same "one static block" way the left one does: tools on
top, Page Contents below. Reuses .book-quick-toggle/.book-settings-
dropdown as-is (their own styling was never navbar-specific — only
their old container's positioning was, which this replaces). */
.book-margin-tools {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 1.25rem;
/* No longer a boxed panel — see .book-sidebar-title's matching
comment (§9): pulled out of the rail's own flow (≥1200px
fixed-position rule, §23) to float in line with the navbar's
nav-link row, transparent instead of boxed. */
background-color: transparent;
border: none;
}
/* Tried a Notes-mode-specific background + box-shadow halo here at one
point, on the theory that a solid fill on this box would mask
scrolling notes behind it. Removed — that theory was wrong:
.book-margin-tools is itself position: fixed with its own z-index
(1071, confirmed live via getComputedStyle) — one BELOW the note
overlay's 1072, so it loses that comparison directly regardless of
what background or box-shadow sits on it, or what #quarto-margin-
sidebar's own (higher, 1075) z-index is: an independently fixed-
position element competes on its OWN z-index, not its ancestor's.
The visible "fix" earlier only ever held on pages that also happened
to have #book-margin-fade-scrim active (a genuine sibling of the
overlay at the right stacking level — see that element's own
comment, just below) — the scrim was always the real, working fix
for this row; it's been widened to cover this box and extended down
to cover #toc-title below it too, once both turned out to need it. */
.book-settings-dropdown {
position: relative;
}
#quarto-margin-sidebar nav,
#quarto-margin-sidebar nav#TOC {
width: 100%;
max-width: none;
/* Matches .sidebar-menu-container's own background (§9, the left
rail's chapter list) — that rule's flat --book-chrome-bg-solid
fill sits on top of the lightened panel color the outer #quarto-
sidebar itself now uses, reading as a distinct "box within the
box" around the list specifically. This rail's own TOC list had
no matching fill at all (fully transparent, just showing the
lightened panel straight through), so the two rails read as
structurally different — a reader wanted both to actually match:
same box, same width, under each rail's own label. No border —
briefly matched .sidebar-menu-container's own border when that
still had one, removed from both on the same later request once
each box had settled into its final position. */
background-color: var(--book-chrome-bg-solid);
}
/* Same "content sat flush against every one of this box's own edges"
fix as .sidebar-menu-container's matching comment (§9) — padding on
nav#TOC specifically (not the bare nav selector above, to avoid
touching some other unrelated nav this rail might ever contain),
same values as the left rail's own box so the two read as genuinely
symmetric insets, not just matching outer footprints. */
#quarto-margin-sidebar nav#TOC {
padding: 0.75rem 1rem !important;
}
/* Compact mode's own anchored popup (1120-1337.98px — narrowed down
from the old 800-1337.98px once 800-1119.98px got its own true
sliding drawer instead, § #quarto-margin-sidebar's matching
800-1119.98px block above; that range now has its own dedicated
alignment rule below rather than sharing this one) needs its own
top padding tightened to match — the left popup's inner box drops
to padding-top: 5px in this range, but nav#TOC here kept the
unscoped 0.75rem/12px above, landing its content 7px lower than the
left popup's relative to each popup's own (near-identical)
icon-anchored top offset. Confirmed live and directly reported:
"table of contents... lines up perfectly with the icon, whereas
page contents... does not." Placed after the base rule above so it
actually wins — same specificity, later source order. */
@media (min-width: 1120px) and (max-width: 1337.98px) {
#quarto-margin-sidebar nav#TOC {
padding-top: 5px !important;
}
}
/* 800-1119.98px: a first pass here tried to line this rail's title up
pixel-for-pixel with .book-floating-margin-toggle's own floating
position (the icon that opens this drawer), deriving a calc()
formula from the toggle's own right: position. Reverted on further
request: this drawer needs to "still look like the sliding menus
from mobile modes... that same appearance" — true mobile's own
version doesn't chase its trigger button's position at all, it just
uses a plain fixed inset, and chasing the icon here specifically
had a real cost besides being the wrong look: the icon sits deep
enough into the drawer (positioned relative to the READING COLUMN's
own varying edge, not this drawer, which has its own separately
variable min(300px, 85vw) width) that matching it consumed most of
the drawer's own width, truncating longer entries ("1.1.1 Reali...",
confirmed live). A second pass then left this at the plain 34px
stack (#quarto-margin-sidebar's own base padding-left: 1rem + nav#TOC's
own base 0.75rem 1rem, no override needed), reasoning it matched true
mobile's own left rail — reverted again, on a more specific request:
the actual reference should be how far the docked rail's own content
sits from the READING COLUMN, not an unrelated true-mobile figure.
Confirmed live at 1600px: 10px between the reading column and the
docked #quarto-margin-sidebar box itself, plus 17px more inside that
box before nav#TOC's own text — 27px total, not 34px. A third pass
then set padding-left: 10px here, on the assumption it would stack
with #quarto-margin-sidebar's own unchanged base padding-left: 1rem
to reach that same 27px (17 + 10) — wrong assumption, confirmed live:
this rail's OUTER padding-left is actually 0px at this width, not
17px, because a wider, older rule (§ its own comment, "Compact mode's
own anchored-popup form (800-1337.98px)... zeroed here") predates
this session's split of that single 800-1337.98px range into this
drawer (800-1119.98px) plus Compact's own separate popup
(1120-1337.98px) and still covers both. That rule's own reasoning
("nav#TOC's own padding as the only layer") is exactly the pattern to
follow here too — nav#TOC just needs the FULL 27px itself, not a
second 10px expecting a nonexistent 17px to already be there:
"there's, like, no space between the menu and the left side column
edge... it's a dumpster fire over there." */
@media (min-width: 800px) and (max-width: 1119.98px) {
#quarto-margin-sidebar nav#TOC {
padding-left: 27px !important;
}
}
/* .book-floating-margin-toggle's own independent "peek" popup
(book-page-contents-peek-open, the force-show-nav#TOC-directly
mechanism this whole block once was) is retired — the icon now
proxies to the real .mobile-margin-toggle button instead (resources/
book-scripts.html), reusing #quarto-margin-sidebar's own true
edge-sliding drawer (§ its own 800–1119.98px block) the same way
.book-floating-sidebar-toggle already proxies to the real sidebar
toggle on the left. On request: "I want those two to bring out the
menus from the sides... similar to the mobile thing, instead of the
popups." Nothing sets book-page-contents-peek-open anymore
(confirmed live via a full grep of resources/book-scripts.html), so
removed rather than left as unreachable dead weight. */
/* TOC entries read as plain chrome text by default (always-dark
sidebar, not toggle-following); only the active (currently
scrolled-to) section is gold — same "one gold word" pattern as the
chapter-list sidebar below. */
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > a {
color: var(--book-chrome-text) !important;
border-left-color: var(--book-chrome-scrollbar) !important;
}
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > a:hover,
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > a.active,
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
color: var(--book-chrome-text-hover) !important;
}
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > a.active,
#quarto-margin-sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
border-left-color: var(--book-chrome-text-hover) !important;
}
/* Match the "Table of contents" heading to the sidebar's own nav-link
style (e.g. "About") instead of the generic, larger/bolder h2. Same
box model as .book-sidebar-brand ("Table of Contents," the left
rail's own header) now too, not just the same font — a reader
compared the two live and found this one sitting in a visibly
shorter, flush-top box (0 padding, just a margin-bottom pushing the
list below it down) while the left one sat centered in a taller,
padded box (0.4rem top and bottom) — different objects wearing the
same font, not actually "the same kind of object" the way a reader
wanted. padding-top/-bottom: 0.4rem replaces the old margin-bottom:
0.4rem here — same visual gap before the list below, now produced
the same way (padding inside this element's own box) instead of a
margin outside it. color switched from color + a separate opacity:
0.6 to one rgba() value for the same reason .book-sidebar-brand's
own color already moved off opacity earlier — opacity here was
harmless (this element was never wide enough to show the whole-box
compositing artifact that fix was for), but the two headers being
textually identical CSS, not just visually similar, is the actual
ask. text-align is the one deliberate difference left standing: the
left header sits right-aligned next to its own search icon in a
shared row and matches the chapter list's own dot-leader edge; this
one stays left-aligned to match the plain Page/Chapter Contents
list directly below it, which has no equivalent right edge to
match. */
#toc-title {
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-size: 0.83rem;
font-weight: 400;
font-style: normal;
color: rgba(var(--book-chrome-text-rgb), 0.6);
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin: 0;
border: none;
}
/* The bi-stickies icon Margin Notes mode prepends to this label
(resources/book-scripts.html, syncTocTitle) — sized and spaced to
sit as a plain inline glyph before the text, not a separate button:
currentColor + the label's own rgba() alpha (rather than a flat
color of its own) keeps it exactly as dim/bright as the text next
to it in both themes, matching every other icon-plus-label pairing
in this file that reuses the label's own color instead of hardcoding
a second one. */
#toc-title i.bi {
color: currentColor;
font-size: 0.85em;
margin-right: 0.3em;
vertical-align: -0.05em;
}
/* Tried the same solid-backdrop fix here as .book-margin-tools once
had (that rule's own comment, above, has the full history of why it
didn't work) — removed for the same reason. #toc-title lives inside
nav#TOC, which is ALSO independently position: fixed with its own
z-index (1020, confirmed live — even further below the note
overlay's 1072 than .book-margin-tools's own 1071 was), so no
background on this element could ever actually win either. A reader
drew the fix that actually works directly on a screenshot: one box
covering the icon row AND this label, not two separate patches with
a gap between them — #book-margin-fade-scrim (below) is that one
box, widened and extended down to reach this label's own bottom
edge. */
#quarto-margin-sidebar::-webkit-scrollbar {
width: 4px;
}
#quarto-margin-sidebar::-webkit-scrollbar-thumb {
background: var(--book-chrome-scrollbar);
border-radius: 2px;
}
#quarto-margin-sidebar::-webkit-scrollbar-track {
background: transparent;
}
/* (collapsible TOC removed) */
/* Make the flex container stretch to fill the full viewport so
main.content can grow to match it. */
#quarto-content {
padding-top: 0 !important;
margin-top: 0 !important;
min-height: 100vh;
align-items: stretch !important;
}
/* An earlier pass here zeroed out the flexible outer margins Quarto's
grid uses to center the whole reading experience above ~1367px, on the
theory that the empty column before the left sidebar was what made it
read as "floating." That traded away the centering on wide screens for
no real gain — turned out the felt disconnect was about the sidebar
header's own spacing, not the screen-edge distance (see .book-sidebar-brand
below). Reverted; Quarto's native centering is back. */
main.content,
#quarto-document-content {
background-color: var(--book-bg);
/* Faint paper-grain texture (procyon.css, --book-paper-texture) —
falls back to none in dark mode/any theme that doesn't declare
it, so this is safe to apply unconditionally. background-repeat
explicit since the SVG's own natural tiling would otherwise
depend on this property's initial value being "repeat" (it is,
but not worth relying on implicitly for something this visible). */
background-image: var(--book-paper-texture, none);
background-repeat: repeat;
padding-top: 2rem !important;
/* 75px — the reading column's own outer box is 800px, and the
actual prose measure is what's asked to be a specific width
(650px), achieved by padding inward from that fixed outer frame
rather than shrinking the frame/border itself: 800 - 650 = 150px
total, 75px per side. */
padding-left: 75px !important;
padding-right: 75px !important;
padding-bottom: 4rem !important;
margin-top: 0 !important;
border-left: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
/* flex: 1 lets the column grow to fill #quarto-content's height;
min-height: 100% as fallback for non-flex contexts. */
flex: 1 0 auto;
min-height: 100%;
}
/* #quarto-document-content.page-full (any page with a real margin
note — see the .page-full notes elsewhere in this file) spans the
ENTIRE page width by design, not just the reading column — so its
own background-color/border-left/border-right/box-shadow above,
which assume they're painting a narrow constrained column, instead
paint across the FULL width, covering the margin gutter that should
show the page's own dark chrome background through (confirmed live:
a bright white slab where a dark gap was expected, only on pages
with a margin note — Home, with none, was never affected). Reset
all four to nothing here, and recreate them on a ::before sized to
the actual body-content-start/body-content-end grid track instead
— the same narrow-track trick every other page-full fix in this
file already relies on. z-index: -1 keeps it behind the real text
content, which still renders directly on #quarto-document-content
itself. */
#quarto-document-content.page-full {
/* !important on all four: confirmed live that #quarto-document-
content's background is pure white (255,255,255) — not even this
file's own intended var(--book-bg) cream — on EVERY page, page-
full or not, meaning some Quarto-bundled rule already beats this
file's own plain (non-!important) background-color declaration
above unconditionally. That pre-existing loss is invisible on a
narrow, non-page-full reading column (white vs. cream reads as
indistinguishable there) but became the actual white-bleed bug
once page-full made this box span the full page width — and it
meant this reset needed !important too, or it would lose to that
same Quarto rule exactly the way the base declaration already
does. */
background-color: transparent !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
position: relative;
/* padding-left/-right: 0 — the base rule above (non-page-full pages)
uses a flat 75px side padding as its ENTIRE mechanism for producing
a narrower reading column out of a normally-full-width box; that's
fine there since the box itself is never wider than body-content-
start/-end (800px) to begin with. On a page-full page this box is
ALSO stamped full-bleed (screen-start/screen-end, Quarto's own
generic .page-full rule) — its OWN nested grid (§19c) and the
max-width: 650px + margin: auto rule on its direct children (both
elsewhere in this file) already do the real work of narrowing the
reading column back down, at whatever width the viewport actually
is. The inherited 75px padding was never zeroed for this case, so
it was ALSO eating 150px total out of this box's own content area
before either of those two newer mechanisms even started — harmless
at ≥1200px where there's slack to spare (the outer minmax(0, 1fr)
flex tracks just absorbed the difference, still reading as
centered), but confirmed live as the actual cause of a real bug in
the 800–991.98px range: with only ~797px of padded content area
left to fit an 800px fixed track into, the grid ran out of room to
flex-center in and fell back to anchoring at its own start edge —
"the reading content to the left, the background to the right," a
reader's own description of exactly this. */
padding-left: 0 !important;
padding-right: 0 !important;
}
#quarto-document-content.page-full::before {
content: "";
position: absolute;
/* Horizontal placement used to be grid-column: body-content-start /
body-content-end — correct in principle (#quarto-document-content
is display: grid, so a grid-column value places this pseudo
against the same named tracks the sidebars' own CSS calc()
formula also targets), but confirmed live as unreliable in
practice: at some viewport widths (1420px, not 1357 or 1609,
the only two this had been checked at) the cream fill only
painted down to some point partway down the page before reverting
to plain dark page background for the rest of the column, with NO
element or rule of any kind found sitting on top of it — every
introspection technique (elementsFromPoint at a grid of y values,
a full-document element scan for anything covering the same
point, computed style of the pseudo itself) agreed the pseudo's
own geometry was exactly correct (800px wide, full page height,
cream background-color) right up until the point it visibly
wasn't. That combination — computed style correct, actual paint
wrong, only at specific widths — points at a genuine interaction
between being simultaneously a grid item (via grid-column) AND
absolutely positioned with unset grid-row (relying on the grid's
own auto-placement/sizing algorithm for anything grid-row doesn't
pin down), not a value this file's own CSS was setting wrong.
Rather than debug that interaction further, this drops out of
grid placement entirely: left/width now read the exact same
--book-navbar-bar-left/-width variables the sidebars' own CSS
calc() already depends on (JS-measured off the real reading
column, resources/book-scripts.html's setBarBounds) — the same
"measure the one true position live, don't make two systems
agree on it independently" approach already used everywhere else
the reading column's position matters. With all four position
properties (top/right-via-width/bottom/left) explicitly set to
non-auto values, this element's rendered box is determined
entirely by them, regardless of whatever grid-row auto-placement
would otherwise have contributed — sidestepping the ambiguity
instead of resolving it. */
left: var(--book-navbar-bar-left, 0px);
width: var(--book-navbar-bar-width, 800px);
/* #quarto-document-content's own box starts at the true top of the
page (y: 0, confirmed live), not below the fixed navbar — normal
for a page-full element sized to the whole document, and correct
for THIS box to extend that high too so it doesn't run out before
reaching the actual top of the reading column once scrolled. The
navbar itself (#quarto-header, §19) floats on top with a
deliberately transparent background of its own (a "translucent
pill," not a solid bar — brand text and the icon row are
separately floated pieces with no backdrop of their own, by
design), relying on whatever sits behind it at y: 0–52px to
already read as plain dark chrome. Confirmed live: with this
box's top at 0 too, its cream fill sits directly behind those
same transparent gaps, showing through as two stray pale patches
in an otherwise dark bar — a reader spotted it as a genuine
visual bug, not a screenshot artifact (ruled out by hiding this
pseudo-element entirely and watching both patches disappear).
Insetting just the top by the navbar's own live-measured height
stops this box from ever painting behind the navbar at all, so
whatever's actually there — the plain dark page background — is
what shows through the navbar's transparent gaps instead, while
every other requirement (full height for the rest of the page,
correct body-content-start/-end width below) is untouched. */
top: var(--book-navbar-height, 52px);
bottom: 0;
background-color: var(--book-bg);
/* Same paper-grain texture as the non-page-full rule above — this
pseudo is what actually paints the reading column's background
on any page WITH a margin note, so it needs its own copy of the
same two declarations, not just the base rule. */
background-image: var(--book-paper-texture, none);
background-repeat: repeat;
border-left: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
z-index: -1;
}
/* A same-day first attempt at fixing this pseudo's own left/width
below 1200px lived here — a pure-CSS media-query override
(min(800px, calc(100vw - 28px)), mirroring the reading column's own
grid formula) meant to route around setBarBounds() never having
measured on a page loaded directly below 992px. Reverted: raw 100vw
includes the vertical scrollbar's own width in some browsers, a trap
this file's own --book-viewport-width comment already documents
elsewhere — confirmed live as a real mismatch against the grid's own
true rendered width (which measures the scrollbar-excluded
clientWidth), not just a headless-testing artifact. The actual fix
now lives in resources/book-scripts.html's setBarBounds() itself
(its own comment has the full account): it no longer skips measuring
below 992px, so left/width above are correct real DOM measurements
at every width, and this pseudo-element's own rule needed no CSS-side
special case at all once that was true. */
/* #quarto-document-content's own padding-left/-right (above) do
nothing on a page-full page: Quarto's own default grid-child rule
(.page-columns > * { grid-column: body-content-start / body-
content-end }) positions every DIRECT CHILD — the real title block,
each section, any bare paragraph — independently via that grid
track, which bypasses the parent's own padding box entirely (padding
only insets content that's actually laid out WITHIN the parent's
content box, not content grid-placed to an explicit track). Applying
the same padding directly to every direct child instead was the
first fix here, and it DID reach real text — a paragraph's own text
correctly wrapped at 650px — but padding only insets a box's
CONTENT, never the box itself, so anything a child draws at its own
border-box edge rather than flowing as content stayed at the full
800px track regardless: confirmed live, .home-title-divider's own
border-top (an empty div with no text to pad around) and every
section's own box both measured 800px wide even after the padding
fix, only the actual paragraph text inside them was narrower. A
width constraint on the box itself, not an inset around its
content, is what makes a border/background genuinely match the same
650px a reader sees text wrap at — max-width + auto margins centers
a real 650px box inside the 800px track (the same numeric 86px gap
the padding version produced, arrived at differently), so a bare
decorative div is exactly as narrow as a paragraph next to it, not
just optically similar because both happen to have text-free edges
at the same x-coordinate. */
#quarto-document-content.page-full > * {
max-width: 650px;
/* width: 100% alongside max-width, not max-width alone: a grid
item's own width: auto is supposed to stretch to fill its grid
area by default (justify-self: auto resolving to stretch), which
is what every OTHER direct child here does correctly — but
confirmed live, .home-title-text-emulation specifically (the big
home-page-style title block, centered text with two block
children of its own) came out shrink-wrapped to its own content
width (579px) instead, computed margin-left/-right both 0 rather
than the ~86px an actually-centered 650px box would need — some
interaction between its own text-align: center, its block
children, and grid stretch sizing that isn't worth chasing
further. An explicit width: 100% removes the ambiguity outright:
it fills the grid area first the same way a normal block child
would, and max-width then caps that at 650px same as everywhere
else, with margin: auto centering the result — one rule, not a
special case for the title alone. */
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Recursion, take three: a SECTION containing a margin note is itself
walked into .page-columns.page-full by the same Quarto build step
(see the .page-full notes elsewhere in this file). Two problems
from that, not one. First (chased across two earlier, now-abandoned
attempts — matching padding at this level too, which compounded
instead of matching; then grid-column: unset on its children, which
auto-placed them into the wrong 255px sidebar track) — that section
became its OWN nested grid, independently placing its children
again the same way page-full did one level up. Second, and the one
that was still live after "take two" below switched this section to
display: block: .page-full isn't just a marker this file reacts to,
it's a real Quarto utility class with its OWN grid-column:
screen-start / screen-end rule, generic and unscoped — it applies to
ANY element carrying it, not only the one #quarto-document-content
this file's own .page-full styling was written for. Confirmed live:
with the section merely set to display: block, its own grid-column
(inherited from that generic rule, since ITS parent — #quarto-
document-content — is still display: grid) resolved to the full
screen-start/screen-end span, not body-content-start/-end — so the
section itself rendered 1428px wide, full page-full bleed, and its
now-block children obediently filled that width (1256px measured
live, 1428 minus this section's own 172px padding). A section
containing a margin note was never meant to visually bleed full
width itself — only the ONE outer #quarto-document-content box
should do that — so its grid-column needs its own explicit
override back to the reading column's own track, not just a display
change.
The first problem (independent nested placement) still doesn't need
solving directly: the ONLY reason this section needed to be its own
grid at all was to resolve its .column-margin child's own
grid-column: body-end / page-end against real tracks, and that
child no longer lives here by the time a reader sees it —
resources/book-scripts.html now relocates every .book-annotation-
note into a genuine top-level overlay under #quarto-content (the
same technique already used for footnotes-in-the-margin below),
*before* anything reads this section's layout, at any width where a
docked margin rail exists to receive it. With no .column-margin
descendant left to place, display: block still stands: it flows the
section's remaining children (ordinary paragraphs) as normal block
content inside whatever box this rule gives the section, instead of
trying to grid-place them individually. Below the breakpoint where
the relocation script leaves notes in place instead (narrow widths,
where Quarto's own responsive stacking already handles a nested
.column-margin correctly on its own), both rules are harmless: a
single-column layout doesn't visibly differ between full-bleed and
body-content-width for content that's already 100% of a narrow
viewport either way. */
#quarto-document-content.page-full section.page-columns.page-full {
grid-column: body-content-start / body-content-end !important;
display: block;
}
/* Tabula Rasa only — the hardcoded #1a1a1a border/dark box-shadow
above is a literal, unconditional dark line down a page that's
otherwise deliberately all-white top to bottom (chrome included, see
that theme's own header comment in reader-themes-drafts.css) — a
reader asked for it gone specifically here, replaced with something
much quieter: a thin dotted line in the theme's own --book-border
gray, no shadow at all. */
html[data-book-theme="tabula-rasa"] main.content,
html[data-book-theme="tabula-rasa"] #quarto-document-content {
border-left: 1px dotted var(--book-border);
border-right: 1px dotted var(--book-border);
box-shadow: none;
}
/* Default Procyon Light only — plain flat white. Used to carry a
pure-CSS paper texture here (two soft off-center radial-gradient
highlights over first a diagonal crosshatch, then briefly an SVG
feTurbulence grain) — a reader tried both, decided neither was worth
chasing further right now, and asked for plain white instead. Kept
scoped to html:not([data-book-theme]) body:not(.quarto-dark) rather
than folding this into --book-bg directly, in case a textured
version is worth revisiting later; this rule is the one place that
would go. */
html:not([data-book-theme]) body:not(.quarto-dark) main.content,
html:not([data-book-theme]) body:not(.quarto-dark) #quarto-document-content {
background-color: #ffffff;
}
/* Zero out Quarto's forced 1em top padding on the first sidebar child */
#quarto-sidebar.sidebar-navigation > *:first-child,
#quarto-sidebar .sidebar-item-section {
padding-top: 0 !important;
}
/* Hide individual group headers (Front Matter / Chapters / Back Matter) —
replaced by a single "Book Contents" label injected via JS */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container {
display: none !important;
}
/* Hide Quarto's natively rendered sidebar title — JS injects .book-sidebar-brand instead */
#quarto-sidebar .sidebar-brand:not(.book-sidebar-brand) {
display: none !important;
}
.book-sidebar-brand {
display: block;
/* Flex child of .book-sidebar-toc-row now, sharing the row with the
search icon beside it — flex: 1 so it still fills the row's
remaining width and text-align: right still lands it on the same
right edge the chapter list's own dot-leaders use. */
flex: 1 1 auto;
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-size: 0.83rem;
font-weight: 400;
font-style: normal;
/* rgba color, not color: var(--book-chrome-text) + opacity: 0.6 —
opacity on the element composited this whole link (a wide flex: 1
box, stretched to fill the row well past its own right-aligned
text — confirmed live via getBoundingClientRect()) as one
semi-transparent group, and rendering that group apparently left
a faint rectangular seam across the box's own empty flex space, a
reader spotted as looking like "a shadow below the words" that
#toc-title (plain text, no opacity-driven stacking context of its
own, and never stretched wider than its own text either) never
had. Confirmed live: setting this element's opacity back to 1
made the visible band disappear entirely. Baking the same 0.6
dimming into the color's own alpha instead only affects the
glyphs themselves — no stacking context, no compositing buffer
sized to the whole (mostly empty) flex box, no artifact. */
color: rgba(var(--book-chrome-text-rgb), 0.6) !important;
text-decoration: none;
/* !important on both: Quarto forces a 1em top padding on sidebar
children (see the zero-out rule below, "Zero out Quarto's forced
1em top padding on the first sidebar child") — that rule only
matches :first-child, but this label isn't the DOM's first child
(Quarto's own hidden .sidebar-brand precedes it), so the 1em still
won, at !important, over this rule's plain (non-important)
padding-top. padding-top used to be 0.98rem specifically to match
this label's own top edge against #toc-title's, back when this
was the very top of the left sidebar's own content — moot now
that the title/search block sits above it (a reader wanted this
label to sit closer to the search bar instead, tightening the
rhythm between the two, not aligned against the other sidebar
anymore). */
padding-top: 0.4rem !important;
padding-bottom: 0.4rem !important;
text-align: right;
border: none;
}
/* Gold the "Table of Contents" label whenever the current page has no
visible entry of its own in the left-hand chapter spine — the home
page, and every page reached only through a navbar dropdown
(Appendices, References, Resources, Author's Notes, In Plain Terms).
Doubles as a signal that clicking the label (now a real link to the
Table of Contents page) gets you back to an overview. body.no-active-chapter is set by the
include-after-body script in _quarto.yml, in the same pass that hides
those pages' entries from the sidebar — see the comment there. Reverts
automatically the moment you're on a page that DOES have a visible
sidebar entry: that entry picks up the gold instead, via the existing
.sidebar-link.active / .sidebar-item-text.active rules. */
body.no-active-chapter .book-sidebar-brand {
color: var(--book-chrome-text-hover) !important;
}
/* Single "Book Contents" label at the top of the left sidebar */
.sidebar-book-label {
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-size: 0.83rem;
font-weight: 400;
font-style: normal;
color: var(--book-chrome-text);
opacity: 0.6;
padding-top: 0.3rem;
padding-bottom: 0.4rem;
display: block;
text-align: right;
border: none;
}
/* Left sidebar chapter list — right-aligned, flush to content edge */
#quarto-sidebar .sidebar-item-text,
#quarto-sidebar .sidebar-link,
#quarto-sidebar .menu-text {
text-align: right;
font-size: var(--book-sidebar-font-size);
font-weight: 400;
line-height: 1.3;
border: none !important;
text-decoration: none !important;
}
/* Chapter number pinned to the row's left edge, title pinned to the
right, a classic table-of-contents leader line filling the gap
between them — sidebar-chapter-numbers.js splits "1. Groundwork"
into a .sidebar-chapter-num span ("1."), an empty flex-grow
.sidebar-chapter-leader span, and a .sidebar-chapter-title-text span
("Groundwork"), and adds .has-chapter-num to the row itself at the
same time. No justify-content needed: the leader's flex: 1 1 auto
absorbs whatever space num + title don't use, which both spreads
the row and draws the connecting line in one mechanism — the same
reason this reads as an actual TOC leader instead of a fixed-length
rule that would overshoot short titles or fall short of long ones.
Two selectors, not one: .has-chapter-num is the primary one (:has()
isn't supported in every browser still in real use, and where it
silently fails to match, this whole rule stopped applying and rows
fell back to plain left-aligned block flow instead of right-aligning
to the shared edge — confirmed live as a real bug, not a theoretical
one). :has(.sidebar-chapter-num) stays alongside it as a second,
independent path to the same rule — belt and suspenders against the
class ever not being on the element yet for any reason (a stale
render, a page loaded from an older build, etc.), since both
selectors converge on identical styling either way.
width: 100% — not a capped clamp() width anymore. A capped width
plus margin-left: auto still lands the row's own right edge flush
(a plain, universally-supported CSS mechanic — a block box with a
set width and margin-left: auto pushes flush right within its
containing block, no flex-parent needed), but it left this row a
genuinely different width (230px) than title/search/TOC (253px+),
which read as suspect/inconsistent even though the right edges
still matched. 100% removes that entirely: this row is now exactly
as wide as every sibling in the shared box, no separate width
value left to distrust. The leader span's flex: 1 1 auto still
fills whatever's left between number and title either way — a
short title like "Preface" just gets a longer dot-leader now
instead of the row itself staying narrow. */
#quarto-sidebar .chapter-title.has-chapter-num,
#quarto-sidebar .chapter-title:has(.sidebar-chapter-num) {
display: flex;
align-items: baseline;
width: 100%;
}
/* Subdued relative to the title text — a quiet label, not a second
focal point competing with the chapter name for attention. Same
trick as the flourish/footer text elsewhere on the site: opacity
down, not a whole new color. Nested inside the sidebar item's own
0.88 opacity (line below), so the effective result is dimmer still. */
#quarto-sidebar .sidebar-chapter-num {
opacity: var(--book-sidebar-num-opacity);
font-size: var(--book-sidebar-num-font-size);
}
/* The leader line itself — height: 0 plus align-self: baseline sits
its border-bottom right at the text baseline, the same height a
printed TOC's dot leader runs at. Small dots (border-style: dotted,
not a solid rule) reads as classic TOC leader rather than a divider.
Same color and opacity as .sidebar-chapter-num just above — opacity
on the element itself, not baked into the border color, so it stays
in lockstep with the number if that variable ever changes. */
#quarto-sidebar .sidebar-chapter-leader {
flex: 1 1 auto;
height: 0;
align-self: baseline;
border-bottom: 1px dotted var(--book-chrome-text);
/* Its own opacity, dimmer than the number's — asked to be lighter
independently of the number/letter, not tied to it. */
opacity: var(--book-sidebar-leader-opacity);
margin: 0 0.5em;
}
#quarto-sidebar .sidebar-item-container,
#quarto-sidebar .sidebar-link,
#quarto-sidebar .sidebar-item-text {
color: var(--book-chrome-text) !important;
opacity: 0.88;
}
#quarto-sidebar .sidebar-item-container:hover,
#quarto-sidebar .sidebar-item-container:focus,
#quarto-sidebar .sidebar-link:hover,
#quarto-sidebar .sidebar-link:focus,
#quarto-sidebar .sidebar-item-text:hover,
#quarto-sidebar .sidebar-item-text:focus {
color: var(--book-chrome-text) !important;
opacity: 1;
}
#quarto-sidebar .sidebar-link.active,
#quarto-sidebar .sidebar-item-text.active {
color: var(--book-chrome-text-hover) !important;
opacity: 1;
}
/* The container div matched above (line ~707) also gets opacity:0.88 from
that same shared rule — resetting the active itself to opacity:1
isn't enough, since CSS opacity compounds down the tree: a
fully-opaque child inside an 0.88-opaque parent still renders at 88%.
That's what made the left sidebar's gold read visibly duller than the
right sidebar's TOC gold, which has no such wrapping element to dim it.
Reset the container too whenever it holds the active link. */
#quarto-sidebar .sidebar-item-container:has(> .sidebar-link.active),
#quarto-sidebar .sidebar-item-container:has(> .sidebar-item-text.active) {
opacity: 1;
}
/* Right-side chapter indicator — mirrors the right sidebar's scrollspy spine */
#quarto-sidebar .sidebar-item-container a {
border-right: 2px solid rgba(var(--book-chrome-text-rgb), 0.08);
}
#quarto-sidebar .sidebar-item-container a.sidebar-link.active,
#quarto-sidebar .sidebar-item-container a.sidebar-item-text.active {
border-right-color: var(--book-chrome-text-hover);
}
#quarto-sidebar .sidebar-item {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
#quarto-sidebar .sidebar-section,
#quarto-sidebar .sidebar-item-container {
margin: 0;
padding-bottom: 0;
}
/* Quarto's own bundled Bootstrap CSS gives .sidebar-section a plain
padding-left: 0.5em (indentation for nested TOC sub-levels) —
confirmed live via document.styleSheets — which was silently
narrowing every chapter row's available width by that same 0.5em
(measured ~7px), the actual reason chapter rows kept computing a
different width than title/search/"Table of Contents" even after
both were set to the same width: 100% — 100% of a narrower content
box is still narrower. Zeroed here so the row's own width: 100%
(above) resolves against the full, unindented box, matching every
other sidebar element exactly. */
#quarto-sidebar .sidebar-section {
padding-left: 0;
}
/* Match left sidebar item spacing to right sidebar (0.2rem top/bottom) */
#quarto-sidebar .sidebar-item-container a {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
display: block;
}
/* Breadcrumbs — hide the part breadcrumb Quarto generates for part: groups */
.quarto-breadcrumbs,
nav[aria-label="breadcrumb"],
ol.breadcrumb {
display: none !important;
}
/* Hide the Bootstrap collapse toggles on left sidebar group headers */
#quarto-sidebar .sidebar-item-toggle {
display: none !important;
}
/* Chrome moved to the top navbar (Author's Notes / Resources /
Appendices / References menus) — hidden here so the
docked sidebar holds only the linear reading spine (Preface through
Excursus). Subject Index, Bibliography, Glossary, Notes, and Symbols
moved to the navbar's "References" dropdown the same way, leaving
nothing left in the sidebar's old Back Matter part. These
pages still have to stay listed under book.chapters: in _quarto.yml for
Quarto to render them at all (book projects only render chapters
explicitly in that manifest); this just keeps them out of the left
rail. Quarto flattens every chapter's output to the site root
regardless of its source subdirectory (book/front-copyright.qmd renders
to /front-copyright.html, not /book/front-copyright.html) and Netlify's
pretty-URL post-processing then strips the ".html" on top of that for
the live site (see the include-after-body script below) — so each
selector below matches both the bare local-preview form and the
extensionless live form, with no "/book/" or "/site/" prefix in either.
A previous version of this rule hardcoded a "/book/" prefix that never
matches Quarto's actual (flattened) output, so this CSS was silently
inert on every build and 100% of the hiding was resting on the
include-after-body script — which only runs after the page parses,
producing a visible flash of the full, ungrouped chapter list on every
navigation before JS caught up. Fixed selectors mean CSS now does the
hiding itself, which the browser applies before first paint, same as
any other rule in this stylesheet — no JS wait, no flash. The
Resources part (Connect/License/How to Cite/Changelog) has no
href of its own on its part header — it's a pure divider — so it's
matched instead via a nested link unique to that group (":has()"
matches descendants at any depth, not just direct children — so
matching on Connect's own href hides the whole shared with no such mixed-size line to share, and
reads with better spacing between its own wrapped lines as a
result. p/li's own site-wide line-height (1.7, unitless) is
inherited here as a NUMBER, so it already scales with this span's
own smaller font-size rather than the title's larger one — same
ratio, not the bug — but a genuinely comfortable wrap for text
this small still wants a taller ratio than body prose does, not
just the same one scaled down. On request: "the line height
should be based on the smaller text... except for the top line,"
i.e. the shared first line (title + start of description) stays
whatever it already is; this only changes how this span's own
later, description-only lines space themselves. 1.95 tried
first — overshot: "the gap... needs to be closed a little bit,"
a reader's own direct comparison against "6.4 Cognition"'s own
two-line wrap. 1.8 is a smaller step up from the page's own 1.7
body-text baseline than that first attempt was, not a reversion
all the way back to it. */
line-height: 1.8;
}
/* Nested (third-tier) entries — "Awareness," "Knowledge," "Holiness,"
the subsection bullets one level in from "6.4 Cognition" etc. — were
rendering at the exact same size as their parent tier, no visual
step-down at all, which read as too tall/loose over a page this
long: "I really need this... to be a little bit more compact." Set
on the nested immediately after the heading inside
its own section.levelN wrapper, so h2+p/h3+p (scoped to a direct
child of section.level2/3, not just any following , so a
heading's own *second* paragraph two nodes down is left alone)
reaches exactly that line and nothing else on the page. Set smaller
and tighter than body text — shortens the page's overall scroll
length, which was the point. The chapter-level (h2) paragraph stays
flush with its own heading, not indented — only the section-level
(h3) paragraph is indented, since only sections read as nested
underneath a chapter, not the chapter's own summary under itself. */
body.table-of-contents-page #quarto-document-content section.level2 > h2 + p {
/* Was 0.85em — same across-the-board step down as .toc-entry-desc's
own identical change, just above: "it doesn't need to be as big." */
font-size: 0.78em;
color: rgba(var(--book-muted-rgb), 0.85);
margin-top: 0.25em;
margin-bottom: 0.75em;
}
/* Section-level paragraphs now flow inline right after their own h3
(see the h3 rule below — "Reality · Begins from what it means...",
the same look as "Preface · description" in the Front Matter
bullets), not stacked as a block underneath it — so none of the
block-era spacing/indent props apply here anymore. display: inline
is what actually makes it continue the heading's own line instead
of starting a new one; margin: 0 clears the old block-paragraph
spacing, which would otherwise still reserve dead vertical space
even once display stopped being block (top/bottom margins are
no-ops on true inline elements, but left/right margins are NOT —
left over here it would shove the paragraph away from the
interpunct). */
body.table-of-contents-page #quarto-document-content section.level3 > h3 + p {
display: inline;
/* Was 0.85em, then 0.78em — same "increase the second level" bump
as .toc-entry-desc's own identical change, above, reaching this
chapter's h3-based tier instead of the bracket-linked one. */
font-size: 0.85em;
color: rgba(var(--book-muted-rgb), 0.85);
margin: 0;
/* Same reasoning as .toc-entry-desc's own identical line-height,
above (including the 1.95 → 1.8 walk-back) — this is the same
"inline, shares its first line with a bold heading, wraps on its
own past that" shape. */
line-height: 1.8;
}
/* Section headings ("1.1 Reality", "1.2 Modal Status", ...) — on
request, merged onto one visual line with their own paragraph below
("Reality · Begins from what it means..."), matching how "Preface ·
description" already reads in the Front Matter bullets above. display:
inline is what does this: the — flex lives there so the
three sit centered on one row regardless of that wrapper. */
.procyon-mark {
margin-top: 1.5em;
}
.procyon-mark p {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75em;
margin: 0;
text-indent: 0 !important;
}
.procyon-mark-line {
display: inline-block;
width: 3rem;
height: 0;
border-bottom: var(--book-flourish-height) dotted var(--book-muted);
opacity: var(--book-flourish-opacity);
}
.procyon-mark img {
/* Fixed and tiny, not derived from anything else — the previous
version's height was set by JS to match the adjacent text block
it used to sit beside; there's no text to match anymore now that
this is its own centered row, so a plain fixed size is enough.
max-width: none clears Quarto's own .img-fluid class (max-width:
100%, resolved against the parent ) — harmless at this size but
kept for the same reason noted the first time this was a fixed
pixel size: cheap insurance against the two chasing each other
into a squashed, non-square render. */
width: 34px;
height: 34px;
max-width: none;
flex-shrink: 0;
opacity: 0.85;
}
/* ============================================================
16b. SUBJECT INDEX PAGE — hanging indent: each entry's first line
sits flush left; a wrapped continuation line nests in by 1em so it
reads as part of the same entry rather than a new one.
============================================================ */
body.subject-index-page main.content,
body.subject-index-page #quarto-document-content {
column-count: 2;
column-gap: 2.5rem;
}
/* The title block lives inside the same column-count container as the
entries (Quarto nests #title-block-header in main.content), so without
this it gets squeezed into column 1 instead of sitting above both. */
body.subject-index-page #title-block-header {
column-span: all;
}
body.subject-index-page main.content p,
body.subject-index-page #quarto-document-content p {
text-indent: -1em !important;
padding-left: 1em !important;
font-size: 0.72rem;
margin-bottom: 0.3em;
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
/* Settings menu → Layout → Indentation is a useless, actively broken
choice on this page: "it should not have the ability to switch
between indented and flush for the top paragraph... it needs to not
work on that page." Same root cause as the identical fix on the
References page, above — the toggle's own :first-of-type selector
(§6) outranks this page's own blanket rule just above on
specificity, so at the toggle's default (off) state the very first
index entry loses its hanging indent while every other entry keeps
it, and switching "Indented" on incidentally fixes it again just by
no longer matching. Reasserted here with the toggle's own exact
structural selectors so it wins regardless of toggle state, leaving
nothing left for that control to actually change on this page. */
body.subject-index-page main.content > p:first-of-type,
body.subject-index-page main.content section > p:first-of-type,
body.subject-index-page main.content .section > p:first-of-type,
body.subject-index-page #quarto-document-content > p:first-of-type,
body.subject-index-page #quarto-document-content :is(h1, h2, h3, h4, h5, h6) + p {
text-indent: -1em !important;
}
/* ============================================================
16c. TABLE OF CONTENTS PAGE — no longer a compact nav list (the
previous design here, small/tight/dimmed like the right-rail Page
Contents nav). This page is becoming its own thing: each entry
eventually carries a short prose summary of what that section
argues, not just its title — a table of contents that doubles as a
summary of the argument. That means the deepest tier (x.x.x) needs
to read as genuine body prose, not a muted UI label, with the two
tiers above it (x.x, then the chapter itself) scaling up from that
same baseline the way the book's own real headings already do
(em, not rem — h1/h2/h3 elsewhere: 1.45/1.15/1.0em off whatever
main.content's own font-size is, so this tracks the reader's Text
Size setting the same way). Border-left ticks stay as the nesting
cue (indent alone reads ambiguous once every level is full-color,
readable text rather than shrinking/graying out), just no longer
paired with reduced opacity now that every tier is meant to be read,
not skimmed past.
============================================================ */
body.toc-page main.content h3,
body.toc-page #quarto-document-content h3 {
font-size: 1.3em;
font-style: normal;
font-weight: 700;
line-height: 1.3;
margin: 1.8rem 0 0.4rem;
text-align: left;
}
body.toc-page main.content h3 a,
body.toc-page #quarto-document-content h3 a {
color: var(--book-heading);
border-bottom: none;
}
body.toc-page main.content ul,
body.toc-page #quarto-document-content ul {
list-style: none;
margin: 0;
padding-left: 0;
}
body.toc-page main.content ul ul,
body.toc-page #quarto-document-content ul ul {
margin: 0;
padding-left: 1.1rem;
}
body.toc-page main.content li,
body.toc-page #quarto-document-content li {
margin: 0;
text-align: left;
}
/* Top-level entries (1.1, 1.2 …) — a step down from the chapter
heading, a step up from the x.x.x prose below. */
body.toc-page main.content li > a,
body.toc-page #quarto-document-content li > a {
display: block;
font-size: 1.08em;
font-weight: 600;
line-height: 1.4;
padding: 0.15rem 0 0.15rem 0.6rem;
border-left: 2px solid rgba(var(--book-muted-rgb), 0.15);
color: var(--book-text);
}
/* x.x.x — the deepest tier, and the one meant to eventually carry a
real prose summary, not just a short title: plain body-text weight/
size/color, the same as an ordinary paragraph would read, rather
than a smaller, dimmed, UI-list treatment. */
body.toc-page main.content ul ul li > a,
body.toc-page #quarto-document-content ul ul li > a {
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
body.toc-page main.content li > a:hover,
body.toc-page #quarto-document-content li > a:hover {
border-left-color: var(--book-link);
color: var(--book-link);
}
/* ============================================================
17. PAGE NAVIGATION
Quarto's auto-generated prev/next bar (book.page-navigation) is off —
at this book's scale, moving between chapters via the sidebar/navbar
is already easy, so a bar for it wasn't earning its place. In its
stead: a single quiet "Read Next Chapter" link, built and inserted
by the include-after-body script, sitting right above the footnotes
(or at the end of the prose, on pages without any).
============================================================ */
.next-chapter-nav {
text-align: center;
/* Was margin:3rem 0 2rem + padding-top:2rem (5rem total above) — far
more gap above the flourish than the prose above it warranted. */
margin: 1.25rem 0 2rem;
padding-top: 1rem;
}
/* A .standout-line's own bottom margin (2.75rem, §6b) already reads as
a deliberate pause — stacked with this nav's own 2.25rem top spacing
(margin + padding above), pages that end in a standout line (only
front-introduction.qmd today) got an ~80px gap nothing else on the
site has. This nav's own top spacing was zeroed out entirely so the
standout-line's own margin was the only gap — but the last standout
line on this page is "But where is the word God?", a line meant to
hang on its own for a moment before anything else appears, and the
plain 2.75rem it shared with every other gap on the page didn't give
it that. --book-flourish-gap-above adds extra space back in on top
of the standout-line's own margin, specific to this one spot. */
.standout-line + .next-chapter-nav {
margin-top: var(--book-flourish-gap-above);
padding-top: 0;
}
/* On pages with no footnotes, this nav is the last thing in
main.content. main.content's own padding-bottom is zeroed out for
this exact case (§17b below), so this margin is the only source of
space between the row and the footer — reusing --book-flourish-
gap-below, the same variable that sets the space between the
flourish line and the row above it, so the row's text sits
centered between the two by construction: whatever that value is,
both sides match automatically. Pages that DO have footnotes are
unaffected — this nav sits before them there, so it's never
:last-child in that case. */
.next-chapter-nav:last-child {
margin-bottom: var(--book-flourish-gap-below);
}
.next-chapter-arrow {
/* Deliberately plain: no weight/size change from the link text
itself, just enough visual separation to read as a directional
marker rather than another word. */
opacity: 0.6;
}
.next-chapter-link:hover .next-chapter-arrow {
opacity: 1;
}
/* Was three letter-spaced middot characters — read as too faint/thin
a divider between the prose above and the prev/next row below.
A short horizontal rule reads as a more deliberate section break. */
/* 60px/1px/0.4 opacity (this rule's first version) turned out
functionally invisible — confirmed live with a pixel-level scan
showing only a rgb(253→195) difference against the page background,
a barely-there smudge rather than a visible rule. Wider, thicker,
and considerably less transparent is the combination that actually
reads as a horizontal line at a glance. */
/* Dotted, not a solid fill — same technique and spirit as the sidebar's
own chapter-list leader (§ .sidebar-chapter-leader): border-bottom
on a zero-height element rather than a background-filled bar, so
this reads as the same quiet dotted language as the rest of the
site instead of a plain rule. */
.next-chapter-flourish {
display: block;
width: 100%;
height: 0;
margin: 0 0 var(--book-flourish-gap-below);
border-bottom: var(--book-flourish-height) dotted var(--book-muted);
opacity: var(--book-flourish-opacity);
}
/* Two-sided prev/next row — previous chapter at the left edge, next
chapter at the right, each pointing outward toward the direction it
leads. Always exactly two children (an empty placeholder span takes
the slot when a page has no previous or no next — the first
navigable page, or the last), so space-between keeps whichever
real link there is pinned to its correct side instead of drifting
to center. */
.chapter-nav-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
}
.prev-chapter-link .next-chapter-arrow {
margin-right: 0.3em;
}
/* One line, in the book's own body serif (no new font stack) rather
than the two-line label+title treatment this started as — reads
more like a quiet authorial aside than a UI element. */
.next-chapter-link {
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-style: italic;
font-size: 1rem;
color: var(--book-text); /* was --book-heading — reads better as prose than as a heading-weight element */
text-decoration: none;
}
.next-chapter-link:hover {
color: var(--book-link);
}
main.content,
#quarto-document-content {
margin-bottom: 0 !important;
/* Was 2rem — fine on pages that end in footnotes or the Read Next
Chapter link (each carries its own margin/padding on top of this),
but too tight on the rare page with neither (the last chapter,
Excursus), where the prose just stopped a couple lines above the
footer. */
padding-bottom: 4rem !important;
}
/* Pages that end in the prev/next row: this 4rem plus the row's own
bottom margin (below) was stacking to 102px below the row while the
row only had 34px above it (between it and the flourish line) —
confirmed live, a 3x mismatch the row's text was supposed to sit
centered against. Zeroed here so the row's own margin-bottom
(.next-chapter-nav:last-child, using the same --book-flourish-gap-
below variable as the space above it) is the only source of space
below, guaranteeing the two stay equal by construction rather than
by matching two numbers by hand. */
main.content:has(.next-chapter-nav:last-child),
#quarto-document-content:has(.next-chapter-nav:last-child) {
padding-bottom: 0 !important;
}
/* ============================================================
18. FOOTER
============================================================ */
/* .
The counter rules above would otherwise overwrite the breadcrumb's
::before slot — which is where the ">" separator lives — and put a
numeric "1." in front of the first crumb. Reset the counter machinery
on .breadcrumb and restore the separator between items. */
main.content ol.breadcrumb {
list-style: none !important;
padding-inline-start: 0 !important;
margin: 0 0 1rem !important;
counter-reset: none !important;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
main.content ol.breadcrumb > li {
position: static;
counter-increment: none !important;
padding-left: 0 !important;
margin-bottom: 0 !important;
}
main.content ol.breadcrumb > li::before {
content: none !important;
position: static !important;
left: auto !important;
width: auto !important;
padding: 0 !important;
}
main.content ol.breadcrumb > li + li::before {
content: "›" !important;
position: static !important;
width: auto !important;
padding: 0 0.45em !important;
color: var(--book-breadcrumb-sep);
font-weight: 400;
}
/* ============================================================
15. REFERENCES PAGE — hanging-indent bibliography
Targets the bibliography page (body-classes: references-page).
============================================================ */
body.references-page main.content p,
body.references-page #quarto-document-content p {
text-indent: -1.5em !important;
padding-left: 1.5em !important;
margin-top: 0 !important;
margin-bottom: 0.3em !important;
font-size: 0.85rem;
line-height: 1.45;
text-align: left;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
/* Settings menu → Layout → Indentation (html.book-opening-indent, §6)
toggles whether a SECTION'S FIRST paragraph is flush or indented —
meaningless on this page, which has no ordinary prose paragraphs at
all, only a flat run of hanging-indent bibliography entries. Its own
rule above already forces every entry to -1.5em regardless, but the
toggle's own :first-of-type selector (§6) targets the exact same
entries with MORE class selectors in it (:not(.book-opening-indent),
:first-of-type) than this page's own rule has, so it wins on
specificity for the very first entry alone — confirmed by walking
the cascade: with the toggle at its default (off) state, that one
entry silently loses its hanging indent (forced flush) while every
entry below it keeps it, and toggling "Indented" on repairs it again
purely as a side effect of no longer matching. On request, after the
identical bug was confirmed on the Subject Index page below: this
page's own indent must hold for every entry unconditionally, so the
toggle simply has nothing left to affect here. Repeats this rule's
own selector combined with the toggle's exact structural patterns
(§6) so specificity is guaranteed to beat it either way, rather than
just re-asserting a plain .content p rule and hoping it's enough. */
body.references-page main.content > p:first-of-type,
body.references-page main.content section > p:first-of-type,
body.references-page main.content .section > p:first-of-type,
body.references-page #quarto-document-content > p:first-of-type,
body.references-page #quarto-document-content :is(h1, h2, h3, h4, h5, h6) + p {
text-indent: -1.5em !important;
}
/* ============================================================
16. GLOSSARY PAGE + SYMBOLS PAGE — no first-line indent on entries
============================================================ */
body.glossary-page main.content p,
body.glossary-page #quarto-document-content p,
body.symbols-page main.content p,
body.symbols-page #quarto-document-content p {
text-indent: 0 !important;
margin-bottom: 0.75em;
text-align: left !important;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
/* ============================================================
16c. HOME PAGE (index.qmd) — reads like any other page: title +
subtitle only, no auto-generated Author/Status metadata block.
Body paragraphs are deliberately NOT overridden here — they fall
through to the book's normal prose rules (§6: first-line indent, no
paragraph spacing, fully justified), the same as every chapter. An
earlier version of this section styled them like the Glossary
(no indent, left-aligned, paragraph-spaced instead) for a page that
reads more like a narrative intro than a reference page — removed
so the whole site reads as one consistent typographic voice rather
than switching styles at the front door.
============================================================ */
body.home-page #title-block-header,
body.style-preview-page #title-block-header {
display: none !important;
}
body.home-page main.content,
body.home-page #quarto-document-content,
body.quarto-dark.home-page main.content,
body.quarto-dark.home-page #quarto-document-content,
body.style-preview-page main.content,
body.style-preview-page #quarto-document-content,
body.quarto-dark.style-preview-page main.content,
body.quarto-dark.style-preview-page #quarto-document-content {
/* Was 1.5rem, then 4rem, then 7rem across earlier rounds. Briefly
dropped to 2rem (matching every other page's own default) on the
theory that the large gap read as broken/inconsistent once
compared against a real chapter — reverted back on direct
correction: the smaller gap looked worse, not better, on this
page's own hero-title treatment ("The Inversion of Greatness"
still needs real room above it here). Back to 7rem. The oscillating
nav-item bug reported alongside this is a separate, deeper issue
(the reading column's own width isn't continuous across the
1120px breakpoint) — not caused by and not fixed by this padding
value either way. */
padding-top: 7rem !important;
}
/* The home-page title: plain scannable text set to match
resources/web-banner-*.png's typography closely enough that the
image itself was retired (see git history for the old
markup
and its home-title-image/home-banner-light/-dark rules). */
.home-title-text-emulation {
display: block;
text-align: center;
/* Was 3.25rem, then 2.5rem, then 1.3rem — two earlier rounds moved
the title higher; this round reverses direction and asks for it
back down again, ~15px worth (the "ten or twenty pixels" a reader
asked for). 2.25rem (36px, +15.2px off 1.3rem's own 20.8px). */
margin-top: 2.25rem;
/* Was 2.25rem, then 11rem, then 9rem, then 7.75rem, then 6.5rem,
then 5.3rem, then 4.7rem (79.9px) — see git history for the
earlier rounds' own reasoning, all previously trending smaller.
This round moves the opposite way: the dotted divider below reads
as this element's own margin-bottom (nothing between them has a
top offset of its own), so widening this by ~20px pushes the
divider down that same amount, independent of the title's own
move above. 6rem (96px, +20.8px off 4.7rem). */
margin-bottom: 6rem;
}
/* Full-width dotted rule under the home-page title — same dotted
border-bottom-on-a-zero-height-element technique as the sidebar's
own TOC dot leader (§ .sidebar-chapter-leader) and the chapter-
footer's .next-chapter-flourish, just spanning edge to edge here
instead of per-row or scoped to the nav row. */
.home-title-divider {
display: block;
width: 100%;
height: 0;
margin: 0 0 2.5rem;
border-bottom: var(--book-flourish-height) dotted var(--book-muted);
opacity: var(--book-flourish-opacity);
}
.home-title-text-main {
/* Georgia first, deliberately — this block exists to mimic
resources/web-banner-*.png, which was set in actual Georgia.
Source Serif 4 (the site's usual serif) has a taller x-height/
narrower letterform ratio than Georgia and read visibly "taller"
at the same font-size, not just a fallback-order technicality. */
font-family: Georgia, 'Source Serif 4', 'Source Serif 4 Fallback', Charter, serif;
font-weight: 700;
/* A JS auto-fit pass (measure natural width, scale to match the
reading column) was tried here and pulled in favor of a fixed
size, bisected empirically against the real rendered element
rather than calculated: #quarto-document-content's own
getBoundingClientRect() reads 800px, but that includes its own
padding — a plain child block's actual usable content width
comes out to ~651px, confirmed live by testing directly against
scrollWidth/clientWidth at several sizes (3.3rem was the exact
zero-margin boundary; 3.9rem visibly overflowed). 3rem clears it
with real margin. The earlier JS approach measured against the
800px figure without accounting for that padding, which is most
of why it kept overflowing despite "correct" math. clamp() only
for the width the column itself actually still changes at
(<800px, where it starts shrinking, §19c). White-space: nowrap:
this is genuinely a one-line design (the image it's standing in
for never wraps either), not a shrink-to-two-lines fallback. */
font-size: 2.5rem;
line-height: 1.1;
letter-spacing: -0.01em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
color: var(--book-heading);
}
@media (max-width: 799.98px) {
.home-title-text-main {
/* Bounds re-bisected for Georgia (switched from Source Serif 4
above) — Georgia's letterforms run wider, so the old 1.3rem
floor / 6.5vw preferred / 3rem cap (tuned for the narrower
font) clipped "Greatness" to "Great…" at a 375px phone width.
Cap now tracks the base size above (2.5rem, not the old 3rem)
too, so mobile doesn't render larger than desktop right above
this query's 799.98px edge. */
font-size: clamp(1.2rem, 6vw, 2.5rem);
}
/* The title above scales down on mobile via clamp(), but this rule
was missing entirely — confirmed live on an actual phone (a
screenshot from inversionofgreatness.org), the subtitle stayed
fixed at its desktop 1.3rem while the title shrank around it, so
it read as louder than the title it's subordinate to and wrapped
across three lines. Same proportion as the desktop sizes (1.3rem
is ~52% of 2.5rem) carried into the mobile clamp: floor and cap
scaled by that same ratio off .home-title-text-main's own
1.2rem/2.5rem, preferred value at half the vw coefficient. */
.home-title-text-subtitle {
font-size: clamp(0.62rem, 3vw, 1.3rem);
}
}
.home-title-text-subtitle {
margin-top: 0.35rem;
font-family: Georgia, 'Source Serif 4', 'Source Serif 4 Fallback', Charter, serif;
font-style: italic;
font-size: 1.3rem;
color: var(--book-heading);
}
.home-title-text-subtitle em {
font-weight: 400;
}
/* "from the" / "to" — same italic, same color, same font as the rest of
the subtitle (the banner image renders them in identical ink, just
smaller and already lowercase); no small-caps, no faded opacity. */
.home-title-text-subtitle .home-title-connector {
font-size: 0.52em;
}
/* Home page sidebar: chapter list padding. padding-bottom only now —
the padding-top: 0 this rule used to also carry is REMOVED outright
(not just re-scoped, which was tried once already and wasn't enough):
it collides with padding-TOP itself at every width where "Table of
Contents" is supposed to match the opposite rail's own title —
docked, Compact, true mobile, all of it — because those alignment
fixes all work by giving .sidebar-menu-container the SAME padding-top
nav#TOC already has at that width (§ its own comments elsewhere), and
this rule's flat 0 silently beat every one of them here, the exact
same out-specifies-everything trap the left/right values already hit
once (§ below). A patch scoped to just sub-compact was tried first —
wrong fix, confirmed live directly against a fresh screenshot at full
desktop width still showing the same gap that patch never touched:
"does it seriously look like those are the same to you? Because
table of contents is still too high." Removing this declaration
entirely lets .sidebar-menu-container's own per-width padding-top
(already correct for every other page) apply on the home page too,
same as left/right already do below. Whatever the original ~8.5px-
gap problem this used to guard against was, nothing about removing
it reintroduced any visible gap on retest.
padding-top/padding-bottom only, not the old padding: 0 0.75rem 1rem
0 shorthand — that shorthand's left/right values were never actually
chosen for a home-page-specific reason (nothing in this rule's own
history explains them), just carried along incidentally by using the
4-value shorthand to set top. Because body.home-page adds an extra
class, this selector out-specifies EVERY width-based padding rule for
this same element (docked ≥1338px's 17px, Compact's 16px, and
sub-compact's 34px alike — all just #quarto-sidebar .sidebar-menu-
container, one ID + one class, regardless of which media query wraps
them), so the home page silently got 0/12.75px left/right at every
width instead of whichever figure was actually supposed to apply
there — confirmed live and directly reported: "I noticed this on the
full screen mode too... compact mode, and... this mode," a single
root cause behind what looked at first like three separate bugs (and
wasn't a mysterious second sub-compact breakpoint either — the two
"layouts" were the home page, broken, vs. every other page, fine, at
the same width). Longhand top/bottom only, so left/right fall through
to whichever breakpoint rule actually applies, same as every other
page. */
body.home-page #quarto-sidebar .sidebar-menu-container {
padding-bottom: 1rem !important;
}
/* Strip Quarto's default left padding on sidebar sections/items
so the home page chapter list aligns like the nav#TOC */
body.home-page #quarto-sidebar .sidebar-item,
body.home-page #quarto-sidebar .sidebar-item-container,
body.home-page #quarto-sidebar .sidebar-section {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Home page: number on left of title */
body.home-page .toc-entry-num {
order: -1 !important;
opacity: 1 !important;
font-size: inherit !important;
}
body.home-page .toc-entry-title {
flex: 0 1 auto !important;
}
/* Style chapter list items to match the TOC link look */
body.home-page #quarto-sidebar .sidebar-item-container a.sidebar-item-text {
display: flex !important;
justify-content: flex-end !important;
align-items: baseline !important;
gap: 0.4em !important;
text-align: left !important;
font-family: 'Source Serif 4', 'Source Serif 4 Fallback', Charter, Georgia, serif;
font-weight: 400;
color: var(--book-chrome-text) !important;
opacity: 0.75;
font-size: 0.83rem;
line-height: 1.35;
padding: 0.2rem 0;
border-left: none !important;
}
body.home-page #quarto-sidebar .sidebar-item-container a.sidebar-item-text:hover {
opacity: 1;
color: var(--book-chrome-text) !important;
}
body.home-page #quarto-sidebar .sidebar-item-container a.sidebar-item-text.active {
color: var(--book-chrome-text-hover) !important;
opacity: 1;
}
/* Hide section dividers that have no href (e.g. collapsed group headers) */
body.home-page #quarto-sidebar .sidebar-item-section > .sidebar-item-container > a:not([href]) {
display: none !important;
}
/* Group separators — deliberately removed. This rule used to draw a
border-top/spacing gap on the first chapter and first back-matter
item, but the JS that assigns .home-chapter-first/.home-backmatter-
first never actually worked until a same-session bug fix elsewhere
(the two classes depend on .sidebar-chapter-num, which a since-fixed
script only started producing correctly on the home page) — so this
rule had been sitting dormant, unseen, since whenever it was
written. The first time it actually rendered live, it read as a
stray, unintended line. Left the class-assignment JS itself alone
(home-backmatter-first is still a real marker other rules key off,
see the opacity/font-size rule below) — only the visual border/
spacing here is gone. */
/* Numbered chapters — same muted color as the rest of the list, just
slightly larger to signal they're the main event. */
body.home-page #quarto-sidebar .sidebar-item-container a.sidebar-item-text:has(.toc-entry-num) {
opacity: 0.75 !important;
font-size: 0.88rem !important;
}
/* Back matter — muted, slightly smaller */
body.home-page #quarto-sidebar li.home-backmatter-first ~ li .sidebar-item-container a.sidebar-item-text,
body.home-page #quarto-sidebar li.home-backmatter-first .sidebar-item-container a.sidebar-item-text {
opacity: 0.5 !important;
font-size: 0.76rem !important;
}
/* Procyon byline — the closing "Procyon—the genus of the raccoon…"
paragraphs at the very bottom of the home page. Was an ordinary
Markdown blockquote (>), which pulled in the site's general
blockquote treatment (left border, indent, italic) — reads as a
quoted excerpt, not a signature; plain paragraphs instead, same as
the rest of the page's prose. */
.procyon-byline p {
margin: 0;
text-indent: 0 !important;
}
.procyon-byline p + p {
margin-top: 0.5em;
}
/* Table of Contents + Back Matter page titles: every other page
(chapters and site chrome alike) shares #title-block-header's big
"chapter drop" treatment on purpose (§3b's own comment — a reader
wanted every page's header consistent, not this page special-cased
smaller). But on the Table of Contents page specifically, a reader
said the outline itself is the content — the big centered title
block above it reads like its own chapter opener eating space that
belongs to the list below, not a heading over a reference page. On
request, the same call extends to every true back-matter reference
page (Symbols, Glossary, Bibliography, Notes, Subject Index —
body-classes: back-matter-page, added alongside each page's own
existing class by merge-chapters.js/collect-notes.js/combine-
references.js): "I want all the back matter pages to kind of have
that back matter look and not the chapter title look." NOT applied
to the numbered appendices (Modal Logic Primer, Formal Proof
Summary, Derivation Map, Empirical Predictions) — those read as
substantive chapters in their own right, not pure reference lists,
and weren't part of this request. Cut down to a plain compact
title, plus a full-width dotted rule under it in the same quiet
language as .home-title-divider/.next-chapter-flourish elsewhere
(border-bottom on the header itself, not a separate empty div,
since there's nothing else here to hang one off). color-mix(), not
the flourish rule's own element-level opacity — this element still
has real title text in it, and opacity would fade that along with
the border (same reasoning as the H2 rule, above, which hit the
identical problem). */
body.table-of-contents-page #title-block-header,
body.back-matter-page #title-block-header {
padding-top: 2.5rem;
padding-bottom: 1.5rem;
margin-bottom: 2rem !important;
border-bottom: var(--book-flourish-height) dotted color-mix(in srgb, var(--book-muted) 30%, transparent);
}
/* Mobile "Page Contents" drawer toggle (.mobile-margin-toggle,
resources/book-scripts.html): on this page (and the same handful of
back-matter pages below) there are no ##-level headings at all —
checked each back-matter file directly rather than assuming
symmetry across all of them: Bibliography and Glossary have zero
headings, Subject Index has zero, but Symbols (4 headings: The
Conditions/Structural terms/Logical notation/Variables) and Notes
(6, one per originating chapter) genuinely do, so the drawer this
toggle opens has real, useful content there and keeps it. On the
headerless pages, that drawer has nothing left to show except an
empty nav#TOC. That toggle is normally kept on toc-less pages on
purpose — it also opens the Font/Layout/Palette/Dim-margin tools
row, reverted back on request after an earlier attempt hid it on
every headerless page (see that file's own "Reverted on request"
comment) — but on these specific pages the redundancy (a Page
Contents button with nothing in it) was confirmed worth losing that
mobile access for. .glossary-page.back-matter-page (both classes
required), not plain .glossary-page: that class is shared with
Derivation Map, a numbered appendix that DOES have real headings
(§1–§9) and needs to keep this — back-matter-page is only ever
added to the actual Glossary page (merge-chapters.js's
BODY_CLASSES), so the combination reaches Glossary alone. */
body.table-of-contents-page .mobile-margin-toggle,
body.references-page .mobile-margin-toggle,
body.subject-index-page .mobile-margin-toggle,
body.glossary-page.back-matter-page .mobile-margin-toggle {
display: none !important;
}
/* Table of Contents page: each entry is "[**1.1 Reality**](...)[·
description]{.toc-entry-desc}" — Notion's own prose, one bullet per
section. link-table-of-contents.js wraps the description in its own
span specifically so it can be sized/colored independently of the
title beside it, rather than inheriting one shared color/size for
the whole line (a plain trailing text node, with nothing of its own
to select, was the original approach — too coarse once a reader
wanted the description noticeably lighter AND smaller than the
title, not just a different color at the same weight).
rgba(...0.75), lighter than a flat var(--book-muted) — this page's
own description text sits directly under a bold linked title, more
contrast than --book-muted's other, less print-dense uses elsewhere
on the site were designed for. table-of-contents-page (export-
pages.js's own EXTRA_BODY_CLASSES table) scopes all of this to just
this page.
--book-heading on the title, not --book-link — chapter headings
(h3, since link-table-of-contents.js links the heading text itself)
and entry titles are still real links, but a reader wanted them
reading as plain outline text, not "every single line on the page
is gold," which is what Quarto's own default link color did here by
default once these became clickable. */
/* The bold linked title beside .toc-entry-desc (below), matched to
that same span's own font-size — on request: "I want the table of
contents [entries]... each line to be the same size... time, space,
substance, triconditional structure, I want those words to be the
same size as the lines that they're on... maybe slightly smaller...
that way everything's just kinda even." Reverses the size GAP
between title and description this page used to have on purpose
(§ .toc-entry-desc's own "it doesn't need to be as big" comment,
just below) — that request was about the description alone being
smaller than a fixed-size title; this one is about the title itself
coming down to meet it, so the two read as one even line rather
than a bold headline over a caption. Scoped to li (level 2, e.g.
"1.1 Reality," and level 3 nested under it, e.g. "1.1.1 Reality
Precludes") — chapter-level titles ("1. Groundwork") are h2
headings, not
itself, not the
including this nested one — plain padding-left here, no
!important, silently lost to it regardless of this selector's own
higher specificity, the same logical/physical-property trap this
file already documents elsewhere (see §3b's margin-bottom/margin-
block-end comment). padding-inline-start, not padding-left, plus
!important, is what actually reaches this element: a little more
room between this nested tier's own bullets ("6.4.1 Awareness",
"6.4.2 Knowledge", ...) and the parent tier above them ("6.4
Cognition"), on request, so the hierarchy reads more clearly at a
glance. */
padding-inline-start: 2rem !important;
}
/* Fallback only, for any nested entry link-table-of-contents.js still
can't resolve to a real anchor (left as plain "**Bold Title** ·
description" text, no .toc-entry-desc span of its own) — most of
these ("1.1.1 Reality Precludes", "2.7.1 Null State (∅)", ...) are
now properly linked and wrapped by that script (its own subMatch
handling, fixed to strip the entry's leading number before looking
it up against buildSubsectionIndex's bare-name keys), which is what
actually reaches .toc-entry-desc's own font-size for them, same as
every other tier — no separate sizing needed here at all. An earlier
version of this rule tried to fake that same effect with a
compensating font-size increase on the bold title (to cancel out a
shrink applied to the whole
is itself nested inside the section-level
—
both match "ul ul", compounding), but every tier still rendered at
the same font-weight (the sitewide "strong, b { font-weight: 600 }"
reset, §2, applies uniformly regardless of depth) — the actual ask
here is a weight step-down too, which nothing existing provided, and
the existing size gap alone read as too subtle to call "noticeable."
Exact depth is targeted with chained child combinators (> ul > li),
not the "ul ul" descendant selector used elsewhere in this section —
that selector matches ANY ul with an ancestor ul, which is both
tier 2 and tier 3's own list, fine for a blanket shrink but useless
for singling out exactly one tier the way a font-weight override
here needs to. !important on all three: needed to beat this same
page's own li > strong rule above (font-size only, no weight) and
the sitewide ol/ul font-size:inherit reset these child-combinator
selectors would otherwise lose to on specificity alone (confirmed
necessary elsewhere in this file for the identical reason). */
body.table-of-contents-page #quarto-document-content > ul > li > strong,
body.table-of-contents-page #quarto-document-content > ul > li > a > strong {
font-size: 1em !important;
font-weight: 800 !important;
}
body.table-of-contents-page #quarto-document-content > ul > li > ul > li > strong,
body.table-of-contents-page #quarto-document-content > ul > li > ul > li > a > strong {
font-size: 0.92em !important;
font-weight: 700 !important;
}
body.table-of-contents-page #quarto-document-content > ul > li > ul > li > ul > li > strong,
body.table-of-contents-page #quarto-document-content > ul > li > ul > li > ul > li > a > strong {
font-size: 0.85em !important;
font-weight: 400 !important;
}
/* Vertical rhythm: on request, "close the gap... doesn't need to be
as tall of a table... a lot of white space between the items,
especially between h2 level [and h3] — that one in particular has
a lot more white space than the others." The height wasn't really
coming from li spacing at all — main.content ul > li has
margin-bottom: 0 (§7) — it was every NESTED
(one wraps each
entry's own children: "1.1 Reality"'s
holding "1.1.1 Reality
Precludes" etc.) carrying the sitewide main.content ul rule's own
margin: 0.5em 0 !important (§7, meant for ordinary body-text bullet
lists elsewhere on the site). A nested
sitting as a li's first
or last child has no padding/border of its own to stop that margin
from collapsing straight through the li and merging with whatever's
adjacent — its top margin surfaces as extra space ABOVE the first
child, its bottom margin as extra space AFTER the last child,
compounding once per nesting level. That's why "1.1 Reality" down
to "1.1.1 Reality Precludes" read as taller than the gaps beside
it: the child
starting there adds its own top-margin on top of
whatever gap the entries above it already had. Zeroing every ul's
own margin on this page removes that collapsing-margin gap
entirely; a small deliberate margin-bottom on every li (not on the
ul) replaces it with one small, consistent gap between successive
entries regardless of depth, instead of a compounding one. */
body.table-of-contents-page #quarto-document-content ul {
margin: 0 !important;
}
body.table-of-contents-page #quarto-document-content li {
margin-bottom: 0.15em;
}
/* Chapter/section summary paragraphs — the prose line right under
each ## chapter heading (italic) and ### section heading (plain)
that Notion writes as the first paragraph of the section, e.g.
"Begins from what it means for anything to be real...". Quarto
renders these as a plain
stays a REAL heading in the DOM
(deliberately — Quarto's right-rail Page Contents nav scans actual
h1-h6 elements regardless of their CSS display, so this still shows
up there scrolling past), it just no longer forces its own block/
line the way a heading normally does. The ::after interpunct (" · ")
is generated content, not real text, so it inherits nothing from the
link/heading — colored to match the paragraph's own muted gray
rather than the dark heading-ink, reading as connective punctuation
between the two rather than part of either. margin-top moved to
section.level3 (below) — margin-top is a no-op on an inline element,
so it stopped doing anything the moment this became display: inline;
the section wrapper itself is still block and still spaces one
subsection from the next. */
body.table-of-contents-page #quarto-document-content section.level3 > h3,
body.table-of-contents-page #quarto-document-content section.level3 > h3 a {
/* The visible text lives inside the heading's own (link-table-
of-contents.js links the heading itself), and font-weight/style
set only on the h3 don't reliably survive down into it — some
earlier-cascade rule sets the anchor's own font-weight directly,
and a same-element declaration always beats an inherited one
regardless of specificity. Confirmed live: h3 itself computed to
the intended 700 but its computed to 400 anyway. Setting the
anchor selector explicitly, not just the heading, is what
actually reaches the rendered text. 600 (not 700) to exactly
match "Preface"/"Introduction"'s own weight in the Front
Matter bullets above — confirmed via computed style, not the
heavier 700 tried first. */
font-weight: 600;
font-style: normal;
/* Matches its own h3 + p description right after it (§ that rule's
own comment) and li > strong's identical treatment for the
bracket-linked entries elsewhere on this page — same "each line
the same size" request, just reaching this chapter's own h3-based
section tier (e.g. "1.1 Reality"), which isn't a