:root { --ink: #1b1b1b; --muted: #666; --rule: #e2e2e2; --accent: #2f5d3a; --wash: #f4f7f2; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font: 17px/1.6 Georgia, "Times New Roman", serif; }
main, .masthead { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
main { padding-bottom: 3rem; }
a { color: var(--accent); }
.bar { font: .8rem/1 system-ui, sans-serif; padding: .8rem 1.25rem; border-bottom: 1px solid var(--rule);
       color: var(--muted); max-width: 40rem; margin: 0 auto; }
.bar a { color: var(--ink); font-weight: 600; text-decoration: none; }
.masthead { padding-top: 1.25rem; }
.masthead .mark { display: block; text-decoration: none; color: var(--ink); }
.masthead img, .logo { width: 100%; max-width: 30rem; height: auto; display: block; }
.wordmark { font: 700 1.6rem/1.1 system-ui, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.wordmark.big { font-size: 2.2rem; margin: .3rem 0 0; }
.tagline { font-style: italic; color: var(--muted); margin: .4rem 0 0; }
.era-label { font: 600 .75rem/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
             color: var(--accent); margin: 1rem 0 .4rem; }
.masthead .era-label { margin: .3rem 0 0; }
.menu { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem;
        font: .9rem/1.4 system-ui, sans-serif; }
.masthead .menu { padding-bottom: .9rem; border-bottom: 1px solid var(--rule); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 1.5rem 0 .3rem; }
h2 { font: 600 .8rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
     margin: 2.2rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule); }
.entry h2 { text-transform: none; letter-spacing: 0; font-size: 1.1rem; color: var(--ink); }
.entry h4, .entry h6 { font-size: 1rem; margin: 1.2rem 0 .3rem; }
.entry { overflow-wrap: anywhere; }
.callout { background: var(--wash); border-left: 4px solid var(--accent); padding: .9rem 1rem; margin: 1.5rem 0 0; }
.callout p { margin: 0 0 .6rem; }
.callout p:last-child { margin: 0; }
.callout-title { font: 600 .8rem/1.2 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.era-block { margin-top: 2.5rem; padding-top: .5rem; border-top: 3px double var(--rule); }
blockquote { margin: 1.2rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--rule); }
blockquote p { margin: 0 0 .9rem; }
.source, .when, .meta, .note { font: .8rem/1.45 system-ui, sans-serif; color: var(--muted); }
.source { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.era-block .source { margin-top: .6rem; padding-top: 0; border: 0; }
.source a, .meta a { color: var(--muted); }
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { padding: 0 0 1.3rem 1rem; border-left: 2px solid var(--rule); position: relative; }
.posts li::before { content: ""; position: absolute; left: -6px; top: .45rem; width: 10px; height: 10px;
                    border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.posts h3 { font-size: 1.05rem; margin: .1rem 0 .3rem; line-height: 1.3; }
.posts p { margin: 0 0 .3rem; }
.box { background: var(--wash); padding: .7rem .9rem; margin: 1rem 0; display: block; }
.lost { color: var(--muted); }
.video { display: block; position: relative; aspect-ratio: 4 / 3; margin: 1rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
form.inert input[type=text], form.inert textarea { width: 100%; font: inherit; }
.prevnext { display: flex; justify-content: space-between; gap: 1rem; font: .85rem/1.4 system-ui, sans-serif; margin-top: 2rem; }
.prevnext a:last-child { text-align: right; }
footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
footer p { margin: 0 0 .6rem; }
footer .source { border: 0; margin: 0; padding: 0; }