/* BizAuto — the blog index and the article page.
 *
 * Same direction as the landing page, applied to a different job. There the hero had to
 * argue; here the page has one purpose, which is to be read, so the boldness is spent on
 * the header and everything after it gets out of the way. The night ground carries the
 * title, the article sits on paper, and the only colour inside the prose is the one that
 * marks a link or a list marker.
 *
 * Display face is Sahel Bold, as on the landing page — the article's own body face stays
 * Vazirmatn, because a display face set at 17px over two thousand words is a headline
 * pretending to be text.
 *
 * What is NOT touched below: the article prose engine further down this file. It attaches
 * the design to the tags themselves so an article can be written as plain h2/p/ul/table
 * and come out looking designed, and it was already right. Re-skinning the furniture is
 * the whole job here.
 */

@font-face {
    font-family: sahel;
    src: url('/css/font/Sahel-Bold-FD.woff2') format('woff2'),
         url('/css/font/Sahel-Bold-FD.woff') format('woff');
    /* Declared across 700-900, not at 700 alone. Headings on these pages ask for 800, and
       a family that offers only 700 makes the browser synthesise the difference by
       smearing the outlines — which on Persian thickens the joins until the counters close
       up. font.css makes exactly this argument for Vazir-Black; one file covering the
       range means every weight in it lands on the real face. */
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink:       #080D1C;
    --ink-line:  rgba(255,255,255,0.10);
    --ink-text:  #E8EDF7;
    --ink-muted: #93A2C4;
    --ink-faint: #7D8CB2;
    --display:   sahel, vazirmatn, 'Segoe UI', Tahoma, sans-serif;
    --ease:      cubic-bezier(.22,.68,.28,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg); color: var(--text);
    font-family: vazirmatn, 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.85; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

:where(a, button):focus-visible {
    outline: 2px solid #14807A; outline-offset: 3px; border-radius: 6px;
}

/* ---- buttons ---------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 12px; min-height: 48px;
    font-weight: 700; font-size: .95rem; font-family: inherit; white-space: nowrap;
    border: none; cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .22s var(--ease),
                background .18s var(--ease), border-color .18s var(--ease);
}
.btn-sm { padding: 9px 18px; min-height: 40px; font-size: .88rem; border-radius: 10px; }
.btn-primary {
    background: var(--primary); color: #fff;
    box-shadow: 0 1px 2px rgba(15,107,102,.3), 0 10px 26px -6px rgba(15,107,102,.55);
}
.btn-primary:hover {
    background: var(--primary-hover); transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15,107,102,.32), 0 16px 34px -8px rgba(15,107,102,.6);
}
.btn-outline { color: var(--ink-text); border: 1px solid var(--ink-line); background: transparent; }
.btn-outline:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.05); }

/* ---- navbar ------------------------------------------------------------------------ */
/* Bound to the navbar's own id, not to every nav on the page — the breadcrumb under the
   header is a <nav> too, and a bare element selector would have made it fixed. */

#navbar {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
    padding: 14px 0; border-block-end: 1px solid transparent;
    transition: padding .3s var(--ease), background .3s var(--ease),
                border-color .3s var(--ease);
}
#navbar.scrolled {
    padding: 8px 0; background: rgba(8,13,28,.82);
    backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: blur(14px);
    border-block-end-color: var(--ink-line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

#navbar .logo {
    display: inline-flex; align-items: center; gap: 10px;
    /* Explicit: the display family has no weight below 700, so inheriting the body's 400
       would be asking for a face that does not exist. */
    font-family: var(--display); font-weight: 700;
    font-size: 1.15rem; color: var(--ink-text);
}
#navbar .logo img { width: 34px; height: 34px; border-radius: 9px; }

.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--ink-muted); font-size: .93rem; font-weight: 600; transition: color .18s; }
.nav-links a:hover { color: var(--ink-text); }

.nav-left { display: flex; align-items: center; gap: 10px; }

.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.mobile-toggle span { width: 22px; height: 2px; background: var(--ink-text); border-radius: 2px; }

