/* ============================================================
   أوراق تحرّرية — public site
   Warm paper, blue ink, one hot spark. Editorial, reading-first.
   Uses the tokens from theme.css; light + dark aware.
   ============================================================ */

/* ---------------- Layout primitives ---------------- */
.site-main { position: relative; z-index: 1; min-height: 60vh; padding-bottom: 3.5rem; }
.wrap { max-width: 1140px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
/* One width for the whole reading page: the text column and the cover image
   share --measure so they line up on the same edge and can never drift apart.
   Measured on real article text, 64rem puts a normal paragraph at ~115 chars /
   19 words per line. That is long by textbook measure — the tradeoff bought
   deliberately, for shorter paragraphs and a layout that reads as one column.
   Narrow it here (56rem is the comfortable end) if lines ever feel hard to track. */
:root { --measure: 64rem; }
@media (min-width: 1500px) { :root { --measure: 68rem; } }
.wrap-narrow { max-width: var(--measure); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* screen-reader-only (keeps heading outline intact without visual change) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------------- Header / masthead ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-head-inner {
  max-width: 1240px; margin-inline: auto;
  padding: .55rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1rem;
}
.site-brand { display: inline-flex; align-items: baseline; text-decoration: none; margin-inline-end: .4rem; }
.site-brand:hover { text-decoration: none; }
.site-brand-word {
  font-family: var(--display); font-weight: 400;
  font-size: 1.7rem; line-height: 1; color: var(--text);
  letter-spacing: 0; padding-block: .15rem;
}
.site-nav { display: flex; align-items: center; gap: .25rem; flex: 1; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: .4rem .6rem; border-radius: var(--radius-sm); white-space: nowrap;
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.site-nav a.is-active { color: var(--accent); }
.site-nav a.is-active:hover { background: transparent; }

.site-head-tools { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }

.site-search { display: flex; align-items: center; }
.site-search input {
  width: clamp(9rem, 18vw, 14rem); padding-block: .5rem; padding-inline: .9rem 2.5rem; font-size: .9rem;
  border: 1px solid var(--field-border); border-radius: 2rem;
  background: var(--surface);
}
/* hide the browser's native clear "✕" so it can't collide with our search icon */
.site-search input::-webkit-search-cancel-button,
.site-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.site-search .icon-btn { width: 2rem; margin-inline-start: -2.3rem; background: transparent; border: 0; color: var(--faint); }
.site-search .icon-btn:hover { color: var(--accent); background: transparent; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: inline; }

.nav-toggle { display: none; }

/* mobile menu (hidden on desktop) */
.site-menu { display: none; }
.site-menu[hidden] { display: none; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 40; border: 0; cursor: pointer;
  background: color-mix(in srgb, #000 42%, transparent);
}
.nav-backdrop[hidden] { display: none; }

/* ---------------- Pills / meta ---------------- */
.pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: .18rem .6rem; border-radius: 2rem; text-decoration: none; white-space: nowrap;
}
a.pill:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; color: var(--accent); }
.pill-sm { font-size: .68rem; padding: .12rem .5rem; }
.pill-pdf { color: var(--muted); background: var(--surface-2); border-color: var(--border); }

.dot-sep { color: var(--faint); }

/* ---------------- Avatars ---------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ph { font-family: var(--display); color: var(--faint); font-size: 1.1em; line-height: 1; }
.avatar-sm { width: 2.1rem; height: 2.1rem; }
.avatar-lg { width: 4.2rem; height: 4.2rem; }
.avatar-xl { width: 6rem; height: 6rem; }

/* ---------------- Section heads ---------------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 2.6rem 0 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--border);
}
.section-head h2 { margin: 0; font-size: 1.3rem; font-family: var(--font-title); font-weight: var(--title-weight, 700); color: var(--text); }
.section-more { font-size: .9rem; font-weight: 600; white-space: nowrap; }

/* ---------------- Home hero ---------------- */
/* the masthead line, above the lead article */
.home-motto {
  margin: clamp(1.4rem, 4vw, 2.2rem) 0 0; padding-bottom: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border); text-align: center;
  font-family: var(--display); font-weight: 400; color: var(--motto);
  font-size: clamp(1.25rem, 3.4vw, 1.9rem); line-height: 1.6; letter-spacing: .01em;
}
.home-hero { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.75rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); align-items: start; }
}
.lead { display: flex; flex-direction: column; gap: 1rem; }
.lead-cover { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.lead-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead-body { display: flex; flex-direction: column; gap: .85rem; }
.lead-title { margin: 0; font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-family: var(--font-title); font-weight: var(--title-weight, 700); line-height: 1.25; }
.lead-title a { color: var(--text); text-decoration: none; }
.lead-title a:hover { color: var(--accent); text-decoration: none; }
.lead-excerpt { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.8; max-width: 46ch; }

.byline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--faint); font-size: .9rem; }
.byline-author { color: var(--text); font-weight: 600; text-decoration: none; }
.byline-author:hover { color: var(--accent); text-decoration: none; }

