:root {
    --color-navy: #1e3a5f;
    --color-text: #111111;
    --color-muted: #5f5b54;
    --color-background: #faf9f7;
    --color-panel: #f5f5f4;
    --color-rule: #e6e2da;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: 1.6;
    background-color: var(--color-background);
    color: var(--color-text);
}

main {
    max-width: 720px;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

h1 {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-navy);
    margin-bottom: 1.5rem;
}

h2 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--color-navy);
    margin: 2.5rem 0 1rem;
}

p {
    margin: 0 0 1.25rem;
}

a {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: rgba(30, 58, 95, 0.45);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
    text-decoration-color: var(--color-navy);
}

/* Dates, data sources and other technical details use the monospace stack. */
time {
    font-family: var(--font-mono);
}

.content {
    font-size: 1rem;
}

/* Site navigation (Digital Presence 2.0): one horizontal line of the four sections in the identity colour.
   The links are separated by the middots the Markdown plugin emits; they wrap onto a second line on narrow
   screens. */
.site-nav {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-rule);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-navy);
}

.site-nav p {
    margin: 0;
}

.site-nav a {
    color: inherit;
    text-decoration: none;
    padding-bottom: 0.1em;
    border-bottom: 1px solid var(--color-rule);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    border-bottom-color: var(--color-navy);
}

/* Section listings: serif title plus a monospace date and a sans-serif description, separated by a warm rule. */
.section-listing {
    margin-top: 0;
}

.article-list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.article-list li {
    margin: 0 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-rule);
}

.article-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.article-list h2 {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
    line-height: 1.35;
}

.article-list h2 a {
    text-decoration: none;
}

.article-list h2 a:hover,
.article-list h2 a:focus-visible {
    text-decoration: underline;
}

.article-list p {
    margin: 0 0 0.5rem;
}

.article-list article > p:last-child {
    margin-bottom: 0;
}

.article-list time {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.listing-empty {
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Article pages: the date and the tag line are secondary text, the body keeps the readable measure above. */
main > article > p {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.article-tags {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-bottom: 1.75rem;
}

/* Observatory: the latest observation is a light panel between two warm rules; the headline is the one
   prominent monospace number, in the identity colour. */
[data-observatory] {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: var(--color-panel);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
}

[data-headline] {
    margin: 0 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--color-navy);
}

[data-headline] strong {
    font-weight: 600;
}

[data-attribution] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-muted);
}

[data-sample] {
    margin: 0 0 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-navy);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-muted);
}

[data-observatory] > :last-child {
    margin-bottom: 0;
}

.site-footer {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e5e5;
    font-size: 0.85rem;
    color: #666;
}

.site-footer p {
    margin: 0;
}