/* The header, breadcrumb, topic pill, byline and progress bar are defined once, under
   "Article furniture" further down — including the argument for a faint grid rather than a
   blurred glow behind the title. Deliberately not repeated here.
   -------------------------------------------------------------------------------- */

/* ---- cover ---------------------------------------------------------------------------- */

.post-cover {
    max-width: 46rem; margin: 0 auto 40px; border-radius: 20px; overflow: hidden;
    border: 1px solid var(--border); background: #EEF1F8;
}
.post-cover img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

.draft-notice {
    max-width: 46rem; margin: 0 auto 28px; padding: 13px 18px; border-radius: 12px;
    background: var(--warning-light); color: #92400E;
    border: 1px solid rgba(245,158,11,.35);
    font-size: .9rem; font-weight: 700;
}

/* ---- the closing call to action -------------------------------------------------------- */

.post-cta {
    position: relative; overflow: hidden; text-align: center;
    margin-block-start: 72px; padding: 56px 28px; border-radius: 24px;
    background: var(--ink); color: var(--ink-text);
}
.post-cta::before {
    content: ''; position: absolute; inset-block-start: -45%; inset-inline-start: 50%;
    width: 520px; height: 520px; transform: translateX(50%);
    background: radial-gradient(circle, rgba(15,107,102,.32), transparent 62%);
    filter: blur(20px); pointer-events: none;
}
.post-cta > * { position: relative; }
.post-cta h3 { font-family: var(--display); color: #fff; font-size: 1.55rem; }
.post-cta p { margin: 14px auto 26px; max-width: 30rem; color: var(--ink-muted); font-size: .98rem; }
.post-cta .btn-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 30px; border-radius: 12px; min-height: 48px;
    background: var(--primary); color: #fff; font-weight: 700;
    box-shadow: 0 1px 2px rgba(15,107,102,.3), 0 10px 26px -6px rgba(15,107,102,.55);
    transition: transform .18s var(--ease), background .18s var(--ease);
}
.post-cta .btn-cta:hover { background: var(--primary-hover); transform: translateY(-2px); }

/* ---- related posts ---------------------------------------------------------------------- */

