/* ============ /blog in the 2026-09 look ============
   Loads after styles.css. The markup is the generated index as it was
   (publish-queued.mjs inserts cards), so search and the topic filter still
   find .post-card and toggle [hidden]. What changes is the layout: the long
   one-column list becomes a grid of cards with the cover on top, the
   featured post becomes a wide card, and the search and filters become a
   pill toolbar. */

.blog-page { max-width: 1180px; }

/* ---------- Hero ---------- */
.blog-hero { position: relative; padding: 64px 0 8px; }
.blog-hero::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -60px; left: 50%; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,11,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 72% 20%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 80% at 72% 20%, #000 15%, transparent 70%);
}
main { overflow-x: clip; }
.blog-hero .kicker { display: block; color: var(--primary); margin-bottom: 18px; }
.blog-hero h1 { font-size: clamp(46px, 6vw, 80px); line-height: .98; letter-spacing: -0.048em; }
.blog-hero .lede { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--nav-ink); max-width: 36em; }

/* ---------- Toolbar: search + topics ---------- */
.blog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.blog-search { margin-top: 0; flex: 0 1 340px; }
.blog-search input {
  width: 100%; min-height: 44px; padding: 10px 40px 10px 42px;
  font: 400 15px "Geist", -apple-system, system-ui, sans-serif; color: var(--ink);
  background: #fff;
  border: 1px solid var(--outline); border-radius: 999px; box-shadow: var(--shadow-riso-sm);
  transition: border-color .2s, box-shadow .2s;
}
.blog-search input:focus { transform: none; border-color: #A1A1AA; box-shadow: 0 0 0 4px rgba(239,74,43,.12); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0; padding: 4px; background: #F4F4F5; border: 1px solid var(--outline); border-radius: 999px; }
.filter-btn {
  font-family: "Geist", -apple-system, system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--nav-ink); background: none; border: 0; box-shadow: none; padding: 7px 14px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.filter-btn .dot { border: 0; width: 7px; height: 7px; }
.filter-btn:hover { transform: none; box-shadow: none; color: var(--ink); background: rgba(255,255,255,.6); }
.filter-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10,10,11,.1), 0 2px 8px -2px rgba(10,10,11,.12); }

/* ---------- Featured ---------- */
.post-featured {
  margin-top: 40px; grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--outline); border-radius: 28px; box-shadow: var(--shadow-riso);
}
.post-featured .cover { border-right: 1px solid var(--outline); min-height: 340px; }
.post-featured .feat-body { padding: 40px 40px 34px; }
.post-featured .feat-flag { color: var(--primary); }
.post-featured h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1.04; }
.post-featured .excerpt { color: var(--nav-ink); }

/* ---------- The grid ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.post-card {
  grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  border: 1px solid var(--outline); border-radius: 22px; box-shadow: var(--shadow-riso-sm);
}
.post-card .cover { min-height: 0; aspect-ratio: 2 / 1; border-right: 0; border-bottom: 1px solid var(--outline); }
.post-card .card-body { padding: 18px 20px 18px; grid-template-rows: auto auto 1fr; }
.post-card h3 { font-size: 18px; line-height: 1.22; letter-spacing: -0.02em; font-weight: 650; }
.post-card .excerpt { margin-top: 8px; color: var(--muted); -webkit-line-clamp: 3; }
.post-card .cat-tag { align-self: end; margin-top: 14px; }
.post-card .post-meta { align-self: end; padding-top: 14px; justify-content: flex-end; }
.post-card .post-meta .meta-txt:first-child, .post-card .post-meta .meta-sep:first-of-type { display: none; }

@media (hover: hover) {
  .post-card:hover, .post-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D4D4D8; }
  .post-card .cover svg, .post-featured .cover svg { transition: transform .6s var(--ease-out); }
  .post-card:hover .cover svg, .post-featured:hover .cover svg { transform: scale(1.04); }
}

.empty-note { border: 1px dashed #D4D4D8; border-radius: 20px; background: #FAFAFA; }

@media (max-width: 1020px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-featured { grid-template-columns: 1fr; }
  .post-featured .cover { border-right: 0; border-bottom: 1px solid var(--outline); min-height: 0; aspect-ratio: 2 / 1; }
}
@media (max-width: 720px) {
  .blog-hero { padding-top: 40px; }
  .blog-hero .lede { font-size: 17px; }
  .blog-tools { gap: 10px; }
  .blog-search { flex: 1 1 100%; }
  .blog-filters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .blog-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  .post-grid { grid-template-columns: 1fr; }
  .post-featured .feat-body { padding: 24px 22px 22px; }
}

/* The drawing fills its frame and is fitted inside it (the viewBoxes are
   "meet"), so nothing is cropped whatever the card width. */
.post-card .cover, .post-featured .cover { display: block; }
.post-card .cover svg, .post-featured .cover svg { position: absolute; inset: 10% 8%; width: 84%; height: 80%; }
/* .cover re-points --outline to ink for its drawing; the frame's own edge
   stays a hairline. */
.post-card .cover { border-bottom-color: #E4E4E7; }
.post-featured .cover { border-right-color: #E4E4E7; }
@media (max-width: 1020px) { .post-featured .cover { border-right: 0; border-bottom-color: #E4E4E7; } }

/* A post with no cover drawing (two today) gets the motif language anyway:
   one white card outlined in ink with the vermilion dot, so the grid has no
   empty frames. */
.post-card .cover:not(:has(svg))::before,
.post-card .cover:not(:has(svg))::after { content: ""; position: absolute; z-index: 1; }
.post-card .cover:not(:has(svg))::before {
  left: 50%; top: 50%; width: 34%; height: 54%; transform: translate(-50%, -50%) rotate(-4deg);
  background: #fff; border: 2.25px solid #0A0A0B; border-radius: 12px;
}
.post-card .cover:not(:has(svg))::after {
  left: calc(50% + 15%); top: calc(50% - 30%); width: 20px; height: 20px; border-radius: 50%;
  background: #C9331F; border: 2.25px solid #0A0A0B;
}

/* Key-number covers (scripts/covers/) are drawn to their frame already. */
.post-card .cover svg.cov2, .post-featured .cover svg.cov2 { inset: 0; width: 100%; height: 100%; }

/* Phones: the newest 12, then "Show all" (blog.js). */
.post-grid.is-collapsed .post-card:nth-child(n+13) { display: none; }
.blog-more { display: flex; width: 100%; min-height: 48px; margin-top: 16px; justify-content: center; }
.blog-more[hidden] { display: none; }
@media (max-width: 720px) {
  /* A card is the cover and the title; the excerpt is two lines. */
  .post-card .excerpt { -webkit-line-clamp: 2; }
  .post-card .card-body { padding: 14px 16px 16px; }
}
@media (max-width: 720px) { .post-featured .feat-flag { font-size: 12px; } }