/* right rail — latest headlines */
.home-rail {
  border-inline-start: 2px solid var(--border); padding-inline-start: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 899px) {
  .home-rail { border-inline-start: 0; padding-inline-start: 0; border-top: 2px solid var(--border); padding-top: 1.2rem; }
}
.rail-h { margin: 0 0 1rem; font-size: 1rem; font-family: var(--font-title); font-weight: var(--title-weight, 700); color: var(--accent); letter-spacing: .02em; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rail-item { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.rail-item:first-child { border-top: 0; padding-top: 0; }
.rail-title { color: var(--text); font-weight: 600; font-size: 1.02rem; line-height: 1.5; text-decoration: none; }
.rail-title:hover { color: var(--accent); text-decoration: none; }
.rail-meta { color: var(--faint); font-size: .82rem; }

/* ---------------- Cards grid ---------------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(1.1rem, 2.6vw, 1.8rem); }

.card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.card-cover { display: block; border-bottom: 1px solid var(--border); }
.card-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.15rem 1.2rem; flex: 1; }
.card-title { margin: 0; font-size: 1.16rem; font-family: var(--font-title); font-weight: var(--title-weight, 700); line-height: 1.45; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--accent); text-decoration: none; }
.card-excerpt {
  margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: auto; padding-top: .3rem; color: var(--faint); font-size: .82rem; }
.card-author { color: var(--muted); font-weight: 600; text-decoration: none; }
.card-author:hover { color: var(--accent); text-decoration: none; }
.card-meta time { white-space: nowrap; }

/* text-first cards (no cover) get a spark kicker */
.card:not(.card-has-cover) .card-body { padding-top: 1.2rem; }
.card:not(.card-has-cover)::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }

/* whole-box click target — the title link is stretched over the card/lead/rail item */
.card, .lead, .rail-item { position: relative; }
.card-title a::after, .lead-title a::after, .rail-title::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.card .pill, .card .card-author,
.lead .pill, .lead .byline-author,
.rail-item .pill { position: relative; z-index: 2; }
.card { cursor: pointer; }

/* social icon buttons (author card + author hero) */
.socials { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: var(--surface);
  transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.socials a:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.socials svg { width: 1.05rem; height: 1.05rem; display: block; }

/* ---------------- Sections grid (browse) ---------------- */
.band { }
.sections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.section-card {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.2rem 1.3rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: transform .15s, box-shadow .2s, border-color .2s;
}
.section-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); text-decoration: none; }
.sc-name { font-family: var(--display); font-size: 1.5rem; color: var(--text); line-height: 1.1; }
.sc-count { color: var(--accent); font-size: .82rem; font-weight: 600; }
.sc-desc { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-top: .2rem; }

/* ---------------- Writers ---------------- */
.writers-strip { display: flex; flex-wrap: wrap; gap: .75rem; }
.writer-chip {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem .5rem .6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 2rem;
  text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.writer-chip:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-sm); text-decoration: none; }
.writer-chip-txt { display: flex; flex-direction: column; line-height: 1.25; }
.writer-chip-name { color: var(--text); font-weight: 600; font-size: .95rem; }
.writer-chip-txt small { color: var(--faint); font-size: .76rem; }

.writers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.writer-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  padding: 1.6rem 1.1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; transition: transform .15s, box-shadow .2s, border-color .2s;
}
.writer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); text-decoration: none; }
.writer-card-name { color: var(--text); font-family: var(--font-title); font-weight: var(--title-weight, 700); font-size: 1.08rem; margin-top: .2rem; }
.writer-card-title { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.writer-card-count { color: var(--accent); font-size: .8rem; font-weight: 600; margin-top: .2rem; }

/* ---------------- Page leads (archive/category/author/writers) ---------------- */
.page-lead { margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.4rem; }
.page-eyebrow { color: var(--accent); font-weight: 700; font-size: .82rem; letter-spacing: .04em; margin: 0 0 .3rem; }
.page-h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); font-family: var(--font-title); font-weight: var(--title-weight, 700); color: var(--text); }
.page-desc { margin: .6rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.75; max-width: 60ch; }
.page-sub { margin: .5rem 0 0; color: var(--faint); font-size: .92rem; }