.related {
    max-width: 60rem; margin: 72px auto 0; padding: 0 24px;
}
.related > h2 {
    font-family: var(--display); font-size: 1.3rem; margin-block-end: 22px; color: var(--text);
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card {
    display: flex; flex-direction: column; gap: 8px; padding: 22px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.related-card:hover {
    transform: translateY(-4px); border-color: rgba(12,22,48,.16);
    box-shadow: 0 20px 42px -24px rgba(12,22,48,.3);
}
.related-card h3 { font-family: var(--display); font-size: 1rem; line-height: 1.6; color: var(--text); }
.related-card p {
    font-size: .86rem; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- footer -------------------------------------------------------------------------------- */

footer { background: var(--ink); color: var(--ink-muted); padding: 66px 0 26px; margin-block-start: 90px; }
.footer-grid {
    display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px;
    padding-block-end: 40px; border-block-end: 1px solid var(--ink-line);
}
.footer-brand p { margin-block-start: 16px; font-size: .89rem; max-width: 26rem; }
.footer-col h4 {
    font-size: .82rem; color: #fff; margin-block-end: 16px; font-weight: 700;
    font-family: vazirmatn, sans-serif;
}
.footer-col a { display: block; font-size: .88rem; padding-block: 5px; transition: color .18s; }
.footer-col a:hover { color: var(--ink-text); }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; padding-block-start: 24px; font-size: .82rem;
}

/* ---- responsive ------------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

    .mobile-toggle { display: flex; }
    .nav-links {
        position: fixed; inset-block-start: 62px; inset-inline: 12px;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 14px;
        background: rgba(8,13,28,.97); backdrop-filter: blur(16px);
        border: 1px solid var(--ink-line); border-radius: 18px;
        opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: 11px 12px; border-radius: 10px; }
}

@media (max-width: 620px) {
    .container, .post-header-inner { padding-inline: 18px; }
    .related-grid, .footer-grid { grid-template-columns: 1fr; }
    .post-cta { padding: 42px 20px; }
    .related { margin-block-start: 52px; }
    footer { margin-block-start: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* get post chatgpt for body */
/* =========================================================
   BizAuto Article System
   نسخه 1.0 — RTL / Responsive / SEO-friendly
   ========================================================= */

:root {
  /* The article inherits the site's palette rather than keeping one of its own.
     It used to declare its own purple (#7c3aed) while every button, link and logo
     elsewhere on the page was the brand teal (--primary, #0f6b66) — two brands arguing on one
     screen, which is most of why the page read as untended however well the type was set.
     Anything the article genuinely needs and tokens.css does not have is derived from
     --primary here, so there is still only one colour to change. */
  --post-accent: var(--primary);
  --post-accent-hover: var(--primary-hover);
  --post-accent-soft: var(--primary-light);
  /* Headings take the site's full-strength ink; body text sits one step down the same
     slate ramp (--text is slate-900, --text-secondary slate-600, this is slate-800).
     Setting both to --text makes a long article shout every line at the same weight and
     leaves the headings nothing to be darker than. */
  --post-heading: var(--text);
  --post-text: #1e293b;
  --post-muted: var(--text-secondary);
  /* --border is a 6% hairline drawn for large panels; between two table cells it is
     invisible, and a table whose grid you cannot see is a list of stray numbers. */
  --post-border: rgba(15, 23, 42, .10);
  --post-surface: var(--surface);
  --post-surface-soft: var(--bg);

  /* Reading measure, not layout width. 920px put roughly 100 characters on a line; the
     eye loses its place returning to the start of the next one much past 75. Wide things
     — tables, images — break out of this on their own below, so narrowing the column
     costs them nothing. */
  --post-max-width: 46rem;
  --post-wide-width: 60rem;

  --post-success: #087f5b;
  --post-danger: #c92a2a;
  --post-warning: #b76e00;
  --post-radius: 18px;
  --post-shadow: 0 8px 30px rgba(16, 24, 40, .06);
  --post-line-height: 2;
}

.post-content {
  direction: rtl;
  max-width: var(--post-max-width);
  margin-inline: auto;
  padding: 12px 20px 56px;
  color: var(--post-text);
  font-family: inherit;
  font-size: 17px;
  line-height: var(--post-line-height);
  text-align: right;
  /* `anywhere` broke Persian words down the middle wherever a line ran long — the browser
     is allowed to split inside a word only when there is no other way to fit it, which is
     what break-word means. Long unbroken strings (a URL) still wrap. */
  overflow-wrap: break-word;
}

.post-content *,
.post-content *::before,
.post-content *::after {
  box-sizing: border-box;
}

.post-content p {
  margin: 0 0 1.25rem;
}

.post-content strong {
  color: var(--post-heading);
  font-weight: 800;
}

.post-content a {
  color: var(--post-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: 3px;
}

.post-section {
  margin: 0 0 48px;
}

.post-section:last-child {
  margin-bottom: 0;
}

.post-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--post-heading);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  font-weight: 850;
  letter-spacing: -.02em;
}

.post-section > h2::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  min-height: 30px;
  border-radius: 999px;
  background: var(--post-accent);
}

.post-section > h2 > i {
  display: none;
}

.post-section > h3,
.post-card h3 {
  margin: 0 0 10px;
  color: var(--post-heading);
  font-size: 1.08rem;
  line-height: 1.65;
  font-weight: 800;
}

.post-lead {
  margin-bottom: 34px;
  padding: 24px 26px;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  background: linear-gradient(135deg, var(--post-surface), var(--post-surface-soft));
  box-shadow: var(--post-shadow);
}

.post-lead p:last-child,
.post-callout p:last-child {
  margin-bottom: 0;
}

.post-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.post-stat {
  padding: 22px 18px;
  text-align: center;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  background: var(--post-surface);
  box-shadow: var(--post-shadow);
}

.post-stat-value {
  display: block;
  margin-bottom: 4px;
  color: var(--post-accent);
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.2;
}

