/* Latest posts' own layouts (M991, M995): Picked, Cards with the time on each, The newest of each kind,
   Two, a lead and Most read, and Subjects as lists. Drawn from the look's tokens; a theme refines them. */
.pl { --pl-r: var(--r-card, 10px); }
.pl a { color: inherit; text-decoration: none; }
.pl img, .pl picture, .pl-none { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-none { background: color-mix(in oklab, var(--cat, var(--blue)) 18%, var(--surface)); }
.pl-meta { display: block; font-size: 12.5px; color: var(--muted); }
.pl-meta em { font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cat, var(--blue)); margin-right: 6px; }
.pl-badge { position: absolute; right: 18px; bottom: -24px; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-content: center; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.1; box-shadow: 0 0 0 5px var(--card); }
.pl .pl-badge b { display: block; padding: 0; margin: 0; font: 700 16px/1.1 inherit; color: #fff; }

/* Picked: one tall, one beside */
.pl-pick { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 400px) 1fr; gap: 44px; align-items: end; }
.pl-pick__big { grid-column: 2; position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--pl-r); overflow: hidden; background: var(--surface); }
.pl-pick__big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 14, .82)); }
.pl-pick__in { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; color: #fff; }
.pl-pick__in small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pl-pick__in b { display: block; font: 600 26px/1.3 var(--font-display, inherit); margin: 10px 0 12px; }
.pl-pick__in span { font-size: 13px; opacity: .85; }
.pl-pick__side { grid-column: 3; align-self: center; width: 280px; margin-top: 80px; background: var(--card); border-radius: var(--pl-r); box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .25); padding-bottom: 20px; overflow: hidden; }
.pl-pick__side picture, .pl-pick__side > img, .pl-pick__side > .pl-none { height: auto; aspect-ratio: 16 / 10; }
.pl-pick__side small { display: block; padding: 20px 20px 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pl-pick__side b { display: block; padding: 8px 20px 0; font: 600 17px/1.35 var(--font-display, inherit); color: var(--ink); }
.pl-pick__side span { display: block; padding: 10px 20px 0; font-size: 13px; color: var(--muted); }
.pl-ring { position: absolute; left: 4%; top: 38%; width: 70px; height: 70px; border-radius: 50%; border: 6px solid color-mix(in oklab, var(--gold, var(--blue)) 45%, transparent); }
.pl-dots { position: absolute; left: 13%; top: 52%; width: 140px; height: 140px; background: radial-gradient(circle, color-mix(in oklab, var(--blue) 55%, transparent) 2.2px, transparent 2.6px) 0 0 / 15px 15px; }
.pl-arcs { position: absolute; right: 3%; bottom: 6%; width: 100px; height: 100px; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--gold, var(--blue)); border-right-color: var(--gold, var(--blue)); transform: rotate(30deg); }

/* Cards with the time on each */
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.pl-card { display: block; background: var(--surface); border-radius: var(--pl-r); transition: transform .3s; }
.pl-card:hover { transform: translateY(-5px); }
.pl-card__p { position: relative; display: block; aspect-ratio: 16 / 10; }
.pl-card__p picture, .pl-card__p > img, .pl-card__p > .pl-none { border-radius: var(--pl-r) var(--pl-r) 0 0; overflow: hidden; }
.pl-card .pl-meta { padding: 26px 24px 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.pl-card b { display: block; padding: 8px 24px 28px; font: 600 19px/1.4 var(--font-display, inherit); color: var(--ink); }

/* The newest of each kind */
.pl-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.pl-kind__p { position: relative; display: block; aspect-ratio: 1; border-radius: var(--pl-r); overflow: hidden; background: color-mix(in oklab, var(--blue) 14%, var(--surface)); }
.pl-kind__t { position: absolute; left: 10px; bottom: 10px; padding: 7px 10px; border-radius: 30px; background: var(--card); color: var(--ink); font-size: 11.5px; font-weight: 600; }
.pl-kind b { display: block; margin: 12px 0 6px; font: 600 14.5px/1.35 var(--font-display, inherit); color: var(--ink); }
.pl-doc { position: absolute; inset: 0; display: grid; place-items: center; font: 800 26px/1 var(--font-display, inherit); color: var(--blue); }

/* Two, a lead and Most read */
.pl-cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); gap: 34px; }
.pl-cap__sm { display: block; margin-bottom: 26px; }
.pl-cap__sm picture, .pl-cap__sm > img, .pl-cap__sm > .pl-none { height: auto; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.pl-cap__sm b { display: block; margin: 6px 0; font: 600 17px/1.35 var(--font-display, inherit); color: var(--ink); }
.pl-cap p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.pl-cap__lead picture, .pl-cap__lead > img, .pl-cap__lead > .pl-none { height: auto; aspect-ratio: 16 / 10.5; border-radius: var(--pl-r); overflow: hidden; margin-bottom: 18px; }
.pl-cap__lead b { display: block; margin: 8px 0 12px; font: 700 30px/1.2 var(--font-display, inherit); color: var(--ink); }
.pl-cap__pop h3, .pl-list h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 700 16px/1.2 var(--font-display, inherit); color: var(--ink); }
.pl-cap__pop h3 i, .pl-list h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--blue)); }
.pl-cap__pop ol { list-style: none; margin: 0; padding: 0; counter-reset: pl; }
.pl-cap__pop li { counter-increment: pl; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--border); }
.pl-cap__pop li::before { content: counter(pl); font: 800 26px/1 var(--font-display, inherit); color: color-mix(in oklab, var(--blue) 45%, var(--bg)); }
.pl-cap__pop li b { display: block; margin-bottom: 6px; font: 600 15px/1.35 var(--font-display, inherit); color: var(--ink); }

/* Subjects as lists */
.pl-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; }
.pl-list h3 { font-size: 20px; margin-bottom: 22px; }
.pl-list h3 a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.pl-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.pl-row:first-of-type { border-top: 0; padding-top: 0; }
.pl-row picture, .pl-row > img, .pl-row > .pl-none { height: auto; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.pl-row b { display: block; margin-top: 6px; font: 600 16px/1.35 var(--font-display, inherit); color: var(--ink); }

@media (max-width: 900px) {
    .pl-pick, .pl-cap, .pl-lists { grid-template-columns: 1fr; gap: 24px; }
    .pl-pick__big, .pl-pick__side { grid-column: 1; }
    .pl-pick__side { width: auto; margin: 0; }
    .pl-ring, .pl-dots, .pl-arcs { display: none; }
    .pl-cards { grid-template-columns: 1fr; gap: 24px; }
    .pl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-cap__lead b { font-size: 24px; }
    .pl-row { grid-template-columns: 104px minmax(0, 1fr); }
}