/* /blog/: a dated list; the newest post renders as the featured row.
   ops/publish_post.py inserts new rows at the top of .post-list. Layout only; tokens from ka.css. */

.post-list{list-style:none;padding:0;margin:0 -20px;max-width:960px}
.post-row{position:relative;display:grid;grid-template-columns:11rem minmax(0,1fr) 8px;grid-template-areas:"date main chev";column-gap:28px;align-items:baseline;padding:22px 20px;border-radius:14px;color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--tint-2),var(--tint) 60%) no-repeat 0 0/0% 100%;transition:background-size var(--dur-ui) var(--ease-out),background-color var(--dur-press) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.post-row:hover{color:inherit}
.post-list li+li .post-row::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--line)}
.pr-date{grid-area:date;font-size:var(--fs-sm);color:var(--mut);font-variant-numeric:tabular-nums}
.pr-main{grid-area:main;display:block;min-width:0}
.pr-topic{display:block;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.pr-title{font-size:var(--fs-xl);line-height:1.3;margin:0 0 6px;transition:color var(--dur-hover) var(--ease-ui),translate var(--dur-ui) var(--ease-out)}
.pr-dek{display:block;font-size:var(--fs-ui);line-height:1.55;color:var(--body);max-width:62ch}
.post-row::after{content:"";grid-area:chev;align-self:center;width:8px;height:14px;background:var(--mut);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){
  .post-row:hover{background-size:100% 100%}
  .post-row:hover .pr-title{color:var(--blue);translate:4px 0}
  .post-row:hover::after{transform:translateX(3px);background:var(--blue)}
  .post-list li:hover .post-row::before,.post-list li:hover+li .post-row::before{opacity:0}
}
.post-row:active{background-color:var(--tint-2);background-size:100% 100%}
.post-row:focus-visible{outline-offset:-2px}

/* the newest post: a card at the top of the list */
.post-list li:first-child .post-row{background:var(--surface);transition:box-shadow var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui);border:1px solid var(--line);box-shadow:var(--sh);padding:30px 20px;margin-bottom:14px;border-radius:var(--r-lg)}
.post-list li:first-child .pr-title{font-size:var(--fs-2xl)}
.post-list li:first-child .pr-dek{font-size:var(--fs-base)}
.post-list li:nth-child(2) .post-row::before{display:none}
@media (hover:hover) and (pointer:fine){.post-list li:first-child .post-row:hover{background:var(--surface);border-color:var(--line-2);box-shadow:var(--sh-hover)}}

@media (max-width:700px){
  .post-list{margin:0 -12px}
  .post-row{grid-template-columns:minmax(0,1fr) 8px;grid-template-areas:"date chev" "main chev";row-gap:4px;column-gap:14px;padding:18px 12px}
  .post-list li+li .post-row::before{left:12px;right:12px}
  .post-row::after{background:var(--blue);opacity:.7}
  .pr-title{font-size:19px}
  .post-list li:first-child .post-row{padding:22px 12px}
  .post-list li:first-child .pr-title{font-size:22px}
}