.post-stat-label {
  display: block;
  margin-bottom: 8px;
  color: var(--post-heading);
  font-weight: 800;
}

.post-stat p {
  margin: 0;
  color: var(--post-muted);
  font-size: .92rem;
  line-height: 1.8;
}

.post-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.post-card {
  padding: 22px;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  background: var(--post-surface);
  box-shadow: var(--post-shadow);
}

.post-card p:last-child {
  margin-bottom: 0;
}

.post-table-wrap {
  width: 100%;
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  background: var(--post-surface);
  box-shadow: var(--post-shadow);
  -webkit-overflow-scrolling: touch;
}

.post-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  text-align: right;
}

.post-table th,
.post-table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--post-border);
  vertical-align: top;
}

.post-table thead th {
  color: var(--post-heading);
  background: var(--post-surface-soft);
  font-weight: 850;
  white-space: nowrap;
}

.post-table tbody tr:last-child td {
  border-bottom: 0;
}

.post-table tbody tr:nth-child(even) {
  background: #fcfcfd;
}

.post-table tbody tr:hover {
  background: var(--post-accent-soft);
}

.post-callout {
  margin: 26px 0;
  padding: 24px 26px;
  border: 1px solid #ddd6fe;
  border-right: 4px solid var(--post-accent);
  border-radius: var(--post-radius);
  background: var(--post-accent-soft);
  color: var(--post-heading);
  font-size: 1.05rem;
  font-weight: 750;
}

.post-list {
  margin: 18px 0 0;
  padding: 0 24px 0 0;
}

.post-list li {
  margin: 0 0 10px;
  padding-right: 4px;
}

.post-list li::marker {
  color: var(--post-accent);
  font-weight: 900;
}

.post-faq {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.post-faq-item {
  border: 1px solid var(--post-border);
  border-radius: 14px;
  background: var(--post-surface);
  overflow: hidden;
}

.post-faq-item summary {
  cursor: pointer;
  padding: 17px 20px;
  color: var(--post-heading);
  font-weight: 800;
  list-style: none;
}

.post-faq-item summary::-webkit-details-marker {
  display: none;
}

.post-faq-item summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--post-accent-soft);
  color: var(--post-accent);
  font-weight: 900;
}

.post-faq-item[open] summary::before {
  content: "−";
}

.post-faq-answer {
  padding: 0 20px 18px;
  color: var(--post-muted);
}

.post-faq-answer p:last-child {
  margin-bottom: 0;
}

.post-final {
  padding: 28px;
  border: 1px solid var(--post-border);
  border-radius: calc(var(--post-radius) + 2px);
  background: linear-gradient(135deg, var(--post-surface), var(--post-surface-soft));
  box-shadow: var(--post-shadow);
}

@media (max-width: 760px) {
  .post-content {
    padding-inline: 14px;
    font-size: 16px;
  }

  .post-section {
    margin-bottom: 38px;
  }

  .post-lead,
  .post-card,
  .post-callout,
  .post-final {
    padding: 20px;
  }

  .post-stats,
  .post-cards {
    grid-template-columns: 1fr;
  }

  .post-table {
    min-width: 620px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-content *,
  .post-content *::before,
  .post-content *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .post-content {
    max-width: none;
    color: #000;
    padding: 0;
  }

  .post-card,
  .post-stat,
  .post-table-wrap,
  .post-final,
  .post-lead {
    box-shadow: none;
  }
}

/* ---- blog index (/blog) -------------------------------------------------------------------
 *
 * A list of articles is a choosing screen, so it shows the two things a reader chooses on —
 * what it is about and how long it will take — rather than a wall of equal cards. The first
 * article gets the width, because the endpoint orders them pillar-first and that ordering
 * is information the layout should carry instead of flattening.
 */

.blog-index { max-width: 1080px; margin: 0 auto; padding: 64px 24px 0; }

.blog-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}

.blog-card {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--border); border-radius: 18px;
    background: var(--surface); overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-card:hover {
    transform: translateY(-4px); border-color: rgba(12,22,48,.16);
    box-shadow: 0 22px 46px -24px rgba(12,22,48,.3);
}

