/* DABB — the blog index (.blogx) and the article page (.post).
   The entry component (.blog-entry) and the two trackway masks (--blog-prints, --blog-trail) live in 06-blog.css.

   .post is a calm reading page: the head (back · date · tag · minutes · the title), the lead and the author, then the
   BODY in one column of about 68 characters with a full typographic system for long reading in both scripts, and the end
   (the trackway, two more articles, one call to action).
   From 1200 px the start margin carries THE TRAIL (.post__aside): the article's headings as stops on a fine line and a
   small living dabb that walks down it as the page is read (js/parts/21-blog.js).                                      */

/* both pages start under the floating header */
.blogx, .post { --sh: var(--shade-sun); --sh-in: var(--shade-sun); }      /* reading pages: IN THE SUN (AMENDMENT 7, base.css .in-sun) — long reading in deep type on the bare, lifted sand (it was one deep shade, .70) */
.blogx, .post { padding-block-start: calc(var(--band-h) + var(--header-h) + clamp(40px, 7vw, 104px)); }

/* ───────── the index ───────── */
.blogx__list { display: grid; }

/* ───────── the article ───────── */
.post {
  --post-measure: 43rem;                               /* the reading column: about 68 characters of the body size */
  --post-top: calc(var(--band-h) + var(--header-h) + var(--s-6));      /* where a sticky thing / a heading jumped to rests */
  --p-lh: calc(var(--lh-body) + 0.06);                 /* long reading: a little more leading than the interface (1.66 · Arabic 1.96) */
}
.post__wrap { display: grid; grid-template-columns: minmax(0, 1fr); }

/* the head */
.post__head { display: grid; justify-items: start; padding-block-end: clamp(32px, 4.5vw, 64px); border-block-end: var(--hair) solid var(--rule-2); }
.post__back { gap: var(--s-2); color: var(--fg); text-decoration: none; min-block-size: 32px; margin-block-end: clamp(32px, 4.5vw, 64px); }
.post__back-ico { inline-size: 1.5em; block-size: 1.5em; transform: scaleX(-1); }      /* the sprite's arrow points forward; "back" is the other way */
[dir="rtl"] .post__back-ico { transform: none; }
@media (prefers-reduced-motion: no-preference) { .post__back-ico { transition: transform var(--t-3) var(--e-dash); } }
@media (hover: hover) {
  .post__back:hover .post__back-ico { transform: scaleX(-1) translateX(5px); }
  [dir="rtl"] .post__back:hover .post__back-ico { transform: translateX(5px); }
}
/* the article's own sprig (the plant that marks it in every list), larger and in flower: phones — in the head's end
   corner, level with the way back; from 900 px — on the sand beside the title */
.post__head { position: relative; }
.post__sprig {
  --post-sprig: min(var(--plant), 20vw);                /* (a phone: smaller than the script asks — it shares the head's first line) */
  position: absolute; inline-size: var(--post-sprig); block-size: var(--post-sprig);
  inset-block-start: calc(16px - var(--post-sprig) / 2); inset-inline-end: 6px;
}
@media (min-width: 900px) {
  .post__sprig { --post-sprig: var(--plant); inset-block-start: auto; inset-block-end: calc(clamp(32px, 4.5vw, 64px) + 0.2em); inset-inline-end: clamp(24px, 10vw, 176px); }
}
.post__meta { flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-block-end: var(--s-5); }
.post__title { max-inline-size: 22ch; }
html[lang="ar"] .post__title { line-height: calc(var(--lh-head) + 0.14); }      /* two lines of heavy Arabic with stacked marks (حقًّا under الذي) must not touch */

.post__lead { max-inline-size: var(--post-measure); margin-block-start: clamp(32px, 4.5vw, 56px); }
.post__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-block-start: var(--s-5); }
.post__author { font-weight: var(--w-strong); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* the aside exists from 1200 px only (and only once the script has built it) */
.post__aside { display: none; }

/* ───────── the body: long reading ───────── */
.post__body {
  max-inline-size: var(--post-measure); margin-block-start: clamp(32px, 4.5vw, 56px);
  font-size: calc(var(--fs-body) * 1.06); line-height: var(--p-lh);
  text-wrap: pretty; overflow-wrap: break-word; hanging-punctuation: first;
}
.post__body > * + * { margin-block-start: 1.3em; }
.post__body :is(h2, h3) { font-family: var(--f-display); text-wrap: balance; scroll-margin-block-start: var(--post-top); }
.post__body h2 {
  font-size: calc(var(--fs-h3) * 1.2); line-height: var(--lh-snug); letter-spacing: var(--tr-h3);
  font-weight: var(--w-h2); font-stretch: var(--sub-stretch);
}
.post__body h3 {
  font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--tr-h3);
  font-weight: var(--w-h3); font-stretch: var(--sub-stretch);
}
.post__body > * + h2 { margin-block-start: 2.1em; }
.post__body > * + h3 { margin-block-start: 1.9em; }
.post__body > :is(h2, h3) + * { margin-block-start: 0.85em; }
.post__body h2 + h3 { margin-block-start: 1em; }

