/* Blog list, matched to the live site (reliable-studies-717536.framer.app/blog).
   Also linked by the blog-<slug>.html posts for the shared pieces. */

:root {
  /* Framer's dot fill: 1.5px squares on an 8px grid, offset 4px. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='4' y='4' width='1.5' height='1.5' fill='%23001441' fill-opacity='0.08'/%3E%3C/svg%3E");
}
.dots { background-image: var(--dots); }

/* Live frame: the side hairlines sit inside the 1400 column (no layout width)
   on desktop, and there are none below 1200. */
main.frame { position: relative; border-left: 0; border-right: 0; }
main.frame::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); pointer-events: none; z-index: 2; }

.h1-lg { font-weight: 500; font-size: 40px; line-height: 40px; letter-spacing: -.4px; }
.h3-xl { font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -.12px; }

/* rules are inset shadows so auto-height sections keep Framer's sizes */
.page-title { padding: 40px; box-shadow: inset 0 -1px 0 var(--border-primary); }
.page-title .note { margin-top: 12px; max-width: 560px; }

/* meta line: date · category */
.meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap; }
.meta .d { color: var(--text-secondary); }
.meta .c { color: var(--text-tertiary); }
.meta img { width: 3px; height: 3px; }
.by { display: flex; align-items: center; gap: 8px; height: 20px; font-size: 12px; line-height: 16px; white-space: nowrap; }
.by img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.by img.mark { width: 20px; height: 20px; border-radius: 0; object-fit: contain; }

/* Card hover (live): dot fill on #f5f7fc plus four corner ticks. */
.hov { position: relative; }
.hov > * { position: relative; z-index: 1; }
.hov::before, .hov::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.hov::before { inset: 0; background: var(--dots) var(--surface-subtle); }
.hov::after {
  inset: 2px; z-index: 1;
  --t: linear-gradient(var(--btn-ghost-fg), var(--btn-ghost-fg));
  background:
    var(--t) left top / 6px 1px, var(--t) left top / 1px 6px,
    var(--t) right top / 6px 1px, var(--t) right top / 1px 6px,
    var(--t) left bottom / 6px 1px, var(--t) left bottom / 1px 6px,
    var(--t) right bottom / 6px 1px, var(--t) right bottom / 1px 6px;
  background-repeat: no-repeat;
}
.hov:hover::before, .hov:hover::after { opacity: 1; }

/* Featured pair */
.featured { display: flex; box-shadow: inset 0 -1px 0 var(--border-primary); }
.feat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.feat + .feat { box-shadow: inset 1px 0 0 var(--border-primary); }
.feat .pic { padding: 40px; }
.feat .pic img { width: 100%; height: auto; aspect-ratio: 620 / 519; object-fit: cover; border: 1px solid var(--border-primary); }
.feat .txt { flex: 1; display: flex; flex-direction: column; min-height: 288px; padding: 20px 40px 40px; }
.feat .meta { margin-bottom: 32px; }
.feat .copy { display: flex; flex-direction: column; gap: 12px; }
.feat .h3-xl, .feat .desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.feat .h3-xl { -webkit-line-clamp: 2; }
.feat .desc { -webkit-line-clamp: 3; }
.feat .by { margin-top: auto; padding-top: 32px; height: auto; }

.spacer { height: 80px; border-bottom: 1px solid var(--border-primary); }

.latest-head { padding: 40px; box-shadow: inset 0 -1px 0 var(--border-primary); }

/* Post grid: cards draw their right and bottom rules; the last column skips
   the right one and the last row's bottom one is clipped (load-more has it). */
.posts { overflow: hidden; }
.posts .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: -1px; }
.posts .post:nth-child(3n) { box-shadow: inset 0 -1px 0 var(--border-primary); }
.post { height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; box-shadow: inset -1px -1px 0 var(--border-primary); }
.post .top { display: flex; flex-direction: column; gap: 20px; }
.load-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; border-top: 1px solid var(--border-primary); font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  main.frame::after { display: none; }
  .h1-lg { font-size: 32px; line-height: 34px; letter-spacing: -.32px; }
  .h2-xl { font-size: 28px; line-height: 30px; letter-spacing: -.28px; }
  .feat .pic img { aspect-ratio: 325 / 246; }
  .feat .txt { min-height: 0; padding-bottom: 47px; }
  .posts .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts .post:nth-child(n) { box-shadow: inset -1px -1px 0 var(--border-primary); }
  .posts .post:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--border-primary); }
}

/* ---------- Phone ---------- */
@media (max-width: 809px) {
  .page-title { padding: 20px; }
  .featured .feat.second { display: none; }
  .feat .pic { padding: 20px; }
  .feat .pic img { aspect-ratio: 350 / 253; }
  .feat .txt { padding: 16px 20px 31px; }
  .feat .meta { margin-bottom: 20px; }
  .feat .by { padding-top: 30px; }
  .latest-head { padding: 40px 20px; }
  .posts .grid { grid-template-columns: 1fr; }
  .posts .post:nth-child(n) { box-shadow: inset 0 -1px 0 var(--border-primary); }
  .post { height: 192px; padding: 20px; }
  .post .h3-md { font-size: 16px; line-height: 20px; }
}