/* themes/alder/css/alder-cards.css
   Shared cards, on every Alder page (linked from partials/_shell-head.tpl.php
   after alder-app.css):
   1. Practice tile (partials/_practice-tile.tpl.php)
   2. Article card outside the homepage grid (partials/_article-card.tpl.php,
      the homepage .al-post card; its own rules stay in alder.css)
   3. Article grids the base modules still print as HTML (hub and search
      "Related Articles", blog "Related reading", /blog index, pSEO blocks),
      dressed as the same card until they render the partial.
   4. Video card (partials/_video-card.tpl.php), and the module-printed
      video grids dressed to match.
   Materials: paper panel, the one raise shadow, no rules, no gradients,
   no hover lift. */

/* 1. Practice tile ------------------------------------------------------ */
.al-ptile {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-width: 0; height: 100%; box-sizing: border-box;
  padding: 18px 18px 16px; border-radius: var(--al-r);
  background: var(--al-paper); box-shadow: var(--al-raise);
  font: 400 14px/1.45 var(--al-sans); color: var(--al-body); text-align: left;
}
.al-ptile p { margin: 0; }
.al-ptile__top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
/* The badge (top 14, 22 tall) shares a row with the kicker only; the name
   starts below it, so it keeps the full width. */
.al-ptile--ver .al-ptile__kick { padding-right: 88px; }
.al-ptile--ver .al-ptile__h { margin-top: 7px; }
.al-ptile__logo {
  position: relative; flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff;
}
.al-ptile__logo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #fff; }
.al-ptile__logo--rect { width: 96px; height: 48px; border-radius: 10px; padding: 6px; box-sizing: border-box; }
.al-ptile__logo--rect img { position: static; width: 100%; height: 100%; object-fit: contain; }
.al-ptile__init { font: 600 17px/1 var(--al-display); letter-spacing: -.01em; color: var(--al-moss); }
.al-ptile__id { flex: 1 1 auto; min-width: 0; }
.al-ptile__kick {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 10.5px/1.4 var(--al-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--al-muted);
}
.al-ptile__h {
  margin: 2px 0 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font: 600 18px/1.25 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); text-wrap: pretty;
}
.al-ptile__h a { color: inherit; text-decoration: none; transition: color .18s; }
/* The whole tile opens the practice page: one link, stretched. */
.al-ptile__h a::after { content: ""; position: absolute; inset: 0; border-radius: var(--al-r); }
.al-ptile__h a:focus-visible { outline: none; }
.al-ptile__h a:focus-visible::after { outline: 2px solid var(--al-ink); outline-offset: 3px; }
@media (hover: hover) { .al-ptile:hover .al-ptile__h a { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; } }
.al-ptile__loc { margin-top: 2px; font: 400 13px/1.4 var(--al-sans); color: var(--al-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.al-ptile__ver {
  position: absolute; top: 14px; right: 14px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px;
  border-radius: 999px; background: #fff; color: var(--al-pill);
  font: 600 11.5px/1 var(--al-sans); letter-spacing: .01em;
}
.al-ptile__ver svg { width: 13px; height: 13px; color: var(--al-brand); }

.al-ptile__match { font: 600 12.5px/1.3 var(--al-sans); color: var(--al-moss); }
.al-ptile__line {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: italic 400 15px/1.45 var(--al-serif); color: rgba(14, 42, 27, .75);
}
.al-ptile__spec { font: 500 12.5px/1.5 var(--al-sans); color: var(--al-muted); }
/* A centered 44px box (at least 44 wide, at least the word's width) is the
   tap target, without moving the line. Inline padding only reached 41px
   tall, and a short word like "Grief" was 30px wide. */
.al-ptile__spec a { position: relative; z-index: 1; color: var(--al-moss); text-decoration: none; }
.al-ptile__spec a::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
@media (hover: hover) { .al-ptile__spec a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.al-ptile__modes { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 12.5px/1.4 var(--al-sans); color: var(--al-body); }
.al-ptile__modes > span { display: inline-flex; align-items: center; gap: 5px; }
.al-ptile__modes svg { width: 14px !important; height: 14px !important; margin: 0 !important; color: var(--al-brand); }

.al-ptile__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 6px;
}
.al-ptile .al-book, .al-ptile__web { position: relative; z-index: 1; }
.al-ptile .al-book { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.al-ptile .al-book__btn { min-height: 44px; padding: 11px 20px; }
.al-ptile .al-book__btn .al-ico { width: 17px; height: 17px; }
.al-ptile .al-book__via { display: block; font: 400 11.5px/1.2 var(--al-sans); color: var(--al-muted); text-align: center; white-space: nowrap; }
.al-ptile .al-book__chk { display: none; }
.al-ptile__web { padding: 11px 18px; background: #fff; border-color: transparent; color: var(--al-ink); }
.al-ptile__web .al-ico { width: 16px; height: 16px; }
.al-ptile .ocd-ed-avail {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 26px; padding: 0 10px;
  border: 0; border-radius: 999px; background: #fff; color: var(--al-moss);
  font: 600 12px/1 var(--al-sans); letter-spacing: 0; text-transform: none;
}
.al-ptile .ocd-ed-avail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--al-brand); }
.al-ptile .ocd-ed-avail--no { color: var(--al-muted); }
.al-ptile .ocd-ed-avail--no::before { background: rgba(14, 42, 27, .3); }
@media (hover: none) {
  .al-ptile { transition: scale 80ms ease-out; }
  .al-ptile:active:not(:has(:is(.al-pill, .al-ptile__spec a):active)) { scale: .98; }
}

/* 2. Article card away from the homepage -------------------------------- */
/* The homepage spaces the card through .al-posts; any other grid gets the
   same body spacing and two-line title. */
.al-post:not(.al-post--row):not(.al-post--lead) > .al-post__pic + .al-post__body { margin-top: 16px; }
.al-post:not(.al-post--row):not(.al-post--lead) .al-post__h {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.al-post__tags { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.al-post__tags a, .al-post__au { position: relative; z-index: 1; color: inherit; text-decoration: none; padding-block: 13px; }
.al-post__tags a { color: var(--al-moss); }
.al-post__tags .al-post__dot { width: 16px; }
@media (hover: hover) { .al-post__tags a:hover, .al-post__au:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* body.al-theme: alder-pages.css (gap 20px) loads after this file. */
body.al-theme .al-postgrid { gap: 40px 32px; }
/* In a profile section the column is narrower: two up, not three. */
@media (min-width: 640px) { body.al-theme .al-psec .al-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.al-post { text-align: left; }
.al-post p { margin: 0; }

/* 3. Module-printed article grids, dressed as the homepage card --------- */
/* Hub / search "Related Articles", blog "Related reading"
   (modules/seo/seo.render.php seo_render_post_tile_grid). */
body.al-theme section:has(> .ocd-rel-grid) { border-top: 0; }
body.al-theme .ocd-rel-grid { gap: 40px 32px; }
body.al-theme .ocd-rel-card {
  position: relative; display: block; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; transition: none;
  opacity: 1;
}
body.al-theme .ocd-rel-card:hover { border: 0; box-shadow: none; transform: none; }
body.al-theme .ocd-rel-imgwrap {
  position: relative; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--al-sand);
}
/* No aspect-ratio (Safari 14.0): a padding strut holds the ratio under the
   absolutely positioned picture (see css/alder.css .al-phone). */
@supports not (aspect-ratio: 1) {
  body.al-theme .ocd-rel-imgwrap::before,
  body.al-theme .ocd-blog-card > a:first-child::before { content: ""; display: block; padding-top: 62.5%; }
}
body.al-theme .ocd-rel-img, body.al-theme .ocd-rel-card:hover .ocd-rel-img {
  position: absolute; inset: 0; max-width: none; transform: none; transition: none;
  background: var(--al-sand); background-image: none; animation: none;
}
body.al-theme .ocd-rel-body { display: grid; gap: 10px; align-content: start; padding: 16px 0 0; }
body.al-theme .ocd-rel-title {
  margin: 0; font: 600 20px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); transition: color .18s;
}
@media (hover: hover) { body.al-theme .ocd-rel-card:hover .ocd-rel-title { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; } }
body.al-theme .ocd-rel-summary {
  margin: 0; height: 3em; -webkit-line-clamp: 2; line-clamp: 2;
  font: 400 15px/1.5 var(--al-sans); color: var(--al-muted);
}
body.al-theme .ocd-rel-meta {
  gap: 0; padding: 0; border: 0; font: 500 13px/1.45 var(--al-sans); color: var(--al-muted);
}
body.al-theme .ocd-rel-meta > span[aria-hidden] { width: 20px; text-align: center; color: rgba(14, 42, 27, .35); }
body.al-theme .ocd-rel-author { font-weight: 500; color: var(--al-muted); }
@media (max-width: 900px) and (min-width: 600px) { body.al-theme .ocd-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* /blog index (modules/seo/seo.blog.php seo_render_blog_index): inline
   styles, so these need !important. */
body.al-theme .ocd-blog-grid { gap: 40px 32px; }
body.al-theme .ocd-blog-card { position: relative; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.al-theme .ocd-blog-card:hover { border: 0; box-shadow: none; }
body.al-theme .ocd-blog-card > a:first-child {
  height: auto !important; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--al-sand-2) !important;
}
body.al-theme .ocd-blog-card > a:first-child > span {
  font: 600 48px/1 var(--al-serif) !important; color: var(--al-moss) !important;
}
body.al-theme .ocd-blog-card .ocd-blog-img, body.al-theme .ocd-blog-card:hover .ocd-blog-img { transform: none; transition: none; }
body.al-theme .ocd-blog-card > div { padding: 16px 0 0 !important; gap: 10px; }
body.al-theme .ocd-blog-card a[href*="/blog?tag="] {
  padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important;
  font: 600 11px/1.3 var(--al-sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--al-moss) !important;
}
body.al-theme .ocd-blog-card > div > div:first-child:has(a[href*="/blog?tag="]) { gap: 4px 14px !important; margin-bottom: 0 !important; }
body.al-theme .ocd-blog-card h3 {
  margin: 0 0 10px !important; font: 600 20px/1.3 var(--al-serif) !important; letter-spacing: -.005em; color: var(--al-ink) !important;
}
@media (hover: hover) { body.al-theme .ocd-blog-card a:hover h3 { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; } }
body.al-theme .ocd-blog-card h3 + p {
  margin: 0 !important; -webkit-line-clamp: 2 !important; font: 400 15px/1.5 var(--al-sans) !important; color: var(--al-muted) !important;
}
body.al-theme .ocd-blog-card > div > div:last-child { border-top: 0 !important; padding-top: 10px !important; }
body.al-theme .ocd-blog-card > div > div:last-child > :first-child { width: 24px !important; height: 24px !important; }
body.al-theme .ocd-blog-card > div > div:last-child > :first-child img { width: 24px !important; height: 24px !important; }
body.al-theme .ocd-blog-card > div > div:last-child > div { font: 500 13px/1.45 var(--al-sans) !important; color: var(--al-muted) !important; }
body.al-theme .ocd-blog-card > div > div:last-child > div > :first-child { font-weight: 500 !important; color: var(--al-muted) !important; }

/* pSEO "Related articles" (modules/seo/seo.pseo.php pseo_render_block_posts). */
body.al-theme .pseo-block-posts .grid { gap: 40px 32px; }
body.al-theme .pseo-block-posts .grid > a { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body.al-theme .pseo-block-posts .grid > a > div:first-child:has(img) { height: auto; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--al-sand); }
body.al-theme .pseo-block-posts .grid > a > .p-5 { padding: 16px 0 0; }
body.al-theme .pseo-block-posts .grid > a .font-semibold { font: 600 20px/1.3 var(--al-serif); color: var(--al-ink); }
body.al-theme .pseo-block-posts .grid > a p { -webkit-line-clamp: 2; font: 400 15px/1.5 var(--al-sans); color: var(--al-muted); }

/* 4. Video card ---------------------------------------------------------- */
/* Same family as the article card: a rounded picture, words under it, no
   box. The whole card is one link; hover underlines the name. */
.al-vgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 600px) { .al-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 921px) { .al-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } }
.al-vcard {
  display: block; min-width: 0; border-radius: var(--al-r);
  color: inherit; text-decoration: none; text-align: left; -webkit-tap-highlight-color: transparent;
}
.al-vcard:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 4px; }
.al-vcard__pic {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--al-r); background: var(--al-sand-2);
}
.al-vcard__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@supports not (aspect-ratio: 1) {
  .al-vcard__pic::before { content: ""; display: block; padding-top: 56.25%; }
}
.al-vcard__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  color: var(--al-pill); transition: scale .2s ease;
}
.al-vcard__play circle { fill-opacity: .94; }
.al-vcard__row { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 14px; }
.al-vcard__face {
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden;
  width: 40px; height: 40px; border-radius: 50%; background: var(--al-sand-2);
  font: 600 15px/1 var(--al-serif); color: var(--al-moss);
}
.al-vcard__face img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 22%;
}
.al-vcard__id { display: grid; gap: 2px; min-width: 0; }
.al-vcard__name, .al-vcard__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-vcard__name { font: 600 18px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); transition: color .18s; }
.al-vcard__meta { font: 500 13px/1.45 var(--al-sans); color: var(--al-muted); }
@media (hover: hover) { .al-vcard:hover .al-vcard__name { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; } }
@media (hover: none) { .al-vcard:active .al-vcard__pic { scale: .98; } }

