/* ============================================================
   blog/chrome.css — header, footer and page base for the blog.

   index.php and start.php carry their styles inline, so none of it
   is reachable from here. This is the minimum needed for the blog
   to look like the rest of the site: the palette, the fixed header,
   and the footer. Kept separate from style.css so the blog content
   styles stay independent of the site chrome.
   ============================================================ */

:root {
  --ink:     #14120F;
  --ink-2:   #3A342D;
  --muted:   #6E655B;
  --bone:    #F6F2EB;
  --bone-2:  #EFE9E0;
  --brass:   #9A7B4F;
  --line:    #DCD4C8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body.blog-body {
  background: var(--bone);
  color: var(--ink);
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ────────────────────────────────────────────────── */
header.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: .7rem 0;
  background: rgba(20, 18, 15, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(246, 242, 235, .12);
}
.top__inner { display: flex; justify-content: space-between; align-items: center; }

.wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.5px;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  user-select: none;
}

.top__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.top__nav a {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color .25s ease;
}
.top__nav a:hover,
.top__nav a:focus-visible { border-bottom-color: rgba(246, 242, 235, .55); }
.top__nav a.is-active { border-bottom-color: var(--brass); }

.top__link {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 242, 235, .85);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(246, 242, 235, .4);
  transition: border-color .3s ease, color .3s ease;
}
.top__link:hover { color: #fff; border-color: #fff; }

/* Same breakpoint as the homepage: the menu is what gives way. */
@media (max-width: 900px) { .top__nav { display: none; } }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  color: rgba(246, 242, 235, .62);
  padding: 2.2rem 0;
  font-size: 14px;
  border-top: 1px solid rgba(246, 242, 235, .18);
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
footer a {
  color: rgba(246, 242, 235, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 242, 235, .22);
}
footer a:hover { color: var(--bone); border-color: var(--bone); }