/* BM site stylesheet. Load after tokens.css. Fonts: Josefin Sans and Space Mono from Google Fonts. */

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- LAYOUT ---------- */
.bm-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-6); }
.bm-section { padding: var(--space-7) 0; }
/* back-to-back sections share one gap instead of stacking both paddings */
.bm-section + .bm-section { padding-top: 0; }
.bm-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin: 0 0 var(--space-1); }
.bm-section__head h2 { font-size: 14px; font-weight: 700; }
.bm-title { font-size: 40px; line-height: 1.15; font-weight: 400; margin: 0; text-wrap: balance; }

/* ---------- META ---------- */
.bm-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  margin: 0;
}
a.bm-meta { text-decoration: none; transition: color 0.2s; }
a.bm-meta:hover { color: var(--ink); }

/* ---------- HIGHLIGHT ---------- */
.bm-hl { color: var(--highlight); }

/* ---------- STATUS ---------- */
.bm-status { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.12em; color: var(--ink-faint); }
.bm-status__pass { color: var(--pass); }
.bm-status__wip { color: var(--ink); }

/* ---------- NAV ---------- */
.bm-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  /* side padding grows on wide screens so the mark and links sit on the page's left and right edges */
  padding: 20px max(var(--space-6), calc((100% - var(--page-max)) / 2 + var(--space-6)));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.bm-nav a {
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-dim); transition: color 0.2s;
}
.bm-nav a:hover, .bm-nav a[aria-current="page"] { color: var(--ink); }
.bm-nav__links { display: flex; gap: var(--space-5); }

/* ---------- BUTTON ---------- */
.bm-btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  color: var(--on-ink); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  padding: 12px 24px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bm-btn:hover { background: var(--bg); color: var(--ink); }
.bm-btn--quiet { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.bm-btn--quiet:hover { border-color: var(--ink); }

/* ---------- INTRO ---------- */
.bm-intro { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-7); align-items: center; padding: var(--space-8) 0 var(--space-7); }
.bm-intro--text { grid-template-columns: 1fr; }
.bm-intro__line { font-size: 56px; line-height: 1.08; font-weight: 400; margin: var(--space-4) 0; text-wrap: balance; }
.bm-intro__body { color: var(--ink-dim); max-width: 46ch; margin: 0 0 var(--space-5); }
.bm-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }

/* ---------- FIGURE ---------- */
.bm-figure { margin: 0; }
.bm-figure img {
  display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 68%;
  border-radius: var(--radius-md);
  filter: grayscale(1);
}
.bm-figure figcaption { margin-top: var(--space-3); text-align: right; }

/* ---------- ROW ---------- */
.bm-rows { list-style: none; margin: 0; padding: 0; }
.bm-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); align-items: baseline;
  padding: 12px 0;
  text-decoration: none; color: inherit;
}
.bm-row__kicker { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.bm-row__title { font-size: 24px; line-height: 32px; font-weight: 400; margin: 0; color: var(--ink); text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
.bm-row:hover .bm-row__title { text-decoration-color: var(--line-strong); }
.bm-row__desc { grid-column: 1; font-size: 15px; line-height: 24px; color: var(--ink-dim); margin: var(--space-1) 0 0; max-width: 60ch; }

/* ---------- CAPPED LIST: shows five rows, then a See more button when a sixth exists ---------- */
.bm-rows--cap .bm-row:nth-child(n+6) { display: none; }
.bm-more { display: none; margin-top: var(--space-4); }
.bm-rows--cap:has(.bm-row:nth-child(6)) + .bm-more { display: inline-block; }

/* ---------- NOTE ---------- */
.bm-notes { margin: 0; border-bottom: 1px solid var(--line); }
.bm-note { display: grid; grid-template-columns: 160px 1fr; column-gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.bm-note dt { margin: 0; }
.bm-note dd { margin: 0; color: var(--ink-dim); max-width: var(--measure); }
.bm-note__lead { display: block; color: var(--ink); }
.bm-section__close { max-width: var(--measure); margin: var(--space-5) 0 0; }

/* ---------- ARTICLE HEAD ---------- */
.bm-article-head { max-width: var(--measure); padding: var(--space-7) 0 var(--space-6); }
.bm-article-head .bm-title { margin: var(--space-5) 0 var(--space-3); }

/* ---------- PROSE ---------- */
.bm-prose { max-width: var(--measure); }
.bm-prose > * { margin: 0 0 var(--space-4); }
.bm-prose h2 { font-size: 24px; line-height: 32px; font-weight: 400; margin: var(--space-6) 0 var(--space-3); }
.bm-prose h3 { font-size: 19px; line-height: 1.65; font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
.bm-prose a { text-decoration: underline 1px var(--line-strong); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.bm-prose a:hover { text-decoration-color: var(--ink); }
.bm-prose ul, .bm-prose ol { padding-left: 1.2em; }
.bm-prose li { margin: 0 0 var(--space-2); }
.bm-prose blockquote { padding-left: var(--space-4); border-left: 1px solid var(--line-strong); font-style: italic; color: var(--ink-dim); }
.bm-prose code { font-family: var(--font-mono); font-size: 14px; background: var(--bg-subtle); padding: 2px 6px; border-radius: var(--radius-sm); }
.bm-prose pre { background: var(--bg-subtle); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; line-height: 22px; }
.bm-prose pre code { background: none; padding: 0; }
.bm-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* ---------- FOOTER ---------- */
.bm-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--line); padding: var(--space-4) 0 var(--space-6); }
.bm-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.bm-footer__email { text-transform: none; }
.bm-footer__count { color: var(--ink); }

/* ---------- BUG ---------- */
@keyframes bm-squash { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
#bug { position: fixed; padding: 12px; margin: -12px; box-sizing: content-box; z-index: 90; cursor: pointer; color: var(--ink-dim); }
#bug svg { display: block; overflow: visible; }
.splat { position: fixed; z-index: 90; pointer-events: none; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink); animation: bm-squash 0.9s ease-out forwards; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 860px) {
  .bm-page { padding: 0 var(--space-4); }
  .bm-nav { padding: var(--space-3) var(--space-4); }
  .bm-nav__links { gap: var(--space-3); }
  .bm-section { padding: var(--space-6) 0; }
  .bm-title { font-size: 32px; }
  .bm-intro { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0; }
  .bm-intro__line { font-size: 40px; }
  .bm-figure { max-width: 300px; }
  .bm-row { grid-template-columns: 1fr; }
  .bm-row__end { margin-top: var(--space-2); }
  .bm-note { grid-template-columns: 1fr; row-gap: var(--space-2); }
}
@media (max-width: 359px) {
  .bm-nav__links { gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .splat { animation: none; }
}