/* Module-printed video grids, dressed as the card above. The player stays
   in place (click plays the facade); only the dress changes.
   Hub, /providers and search "Video Introductions"
   (modules/seo/seo.render.php seo_render_video_card) and /clinics
   "Meet the Teams" (modules/orcounselors/orcounselors.clinics.php), and
   the /media index tiles (modules/seo/seo.pages.php). */
body.al-theme section:has(> .grid > [data-video-card].bg-white) { border-top: 0; }
body.al-theme .grid:has(> :is([data-video-card].bg-white, .ocd-media-tile)) { gap: 40px 32px; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) {
  background: none; border: 0; border-radius: 0; box-shadow: none !important; overflow: visible;
}
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade { border-radius: var(--al-r); background: var(--al-sand-2); }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade::after { content: none; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade:hover .ocd-vfacade-thumb { transform: none; filter: none; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade-play,
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade:hover .ocd-vfacade-play {
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border: 0; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) .ocd-vfacade-play svg {
  width: 22px; height: 22px; margin-left: 3px; fill: var(--al-pill); filter: none;
}
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a { gap: 12px; padding: 14px 0 0; background: none; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a > svg:last-child { display: none; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a > img { box-shadow: none; object-position: 50% 22%; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a > :is(img, div:first-child) { width: 40px; height: 40px; border: 0; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a > div:first-child {
  background: var(--al-sand-2); color: var(--al-moss); font: 600 15px/1 var(--al-serif);
}
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a .font-semibold,
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > .p-4 > a {
  font: 600 18px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); transition: color .18s;
}
@media (hover: hover) {
  body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a:hover .font-semibold,
  body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > .p-4 > a:hover { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; }
}
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > a .text-xs,
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > .p-4 > p { margin-top: 2px; font: 500 13px/1.45 var(--al-sans); color: var(--al-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.al-theme :is(div[data-video-card].bg-white, article.ocd-media-tile) > .p-4 { padding: 14px 0 0; }

/* Card hover, one rule for the family (Eric, 10-14: the homepage article
   rows went white on hover, because alder.css gives the dark lead card a
   white hover title and the phone compaction turns that card into a pale
   row). Hover never recolours a card title: it keeps the colour it rests
   in (ink on the page, white on the lead's dark scrim) and gains an
   underline. Nothing else moves: no picture zoom, no play-button growth. */
@media (hover: hover) {
  body.al-theme .al-post:hover .al-post__h a { color: inherit; text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .12em; }
  body.al-theme .al-post--lead:hover .al-post__media img { transform: none; }
}

/* 5. Phone cards, sized from openai.com at 390 (Eric, 10-14: "copy the
   layout, carousels and sizing, use our colors") ------------------------
   Three shapes, no box, no shadow, hover only underlines (above):
   - card (.al-post, .al-vcard): square picture, 16px corners; under it the
     title, 17px/1.3 ink on up to two lines, then one 13px meta line;
   - list row (.al-post--row): 120px square left, title and meta right;
   - featured (.al-post--lead): the card at full width (picture, title,
     meta), the dark scrim and white type are wide-screen only.
   Meta reads "Author · 7 min read": the date and the byline face are
   dropped on the phone (both still print). The html prefix outranks the
   homepage's phone sheet (alder-compact.css), which loads later; section
   layout, gutters and the snap rows stay Felix's. */
@media (max-width: 920px) {
  html body.al-theme .al-post .al-post__pic,
  html body.al-theme .al-post .al-post__media { aspect-ratio: 1; border-radius: 16px; }
  html body.al-theme .al-post .al-post__h {
    min-height: 0; font: 600 17px/1.3 var(--al-serif); letter-spacing: 0; color: var(--al-ink);
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  html body.al-theme .al-post .al-post__h a::after { inset: 0; border-radius: 16px; }
  html body.al-theme .al-post :is(.al-post__ex, .al-post__dek, .al-post__kick) { display: none; }
  html body.al-theme .al-post .al-post__line {
    flex-wrap: nowrap; margin: 0; white-space: nowrap; overflow: hidden;
    font: 500 13px/20px var(--al-sans); color: var(--al-muted);
  }
  html body.al-theme .al-post .al-post__line time:not(:last-child),
  html body.al-theme .al-post .al-post__line time:not(:last-child) + .al-post__dot,
  html body.al-theme .al-post .al-post__face { display: none; }
  html body.al-theme .al-post .al-post__line time:last-child { display: inline; }
  html body.al-theme .al-post .al-post__by { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--al-ink); }
  html body.al-theme .al-post .al-post__by:not(:last-child) { margin-right: 0; }
  html body.al-theme .al-post .al-post__by + .al-post__when { margin-left: 0; }
  html body.al-theme .al-post .al-post__au { padding-block: 0; }
  html body.al-theme .al-post .al-post__dot { color: rgba(14, 42, 27, .35); }

  /* Card */
  html body.al-theme .al-post:not(.al-post--row):not(.al-post--lead) { display: block; }
  html body.al-theme .al-post:not(.al-post--row):not(.al-post--lead) .al-post__body { gap: 12px; margin-top: 16px; }

  /* List row */
  html body.al-theme .al-post--row {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center;
    padding: 12px 0; aspect-ratio: auto; background: none;
  }
  html body.al-theme .al-post--row .al-post__pic { border-radius: 12px; }
  html body.al-theme .al-post--row .al-post__h a::after { border-radius: 12px; }
  html body.al-theme .al-post--row .al-post__body { gap: 12px; margin: 0; }
  html body.al-theme .al-post--row .al-post__h { -webkit-line-clamp: 3; line-clamp: 3; }

  /* Featured */
  html body.al-theme .al-post--lead {
    display: block; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; color: var(--al-ink);
  }
  html body.al-theme .al-post--lead .al-post__media { position: relative; inset: auto; z-index: auto; }
  html body.al-theme .al-post--lead .al-post__media img { transform: none; }
  html body.al-theme .al-post--lead .al-post__over {
    display: grid; gap: 12px; margin-top: 16px; padding: 0; border-radius: 0; background: none;
  }
  html body.al-theme .al-post--lead .al-post__h a { text-decoration-line: none; }
  html body.al-theme .al-post--lead .al-post__line { color: var(--al-muted); }

  /* Video card: the same card; the name is the title. */
  .al-vcard__pic { aspect-ratio: 1; border-radius: 16px; }
  @supports not (aspect-ratio: 1) {
    html body.al-theme .al-post .al-post__pic::before, .al-vcard__pic::before { padding-top: 100%; }
  }
  .al-vcard__row { display: block; margin-top: 16px; }
  .al-vcard__face { display: none; }
  .al-vcard__id { gap: 12px; }
  .al-vcard__name {
    white-space: normal; font-size: 17px; line-height: 1.3; letter-spacing: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .al-vcard__meta { line-height: 20px; }
}
@media (hover: hover) and (max-width: 920px) {
  html body.al-theme .al-post--lead:hover .al-post__h a { text-decoration-line: underline; }
}

/* Video grid on a phone: one sideways snap row, cards two thirds of the
   screen wide (openai.com's 259 of 390) so the next one shows. */
@media (max-width: 599px) {
  .al-vgrid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66vw; gap: 24px;
    margin-inline: calc(-1 * var(--al-gutter)); padding-inline: var(--al-gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--al-gutter); scrollbar-width: none;
  }
  .al-vgrid::-webkit-scrollbar { display: none; }
  .al-vgrid > * { scroll-snap-align: start; }
}