/* The blog: a wall of posts on black, the way a testimonial wall reads —
   separate dark cards with a hairline, a mark at the top, the line worth
   reading at the bottom, the title signed under it. The heading is a mono
   eyebrow over a two-tone line whose accent words glow gold.

   Cards are rounded here and only here: the site's square corners stay
   square everywhere else. */

.posts-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 2.75rem;
}
.posts-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}
.posts-title {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -.01em; line-height: 1.02;
  font-size: clamp(2.6rem, 5.8vw, 4.5rem); color: var(--light);
}
.posts-title .glow {
  color: var(--accent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent),
               0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.posts-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.15rem; border-radius: .7rem;
  background: color-mix(in srgb, var(--light) 4%, var(--ground));
  border: 1px solid var(--line); color: var(--light);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.posts-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }

/* ── the wall ─────────────────────────────────────────────────────────── */
.posts-wall {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  grid-auto-rows: minmax(15.5rem, auto);
  grid-auto-flow: dense;
}
/* Home: one sideways row of the same cards, running off the right edge. */
.posts-wall.is-strip {
  grid-auto-flow: column dense;
  grid-template-columns: none;
  grid-template-rows: repeat(2, minmax(15.5rem, auto));
  grid-auto-columns: minmax(17rem, 21rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  margin-right: calc(50% - 50vw); padding-right: 2rem; padding-bottom: .5rem;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
          mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.posts-wall.is-strip::-webkit-scrollbar { display: none; }
.posts-wall.is-strip .pc { scroll-snap-align: start; }

.pc {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--light) 1.5%, var(--ground));
  border: 1px solid var(--line); color: var(--light);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.pc:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--light) 3%, var(--ground));
  transform: translateY(-3px);
}
.pc.is-tall { grid-row: span 2; }
.pc.is-feature { grid-row: span 2; grid-column: span 2; }
@media (max-width: 40rem) { .posts-wall:not(.is-strip) .pc.is-feature { grid-column: span 1; } }

.pc-media {
  position: absolute; inset: 0 0 auto 0; height: 58%;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
          mask-image: linear-gradient(180deg, #000 35%, transparent);
  opacity: .78; pointer-events: none;
}
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pc:hover .pc-media img { transform: scale(1.04); }
.pc-mark {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  color: var(--light);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.pc-mark span { color: var(--muted); }
/* On a picture the tag needs its own ground, or it is read against a coat rack. */
.pc.is-tall .pc-mark, .pc.is-feature .pc-mark {
  align-self: flex-start; padding: .4rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pc.is-tall .pc-mark span, .pc.is-feature .pc-mark span { color: var(--light); }
.pc-headline {
  position: relative; margin-top: auto;
  font-family: Archivo, Inter, sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem); line-height: 1.05;
}
.pc-quote {
  position: relative; margin-top: auto;
  color: color-mix(in srgb, var(--light) 82%, var(--muted));
  font-size: 1.02rem; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.pc.is-feature .pc-quote, .pc.is-feature .pc-headline + .pc-quote { margin-top: 0; }
.pc-by { position: relative; display: flex; flex-wrap: wrap; gap: .15rem .5rem; align-items: baseline; font-size: .98rem; }
.pc-by b { font-weight: 650; color: var(--light); }
.pc-meta { color: var(--muted); font-size: .9rem; }

/* ── one post ─────────────────────────────────────────────────────────── */
.post { max-width: 46rem; margin: 0 auto; padding: 2.5rem 0 3rem; }
.post-trail { display: flex; gap: .6rem; color: var(--muted); margin-bottom: 1.75rem; }
.post-trail a:hover { color: var(--light); }
.post-title {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.04;
}
.post-lead { margin-top: 1.25rem; font-size: 1.2rem; line-height: 1.6; color: color-mix(in srgb, var(--light) 78%, var(--muted)); }
.post-figure { margin: 2.25rem 0 2.5rem; }
.post-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1rem; border: 1px solid var(--line); background: var(--well); }
.post-figure figcaption { margin-top: .6rem; font-size: .78rem; color: var(--muted); }
.post-figure figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.post-body { font-size: 1.08rem; line-height: 1.75; color: color-mix(in srgb, var(--light) 88%, var(--muted)); }
.post-body > * + * { margin-top: 1.15rem; }
.post-body h2 { margin-top: 2.6rem; font-size: 2.1rem; line-height: 1.1; color: var(--light); }
.post-body h3 { margin-top: 2rem; font-size: 1.3rem; color: var(--light); }
.post-body ul { padding-left: 1.2rem; list-style: none; }
.post-body li { position: relative; padding-left: .4rem; }
.post-body li + li { margin-top: .5rem; }
.post-body li::before { content: ""; position: absolute; left: -1rem; top: .72em; width: .45rem; height: .45rem; background: var(--accent); }
.post-body blockquote { border-left: 2px solid var(--accent); padding-left: 1.25rem; color: var(--light); font-size: 1.2rem; }
.post-faq { margin-top: 3rem; }
.post-faq h2 { font-size: 1.95rem; margin-bottom: 1rem; }
.post-faq details { border: 1px solid var(--line); border-radius: 0; padding: 1rem 1.25rem; }
.post-faq details + details { margin-top: .75rem; }
.post-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; float: right; color: var(--accent); }
.post-faq details[open] summary::after { content: "−"; }
.post-faq details p { margin-top: .75rem; color: color-mix(in srgb, var(--light) 80%, var(--muted)); line-height: 1.65; }
.post-tags { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.post-cta {
  margin-top: 3rem; padding: 1.75rem; border-radius: 1rem; border: 1px solid var(--line);
  background: var(--raised); display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.post-cta .posts-eyebrow { margin-bottom: .4rem; }
.post-cta-line { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  .pc, .pc-media img, .posts-btn { transition: none; }
  .pc:hover { transform: none; }
}