/* The posts area's list (round 28, M209, M217) and the cards it shares with
   the builder's Latest posts section (M212): Large list, List, Grid classic,
   Grid masonry and One line each, drawn by postCards(). The categories are
   tabs; pages go by numbers. A post itself is post.css. Class prefix po-. */
.po{background:var(--bg);color:var(--ink)}
.po-w{max-width:1120px;margin:0 auto;padding:0 20px}
.po-list{padding-top:30px;padding-bottom:60px}
.po-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.po-tabs a{padding:7px 15px;border-radius:99px;border:1px solid var(--border);font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.po-tabs a:hover{border-color:color-mix(in oklab,var(--ink) 30%,var(--border))}
.po-tabs a.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.po-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:44px}
.po-pager a{min-width:38px;padding:8px 12px;border-radius:9px;border:1px solid var(--border);text-align:center;font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.po-pager a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.po-empty{color:var(--muted);padding:30px 0}
.po-more-link{text-align:center;margin:34px 0 0}

/* A card: the whole card is the link. */
.po-card{display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.po-card__in{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.po-card__pic{display:block;aspect-ratio:16/10;border-radius:var(--r-card, 14px);overflow:hidden;background:var(--surface)}
.po-card__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.po-card:hover .po-card__pic img{transform:scale(1.04)}
.po-card__pic.is-empty{background:radial-gradient(circle at 78% 30%,color-mix(in oklab,var(--gold) 30%,transparent),transparent 45%),linear-gradient(135deg,var(--surface),color-mix(in oklab,var(--gold) 16%,var(--surface)))}
.po-card__t{font-family:var(--font-display);font-size:20px;line-height:1.3;font-weight:700;text-wrap:balance}
.po-card:hover .po-card__t{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.po-card__x{color:color-mix(in oklab,var(--ink) 80%,var(--bg));font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.po-card__meta{font-size:13.5px;gap:6px 18px}
.po-kick{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep, var(--gold));text-decoration:none}
.po-who{color:var(--ink);font-weight:700}
.po-face{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.po-face--ini{display:inline-grid;place-items:center;font:800 10px/1 var(--font-display);color:#112240;background:var(--gold)}
.po-btn{display:inline-flex;align-items:center;margin-top:4px;padding:11px 22px;border-radius:10px;background:var(--gold-grad);color:var(--on-gold);font-size:14px;font-weight:800;transition:transform .15s}
.po-card:hover .po-btn{transform:translateY(-1px)}
.po-more{display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;border-bottom:2px solid var(--gold);font-size:14px;font-weight:800}
.po-more .ar-i{transition:transform .15s}.po-card:hover .po-more .ar-i{transform:translateX(3px)}

/* Grid classic: three across, the meta line over the title, Read more as a link. */
.po-grid{display:grid;grid-template-columns:repeat(var(--po-across,3),minmax(0,1fr));gap:44px 30px}
.po-card--grid .po-card__pic{margin-bottom:6px}

/* Grid masonry: cards of natural height, centred, Read more across the foot. */
.po-mas{columns:var(--po-across,3);column-gap:26px}
.po-mas--grid{--po-gap:26px;display:grid;grid-template-columns:repeat(var(--po-across,3),minmax(0,1fr));grid-auto-rows:2px;column-gap:var(--po-gap);align-items:start;columns:auto}
.po-mas--grid>.po-card--mas{margin-bottom:0}
.po-card--mas{break-inside:avoid;margin-bottom:26px;gap:0;border-radius:var(--r-card, 14px);overflow:hidden;background:var(--card, var(--bg));text-align:center;
  box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 8%,transparent),0 14px 30px -18px color-mix(in oklab,var(--ink) 40%,transparent)}
[data-theme="dark"] .po-card--mas{box-shadow:none;border:1px solid var(--border)}
.po-card--mas .po-card__pic{border-radius:0;aspect-ratio:auto}
.po-card--mas .po-card__pic img{height:auto}
.po-card--mas .po-card__pic.is-empty{aspect-ratio:16/10}
.po-card--mas .po-card__in{align-items:center;padding:22px 24px}
.po-card--mas .ar-meta{justify-content:center}
.po-card__foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:15px;border-top:1px solid var(--border);font-size:14px;font-weight:800}

/* List: the picture on the left, the words beside it. Large list: one post to a row, full width. */
.po-rows{display:flex;flex-direction:column}
.po-card--left{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:30px 0;border-bottom:1px solid var(--border)}
.po-rows>.po-card--left:first-child{padding-top:0}
.po-card--left .po-card__t{font-size:26px;line-height:1.25;font-weight:800}
.po-large{display:flex;flex-direction:column;gap:44px;max-width:820px;margin:0 auto}
.po-card--large{gap:16px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.po-card--large .po-card__pic{aspect-ratio:16/8}
.po-card--large .po-card__t{font-size:32px;line-height:1.2;font-weight:800}
.po-card--large .po-card__x{font-size:16.5px;-webkit-line-clamp:4}

/* One line each. */
.po-lines{border-top:1px solid var(--border)}
.po-line{display:grid;grid-template-columns:110px minmax(0,1fr) 24px;gap:14px;align-items:center;padding:15px 2px;border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none}
.po-line__d{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.po-line__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.po-line__t b{font-family:var(--font-display);font-size:16px;line-height:1.35}
.po-line:hover b{text-decoration:underline;text-underline-offset:3px}
.po-line__go{display:grid;justify-items:end;color:var(--muted)}
.po-line:hover .po-line__go{color:var(--ink)}

@media (max-width:900px){.po-grid,.po-mas--grid{grid-template-columns:repeat(min(2,var(--po-across,3)),minmax(0,1fr))}.po-mas{columns:min(2,var(--po-across,3))}}
@media (max-width:700px){
  .po-grid{grid-template-columns:1fr;gap:34px}.po-mas{columns:1}.po-mas--grid{grid-template-columns:1fr}
  .po-card--left{grid-template-columns:1fr;gap:16px}.po-card--left .po-card__t{font-size:22px}
  .po-card--large .po-card__t{font-size:24px}
  .po-line{grid-template-columns:minmax(0,1fr) 20px}.po-line__d{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.po-card__pic img,.po-btn,.po-more .ar-i{transition:none}.po-card:hover .po-card__pic img{transform:none}}

/* Posts rising into view (M217, as Mitech's: 100px, .65s, one after another) and Load more (M219). */
.po-rise{opacity:0;transform:translateY(100px)}
.po-rise.is-in{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.po-pager--more{flex-direction:column;align-items:center}
.po-loadmore{display:inline-flex;align-items:center;padding:12px 34px;border-radius:10px;border:1.5px solid var(--ink);color:var(--ink);font-weight:800;font-size:14px;text-decoration:none;transition:background .15s,color .15s}
.po-loadmore:hover{background:var(--ink);color:var(--bg)}
.po-loading{display:inline-flex;gap:7px;padding:16px 0}
.po-loading i{width:10px;height:10px;border-radius:50%;background:var(--gold);animation:po-bounce 1.4s ease-in-out infinite both}
.po-loading i:nth-child(1){animation-delay:-.32s}.po-loading i:nth-child(2){animation-delay:-.16s}
@keyframes po-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.po-end{margin:0;color:var(--muted);font-size:14px;animation:po-fade .5s ease both}
@keyframes po-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.po-rise{opacity:1;transform:none}.po-loading i{animation-duration:3s}.po-end{animation:none}}