/* links inside the text: the site's link (ink, a 2 px yellow rule that rises into a marker stroke) */
.post__body a {
  color: inherit; text-decoration: none; font-weight: var(--w-strong);
  background: linear-gradient(var(--link-rule), var(--link-rule)) no-repeat 0 100% / 100% 2px;
  padding-block-end: 1px;
  transition: background-size var(--t-2) var(--e-dash), color var(--t-2) var(--e-std);
}
.post__body a:hover { background-size: 100% 100%; color: var(--link-hover-fg); }

/* lists: a single scale for a bullet; mono numbers for a sequence */
.post__body :is(ul, ol) { list-style: none; padding-inline-start: 1.7em; }
.post__body ol { counter-reset: post-item; padding-inline-start: 2.3em; }
.post__body li { position: relative; }
.post__body li + li, .post__body li > :is(ul, ol) { margin-block-start: 0.5em; }
.post__body li > p + p { margin-block-start: 0.6em; }
.post__body ul > li::before {
  content: ""; position: absolute; inset-inline-start: -1.45em; inset-block-start: calc((var(--p-lh) * 1em - 7px) / 2);
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--fg-2);
}
.post__body ol > li { counter-increment: post-item; }
.post__body ol > li::before {
  content: counter(post-item, decimal-leading-zero); position: absolute; inset-inline-start: -2.9em; inset-block-start: 0.12em;
  font-family: var(--f-mono); font-size: 0.78em; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--fg-2);
}

/* a quotation: the one yellow rule of the page */
.post__body blockquote {
  margin-block: 2em; padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--accent);
  font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty;
}
.post__body blockquote > * + * { margin-block-start: 0.7em; }
.post__body blockquote :is(cite, footer) { display: block; font-style: normal; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-2); }

/* code is always left-to-right, also inside Arabic */
.post__body :is(code, kbd, samp) {
  font-family: var(--f-mono); font-size: 0.86em; font-weight: 500; letter-spacing: 0;
  direction: ltr; unicode-bidi: isolate;
  padding: 0.14em 0.4em; background: var(--bg-2); border: var(--hair) solid var(--rule); border-radius: var(--r-1);
}
.post__body :not(pre) > code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (min-width: 640px) { .post__body :not(pre) > code { white-space: nowrap; } }      /* a name is not broken at its hyphens where there is room */
.post__body pre {
  margin-block: 1.8em; padding: var(--s-5); overflow-x: auto;
  direction: ltr; text-align: left;                    /* must not mirror: program text */
  background: var(--bg-2); border: var(--hair) solid var(--rule); border-radius: var(--r-1);
  font-size: var(--fs-sm); line-height: 1.6; tab-size: 2; white-space: pre;
}
.post__body pre code { padding: 0; background: none; border: 0; font-size: inherit; white-space: inherit; }
@media (max-width: 639px) {                              /* on a phone a long line folds instead of hiding behind a sideways scroll */
  .post__body pre { padding: var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: wrap; }
}

.post__body hr { border: 0; block-size: var(--hair); background: var(--rule); margin-block: 2.4em; }
.post__body figure { margin-block: 2em; }
.post__body :is(img, svg, video) { max-inline-size: 100%; block-size: auto; border-radius: var(--r-1); }
.post__body figcaption {
  margin-block-start: var(--s-3); font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.5; color: var(--fg-2);
}
html[lang="ar"] .post__body figcaption { font-family: var(--f-text); }
.post__body table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.post__body :is(th, td) { padding-block: var(--s-3); padding-inline: 0 var(--s-4); text-align: start; border-block-end: var(--hair) solid var(--rule); vertical-align: top; }
.post__body th { font-weight: var(--w-strong); border-block-end-color: var(--fg); }

/* ───────── the end ───────── */
.post__end { margin-block-start: clamp(72px, 10vw, 144px); }
.post__trail {                                           /* the trackway: where the reading stops, the walk goes on */
  block-size: 15px; background: var(--fg);
  -webkit-mask: var(--blog-trail) 0 50% / 44px 15px repeat-x; mask: var(--blog-trail) 0 50% / 44px 15px repeat-x;
}
[dir="rtl"] .post__trail { transform: scaleX(-1); }
.post__more { margin-block-start: clamp(48px, 6vw, 88px); }
.post__more-title { margin-block-end: var(--s-6); }
.post__more-list { display: grid; }
/* the two newest that are not this article — the list holds every article, newest first, and data-at says which one this
   page is: reading the newest hides entry 1 and shows 2 and 3; reading the second hides entry 2 and shows 1 and 3; reading
   any older one shows 1 and 2. Plain selectors, so every browser agrees (and the page needs no <style> of its own). */
