:root {
  color-scheme: light;
  --ink: #232b28;
  --paper: #fffdf2;
  --navy: #2b4860;
  --navy-dark: #213748;
  --green: #dbe5ce;
  --green-rule: #a9b99d;
  --link: #0000ee;
  --visited: #551a8b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: #cbd2c8;
  background-image: radial-gradient(#b6c0b5 0.75px, transparent 0.75px);
  background-size: 8px 8px;
  font: 15px/1.58 Verdana, Geneva, Arial, sans-serif;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--visited); }
a:hover { color: #b03b21; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px dashed #a53c24;
  outline-offset: 3px;
}
::selection { background: #f3d88d; color: #1e2927; }

.site-shell {
  width: min(902px, calc(100% - 36px));
  margin: 30px auto 42px;
  border: 2px solid #5a6c66;
  background: var(--paper);
}

.masthead {
  position: relative;
  min-height: 157px;
  padding: 17px 28px 22px;
  color: #f5f4dc;
  background: var(--navy);
  border-bottom: 5px solid #90a98c;
}
.masthead-note {
  margin: 0 0 4px;
  color: #d7e1dd;
  font: 11px/1.4 Verdana, Geneva, Arial, sans-serif;
}
.site-name,
.site-name:visited {
  color: #fff9d4;
  font: bold clamp(27px, 4vw, 39px)/1.12 Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-name:hover { color: white; text-decoration: underline; }
.tagline { margin: 10px 0 0; font-size: 13px; }
.updated {
  margin: 0;
  position: absolute;
  right: 20px;
  bottom: 13px;
  font: 11px/1.2 Verdana, Geneva, Arial, sans-serif;
  color: #d7e1dd;
}

.topnav {
  padding: 8px 18px;
  background: #f0e7b8;
  border-bottom: 2px solid #8e987f;
  font: bold 13px/1.8 Verdana, Geneva, Arial, sans-serif;
}
.topnav a { display: inline-block; padding: 1px 5px; }
.topnav a[aria-current='page'] { color: #1d343e; text-decoration: none; background: #fff9d7; border: 1px solid #b6b299; }
.topnav span { color: #8d907a; margin: 0 2px; }

.columns {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-areas: 'side main';
  min-height: 650px;
}
.sidebar {
  grid-area: side;
  padding: 19px 14px 28px;
  background: var(--green);
  border-right: 2px solid var(--green-rule);
  font-size: 12px;
  line-height: 1.55;
}
.sidebar section { margin: 0 0 23px; }
.sidebar h2 {
  margin: 0 0 8px;
  padding: 3px 5px 4px;
  color: #263b34;
  background: #bdceb4;
  border: 1px solid #96aa8e;
  font: bold 12px/1.3 Verdana, Geneva, Arial, sans-serif;
}
.sidebar ul { margin: 0; padding-left: 0; list-style: none; }
.sidebar li { position: relative; margin-bottom: 5px; padding-left: 18px; }
.sidebar li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: url('/assets/orb.gif') no-repeat center;
}
.sidebar p { margin: 0 4px; }
.archive-count { color: #515f53; }
.side-note p { line-height: 1.58; }
.construction-note picture,
.browser-badges picture { display: block; width: 88px; height: 31px; }
.construction-note picture { margin: 10px auto 0; }
.construction-note img,
.browser-badges img { display: block; width: 88px; height: 31px; image-rendering: pixelated; }
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 9px; }
.back-home { margin: 28px 0 0; padding-top: 12px; border-top: 1px dotted #b1b9aa; }
.back-home a, .back-home picture { display: inline-block; width: 75px; height: 42px; }
.back-home img { display: block; width: 75px; height: 42px; image-rendering: pixelated; }
.counter-box { text-align: center; }
.counter-box h2 { text-align: left; }
.counter-digits {
  display: inline-block;
  min-width: 128px;
  margin: 6px 0 5px;
  padding: 5px 6px 3px 9px;
  border: 3px ridge #929c8d;
  color: #bde077;
  background: #111a13;
  font: bold 22px/1.15 'Courier New', Courier, monospace;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.counter-box p { font-size: 10px; }
.side-email { padding-top: 2px; }

.main-content {
  grid-area: main;
  min-width: 0;
  padding: 30px 40px 53px;
  background: var(--paper);
}
.post-head { border-bottom: 1px dashed #a3aaa0; margin-bottom: 23px; }
.post-date, .section-date {
  margin: 0 0 8px;
  color: #56675b;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.01em;
}
.new-label { margin-left: 8px; color: #a82d1d; font-weight: bold; font-size: 11px; }
.post h1, .simple-page h1 {
  margin: 0 0 14px;
  color: #29445a;
  font: bold 30px/1.2 Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
}
.post-copy { max-width: 72ch; }
.scientific-equation { max-width: 100%; overflow-x: auto; margin: 20px 0; padding: 8px 2px; }
.scientific-equation math { width: max-content; min-width: min-content; margin: 8px auto; }
.scientific-notes { margin-top: 24px; padding-top: 12px; border-top: 1px solid #999; font-size: 0.9em; overflow-wrap: anywhere; }
.scientific-notes ol { padding-left: 28px; }
.scientific-notes li { margin-bottom: 20px; scroll-margin-top: 12px; }
.scientific-notes p { margin: 0 0 10px; }
.post-copy sup { font-size: 0.75em; }
.post-copy p, .simple-page > p { margin: 0 0 17px; }
.post-signoff { margin-top: 26px; font: italic 16px Georgia, 'Times New Roman', serif; }
.post-tools {
  margin-top: 27px;
  padding: 8px 0;
  border-top: 1px solid #c8c9b7;
  border-bottom: 1px solid #c8c9b7;
  font-size: 12px;
}
.simple-page h2, .response-section h2 {
  margin: 32px 0 10px;
  color: #29445a;
  font: bold 21px/1.25 Georgia, 'Times New Roman', serif;
}
.simple-page h3, .response-section h3 {
  margin: 27px 0 12px;
  color: #29445a;
  font: bold 17px/1.3 Verdana, Geneva, Arial, sans-serif;
}
.simple-page { max-width: 72ch; }
.archive-list { margin-top: 10px; padding-left: 22px; }
.archive-list li { padding: 4px 0; }
.archive-list time { display: inline-block; min-width: 68px; }
.house-photo { margin: 23px 0 0; padding: 10px; border: 1px solid #aeb2a4; background: #f1f0e5; }
.house-photo img { display: block; width: 100%; height: auto; border: 1px solid #7f887b; }
.house-photo figcaption { margin-top: 7px; color: #4e5b4f; font: 11px/1.5 Verdana, Geneva, Arial, sans-serif; }
.photo-footnote { margin-top: 6px !important; font-size: 11px; }
.restoration-note { flex-basis: 100%; margin: 0 0 12px; font-size: 11px; line-height: 1.6; }
.response-section { margin-top: 35px; }
.response-section h2 { border-bottom: 1px solid #afb5a9; padding-bottom: 6px; }
.reader-note { padding: 10px 0; border-bottom: 1px dotted #b1b9aa; }
.reader-note p { margin: 3px 0 9px; overflow-wrap: anywhere; }
.note-by { font-size: 12px; }
.empty-notes { color: #536056; font-style: italic; }
.note-form { max-width: 460px; padding: 14px; border: 1px solid #abb5a0; background: #f0f1e6; }
.note-form label { display: block; margin: 0 0 5px; font-size: 12px; font-weight: bold; }
.note-form input:not([type='hidden']), .note-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 7px 8px;
  border: 2px inset #b6b9af;
  border-radius: 0;
  background: white;
  color: #1c2824;
  font: 14px/1.5 Verdana, Geneva, Arial, sans-serif;
}
.note-form textarea { resize: vertical; min-height: 112px; }
.note-form button {
  padding: 5px 11px;
  border: 2px outset #d3d5cc;
  border-radius: 0;
  color: #1a2925;
  background: #d9ddd2;
  font: bold 12px Verdana, Geneva, Arial, sans-serif;
  cursor: pointer;
}
.note-form button:hover { background: #e9eddf; }
.note-form button:active { border-style: inset; }
.note-form .form-help { margin: 12px 0 0; color: #526052; font-size: 11px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice, .form-error { max-width: 460px; padding: 9px 11px; font-size: 12px; font-weight: bold; }
.form-notice { background: #e3edda; border: 1px solid #9aaf8f; }
.form-error { background: #f7e3d8; border: 1px solid #c8876c; }
.project-info { max-width: 68ch; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  color: #f6f5e5;
  background: var(--navy-dark);
  font-size: 11px;
}
.site-footer a, .site-footer a:visited { color: #f7f5cf; }

@media (prefers-reduced-motion: reduce) {
  .sidebar li::before { background-image: url('/assets/orb.png'); }
}

@media (max-width: 700px) {
  .site-shell { width: min(100% - 16px, 600px); margin: 8px auto 18px; }
  .masthead { min-height: 145px; padding: 18px 18px 31px; }
  .updated { left: 18px; right: auto; bottom: 10px; }
  .topnav { padding: 8px 10px; }
  .columns { grid-template-columns: 1fr; grid-template-areas: 'main' 'side'; }
  .main-content { padding: 24px 22px 34px; }
  .sidebar { border-right: 0; border-top: 2px solid var(--green-rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .sidebar section { margin-bottom: 17px; }
  .side-email { align-self: start; }
}

@media (max-width: 430px) {
  body { font-size: 14px; }
  .site-shell { width: calc(100% - 8px); margin: 4px auto 12px; }
  .masthead { padding: 16px 13px 31px; }
  .topnav { font-size: 12px; }
  .topnav span { margin: 0; }
  .main-content { padding: 22px 16px 32px; }
  .post h1, .simple-page h1 { font-size: 27px; }
  .sidebar { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; }
}