/* ============================================================================
   DAS INSIGHTS & IDEAS — the editorial index
   ----------------------------------------------------------------------------
   Loaded AFTER the page's own inline <style> so it wins on equal specificity.
   That is deliberate: the alternative was surgery on ~320 lines of inline CSS,
   and a specificity fight found late is worse than an explicit override made
   on purpose. Selectors here match or exceed the inline ones.

   Traced from five references (doctrine 2026-09-19 — half top tech/AI, half
   top ecommerce doing real volume, taken for page COMPOSITION):

     TECH  Linear ("Now")  THE CARD. No border, no background, no lift on
                           hover — a rounded thumbnail, a small meta line
                           (category · date), the title, the dek. Columns
                           separated by a hairline, not by card edges.
     TECH  Windsurf        the featured story on top, a quiet text filter row
                           beneath it, then the grid.
     TECH  Craft           the pill category row.
     ECOM  Mews            THE RAIL. Content type and tags as a plain left
                           sidebar with live counts, and a read-time on every
                           card. Mews is a commerce-scale content operation
                           and its index is composed like one.
     ECOM  In Common With  hairline rules instead of cards, throughout.

   COLOUR LANDMINE: vars are INVERTED here (--black is #FFFFFF, --gold is
   #1A2E6E navy). Explicit hex throughout.
   ========================================================================== */

.blog-layout {
  --id-ink:   #0F172A;
  --id-ink-2: #374151;
  --id-faint: #8A91A4;
  --id-navy:  #1A2E6E;
  --id-rule:  rgba(26, 46, 110, .14);
  --id-soft:  rgba(26, 46, 110, .08);
}

/* ── The rail moves LEFT ────────────────────────────────────────────────
   Mews puts content type on the left, and so does the new shop. Two indexes
   on one site that rail from opposite sides is not a design system. */
.blog-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.blog-sidebar { order: -1; position: sticky; top: 96px; display: block; }
@media (max-width: 1180px) { .blog-layout { grid-template-columns: 216px minmax(0, 1fr); gap: 40px; } }
@media (max-width: 880px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .blog-sidebar { position: static; order: 0; }
}

/* ── The rail's own idiom — identical to the shop's, on purpose ───────── */
.idr-group + .idr-group { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--id-soft); }
.idr-head {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--id-faint); margin-bottom: 12px; display: block;
}
.idr-rows { display: flex; flex-direction: column; }
.idr-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 5px 0; text-align: left;
  font-size: .8125rem; line-height: 1.35; color: var(--id-ink-2);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color 140ms ease;
}
.idr-row:hover { color: var(--id-navy); }
.idr-row-n { font-size: .6875rem; color: var(--id-faint); font-variant-numeric: tabular-nums; flex: none; }
.idr-row[aria-pressed="true"] { color: var(--id-navy); font-weight: 700; }
.idr-row[aria-pressed="true"] .idr-row-name::before { content: "\2022"; margin-right: 6px; }
.idr-row[aria-pressed="true"] .idr-row-n { color: var(--id-navy); }
.idr-link { display: block; padding: 6px 0; font-size: .8125rem; line-height: 1.45; color: var(--id-ink-2); }
.idr-link:hover { color: var(--id-navy); }
.idr-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .75rem; font-weight: 700; color: var(--id-navy);
}
.idr-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The recognition calendar, kept — it is the one genuinely useful thing in
   the old sidebar. Restyled from a dark card into rail type. */
.idr-cal { display: flex; flex-direction: column; }
.idr-cal-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--id-soft); }
.idr-cal-row:first-child { border-top: 0; }
.idr-cal-q {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; color: var(--id-faint);
  flex: none; width: 26px; font-variant-numeric: tabular-nums;
}
.idr-cal-b { font-size: .8125rem; color: var(--id-ink); font-weight: 600; display: block; line-height: 1.3; }
.idr-cal-d { font-size: .6875rem; color: var(--id-faint); }

/* ── Featured story (Assembly / Windsurf) ───────────────────────────────
   Image left at half the measure, content right. Flat — the old treatment
   put it in a bordered card, which fights the hairline system everywhere
   else on the page. */