.page-search { display: flex; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }
.page-search input { flex: 1; min-width: 12rem; max-width: 34rem; }
.page-search .btn { flex: none; }

/* author hero */
.author-hero { display: flex; gap: 1.4rem; align-items: center; margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.6rem; flex-wrap: wrap; }
.author-hero-body { flex: 1; min-width: 15rem; }
.author-hero-title { margin: .3rem 0 0; color: var(--accent); font-weight: 600; font-size: 1rem; }
.author-hero-bio { margin: .7rem 0 0; color: var(--muted); line-height: 1.8; max-width: 62ch; }
.author-hero-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.author-hero-links { display: inline-flex; gap: .8rem; }
.author-hero-links a, .author-card-links a { font-size: .88rem; font-weight: 600; }

/* ---------------- Empty state ---------------- */
.empty-state {
  padding: 3rem 1.5rem; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
  margin-top: 1.5rem; line-height: 1.9;
}

/* ---------------- Pagination ---------------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; justify-content: center; margin: 2.4rem 0 .5rem; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem;
  padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; background: var(--surface);
  transition: border-color .15s, color .15s, background .15s;
}
.page-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-link.is-current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.page-link.is-disabled { color: var(--faint); background: transparent; border-color: var(--border); cursor: default; opacity: .6; }
.page-gap { color: var(--faint); padding: 0 .2rem; }

/* ============================================================
   Article reading page
   ============================================================ */
.reading-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
#reading-bar { display: block; height: 100%; width: 0; background: var(--spark); transition: width .1s linear; }

.preview-bar {
  margin: 0 auto 1.6rem; padding: .7rem 1rem; text-align: center; font-weight: 600; font-size: .92rem;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-sm);
}