.post__more-item:nth-child(n + 4) { display: none; }
.post__more-list:not([data-at="1"]):not([data-at="2"]) > .post__more-item:nth-child(3) { display: none; }
.post__more-list[data-at="1"] > .post__more-item:nth-child(1),
.post__more-list[data-at="2"] > .post__more-item:nth-child(2) { display: none; }
@media (min-width: 640px) {
  .post__more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
.post__cta {
  display: grid; justify-items: start; gap: var(--s-6);
  margin-block-start: clamp(40px, 5vw, 72px); padding-block-start: clamp(40px, 5vw, 72px); border-block-start: var(--hair) solid var(--rule-2);
}
@media (min-width: 640px) {
  .post__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--gutter); }
}

/* ───────── from 1200 px: the grid, and the trail in the start margin ───────── */
@media (min-width: 1200px) {
  .post__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .post__head, .post__end { grid-column: 1 / -1; }
  .post__lead { grid-column: 4 / -1; grid-row: 2; }
  .post__by { grid-column: 1 / span 3; grid-row: 2; align-self: start; flex-direction: column; gap: var(--s-1); margin-block-start: clamp(32px, 4.5vw, 56px); padding-block-start: 0.45em; }
  /* the trail and the body in one box with the page's own twelve columns: a sticky box is held by its PARENT (not by a
     grid row), so the trail stops with the article and never runs over "More articles" — nothing opaque is needed */
  .post__main { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .post__body { grid-column: 4 / -1; grid-row: 1; }
  .post__end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    position: relative; z-index: 2; margin-block-start: 0; padding-block-start: clamp(72px, 10vw, 144px); }
  .post__trail { grid-column: 1 / -1; }
  .post__more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .post__more-title { grid-column: 1 / span 3; align-self: start; margin: 0; padding-block-start: var(--s-5); }
  .post__more-list { grid-column: 4 / -1; }
  .post__cta { grid-column: 4 / -1; }

  .post__aside {
    --trail-x: 22px;                                     /* the line, measured from the aside's start edge */
    display: block; position: sticky; inset-block-start: var(--post-top); align-self: start;
    grid-column: 1 / span 3; grid-row: 1; margin-block-start: clamp(32px, 4.5vw, 56px);
  }
  .post__toc { position: relative; display: grid; padding-block: 0.4em; }
  .post__toc::before {                                   /* the trail's line */
    content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--trail-x); inline-size: var(--hair); background: var(--rule-2);
    opacity: 0.55;
  }
  .post__stop { position: relative; }
  .post__stop--end { block-size: var(--s-5); }           /* the two ends of the trail carry no words */
  .post__stop-link {
    position: relative; display: block; padding-block: var(--s-2); padding-inline-start: calc(var(--trail-x) + 34px); padding-inline-end: var(--s-4);
    font-size: var(--fs-sm); line-height: 1.35; color: var(--fg-2); text-decoration: none; text-wrap: balance;
  }
  html[lang="ar"] .post__stop-link { line-height: 1.6; }
  .post__mark {                                          /* a stop: a short tick from the line towards its name */
    position: absolute; inset-inline-start: var(--trail-x); inset-block-start: 50%; inline-size: 9px; block-size: var(--hair);
    background: var(--rule-2); transform-origin: 0 50%;
  }
  [dir="rtl"] .post__mark { transform-origin: 100% 50%; }
  .post__stop-link .post__mark { inset-block-start: calc(var(--s-2) + 0.675em); }      /* on the first line of the name */
  html[lang="ar"] .post__stop-link .post__mark { inset-block-start: calc(var(--s-2) + 0.8em); }
  .post__stop-link:hover { color: var(--fg); }
  .post__stop-link[aria-current] { color: var(--fg); font-weight: var(--w-strong); }
  .post__stop-link[aria-current] .post__mark { background: var(--fg); transform: scaleX(2); }
  .post__stop.has-dabb .post__mark { opacity: 0; }       /* the animal stands on it */
  @media (prefers-reduced-motion: no-preference) {
    .post__stop-link { transition: color var(--t-2) var(--e-std); }
    .post__mark { transition: transform var(--t-2) var(--e-dash), background-color var(--t-2) var(--e-std), opacity var(--t-1) var(--e-std); }
  }
  /* the animal's canvas: over the line, wide enough on the outer side for it to turn round without crossing the words */
  .post__cv {
    position: absolute; inset-block: -56px; inset-inline-start: calc(var(--trail-x) - 92px);
    inline-size: 132px; block-size: calc(100% + 112px); max-inline-size: none; pointer-events: none;
  }
}