.featured-post {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--id-rule, rgba(26,46,110,.14));
  background: none;
  border-radius: 0;
}
.featured-post:hover { transform: none; box-shadow: none; }
.featured-img-wrap { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.featured-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .94); color: #1A2E6E;
  font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
}
.featured-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.featured-category {
  font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #1A2E6E; background: none; padding: 0;
}
.featured-date, .featured-readtime { font-size: .75rem; color: #8A91A4; }
.featured-title {
  font-size: clamp(1.375rem, 2.6vw, 2rem) !important;
  line-height: 1.16; letter-spacing: -.025em; font-weight: 700; color: #0F172A;
  margin: 0 0 12px; text-wrap: balance;
}
.featured-excerpt { font-size: .9375rem; line-height: 1.7; color: #374151; margin: 0 0 18px; max-width: 54ch; }
.featured-link { font-size: .8125rem; font-weight: 700; color: #1A2E6E; display: inline-flex; align-items: center; gap: 7px; }
.featured-post:hover .featured-title { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 880px) { .featured-post { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ── The filter row (Craft / Windsurf) ──────────────────────────────────── */
.cat-btn {
  padding: 6px 14px !important;
  border: 1px solid rgba(26, 46, 110, .14) !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}
.cat-btn:hover { border-color: #1A2E6E !important; color: #1A2E6E !important; }
.cat-btn.active { background: #1A2E6E !important; border-color: #1A2E6E !important; color: #fff !important; }

/* ── THE CARD (Linear) ──────────────────────────────────────────────────
   No border, no fill, no shadow, no lift. A rounded thumbnail, a meta line,
   a title, a dek. Columns are told apart by a hairline in the gap — which is
   Linear's actual device and the reason its index reads as a publication
   rather than as a set of tiles. */
.article-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
}
.article-card {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px 28px 28px 0;
  border-top: 1px solid var(--id-soft, rgba(26,46,110,.08)) !important;
  transition: none;
}
/* The hairline between the columns keys off data-col, NOT nth-child.
   nth-child counts hidden elements, so once a filter hides a card the rule
   lands on the wrong one — filter to a single article and it can sit in the
   right-hand column wearing a stray left rule. js/das-ideas.js stamps the
   VISIBLE position after every filter. */
.article-card[data-col="1"] { padding: 28px 0 28px 28px; border-left: 1px solid var(--id-soft, rgba(26,46,110,.08)) !important; }
.article-card[data-firstrow] { border-top: 0 !important; padding-top: 4px; }
.article-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--id-soft) !important; }

.card-img-wrap { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #F1F4F7; }
.article-card:hover .card-img-wrap img { transform: scale(1.03); }
.card-body { padding: 16px 0 0 !important; }
.card-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.card-category {
  font-size: .625rem !important; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #1A2E6E !important; background: none !important; padding: 0 !important; border: 0 !important;
}
.card-date { font-size: .6875rem !important; color: #8A91A4 !important; }
.card-title {
  font-size: 1.0625rem !important;
  line-height: 1.32; letter-spacing: -.015em; font-weight: 700; color: #0F172A !important;
  margin: 0 0 8px !important;
}
.article-card:hover .card-title { text-decoration: underline; text-underline-offset: 3px; }
.card-excerpt { font-size: .875rem !important; line-height: 1.65; color: #374151 !important; margin: 0 !important; }
/* Linear's cards have no "read more" — the whole card is the link, and a
   second affordance saying so is noise. */
.card-readmore { display: none !important; }

@media (max-width: 680px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .article-card, .article-card:nth-child(even) { padding: 24px 0; border-left: 0 !important; }
  /* one column: only the very first card loses its top rule */
  .article-card[data-firstrow] { border-top: 1px solid var(--id-soft, rgba(26,46,110,.08)) !important; padding-top: 24px; }
  .article-card[data-col="0"][data-firstrow]:first-of-type { border-top: 0 !important; padding-top: 4px; }
}

/* ── Index header ───────────────────────────────────────────────────────── */
.id-index-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--id-rule, rgba(26,46,110,.14));
}
.id-index-head h2 { font-size: 1.125rem !important; font-weight: 700; letter-spacing: -.015em; color: #0F172A; margin: 0; }
#article-count { font-size: .75rem !important; color: #8A91A4 !important; font-variant-numeric: tabular-nums; }

.id-empty { padding: 56px 0; text-align: center; color: #6B7280; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .blog-sidebar { position: static; }
  .card-img-wrap img { transition: none !important; }
}