/* Blog posts: the "get rooms that fit. free." pill (inline after the first section, at the end,
   and pinned to the bottom on phones), the halloween host block, and the one-line author box.
   Uses each post's :root tokens. The bar itself is built by /js/blog-cta.js. */
.bc-pill { display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#0A0A0B; text-decoration:none;
  font-weight:600; font-size:16px; line-height:1.2; padding:14px 24px; border-radius:999px; transition:background .15s, transform .15s; }
.bc-pill:hover { background:#e9e9ee; transform:translateY(-1px); }
.bc-inline { margin:30px 0 6px; }
.cta-box .bc-pill { margin-top:18px; }

/* Phones: the same pill, pinned to the bottom. It steps aside while another way in, or the footer, is on screen. */
.bc-bar { display:none; }
@media (max-width:760px) {
  .bc-bar { display:block; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,10,11,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line);
    transition:transform .25s ease; }
  .bc-bar .bc-pill { display:flex; width:100%; }
  .bc-bar.off { transform:translateY(110%); }
  body.bc-on { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* Halloween: for people who want to throw their own. */
.host-block { margin-top:34px; padding:22px; border-radius:22px; background:var(--card); border:1px solid var(--line-2); }
.host-block p { margin:0; color:#fff; font-size:17px; line-height:1.5; }
.host-block .bc-pill { margin-top:14px; }

/* Author: one line plus a photo (Simon, Thomas) or the conjunction mark (Nora). */
.author-box { margin-top:52px; display:flex; gap:14px; align-items:center; padding:16px 18px; border:1px solid var(--line-2); border-radius:18px; background:var(--card); }
.author-box p { margin:0; font-size:15px; line-height:1.5; color:var(--muted); }
.author-box b { color:#fff; font-weight:600; }
.author-box a { text-decoration:none; }
.author-ph { flex:0 0 48px; width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--line-2); }
.author-mark { flex:0 0 48px; width:48px; height:48px; border-radius:50%; background:#000; border:1px solid var(--line-2); display:grid; place-items:center; }
.author-mark img { width:28px; height:28px; display:block; }