/* Perspectives articles (pages generated by tools/blog from content/posts/).
   Loaded after the template stylesheets; uses main.css tokens. Logical
   properties throughout, so the Arabic pages mirror without extra rules. */

.post-page .hero .sub{max-width:60ch}
.post-page .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;
  font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
html[dir="rtl"] .post-page .post-meta{letter-spacing:0;text-transform:none;font-size:13px}

.post-page .post{background:var(--paper);padding-block:clamp(44px,6vw,88px)}
.post-page .post .w>*{max-width:740px}

/* the cover is the banner background (set as --pg-hero by tools/blog); its
   description stays available to screen readers */
.post-page .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.post-page .post-body{font-size:18px;line-height:30px;color:var(--slate);overflow-wrap:break-word}
.post-page .post-body>*+*{margin-top:22px}
.post-page .post-body h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;margin-top:clamp(40px,5vw,56px)}
.post-page .post-body h3{font-size:21px;line-height:1.3;font-weight:600;color:var(--ink);margin-top:36px}
.post-page .post-body h2+*,.post-page .post-body h3+*{margin-top:14px}
.post-page .post-body strong{color:var(--ink);font-weight:600}
.post-page .post-body a{color:var(--signal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-page .post-body a:hover{color:var(--ink)}
.post-page .post-body ul,.post-page .post-body ol{padding-inline-start:24px}
.post-page .post-body li+li{margin-top:8px}
.post-page .post-body li::marker{color:var(--signal)}
.post-page .post-body blockquote{margin-inline:0;padding-inline-start:22px;border-inline-start:2px solid var(--cyan);
  font-size:21px;line-height:1.5;color:var(--ink)}
html[dir="rtl"] .post-page .post-body{font-size:19px;line-height:34px}

.post-page .post-back{margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid var(--silver)}
.post-page .post-back a{font-family:var(--m);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.post-page .post-back a:hover{color:var(--ink)}
html[dir="rtl"] .post-page .post-back a{letter-spacing:0;text-transform:none;font-size:14px}

@media(max-width:600px){.post-page .post-body{font-size:17px;line-height:28px}}