/* ══════════════════════════════════════════════════════════
   MUBSell — blog

   Uses the site tokens (--ink, --paper-card, --line, --blue …) so the
   blog inherits BOTH themes rather than carrying its own palette. The
   only colour decided locally is the Sponsored pill, and that is
   deliberate — see the note above it.
   ══════════════════════════════════════════════════════════ */

.bl-wrap{ max-width:1120px; margin:0 auto; padding:30px 20px 70px; }

/* ── Masthead ─────────────────────────────────────────────── */
.bl-hero{
  padding-bottom:24px; margin-bottom:30px;
  border-bottom:1px solid var(--line,#E0E6EF);
}
.bl-kicker{
  display:inline-block; font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue,#1A73E8); margin-bottom:10px;
}
.bl-hero h1{
  font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(30px,5vw,46px); line-height:1.08; margin:0 0 10px; color:var(--ink);
}
.bl-hero p{
  color:var(--charcoal,#5B6B79); font-size:16px; max-width:560px;
  margin:0; line-height:1.65;
}

/* ── Lead story ───────────────────────────────────────────── */
.bl-lead{
  display:grid; grid-template-columns:1.15fr 1fr;
  background:var(--paper-card,#fff); border:1px solid var(--line,#E0E6EF);
  border-radius:18px; overflow:hidden; margin-bottom:34px;
}
.bl-lead-media{
  position:relative; display:block; min-height:280px;
  background:var(--paper,#F4F8FF); overflow:hidden;
}
.bl-lead-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bl-lead-body{
  padding:32px 34px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:12px;
}
.bl-lead-body h2{
  font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(21px,2.4vw,28px); line-height:1.22; margin:0;
}
.bl-lead-body h2 a{ color:var(--ink); text-decoration:none; }
.bl-lead-body h2 a:hover{ color:var(--blue,#1A73E8); }
.bl-lead-body p{
  font-size:15px; line-height:1.65; color:var(--charcoal,#5B6B79); margin:0;
}
.bl-more-link{ font-size:14px; font-weight:700; color:var(--blue,#1A73E8); }
.bl-lead:hover .bl-more-link{ text-decoration:underline; }

.bl-tag{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue,#1A73E8); background:var(--blue-tint,#EAF2FF);
  padding:4px 10px; border-radius:99px;
}

@media (max-width: 860px){
  .bl-lead{ grid-template-columns:1fr; }
  .bl-lead-media{ min-height:0; aspect-ratio:16/9; }
  .bl-lead-body{ padding:22px 20px 26px; }
}

/* ── Grid ─────────────────────────────────────────────────── */
.bl-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px;
}

.bl-card{
  background:var(--paper-card,#fff); border:1px solid var(--line,#E0E6EF);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bl-card:hover{
  border-color:var(--blue,#1A73E8); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(13,27,42,.09);
}
@media (prefers-reduced-motion: reduce){
  .bl-card:hover{ transform:none; }
  .bl-card:hover .bl-card-media img{ transform:none; }
}

.bl-card-media{
  position:relative; display:block; aspect-ratio:16/10;
  background:var(--paper,#F4F8FF); overflow:hidden;
}
.bl-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.bl-card:hover .bl-card-media img{ transform:scale(1.04); }

/* Wordmark stand-in when a post has no cover. Low-contrast on purpose:
   it is a placeholder, and must never compete with the headline sitting
   directly beneath it. */
.bl-card-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:26px;
  color:var(--blue,#1A73E8); opacity:.22; letter-spacing:-.02em;
}
.bl-card-fallback em{ font-style:normal; opacity:.6; }

/* Paid posts are labelled on the CARD, not only inside the article — a
   reader scanning the feed must be able to tell before clicking.

   Amber, not the brand colour. The previous version used --marigold,
   which in this palette IS the brand blue, so the label read as MUBSell
   furniture rather than a disclosure — and against its own dark text it
   measured 3.87:1, barely legible. Amber on near-black is 11:1 and
   cannot be mistaken for part of the design. */
.bl-sponsored{
  position:absolute; top:12px; left:12px;
  background:var(--gold,#F2C94C); color:#151A24;
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  padding:4px 10px; border-radius:99px;
  box-shadow:0 2px 8px rgba(13,27,42,.18);
}

.bl-card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.bl-card-body h2{
  font-family:'Sora',sans-serif; font-weight:700; font-size:17.5px;
  line-height:1.32; margin:0; letter-spacing:-.01em;
}
.bl-card-body h2 a{ color:var(--ink); text-decoration:none; }
.bl-card-body h2 a:hover{ color:var(--blue,#1A73E8); }
.bl-card-body p{
  font-size:14px; color:var(--charcoal,#5B6B79); margin:0; line-height:1.6;
  /* Two lines, so cards in a row keep the same height however long an
     editor made the excerpt. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.bl-meta{
  font-size:12.5px; color:var(--charcoal,#8A94A6); margin-top:auto;
  padding-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.bl-dot{ opacity:.5; }
.bl-meta-lg{ font-size:13.5px; margin:0 0 20px; }

/* ── Pager ────────────────────────────────────────────────── */
.bl-pager{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:40px; font-size:14px;
}
.bl-pager a{
  color:var(--ink); font-weight:700; text-decoration:none;
  border:1px solid var(--line,#E0E6EF); border-radius:99px; padding:9px 18px;
  background:var(--paper-card,#fff); transition:.15s;
}
.bl-pager a:hover{ border-color:var(--blue,#1A73E8); color:var(--blue,#1A73E8); }
.bl-pager span{ color:var(--charcoal,#8A94A6); padding:0 6px; }

/* ── Empty state ──────────────────────────────────────────── */
/* With no posts this IS the page, so it is built as a real panel rather
   than a dashed apology box. */
.bl-empty{
  text-align:center; padding:64px 26px;
  background:var(--paper-card,#fff); border:1px solid var(--line,#E0E6EF);
  border-radius:18px; max-width:620px; margin:0 auto;
}
.bl-empty-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--blue-tint,#EAF2FF); color:var(--blue,#1A73E8);
  margin-bottom:18px;
}
.bl-empty h2{
  font-family:'Sora',sans-serif; font-weight:800; font-size:22px;
  color:var(--ink); margin:0 0 10px; letter-spacing:-.015em;
}
.bl-empty p{
  margin:0 auto 24px; color:var(--charcoal,#5B6B79);
  font-size:15px; line-height:1.7; max-width:440px;
}
.bl-empty-acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.bl-btn{
  display:inline-block; padding:11px 22px; border-radius:99px;
  font-size:14.5px; font-weight:700; text-decoration:none; transition:.15s;
}
.bl-btn-primary{ background:var(--blue,#1A73E8); color:#fff; }
.bl-btn-primary:hover{ background:var(--marigold-dark,#1557B0); color:#fff; }
.bl-btn-ghost{
  border:1px solid var(--line,#E0E6EF); color:var(--ink); background:var(--paper-card,#fff);
}
.bl-btn-ghost:hover{ border-color:var(--blue,#1A73E8); color:var(--blue,#1A73E8); }

/* ── Article ──────────────────────────────────────────────── */
.bl-back{
  display:inline-block; margin-bottom:18px; font-size:13.5px; font-weight:700;
  color:var(--blue,#1A73E8); text-decoration:none;
}
.bl-back:hover{ text-decoration:underline; }

.bl-article{ max-width:700px; margin:0 auto; }
.bl-article h1{
  font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(27px,4.4vw,40px); line-height:1.15; margin:0 0 14px; color:var(--ink);
}
.bl-cover{ width:100%; border-radius:16px; margin:8px 0 28px; display:block; }

/* Measure and rhythm matter more than anything else on an article page:
   roughly 68 characters a line, generous leading, real space between
   blocks. 16.5px at 1.75 was close; this is a little larger and calmer. */
.bl-body{ font-size:17px; line-height:1.78; color:var(--ink); }
.bl-body p{ margin:0 0 22px; }
.bl-body h2{
  font-family:'Sora',sans-serif; font-weight:700; font-size:22px;
  margin:34px 0 12px; color:var(--ink); letter-spacing:-.015em;
}
.bl-body a{ color:var(--blue,#1A73E8); }
.bl-body img{ max-width:100%; height:auto; border-radius:12px; margin:8px 0 22px; }
.bl-body blockquote{
  margin:24px 0; padding:4px 0 4px 20px;
  border-left:3px solid var(--blue,#1A73E8);
  color:var(--charcoal,#5B6B79);
}

.bl-sponsor-note{
  background:#FFF7E3; border:1px solid #EFD79B; color:#6B4A00;
  padding:12px 16px; border-radius:12px; font-size:13.5px;
  margin-bottom:20px; line-height:1.6;
}
.bl-sponsor-note strong{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.bl-sponsor-note a{ color:#6B4A00; }

.bl-more{ max-width:1120px; margin:52px auto 0; }
.bl-more h2{
  font-family:'Sora',sans-serif; font-size:20px; margin:0 0 18px; color:var(--ink);
  padding-top:28px; border-top:1px solid var(--line,#E0E6EF);
}

/* ── Dark theme ───────────────────────────────────────────── */
/* Only what the tokens cannot express. Card backgrounds, borders and
   text all follow --paper-card / --line / --ink on their own, which is
   why the old hardcoded #161B24 overrides are gone. */
[data-theme="dark"] .bl-card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.4); }
[data-theme="dark"] .bl-sponsor-note{ background:#2A2113; border-color:#5A4A22; color:#F0D9A8; }
[data-theme="dark"] .bl-sponsor-note a{ color:#F0D9A8; }
[data-theme="dark"] .bl-card-fallback{ opacity:.3; }