/* Draw Hall blog list (themes/draw-hall/list.php): each post a white card
   under the LED strip, its picture on a monitor in a navy bezel, a lamp in
   one of the studio colours at its corner and the date under a fine rule;
   the head ruled with a length of LED strip. */
.drh-blog { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; color: var(--ink); }
.drh-blog--single { max-width: 48rem; }
.drh-blog__head { position: relative; margin-bottom: 2.2rem; padding-bottom: 1.6rem; }
.drh-blog__head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--drh-topline); }
.drh-blog__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 3.4rem); font-weight: 900; font-stretch: 118%; line-height: 1.12; color: var(--ink); overflow-wrap: anywhere; }
.drh-blog__back { display: inline-flex; gap: .35rem; margin-top: .6rem; font-size: .92rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--drh-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
[dir="rtl"] .drh-flip-rtl { display: inline-block; transform: scaleX(-1); }
.drh-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 1.4rem; }
@media (min-width: 640px) { .drh-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .drh-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.drh-post {
  --m: var(--drh-t1);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px; box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s ease;
}
.drh-post::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--drh-topline); }
.drh-post:nth-child(4n+2) { --m: var(--drh-t3); }
.drh-post:nth-child(4n+3) { --m: var(--drh-t2); }
.drh-post:nth-child(4n+4) { --m: var(--drh-t4); }
.drh-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.drh-post__pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin: 18px 18px 6px; border-radius: 8px; background: var(--paper-3); box-shadow: 0 0 0 5px #0b1433, 0 0 0 6px rgba(255, 255, 255, .12); }
html.dark .drh-post__pic { box-shadow: 0 0 0 5px #03050f, 0 0 0 6px rgba(93, 128, 255, .3); }
.drh-post__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drh-post__none { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; color: var(--ink-soft); }
.drh-post__body { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.05rem 1.25rem 1.3rem; }
.drh-post__body::after { content: ''; position: absolute; top: 1.15rem; inset-inline-end: 1.1rem; width: 9px; height: 9px; border-radius: 50%; background: var(--m); box-shadow: 0 0 8px var(--m); }
.drh-post__cat { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--drh-red-ink); padding-inline-end: 1.4rem; }
html.dark .drh-post__cat { color: var(--drh-red); }
html:is([lang="ar"], [lang="ur"], [lang="bn"], [lang="zh-CN"]) .drh-post__cat { letter-spacing: 0; font-size: 12.5px; }
.drh-post__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; font-stretch: 112%; line-height: 1.25; overflow-wrap: anywhere; }
.drh-post__excerpt { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.drh-post__date { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--ink-soft); }
.drh-blog__pages { display: flex; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.drh-blog__pages .page-link { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--ink-2); text-decoration: none; border: 1px solid var(--rule); border-radius: 8px; font-family: var(--font-num); font-weight: 700; box-shadow: 0 2px 0 var(--rule); }
.drh-blog__pages .page-link.active, .drh-blog__pages .page-link[aria-current="page"] { border-color: transparent; color: var(--btn-ink); background: var(--btn-bg); box-shadow: 0 2px 0 var(--btn-side); }
@media (prefers-reduced-motion: reduce) { .drh-post { transition: none; } .drh-post:hover { transform: none; } }