/* Brand lockup: interlocking-S mark + name, shared by all layouts */
.notepad-blog-logo.brand {
  display: inline-flex !important; /* theme sets inline-block with higher specificity */
  align-items: center;
  gap: 0.75rem;
  height: 5rem;
  max-height: 5rem;
  padding: 0 1.25rem;
  vertical-align: top;
  text-decoration: none; }
  .notepad-blog-logo.brand .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    max-height: none; }
  .notepad-blog-logo.brand .brand-name {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: white; }
.notepad-site-head .notepad-blog-logo.brand .brand-name {
  color: black; }

/* Buy Me a Coffee button, post-end support box, and /donate/ page */
.coffee-button,
.notepad-page-content > div:not(.notepad-page-title) a.coffee-button,
.support-cta a.coffee-button {
  display: inline-block;
  background: #ffdd00;
  color: black;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-bottom: none; }
  .coffee-button:hover,
  .notepad-page-content > div:not(.notepad-page-title) a.coffee-button:hover,
  .support-cta a.coffee-button:hover {
    background: #ffe94d;
    color: black; }
  .coffee-button .fa {
    margin-right: 0.35rem; }
.support-cta {
  max-width: 56.25rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border-top: 0.25rem solid #e51843;
  background: #f7f7f7;
  text-align: center; }
  .support-cta p {
    margin-bottom: 1rem; }
.donate {
  text-align: center; }
  .donate p {
    font-size: 1.125rem; }
  .donate .coffee-button {
    margin: 1rem 0 2rem;
    font-size: 1.125rem; }
  .donate .donate-note {
    font-size: 0.95rem;
    color: #666; }

/* 404 page */
.not-found {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center; }
  .not-found p {
    font-size: 1.125rem; }
  .not-found h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem; }
  .not-found ul {
    list-style: none;
    margin: 0;
    text-align: left; }
  .not-found li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee; }
  .not-found .not-found-date {
    color: #999;
    font-size: 0.875rem;
    white-space: nowrap; }

/* Home hero tagline: keep each "·"-separated topic on one line (dot stays with the
   word before it); below the theme's 70em large breakpoint, stack topics without dots */
.hero-item {
  white-space: nowrap; }
@media only screen and (max-width: 69.99em) {
  .hero-sep {
    display: none; }
  .hero-item {
    display: block;
    white-space: normal; } }

/* Post tables: same 900px column as the theme's paragraphs */
.notepad-post-content table {
  width: 100%;
  max-width: 56.25rem;
  margin: 1.5rem auto; }

/* Link to the other-language version of a post */
.translation-note {
  max-width: 56.25rem;
  margin: 0 auto 1.5rem;
  padding: 0.6rem 1rem;
  border-left: 0.25rem solid #e51843;
  background: #f7f7f7;
  font-size: 0.95rem; }

/* Theme fix: after the sliced cover animation (.modify), the post header (z-index: 1)
   still overlaps the top of the content and swallows clicks on the first links
   (translation note, table of contents). Lift the content above it. */
.post-template .intro-effect-sliced.modify .notepad-post-content {
  position: relative;
  z-index: 2; }

/* Author name and comments header are h2 (one h1 per post); keep their former h1 size */
.notepad-author-info .notepad-post-author h2.author-name {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase; }
.notepad-author-info .notepad-post-author h2.author-name,
.notepad-disqus h2.notepad-comments-header {
  font-size: 2.125rem;
  line-height: 1.4; }
@media only screen and (min-width: 40.063em) {
  .notepad-author-info .notepad-post-author h2.author-name,
  .notepad-disqus h2.notepad-comments-header {
    font-size: 2.75rem; } }

/* Links in post text use the same red as inline code, so underline them.
   The TOC and buttons keep the theme's plain style. */
.notepad-post-content p a,
.notepad-post-content li:not(.toc-entry) a,
.notepad-post-content td a,
.notepad-post-content .translation-note a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px; }
  .notepad-post-content p a:hover,
  .notepad-post-content li:not(.toc-entry) a:hover,
  .notepad-post-content td a:hover,
  .notepad-post-content .translation-note a:hover {
    text-decoration-thickness: 2px; }
.notepad-post-content a.coffee-button {
  text-decoration: none; }