/* DABB — the blog on the home page (.blog), and THE ENTRY (.blog-entry) that every list of articles uses:
   the three columns here, the rows of the blog index (.blog-entry--row) and "more articles" under an article.

   An entry is a hairline, a mono line (date · tag), the title (the link — it covers the whole entry), one line of text
   and the reading time. Nothing else: no box, no picture. Pointing at one (or focusing it) turns its hairline into
   THE TRAIL: a dabb's prints step out along it, either side of the line — a dash, then it stays.                      */

.blog, .blogx, .post {
  /* the trackway as a mask, 44 x 15 px per stride, walking towards the inline end (alpha only — it takes any ink):
     --blog-prints  a foot and the hand ahead of it, either side of a line that is already there (a hairline)
     --blog-trail   the same prints with the tail's own gently winding line — where it stands alone                  */
  --blog-prints: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='15' viewBox='0 0 44 15'%3E%3Cellipse cx='8' cy='3.1' rx='2.5' ry='1.6' transform='rotate(-22 8 3.1)'/%3E%3Cellipse cx='14.4' cy='2.5' rx='1.6' ry='1.15' transform='rotate(-22 14.4 2.5)'/%3E%3Cellipse cx='30' cy='11.9' rx='2.5' ry='1.6' transform='rotate(22 30 11.9)'/%3E%3Cellipse cx='36.4' cy='12.5' rx='1.6' ry='1.15' transform='rotate(22 36.4 12.5)'/%3E%3C/svg%3E");
  --blog-trail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='15' viewBox='0 0 44 15'%3E%3Cpath d='M0 7.5Q11 5.9 22 7.5T44 7.5' fill='none' stroke='black' stroke-width='1'/%3E%3Cellipse cx='8' cy='2.6' rx='2.5' ry='1.6' transform='rotate(-22 8 2.6)'/%3E%3Cellipse cx='14.4' cy='2' rx='1.6' ry='1.15' transform='rotate(-22 14.4 2)'/%3E%3Cellipse cx='30' cy='12.4' rx='2.5' ry='1.6' transform='rotate(22 30 12.4)'/%3E%3Cellipse cx='36.4' cy='13' rx='1.6' ry='1.15' transform='rotate(22 36.4 13)'/%3E%3C/svg%3E");
}

/* ───────── the home section ───────── IN THE SUN (AMENDMENT 7, css/base.css .in-sun): deep type on the bare, lifted sand,
   like the offices above it — reading is best in daylight. (It was the deepest shade of the page, .66.) */
.blog { --sh: var(--shade-sun); --sh-in: var(--shade-sun); }
.blog__head { display: grid; gap: var(--s-4); margin-block-end: clamp(40px, 5vw, 72px); }
.blog__all { font-size: var(--fs-body); line-height: 1.4; }
@media (min-width: 640px) {
  .blog__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--gutter); }
  .blog__label { grid-column: 1 / -1; }
  .blog__all { padding-block-end: 0.45em; }
}
html[lang="ar"] .blog__all { padding-block-end: 0.9em; }

.blog__list { display: grid; }
.blog__item:nth-child(n + 4) { display: none; }      /* the three latest */
@media (min-width: 900px) {
  .blog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .blog__list .blog-entry { padding-block-end: 0; }      /* one row: the section's own air closes it */
}

/* ───────── the entry ───────── */
.blog-entry {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  block-size: 100%; padding-block: var(--s-5) var(--s-7);
}
.blog-entry::before {                                  /* its hairline */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--hair); background: var(--rule-2);
}
.blog-entry::after {                                   /* … and the prints that step out along it */
  content: ""; position: absolute; inset-block-start: -7px; inset-inline: 0; block-size: 15px; pointer-events: none;
  background: var(--fg);
  -webkit-mask: var(--blog-prints) 0 50% / 44px 15px repeat-x; mask: var(--blog-prints) 0 50% / 44px 15px repeat-x;
  clip-path: inset(0 100% 0 0);
}
[dir="rtl"] .blog-entry::after { transform: scaleX(-1); }      /* the walk follows the reading direction */
.blog-entry:focus-within::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) { .blog-entry:hover::after { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .blog-entry::after { transition: clip-path var(--t-4) var(--e-dash); }
  .blog-entry__arrow { transition: transform var(--t-3) var(--e-dash); }
}

.blog-entry__meta { gap: var(--s-2); margin-block-end: var(--s-5); }
.blog-entry__sep { color: var(--fg-2); }                       /* (small: the secondary ink — the tertiary is for large type and marks) */
.blog-entry__main { display: grid; gap: var(--s-3); }
.blog-entry__link { color: inherit; text-decoration: none; }
.blog-entry__link::after { content: ""; position: absolute; inset: 0; }      /* the whole entry is the link */
.blog-entry__link:focus-visible { outline-offset: 4px; }
.blog-entry__excerpt { max-inline-size: 46ch; color: var(--fg-2); text-wrap: pretty; }
.blog-entry__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  inline-size: 100%; margin-block-start: auto; padding-block-start: var(--s-6); color: var(--fg-2);
}
/* the entry's own sprig: beside the reading time, rooted on the label's own line (its box takes a line's height only:
   the plant lies in the air the foot already keeps above and below) */
.blog-entry__read { display: inline-flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }
.blog-entry__sprig { --plant: 44px; margin-block: calc(8px - var(--plant) / 2); margin-inline: calc(24px - var(--plant) / 2); }      /* (a place 48 px wide whatever the plant: the reading times stand in one line down a list) */
.blog-entry__arrow { color: var(--fg); }
.blog-entry:focus-within .blog-entry__arrow { transform: translateX(6px); }
[dir="rtl"] .blog-entry:focus-within .blog-entry__arrow { transform: scaleX(-1) translateX(6px); }
@media (hover: hover) {
  .blog-entry:hover .blog-entry__arrow { transform: translateX(6px); }
  [dir="rtl"] .blog-entry:hover .blog-entry__arrow { transform: scaleX(-1) translateX(6px); }
}

/* stacked entries (phone; the index below 900 px): a little less air between them */
@media (max-width: 899px) {
  .blog-entry { padding-block-end: var(--s-6); }
  .blog-entry__foot { padding-block-start: var(--s-5); }
}

/* ───────── the entry as a row (the blog index, from 900 px): date and tag · title and line · minutes ───────── */
@media (min-width: 900px) {
  .blog-entry--row {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
    padding-block: var(--s-6) var(--s-8);
  }
  .blog-entry--row .blog-entry__meta { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; gap: var(--s-1); margin: 0; padding-block-start: 0.5em; }
  .blog-entry--row .blog-entry__sep { display: none; }
  .blog-entry--row .blog-entry__main { grid-column: 4 / span 7; gap: var(--s-4); }
  .blog-entry--row .blog-entry__excerpt { max-inline-size: 52ch; }
  .blog-entry--row .blog-entry__foot { grid-column: 11 / -1; justify-content: flex-end; margin: 0; padding-block-start: 0.5em; }
}