/* /blog/ / SYSTEM v3 LIGHT LUXURY editorial magazine index (blog-index.css?v=3) */

/* ==========================================================
   1. LEAD FEATURE (split editorial, not a card)
   ========================================================== */
.bfeature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) {
  .bfeature { grid-template-columns: 1fr; }
}
a.frame { display: block; }
.bfeature__meta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
  margin-bottom: 0.9rem;
}
.bfeature__title {
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.bfeature__title a { text-decoration: none; color: inherit; transition: color 0.25s ease; }
.bfeature__title a:hover { color: var(--brass-deep); }
.bfeature p { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 52ch; }

/* ==========================================================
   2. ASYMMETRIC POST GRID (varied spans, never equal cards)
   ========================================================== */
.bgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bgrid .postcard { grid-column: span 6; }
.bgrid .postcard.bspan-7 { grid-column: span 7; }
.bgrid .postcard.bspan-5 { grid-column: span 5; }
@media (max-width: 860px) {
  .bgrid .postcard,
  .bgrid .postcard.bspan-7,
  .bgrid .postcard.bspan-5 { grid-column: span 12; }
}

/* whole card is the link */
a.postcard { display: flex; }

/* ==========================================================
   3. START HERE PANEL
   ========================================================== */
.start-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.25rem, 4.5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .start-grid { grid-template-columns: 1fr; }
}
.start-grid .ctarow { margin-top: 1.75rem; }