/* MBP Forge — Field Notes pages */
.notes-page { padding-block: calc(9rem) 4rem; }
.np-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.05; color: var(--ink);
  margin-top: var(--s2);
}
/* category filter bar */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  margin-bottom: var(--s4);
}
.cat {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--soft);
  padding: 0.65em 1.1em;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.45);
  transition: color var(--t-quick) var(--e-settle),
              border-color var(--t-quick) var(--e-settle),
              background-color var(--t-quick) var(--e-settle);
}
.cat:hover { color: var(--cyan-t); border-color: var(--line); }
.cat.is-on {
  color: var(--ink-warm); background: var(--ember); border-color: var(--ember);
}
.cat-empty {
  font-family: var(--f-mono); font-size: var(--fs-mono);
  color: var(--soft); padding: var(--s4) 0;
}

.np-list { display: grid; gap: var(--s3); max-width: 46rem; }
/* filtering choreography */
.np-list .note {
  transition: opacity var(--t-base) var(--e-settle), transform var(--t-base) var(--e-settle);
  transition-delay: var(--rd, 0ms);
}
.np-list .note.filtering { opacity: 0; transform: translateY(8px); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .np-list .note { transition: none; }
}

/* source line under industry articles */
.post-src {
  margin-top: var(--s4); padding-top: var(--s2);
  border-top: 1px solid var(--line-2);
  font-size: 0.8125rem; color: var(--soft);
}
.post-src a { color: var(--cyan-t); text-decoration: underline; }
.post-h2 {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.35rem; color: var(--ink);
  margin-top: var(--s4);
}
.np-list .note h2 { font-size: 1.4rem; }
.np-nl { max-width: 46rem; margin-top: var(--s5); position: relative; top: 0; }

/* single post */
.post { max-width: 44rem; }
.post-head { margin-bottom: var(--s5); }
/* article header image — baked aluminum ground, melted into the page */
.post-hero { margin-bottom: var(--s5); }
.post-hero img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(115% 100% at 50% 50%, #000 62%, transparent 98%);
  mask-image: radial-gradient(115% 100% at 50% 50%, #000 62%, transparent 98%);
}
.post-date {
  font-family: var(--f-mono); font-size: var(--fs-mono);
  letter-spacing: 0.1em; color: var(--soft);
  display: block; margin-top: var(--s2);
}
.post-body p { color: var(--text); margin-top: var(--s3); }
.post-body p:first-child { margin-top: 0; }
.post-body strong { color: var(--ink); }
.post-body .callout {
  border-left: 2px solid var(--ember);
  padding-left: var(--s3);
  font-family: var(--f-display); font-weight: 500; color: var(--ink);
  margin-top: var(--s4);
}
.post-nav {
  margin-top: var(--s5);
  display: flex; justify-content: space-between; gap: var(--s3);
  font-family: var(--f-mono); font-size: var(--fs-mono);
}
.post-nav a { color: var(--cyan-t); }
.post-nav a:hover { text-decoration: underline; }
.post-cta { margin-top: var(--s5); }