.post { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.post-head { text-align: center; }
.post-head .pill { display: inline-flex; }
.post-title { margin: .8rem 0 0; font-size: clamp(1.9rem, 5vw, 3rem); font-family: var(--font-title); font-weight: var(--title-weight, 700); line-height: 1.25; color: var(--text); }
.post-lede { margin: 1rem auto 0; color: var(--muted); font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.8; max-width: 40ch; }

.post-byline { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.6rem; text-align: start; }
.post-byline-txt { display: flex; flex-direction: column; line-height: 1.35; }
.post-author { color: var(--text); font-weight: 700; text-decoration: none; }
.post-author:hover { color: var(--accent); text-decoration: none; }
.post-meta { color: var(--faint); font-size: .86rem; display: flex; align-items: center; gap: .4rem; }

/* The cover used the full 1140px .wrap, which left a jarring gap between it and
   the text beneath. Same --measure as the column, so both share one edge. */
.post-cover.wrap { max-width: var(--measure); }
.post-cover { margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }

/* ---- prose (rendered blocks) — reading-optimized ---- */
/* --prose is the one number every block scales from. It is fluid because a
   phone and a 1024px column are not the same reading problem: the old fixed
   1.14rem meant a 343px phone column carried the same 18.24px as the desktop,
   which made paragraphs very tall. 16px at 375px, reaching 18.24px by ~1024px.
   Each block below is a RATIO of it, so one edit here moves the whole page. */
.prose {
  --prose: clamp(1rem, .92rem + .34vw, 1.14rem);
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  font-size: var(--prose); line-height: 2.05; color: var(--text);
}
.prose > *:first-child { margin-top: 0; }
.a-heading { font-family: var(--block-font, var(--font-title)); font-weight: var(--block-weight, var(--title-weight, 700)); font-size: calc(var(--prose, 1.14rem) * 1.32 * var(--t-scale, 1)); line-height: 1.4; margin: 2rem 0 .7rem; color: var(--text); }
.a-paragraph { margin: 0 0 1.3rem; line-height: 2.05; font-size: calc(var(--prose, 1.14rem) * var(--t-scale, 1)); }
.a-quote {
  position: relative; margin: 2rem 0; padding: 1.2rem 1.5rem 1.1rem; padding-inline-start: 3.4rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-inline-start: 3px solid var(--accent); border-radius: var(--radius);
}
.a-quote::before {
  content: "\201C"; position: absolute; top: -.1rem; inset-inline-start: .7rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 4.2rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.a-quote p { margin: 0 0 .5rem; font-size: calc(var(--prose, 1.14rem) * 1.12 * var(--t-scale, 1)); line-height: 1.9; color: var(--text); font-weight: 500; }
.a-quote cite { display: block; color: var(--muted); font-size: .92rem; font-style: normal; }
.a-callout { margin: 1.8rem 0; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid; border-inline-start-width: 4px; line-height: 1.9; font-size: calc(var(--prose, 1.14rem) * .92 * var(--t-scale, 1)); color: var(--text); }
.a-callout-highlight { background: #faf4e2; border-color: #ead8a2; border-inline-start-color: #c9992f; }
.a-callout-note { background: #edefe9; border-color: #d8d4c5; border-inline-start-color: #8f8f76; }
.a-callout-warning { background: #f8e3db; border-color: #e8bcab; border-inline-start-color: #c0472a; }
:root[data-theme="dark"] .a-callout-highlight { background: #241f14; border-color: #473d22; border-inline-start-color: #e0b455; }
:root[data-theme="dark"] .a-callout-note { background: #1b1f18; border-color: #333a30; border-inline-start-color: #97a487; }
:root[data-theme="dark"] .a-callout-warning { background: #2a1712; border-color: #58301f; border-inline-start-color: #e2764f; }
/* ---- writer text controls: size + alignment + inline marks ----
   Size is a multiplier, not a replacement. A plain `.t-lg { font-size: 1.22em }`
   could not work here: `em` resolves against the PARENT, so on a heading it
   computed 1.22 x .prose instead of 1.22 x the heading — i.e. smaller than
   normal — and on a quote it never applied at all, because `.a-quote p` sets
   its own rem size that the blockquote's size cannot reach. --t-scale inherits
   down to those children, so every block scales from its own base. */
.t-xs { --t-scale: .72; }
.t-sm { --t-scale: .85; }
.t-lg { --t-scale: 1.35; }
.t-center  { text-align: center; }
.t-justify { text-align: justify; text-justify: inter-word; }
.a-list.t-center, .a-list.t-justify { list-style-position: inside; padding-inline-start: 0; }
.prose strong { font-weight: 700; color: var(--text); }
.prose em { font-style: italic; }

.a-list { margin: 1.5rem 0; padding-inline-start: 1.5rem; font-size: calc(var(--prose, 1.14rem) * var(--t-scale, 1)); }
.a-list li { margin-bottom: .55rem; line-height: 2; padding-inline-start: .25rem; }
.a-list li:last-child { margin-bottom: 0; }
.a-list li::marker { color: var(--accent); font-weight: 700; }
.a-list-num { padding-inline-start: 1.7rem; }
/* --nat-w is the image's own pixel width, set inline by the renderer, so an
   image is only ever shown at its natural size or smaller — never upscaled. */
.a-figure { margin: 2rem auto; max-width: min(100%, var(--nat-w, 100%)); }
.a-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.a-figure figcaption { margin-top: .55rem; text-align: center; color: var(--muted); font-size: .9rem; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--link-hover); }

/* ---- PDF attachment ---- */
.post-pdf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding: 1.1rem 1.3rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.post-pdf-txt { display: flex; flex-direction: column; gap: .1rem; }
.post-pdf-txt strong { color: var(--text); }

/* ---- share ---- */
.post-share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.share-label { color: var(--muted); font-weight: 600; font-size: .9rem; margin-inline-end: .3rem; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--field-border); border-radius: 50%;
  color: var(--muted); background: var(--surface); cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.share-btn:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.share-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
.share-copy.is-done { color: var(--ok); border-color: var(--ok); background: transparent; }
.share-copy.is-done:hover { color: var(--ok); background: transparent; }

/* ---- author card ---- */
.author-card {
  display: flex; gap: 1.1rem; margin-top: 2.4rem; padding: 1.4rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.author-card-name { color: var(--text); font-family: var(--font-title); font-weight: var(--title-weight, 700); font-size: 1.15rem; text-decoration: none; }
.author-card-name:hover { color: var(--accent); text-decoration: none; }
.author-card-title { margin: .2rem 0 0; color: var(--accent); font-size: .9rem; font-weight: 600; }
.author-card-bio { margin: .6rem 0 0; color: var(--muted); line-height: 1.8; font-size: .96rem; }
.author-card-links { margin: .7rem 0 0; display: flex; gap: .9rem; flex-wrap: wrap; }

.post-related { margin-top: 3rem; }

/* ---------------- Footer ---------------- */
.site-foot { position: relative; z-index: 1; margin-top: 3rem; border-top: 2px solid var(--border); background: var(--surface); }
.site-foot-inner {
  max-width: 1140px; margin-inline: auto; padding: 2.4rem clamp(1rem, 4vw, 2rem) 1.5rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem;
}
.foot-word { font-family: var(--display); font-size: 1.6rem; color: var(--text); }
.foot-motto {
  margin: .55rem 0 0; max-width: 40ch; line-height: 1.8;
  font-family: var(--display); font-size: 1.05rem; color: var(--motto);
}
.foot-h { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--faint); text-transform: uppercase; margin: 0 0 .8rem; }
.foot-col { display: flex; flex-direction: column; gap: .5rem; }
.foot-col a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.site-foot-bar {
  max-width: 1140px; margin-inline: auto; padding: 1rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--faint); font-size: .84rem;
}
.foot-slug { font-family: var(--mono); letter-spacing: .18em; direction: ltr; }

/* ---------------- Responsive ---------------- */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-search { display: none; }
  .site-brand { margin-inline-end: 0; }
  .site-head-inner { gap: .5rem; }

  .site-menu:not([hidden]) { display: block; border-top: 1px solid var(--border); padding: 1rem clamp(1rem, 4vw, 2rem) 1.2rem; background: var(--bg); }
  .site-search-m { display: flex; margin-bottom: 1rem; }
  .site-search-m input { width: 100%; flex: 1; }
  .site-search-m .icon-btn { margin-inline-start: -2.6rem; }
  .site-menu-nav { display: flex; flex-direction: column; }
  .site-menu-nav a { padding: .7rem .4rem; color: var(--text); text-decoration: none; font-weight: 600; border-top: 1px solid var(--border); }
  .site-menu-nav a:first-child { border-top: 0; }
  .site-menu-nav a.is-active { color: var(--accent); }
}
@media (min-width: 821px) { .nav-backdrop { display: none; } }

@media (max-width: 680px) {
  /* footer: brand on top, then the two link columns side-by-side */
  .site-foot-inner { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
  .foot-brand { grid-column: 1 / -1; }
  .author-card { flex-direction: column; }
  .post-byline { display: flex; }
}

/* phones: smaller reading type so long lines fit comfortably */
@media (max-width: 560px) {
  .prose { font-size: 1.02rem; line-height: 1.95; }
  .a-heading { font-size: 1.3rem; }
  .a-quote p { font-size: 1.12rem; }
  .a-callout { font-size: .98rem; }
  .post-title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .post-lede { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .section-card, .writer-card { transition: none; }
  #reading-bar { transition: none; }
}

/* ---- endnotes ---- */
.a-notes { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--border); }
.a-notes-h { font-family: var(--font-title); font-weight: var(--title-weight, 700); font-size: calc(var(--prose, 1.14rem) * .95); margin: 0 0 .9rem; color: var(--muted); }
.a-notes-list { list-style: none; counter-reset: note; margin: 0; padding-inline-start: 0; color: var(--muted); }
.a-notes-list li {
  counter-increment: note; position: relative; padding-inline-start: 2.7rem;
  font-size: calc(var(--prose, 1.14rem) * .84); line-height: 1.95; margin-bottom: .55rem;
}
/* [1] instead of the default "1." — direction/isolate keep the brackets from
   being reordered by the bidi algorithm inside this RTL page. */
.a-notes-list li::before {
  content: "[" counter(note) "]";
  position: absolute; inset-inline-start: 0; top: 0;
  unicode-bidi: isolate;
  color: var(--accent); font-weight: 700;
}
.a-noteref { text-decoration: none; color: var(--accent); font-weight: 600; }
.a-noteref:hover { text-decoration: underline; }
.a-noteref sup { font-size: .7em; vertical-align: super; line-height: 0; }
.a-noteback { text-decoration: none; color: var(--accent); margin-inline-start: .35rem; font-size: .9em; }
/* a jumped-to note briefly marks itself, so the reader sees where they landed */
.a-notes-list li:target { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius-sm); }
.prose .a-notes-list li { scroll-margin-top: 5rem; }
.a-noteref { scroll-margin-top: 5rem; }

/* per-block weight — a custom property, so .f-rich.f-heading (two classes)
   cannot outrank it the way a plain .w-400 rule would */
.w-400 { --block-weight: 400; font-weight: var(--block-weight); }
.w-500 { --block-weight: 500; font-weight: var(--block-weight); }
.w-600 { --block-weight: 600; font-weight: var(--block-weight); }
.w-700 { --block-weight: 700; font-weight: var(--block-weight); }
.prose u, .a-notes u { text-decoration-thickness: 1px; text-underline-offset: .22em; }