.blog-card-img {
    display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
    background: linear-gradient(140deg, #EEF1F8, #E3E8F3);
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* The logo standing in for a missing cover is a mark, not a photograph: contained and
   faded, so a card without artwork reads as deliberate rather than broken. */
.blog-card-img img[src$="logo.png"] { width: 56px; height: auto; opacity: .3; object-fit: contain; }

.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px; gap: 9px; }

.blog-card-tags {
    display: flex; align-items: center; gap: 8px;
    font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.blog-card-topic {
    color: var(--primary); background: var(--primary-light);
    padding: 3px 10px; border-radius: 999px; font-weight: 700;
}

.blog-card h2 {
    font-family: var(--display); font-weight: 700;
    font-size: 1.05rem; line-height: 1.65; color: var(--text);
}
.blog-card p {
    font-size: .88rem; color: var(--text-secondary); line-height: 1.9; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-more {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary); font-weight: 700; font-size: .86rem;
}

/* The lead article: full width, image beside the text rather than above it. Only ever the
   first card, and only where there is room for two columns. */
@media (min-width: 901px) {
    .blog-card.is-lead { grid-column: 1 / -1; flex-direction: row; }
    .blog-card.is-lead .blog-card-img { flex: 0 0 46%; aspect-ratio: auto; }
    .blog-card.is-lead .blog-card-body { padding: 40px; justify-content: center; gap: 12px; }
    .blog-card.is-lead h2 { font-size: 1.6rem; line-height: 1.5; }
    .blog-card.is-lead p { -webkit-line-clamp: 3; font-size: .95rem; flex: 0; }
}

.blog-empty { text-align: center; color: var(--post-muted); padding: 60px 0; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .blog-index { padding-block-start: 44px; } }

/* ---- pagination ----------------------------------------------------------------------
   Numbers, not just next/previous: with a handful of pages the whole set fits, and a
   reader after the oldest article should not have to press next four times to reach it.
   The arrows keep their box when they are spent, so the numbers do not slide sideways
   under a reader who is pressing them. */

.pager {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap; margin-block-start: 44px;
}
.pager-nums { display: flex; align-items: center; gap: 6px; }

.pager-num, .pager-step {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text-secondary);
    font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pager-num { padding: 0 6px; }
a.pager-num:hover, a.pager-step:hover { border-color: var(--primary); color: var(--primary); }

.pager-num.is-on {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
/* Spent arrows stay readable rather than fading to a grey nobody can see — they are
   still telling the reader which end of the list they are at. */
.pager-step.is-off { color: var(--text-muted); opacity: .55; }
.pager-step i { display: inline-flex; }

@media (max-width: 560px) {
    .pager-step { padding: 0 10px; font-size: .82rem; }
    .pager-num { min-width: 36px; height: 36px; }
}


/* ==========================================================================
   Article prose
   ==========================================================================

   Everything above dresses classes — .post-table, .post-list, .post-callout and the
   rest. Article bodies are stored in the database as plain semantic HTML with no
   classes at all (checked: not one post carries a class attribute), so none of that
   design reached a single article. The page looked unstyled because, for the content
   that actually goes on it, it was.

   Rather than ask every article to be written with the right class on every element —
   which is a rule someone has to remember on every paragraph, forever, and which makes
   the text unusable anywhere else — the same visual language is attached to the tags
   themselves. An article can then be written the way an article is written: h2, p, ul,
   table. Paste in plain HTML and it comes out looking designed.

   Scoped under .post-content so nothing here escapes into the rest of the site.
   -------------------------------------------------------------------------- */

/* ---- rhythm ---- */
/* Articles are stored as a run of <div> sections, each opening with a heading — the shape
   the existing posts already use. Spacing therefore belongs to the section, not to the
   heading: giving the heading a top margin as well would either double the gap or, since
   the heading is its section's first child, be cancelled by the rule that stops a section
   pushing its own contents down.
   Top margins only, so two adjacent blocks never stack two gaps. */
.post-content > * { margin-top: 2.75rem; }
.post-content > *:first-child { margin-top: 0; }

.post-content div > * { margin-top: 1.25rem; }
.post-content div > *:first-child { margin-top: 0; }

/* The opening paragraph carries the article. Slightly larger and lighter reads as a
   standfirst without being marked up as one. Written for both shapes: the first
   paragraph of the first section, and a first paragraph sitting directly in the
   article — an author writing plain HTML should not have to know which they produced. */
.post-content > p:first-of-type,
.post-content > div:first-child > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.95;
  color: var(--post-muted);
}

/* ---- headings ---- */
.post-content h2,
.post-content h3,
.post-content h4 {
  /* The display face, as on the landing page and the article title. Headings only — the
     body stays Vazirmatn, because Sahel set at 17px over two thousand words is a headline
     pretending to be text. */
  font-family: var(--display);
  color: var(--post-heading);
  line-height: 1.55;
  /* Keeps a heading from being stranded at the foot of a column or a printed page. */
  break-after: avoid;
}

.post-content h2 {
  font-size: 1.45rem;
  font-weight: 800;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--post-accent);
}

.post-content h3 {
  margin-top: 2.25rem;
  font-size: 1.12rem;
  font-weight: 800;
}

/* Sections leave an empty <i> in the heading where an icon used to go; it must not
   open a gap before the words. */
.post-content h2 > i:empty,
.post-content h3 > i:empty { display: none; }

/* ---- text ---- */
.post-content p { margin-bottom: 0; }
.post-content em { color: var(--post-muted); font-style: normal; }

.post-content a {
  color: var(--post-accent);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: 3px;
}
.post-content a:hover { text-decoration-thickness: .14em; }

/* A link alone in its own paragraph is a call to action, not a mention. Detected by
   shape rather than by a class, so writing one is just writing a link. */
.post-content p > a:only-child {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--post-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-content p > a:only-child:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(124, 58, 237, .34);
}

/* ---- lists ---- */
.post-content ul,
.post-content ol { padding-inline-start: 1.4rem; }
.post-content li { margin-bottom: .55rem; }
.post-content li::marker { color: var(--post-accent); font-weight: 700; }
.post-content li > ul,
.post-content li > ol { margin-top: .55rem; }

/* ---- tables ---- */
/* display:block is what lets a wide table scroll on a phone instead of stretching the
   page sideways. The row groups keep their table display, so the browser still builds
   an anonymous table box and the columns stay aligned. Content comes from the database
   with no wrapper element to hang this on, so it has to be done on the table itself. */
.post-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .95rem;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  box-shadow: var(--post-shadow);
  /* Momentum scrolling, and a hint that there is more to the right. */
  -webkit-overflow-scrolling: touch;
}

