/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Hides the page until the custom fonts are ready, replacing the old
webfont.js "wf-loading" mechanism with ~10 lines of modern JS
(see the inline script in each page's ) instead of a whole
vendor library. Falls back to visible after 1s either way, so a
slow/failed font load never leaves the page permanently blank. */
html.fonts-loading { visibility: hidden; }
body {
margin: 0;
background: #fff;
color: #404040;
font-family: "Lora", serif;
font-size: 12.6px;
line-height: 1.75;
word-wrap: break-word;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
img { max-width: 100%; height: auto; border: 0; }
figure { margin: 1em 0; }
hr {
background-color: #404040;
border: 0;
height: 1px;
margin-top: 0;
margin-bottom: 1.75em;
}
table { border-collapse: collapse; width: 100%; margin: 0 0 1.75em; }
td, th { padding: 3px; }
ul, ol { margin: 0 0 1.75em; padding-left: 1.75em; }
ul { list-style: disc; }
ol { list-style: decimal; }
ul, li {
font-family: "Lora", serif;
font-size: 12.6px;
color: #404040;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
font-weight: 700;
margin: 0 0 .875em;
}
p { margin: 0 0 1.75em; }
b, strong { font-weight: 700; }
i, em, dfn, cite { font-style: italic; }
/* ---- Links ----
Folded in from the old per-page "jetpack-custom-fonts-css"
inline style block, which every page repeated individually.
The !important is intentional and load-bearing: navbar.css
defines its own .navbar-link color (#404040) and hover color
(#007bff blue) for its own component use, but the site-wide
convention everywhere else — nav included — is a uniform grey
link that just fades on hover. !important is what makes this
file win that fight regardless of navbar.css's more specific
selectors, exactly like the old inline block used to. */
a {
color: #9a9a9a !important;
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
transition: opacity .2s ease;
}
a:hover, a:focus, a:active {
text-decoration: none !important;
opacity: .3;
}
/* ---- Forms (contact page's embedded Google Form sits in an iframe,
but keep this in case any native form fields are ever added) ---- */
input, textarea, select {
background-color: #fff;
font-family: inherit;
}
/* ---- Page layout ---- */
.site-wrapper { overflow-x: hidden; }
.site {
margin: 0 auto;
padding: 0 1.75em;
}
.site-branding { max-width: 70%; }
/* The visible logo + menu now live in navbar.html, so the
original text title/description are kept for SEO/screen
readers only and are visually hidden. */
.site-title, .site-description {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
/* Clears the fixed navbar injected by navbar.js, and caps the
reading column at 739px — the same width as the "large" profile
photos, so text and images line up in the same column. */
.entry-content {
padding-top: 160px;
max-width: 739px;
margin-left: auto;
margin-right: auto;
}
/* ---- Page title header ----
Used on every content page as Name
.
Tune spacing here once and it applies everywhere — no more
per-page
/spacer-div hacks. */
.page-title {
margin: 40px 0 20px;
text-align: center;
font-family: "Sacramento", serif, system-ui;
font-size: 48px;
font-weight: normal;
color: #000;
white-space: nowrap;
line-height: 45px;
}
/* ---- Utility classes ----
.spacer used to be redeclared with a