/* smooth page-to-page transitions (browsers that support them; others load normally) */
  @view-transition { navigation: auto; }
  body > header { view-transition-name: sg-header; }
  ::view-transition-old(root) { animation: sgVtOut .16s ease-in both; }
  ::view-transition-new(root) { animation: sgVtIn .34s cubic-bezier(.2,.8,.2,1) both; }
  ::view-transition-group(sg-header) { animation-duration: 0s; }
  @keyframes sgVtOut { to { opacity: 0; } }
  @keyframes sgVtIn { from { opacity: 0; transform: translateY(10px); } }
  @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

  /* articles this listing wrote for the blog */
  .pa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pa-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
  .pa-card { padding-top: 12px; }
  .pa-ph { display: block; height: 170px; margin: 0 -8px 4px; border-radius: 14px; overflow: hidden; }
  .pa-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .pa-card:hover .pa-ph img { transform: scale(1.04); }
  .pa-ph.pa-pat { display: grid; place-items: center; background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.18) 0 18%, transparent 19%), radial-gradient(circle at 80% 75%, rgba(255,255,255,.12) 0 24%, transparent 25%), linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1C1810)); color: rgba(255,255,255,.88); font: italic 400 64px var(--display); }
  .pa-card:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -24px rgba(28,24,16,.45); }
  .pa-card .pa-k { font: 800 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--cedar)); }
  .pa-card b { font: 400 21px/1.2 var(--display); }
  .pa-card span.pa-d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pa-card small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
  .pa-write { margin: 14px 0 0; font-size: 14px; }
  .pa-write a { color: var(--cedar); font-weight: 700; }
  @media (max-width: 640px) { .pa-list { grid-template-columns: 1fr; } }