.post-content thead th {
  background: var(--post-accent-soft);
  color: var(--post-heading);
  font-weight: 800;
  text-align: start;
  white-space: nowrap;
}

.post-content th,
.post-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--post-border);
  vertical-align: top;
  line-height: 1.85;
}

.post-content tbody tr:nth-child(even) { background: var(--post-surface-soft); }
.post-content tbody tr:hover { background: var(--post-accent-soft); }
.post-content tbody tr:last-child td { border-bottom: 0; }

/* ---- quotes and asides ---- */
.post-content blockquote {
  margin-inline: 0;
  padding: 18px 20px;
  border-inline-start: 4px solid var(--post-accent);
  border-radius: var(--post-radius);
  background: var(--post-surface-soft);
  color: var(--post-heading);
}
.post-content blockquote > *:last-child { margin-bottom: 0; }

/* The closing disclaimer is written as an italic paragraph on its own. Given a quiet
   box so it reads as a note rather than as more article. */
.post-content p > em:only-child {
  display: block;
  padding: 14px 16px;
  border-radius: var(--post-radius);
  background: var(--post-surface-soft);
  border: 1px solid var(--post-border);
  font-size: .92rem;
  line-height: 1.9;
}

/* ---- media and rules ---- */
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--post-radius);
  display: block;
}
.post-content figure { margin-inline: 0; }
.post-content figcaption {
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--post-muted);
  text-align: center;
}
/* ---- the picture halfway down --------------------------------------------------------

   Placed by the generator, not by the author, so it has a class of its own rather than
   restyling every figure an editor might add by hand.

   Shorter than the cover on purpose: 1536x1024 cropped to a wide band. A second image at
   the cover's own proportions reads as a second cover and stops the article twice. The
   caption is real text under it, in the page's own font — Persian drawn INTO a generated
   image is shapes that look like script and spell nothing, and it could not be read aloud,
   indexed or corrected afterwards. */
