/* Bourbon & Frost -- one continuous page, no color-blocked header/footer.
   Loosely modeled on daringfireball.net: plain background throughout,
   thin rules instead of color blocks.

   Font/link colors (--color-header, --color-paragraph, --color-quote,
   --color-link, --color-link-hover, --color-link-visited) come from
   theme.css, generated from data/site_settings.json by the Design admin
   page (/admin.cgi/design). Everything below is structural/layout only
   and a handful of colors that aren't part of that admin-editable set
   (page background, hairlines, muted meta text, code blocks). */

:root {
  color-scheme: light dark;

  --paper: #e9f2fb;
  --paper-dim: #dbe8f7;
  --line: #c6d8ee;
  --text-dim: #4d6480;

  /* Code blocks stay dark regardless of theme. */
  --code-bg: #0d1b2a;
  --code-text: #dce8f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #08131f;
    --paper-dim: #101f30;
    --line: #1f3350;
    --text-dim: #8ea3bd;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--color-paragraph);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.wrap { max-width: 700px; margin: 0 auto; padding: 0 24px; }

a { color: var(--color-link); text-decoration: none; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* Header -- same background as the rest of the page, no color block */
.site-header {
  padding: 36px 0 20px;
}
.site-header .site-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--color-header);
  letter-spacing: -0.01em;
}
.site-header .site-title:hover { text-decoration: none; color: var(--color-link-hover); }
.site-header .site-tagline { margin: 4px 0 0; color: var(--text-dim); font-size: 15px; text-transform: uppercase; }

/* Main content */
main.wrap { padding-top: 40px; padding-bottom: 60px; }

.entry-stream { display: flex; flex-direction: column; gap: 48px; }

.day-group { display: flex; flex-direction: column; gap: 32px; }
.day-heading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 0;
}

.entry { padding-bottom: 0; }

.entry-meta {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin: 0 0 8px;
  text-align: right;
}

.entry-title, .entry-full h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 0 0 12px;
  line-height: 1.25;
}
.entry-title { font-size: 26px; }
.entry-full h1 { font-size: 32px; }

.entry-title a, .entry-full h1 a { color: var(--color-header); }
.entry-title a:visited, .entry-full h1 a:visited { color: var(--color-link-visited); }
.entry-title a:hover, .entry-full h1 a:hover { color: var(--color-link-hover); }

.entry-link .link-title a.title-link { color: var(--color-link); }
.entry-link .link-title a.title-link:visited { color: var(--color-link-visited); }
.entry-link .link-title a.title-link:hover { color: var(--color-link-hover); }
.link-title a.permalink-icon { color: var(--text-dim); text-decoration: none; }
.link-title a.permalink-icon:visited { color: var(--color-link-visited); }
.link-title a.permalink-icon:hover { color: var(--color-link-hover); }

.player { width: 100%; margin: 10px 0 14px; }

.entry-content { margin-top: 18px; }
.entry-content p { margin: 0 0 16px; }
.entry-content h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; margin-top: 32px; color: var(--color-header); }
.entry-content blockquote {
  margin: 20px 0; padding: 4px 20px; border-left: 3px solid var(--line);
  color: var(--color-quote); font-style: italic;
}
.entry-content pre {
  background: var(--code-bg); color: var(--code-text); padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 15px;
}
.entry-content code { background: var(--paper-dim); padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content img { max-width: 100%; border-radius: 6px; }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

.link-source { font-size: 14px; color: var(--text-dim); }
.podcast-meta { font-size: 14px; color: var(--text-dim); }

/* Pagination */
.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.pager a { color: var(--color-link); }
.pager a:hover { color: var(--color-link-hover); }
.pager-newer { margin-right: auto; }
.pager-older { margin-left: auto; }

/* Footer -- same background as the rest of the page, no color block */
.site-footer {
  padding: 20px 0 40px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--color-link-hover); }
.footer-nav { margin-top: 8px; }
.footer-nav a { margin: 0 8px; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }

@media (max-width: 600px) {
  .site-header { padding: 28px 0 16px; }
  .site-header .site-title { font-size: 24px; }
  .entry-full h1 { font-size: 27px; }
}