@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/newsreader-italic-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/newsreader-normal-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing: border-box; }
:root { color-scheme: light; --ink: #41413c; --quiet: #74736b; --line: #e8e7df; --accent: #f2e9a0; }
body { margin: 0; background: #fff; color: var(--ink); font: 21px/1.6 "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
main { width: min(100% - 48px, 600px); margin: 144px auto 110px; }
h1, h2, h3 { font-family: inherit; color: #373832; }
h1 { margin: 0 0 40px; font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.3; }
h2 { margin: 42px 0 18px; font-size: 23px; line-height: 1.4; }
p { margin: 0 0 24px; }
a { color: inherit; text-decoration-thickness: 1px; text-decoration-color: #aaa78b; text-underline-offset: 3px; background: linear-gradient(transparent 72%, var(--accent) 72%); }
a:hover { background: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #827537; outline-offset: 5px; }
.meta, .small, .site-footer { color: var(--quiet); font-size: 15px; line-height: 1.7; }
article header { margin-bottom: 38px; }
article h1 { margin-bottom: 12px; }
.meta { margin: 0; }
.archive-month { font-size: 18px; font-weight: normal; color: var(--quiet); margin: 0 0 18px; }
.articles { list-style: none; margin: 0; padding: 0; }
.articles li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 0 16px; }
.articles time { color: var(--quiet); font-size: 15px; white-space: nowrap; }
.site-footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 20px; flex-wrap: wrap; }
.guestbook-intro { margin-bottom: 36px; }
.guestbook-entries { margin: 48px 0; }
.guestbook-entry { margin: 0 0 24px; padding: 26px 30px; border: 1px solid var(--line); }
.guestbook-entry p { font-style: italic; overflow-wrap: anywhere; white-space: pre-wrap; margin-bottom: 14px; }
.guestbook-entry footer { font-size: 15px; color: var(--quiet); }
.guestbook-entry time { display: block; font-size: 13px; margin-top: 4px; }
.guestbook-entry a { overflow-wrap: anywhere; }
.guestbook-form { margin-top: 48px; }
label { display: block; font-size: 17px; margin: 24px 0 8px; }
label span { color: var(--quiet); font-size: 14px; }
input, textarea, button { font: inherit; color: inherit; border-radius: 0; }
input, textarea { display: block; width: 100%; border: 1px solid #d8d8ce; background: #fff; padding: 10px 12px; font-size: 18px; }
textarea { resize: vertical; min-height: 170px; }
button { background: #f6f5ef; border: 1px solid #d8d8ce; padding: 10px 20px; font-size: 17px; cursor: pointer; margin-top: 20px; }
button:hover:enabled { background: #eeece0; }
button:disabled { opacity: .5; cursor: default; }
.form-status { margin: 14px 0 0; font-size: 16px; }
.form-status[data-error] { color: #8c3d33; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
@media (max-width: 600px) { body { font-size: 18px; } main { margin-top: 64px; margin-bottom: 64px; } h1 { font-size: 28px; margin-bottom: 32px; } h2 { font-size: 22px; } .articles { font-size: 18px; } .site-footer { margin-top: 52px; } .guestbook-entry { padding: 20px; } }

.wordmark { line-height: 1; margin-bottom: 44px; }
.wordmark img { display: block; width: 144px; height: 28px; max-width: 100%; }