.post-banner {
  margin-block: 2.6rem;
}
.post-banner img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  background: var(--post-border);
}
.post-banner figcaption {
  margin-top: .7rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--post-muted);
  text-align: center;
  padding-inline: 1rem;
}
@media (max-width: 40rem) {
  /* A 5:2 band on a phone is a stripe. Taller, so the subject survives the narrow column. */
  .post-banner img { aspect-ratio: 3 / 2; }
}

.post-content hr {
  border: 0;
  border-top: 1px solid var(--post-border);
  margin-block: 2.5rem;
}

.post-content code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .9em;
  background: var(--post-surface-soft);
  border: 1px solid var(--post-border);
  border-radius: 6px;
  padding: 1px 6px;
  direction: ltr;
  display: inline-block;
}

/* ---- narrow screens ---- */
@media (max-width: 640px) {
  .post-content { font-size: 16px; }
  .post-content > * { margin-top: 2rem; }
  .post-content h2 { font-size: 1.25rem; }
  .post-content h3 { font-size: 1.05rem; }
  .post-content th,
  .post-content td { padding: 10px 12px; }
  /* Full width so the tap target is the whole line, which is what a thumb expects. */
  .post-content p > a:only-child { display: block; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .post-content p > a:only-child { transition: none; }
  .post-content p > a:only-child:hover { transform: none; }
}

/* ==========================================================================
   Article furniture
   ==========================================================================

   The header, the contents list, the byline and the progress bar. Everything here is
   chrome around the article rather than the article itself, which is why it is kept
   apart from the prose rules above.
   -------------------------------------------------------------------------- */

/* ---- the header ---- */
/* Was a dark slab with a centred logo, a centred title and a "back to home" button — the
   logo already sits in the navbar directly above it, and the button duplicated the
   navbar's own links. Replaced with the things a reader actually wants before deciding to
   start: where they are, what this is about, when it was written, and how long it takes. */
.post-header {
  /* Aligned with the text below it rather than centred. A centred title over a
     right-aligned RTL article gives the eye two different left edges to start from. */
  text-align: start;
  position: relative;
  overflow: hidden;
  color: var(--ink-text);
  padding: 96px 0 68px;
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(15, 107, 102, .28) 0%, transparent 55%),
    linear-gradient(160deg, #131c33 0%, #0b1220 100%);
}

.post-header::before {
  /* A faint grid, in place of the blurred purple circle that used to sit here. It reads as
     texture at a glance and as intent up close, and it does not compete with the title. */
  content: '';
  position: absolute;
  inset: 0;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Fades out before it reaches the title, so the type always sits on flat colour. */
  -webkit-mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 80% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

/* Clears the fixed navbar. Measured against its scrolled height plus the breathing room
   the title needs — without it the h1 sits underneath the bar at the top of every article. */
.post-header.has-nav { padding-block-start: 152px; }

/* Kept beside the rule it overrides. It used to sit in a media query several hundred lines
   above, where it lost to this one on source order and did nothing at any width. */
@media (max-width: 900px) {
  .post-header { padding-block: 84px 56px; }
  .post-header.has-nav { padding-block-start: 128px; }
}

.post-header-inner {
  position: relative;
  z-index: 1;
  max-width: var(--post-max-width);
  margin-inline: auto;
}

.post-header h1 {
  max-width: none;
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  line-height: 1.35;
  /* Zero, not the -.01em that suited Vazir: Sahel already sets tight at display sizes, and
     pulling it tighter closes the joins between Persian letterforms. */
  letter-spacing: 0;
}

.post-header .subtitle {
  max-width: 42rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #b6c2d9;
}

/* ---- breadcrumb ---- */
.post-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .85rem;
  color: #7c8aa5;
}
.post-crumbs a { color: #9fb0cc; transition: color .2s; }
.post-crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---- topic eyebrow ---- */
.post-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(129, 140, 248, .16);
  border: 1px solid rgba(129, 140, 248, .3);
  color: #c7d2fe;
  font-size: .8rem;
  font-weight: 700;
}

/* ---- date and reading time ---- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
  color: #8fa0bd;
}
.post-meta .dot { color: #47546b; }

/* ---- reading progress ---- */
/* Sits directly under the fixed navbar. Two lines of script set the width; if they never
   run, an empty bar is invisible rather than broken. */
.reading-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 101;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), #818cf8);
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress span { transition: none; }
}

