/* ============================================================
   SAKKARY MACHINERY — the blog
   Rides on tokens.css + main.css. Loads no sections.css, so the
   few pieces it borrows from there (the Ad Holic credit) are
   restated at the bottom rather than dragging in 30 KB of home
   page rules for four lines of style.

   These pages ship no JavaScript, so nothing here may depend on a
   class that JS adds.
   ============================================================ */

.blog-body { background: var(--bg); color: var(--fg); }

/* The header is fixed. The offset belongs inside the first band, not
   on <main>: padding <main> would leave a white strip the height of
   the header sitting above the dark opening band. */
.blog-body main > .section:first-child,
.blog-body main > .post > .section:first-child {
  padding-block-start: calc(var(--section-y) + var(--header-h));
}

/* The header, burger and drawer are main.css's, unmodified — the same
   markup, the same classes, the same breakpoints. Nothing about the
   chrome is restated here, which is the only way the two stay identical
   as the site changes.

   .skip likewise comes from main.css.

   The language control is a pair of links rather than buttons, because
   switching language on a blog page is a different URL, not a CSS
   toggle. main.css carries the [aria-current="true"] active state and
   the explicit box that anchors need, so nothing is overridden here
   either. */

/* No local heading scale. Headings use .h-display / .h-section from
   main.css, so the blog inherits the RTL corrections those carry:
   --lh-tight relaxes from 0.94 to 1.14 and --tr-display drops to 0
   in Arabic. Hand-set line-heights here clipped Arabic descenders. */
/* .sec-head and .dot are restated from sections.css, which these pages
   do not load — pulling in 30 KB of home-page rules for twelve lines
   would cost more than it saves. Keep the two in step if either moves. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-5) var(--s-8);
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }
.dot { color: var(--fg-3); margin-inline: .35em; }

.blog-hero .sec-head { margin-bottom: 0; }
.blog-hero .lede { margin-top: 0; }

/* ---------- category filter ---------- */
.blog-cats {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-block-end: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.tagl {
  padding: 7px var(--s-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--dur-2) var(--ease-cut), border-color var(--dur-2) var(--ease-cut);
}
.tagl:hover { color: var(--fg); border-color: var(--fg-3); }
.tagl.is-on { color: var(--accent-on); background: var(--accent-fill); border-color: var(--accent-fill); }

/* ---------- the grid ---------- */
.blog-list { padding-block-start: var(--s-7); }
.blog-empty { color: var(--fg-3); padding-block: var(--s-8); text-align: center; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--s-6);
}

.pcard { min-width: 0; }
.pcard__link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-cut), transform var(--dur-2) var(--ease-cut);
}
.pcard__link:hover { border-color: var(--fg-3); transform: translateY(-2px); }
.pcard__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-4) var(--ease-cut);
}
.pcard__link:hover .pcard__media img { transform: scale(1.03); }
.pcard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.pcard__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pcard__cat { color: var(--accent); }
.pcard__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  /* +0.18 over --lh-tight: card titles wrap to 2-3 lines where a
     display heading rarely does, and 0.94 collides in Arabic */
  line-height: calc(var(--lh-tight) + 0.18);
}
.pcard__x { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- pagination ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  padding-block-start: var(--s-8);
}
.pager__n { color: var(--fg-3); }

/* ---------- a post ---------- */
/* The article opens on graphite, the way the home page opens on the
   hero band. Body copy then sits on white — the same alternation the
   rest of the site runs on. */
.post__head .eyebrow { margin-bottom: var(--s-4); }
.post__head .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__t { margin: 0; max-width: 20ch; }
@media (min-width: 900px) { .post__t { max-width: 24ch; } }
.post__sub { margin-top: var(--s-5); display: flex; gap: var(--s-3); align-items: center; color: var(--fg-3); }

.post__cover { margin: 0 auto var(--s-8); max-width: 880px; }
.post__cover img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}

/* ---------- article body ----------
   Everything below .rich styles output the editor produced. The
   sanitiser guarantees the tag set, so this list is exhaustive:
   anything not here cannot reach the page. */
/* --maxw-text is the measure the home page's .lede already uses (66ch),
   so article copy lines up with the rest of the site instead of being
   a second, slightly different reading width. */
.post__body { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }

.rich { font-size: var(--fs-lg); line-height: 1.72; color: var(--fg); }
.rich > * + * { margin-block-start: var(--s-5); }
.rich p { margin: 0; }
.rich h2, .rich h3, .rich h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1.15;
  margin-block-start: var(--s-8);
  margin-block-end: 0;
}
.rich h2 { font-size: var(--fs-2xl); font-weight: 700; }
.rich h3 { font-size: var(--fs-xl); font-weight: 700; }
.rich h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .04em; }
.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich a:hover { color: var(--fg); }
.rich strong, .rich b { font-weight: 600; }
.rich ul, .rich ol { margin: 0; padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
.rich li { padding-inline-start: var(--s-2); }
.rich ul li::marker { color: var(--accent); }
.rich ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: .9em; }
.rich blockquote {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--accent-bright);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--fs-base);
}
.rich blockquote p + p { margin-block-start: var(--s-3); }
.rich img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}
.rich figure { margin: 0; }
.rich figcaption {
  margin-block-start: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.rich hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }
.rich code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 1px 5px;
}
.rich pre {
  margin: 0; padding: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
}
.rich pre code { background: none; border: 0; padding: 0; }
/* a wide table must scroll itself, never the page */
.rich table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); display: block; overflow-x: auto;
}
.rich th, .rich td { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); text-align: start; }
.rich th { background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- post footer CTA ---------- */
.post__cta {
  max-width: calc(var(--maxw-text) + 2 * var(--gutter));
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
}
.post__ctat { margin: 0; flex: 1 1 260px; font-size: var(--fs-lg); color: var(--fg-2); }

/* ---------- read next ---------- */
.blog-rel__h { margin: 0 0 var(--s-6); }

/* ---------- 404 ---------- */
.blog-404__cta { margin-top: var(--s-6); }

/* ---------- footer ---------- */
.blog-foot { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.blog-foot__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
}
.blog-foot__in p { margin: 0; }
.blog-foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.blog-foot__nav a { color: var(--fg-2); font-size: var(--fs-sm); }
.blog-foot__nav a:hover { color: var(--fg); }

/* Ad Holic credit — restated from sections.css, which this page
   does not load. Keep the two in step if either changes. */
.adholic { color: inherit; unicode-bidi: isolate; transition: color var(--dur-2) var(--ease-cut); }
.adholic:hover, .adholic:focus-visible { color: var(--fg); }

@media (max-width: 760px) {
  /* band padding now comes from .section / --section-y, same as the
     home page — nothing to override here but the reading size */
  .rich { font-size: var(--fs-base); }
  .post__t { max-width: none; }
}