/*
* QUARTO PAGE STRUCTURE (Generated by Quarto HTML rendering)
* ============================================================
*
* DOM Hierarchy:
*
*
*
*
*
*
*
*
*
* Layout System: CSS Grid
* - Main content: grid-column: body-content-start to body-content-end
* - Default main content width: ~796px (varies by theme/settings)
* - TOC sidebar: position: static (in grid flow, not fixed)
* - Default TOC width: ~215px (overridden below to 300px)
* - Page total width: varies with viewport (e.g., 1708px on standard desktop)
*
* Key Insight for Custom Styling:
* - HRs in main content can use negative margins to "bleed" beyond content width
* - TOC is adjacent to main content, so HR bleed can overlap TOC
* - Solution: Either limit HR right margin OR push TOC further right
* - We chose: Push TOC right (margin-left: 3rem) to preserve symmetric HR bleed
*/
/* Base adjustments */
h2, h3 {
scroll-margin-top: 6rem;
}
/* Horizontal rules - bracketing style with bleed effect */
hr {
display: block;
height: 0;
border: 0;
border-top: 6px solid #374151;
margin: 0.75rem -2rem; /* Negative margins create "bleed" effect */
padding: 0;
}
/* Intro separator - widest separator between title and intro text */
hr.intro-separator {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
margin-left: -3rem !important;
margin-right: -3rem !important;
}
/* Term separator - appears BEFORE each term heading (consistent small margins) */
hr.term-separator {
margin-top: 0.5rem !important;
margin-bottom: 0.75rem !important;
margin-left: -2rem !important;
margin-right: -2rem !important;
}
/* Header separator - appears after ID/See also/Synonyms, before Definition */
hr.header-separator {
margin-top: 0.5rem !important;
margin-bottom: 0.75rem !important;
margin-left: -2rem !important;
margin-right: -2rem !important;
}
/*
* TOC POSITIONING AND SIZING
* ===========================
* Override Quarto's default TOC sidebar positioning to:
* 1. Prevent HR overlap (margin-left pushes TOC away from content)
* 2. Prevent text clipping (width increased from default ~215px to 300px)
* Note: Widening TOC affects page centering - may need grid adjustments
*/
#quarto-margin-sidebar {
margin-left: 3rem !important;
width: 300px !important;
}
/* Control main content width and spacing to TOC
* ================================================
* Quarto's Bootstrap grid includes a ~145px column (body-end-outset) between
* main content and TOC. This is a structural grid column, not padding/margin.
*
* Grid structure:
* - Main content column: body-content-start to body-content-end (~799px)
* - Gap column: body-end-outset (~145px) - CANNOT be eliminated
* - TOC position: starts at body-end (after the gap column)
*
* When max-width constrains content to 750px within the 799px column:
* - Unused space in column: 49px (with margin-left: auto, this goes to the right)
* - Grid gap column: 145px (structural, part of Bootstrap grid)
* - TOC margin-left: 51px (our 3rem override)
* - Total visual gap: ~245px
*
* Strategy:
* - max-width: 750px → constrains content for readability (~70-80 characters per line)
* - margin-left: auto → centers content in the 799px column, pushes unused space right
* - margin-right: 0rem → accepts the default grid gap (145px + unused space + TOC margin)
*
* To reduce the gap, use negative margin-right to "pull" content toward TOC:
* - margin-right: 0rem → ~245px total gap (current setting)
* - margin-right: -5rem → ~165px gap (pulls content 80px closer)
* - margin-right: -10rem → ~85px gap (very aggressive)
*/
main.content {
max-width: 750px; /* Target ~70-80 characters per line for reference scanning */
margin-left: auto !important; /* Center content in the 799px grid column */
margin-right: 0rem !important; /* Accept default grid gap (~245px total) */
}
/*
* DICTIONARY ENTRY SECTIONS
* ==========================
* Each term is in a generated by Quarto from ## headings
* Spacing strategy: Use margin-bottom on last paragraph (Measurement field) to
* create large gaps between terms, rather than section margin-bottom
*/
section.level2 {
margin-bottom: 0;
padding: 0;
page-break-inside: avoid;
border-bottom: none;
}
/* Term headings - ALL CAPS, softer color */
section.level2 > h2 {
color: #1f2937 !important;
font-weight: 700 !important;
font-size: 1.5em !important;
margin-top: 0 !important;
margin-bottom: 0.4rem !important;
padding-bottom: 0 !important;
border-bottom: none !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
/* ID field - monospace, machine-readable style (first paragraph after h2) */
section.level2 > p:first-of-type {
font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.75rem;
color: #6b7280;
background-color: #f3f4f6;
padding: 0.25rem 0.6rem;
margin-top: 0.5rem;
margin-bottom: 0;
border-left: 2px solid #9ca3af;
display: inline-block;
}
/* See also and Synonyms in header section (now 2nd and 3rd paragraphs, after first HR) */
section.level2 > p:nth-of-type(2),
section.level2 > p:nth-of-type(3) {
margin: 0.5rem 0;
font-size: 0.9rem;
color: #374151;
}
/* All paragraphs - base styling */
section.level2 > p {
line-height: 1.5;
margin-bottom: 0.65rem;
color: #1f2937;
text-align: justify;
}
/* Last paragraph in section - add large spacing before next term */
section.level2 > p:last-of-type {
margin-bottom: 8rem;
}
/* Bold labels inline with content */
section.level2 p strong:first-child {
font-weight: 600;
color: #374151;
}
/* Bullet separator for inline synonyms */
section.level2 p:has(strong:contains("Synonyms")) {
color: #4b5563;
}
/* Cross-reference links */
a[href^="#"] {
color: #1d4ed8;
text-decoration: none;
font-weight: 500;
}
a[href^="#"]:hover {
text-decoration: underline;
}
/* Table of contents - clean index style */
#TOC {
background-color: #f9fafb;
padding: 1rem 1.25rem;
border-left: 1px solid #d1d5db;
/* Removed max-height to allow TOC to extend beyond viewport */
overflow-y: visible; /* Changed from auto - let page scroll handle it */
}
#TOC ul {
line-height: 1.3; /* Reduced from 1.5 for tighter spacing */
padding-left: 0.2rem; /* Reduced from 0.5rem for minimal indentation */
}
#TOC a {
color: #4b5563;
text-decoration: none;
transition: color 0.15s;
font-size: 0.85rem; /* Reduced from 0.9rem for smaller text */
}
#TOC a:hover {
color: #111827;
}
#TOC a.active {
color: #111827;
font-weight: 600;
}