/* ---- contents ---- */
.post-toc {
  margin: 0 0 2.5rem;
  padding: 22px 26px;
  border: 1px solid var(--post-border);
  border-radius: var(--post-radius);
  background: var(--post-surface-soft);
}

.post-toc h2 {
  /* Furniture, not a section of the article — so none of the prose h2 treatment. */
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--post-muted);
  letter-spacing: .01em;
}

.post-toc ol {
  /* Two columns once there is room. Eight entries in one column stood 476px tall and
     pushed the article most of a screen down, which is the opposite of what a contents
     list is for — it should be glanced at, not read. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.post-toc li {
  counter-increment: toc;
  margin: 0;
  border-top: 1px solid var(--post-border);
}
/* Only the entry at the top of each column loses its rule, so both columns start clean. */
.post-toc li:nth-child(-n + 2) { border-top: 0; }
@media (max-width: 640px) {
  .post-toc li:nth-child(2) { border-top: 1px solid var(--post-border); }
}

.post-toc a {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  color: var(--post-heading);
  font-size: .94rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color .18s ease;
}

.post-toc a::before {
  content: counter(toc);
  flex: 0 0 1.6rem;
  color: var(--post-accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.post-toc a:hover { color: var(--post-accent); }

/* A heading jumped to from the contents must clear the fixed navbar, or the browser
   scrolls it to the very top of the window and the navbar covers it.
   --nav-h is written by the page from the navbar's measured height, because that height is
   not a constant: the navbar is 75px on a desktop and 112px on a phone, where its buttons
   wrap onto a second line. A hard-coded offset is right at one width and wrong at the
   other, and being wrong means the heading you asked for is behind the navbar. The
   fallback covers the moment before the script has run. */
.post-content h2[id] { scroll-margin-top: calc(var(--nav-h, 92px) + 16px); }

/* ---- wide elements break out of the reading measure ---- */
/* The column is set for reading, which is too narrow for a five-column table. These step
   back out to the wider width and stay centred, without needing a wrapper element the
   stored HTML does not have. */
.post-content table,
.post-content figure,
.post-content .post-cover,
.post-content > img {
  /* How far past the column this may reach: whatever the window has spare either side,
     never more than 7rem and never less than nothing. clamp() does the narrow-screen case
     without a media query — on a phone the spare space is negative, so the bleed is zero
     and the element stays exactly inside the column. */
  --bleed: clamp(0px, (100vw - 3rem - var(--post-max-width)) / 2, 7rem);
  max-width: calc(100% + var(--bleed) * 2);
  margin-inline: calc(var(--bleed) * -1);
}

/* ---- narrow screens ---- */
@media (max-width: 640px) {
  .post-header h1 { font-size: 1.6rem; }
  .post-header .subtitle { font-size: .98rem; }
  /* One column on a phone, so the list is as tall as it has entries. Tightened to keep
     eight of them from taking half the screen before the article has started. */
  .post-toc { padding: 16px 18px; border-radius: 14px; margin-bottom: 2rem; }
  .post-toc h2 { margin-bottom: 8px; font-size: .88rem; }
  .post-toc a { padding: 6px 0; font-size: .9rem; line-height: 1.55; }
}