/* ==========================================================================
   John Friend Publishing — "Rubricated Archive" identity layer (2026-10)
   Loaded LAST on every page. Re-maps the shared design tokens and restyles
   the shared components; page stylesheets/inline styles stay underneath and
   this file wins by source order. !important is used only where a rule must
   beat inline style attributes or high-specificity legacy rules.

   Palette: ink field, vellum text, ONE accent (vermilion rubrication).
   Type: Gloock (display) · Newsreader (text) · IBM Plex Mono (shelfmarks,
   prices, extents) · Amiri (Arabic). No uppercase-tracked labels, no
   diamonds, no gold.
   ========================================================================== */

:root {
  --ink: #121110;
  --ink-raised: #1B1A17;
  --ink-sunk: #0B0A09;
  --vellum: #EAE3D4;
  --vellum-2: #BCB3A2;
  --vellum-3: #968D7D;
  --rubric: #EC5536;
  --rubric-hi: #F46B4C;
  --rule-red: #6A271A;
  --rule: rgba(234, 227, 212, .13);
  --rule-strong: rgba(234, 227, 212, .30);

  --f-display: 'Gloock', Georgia, 'Times New Roman', serif;
  --f-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-ar: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;

  /* legacy tokens used by every existing template */
  --color-bg: var(--ink);
  --color-bg-elevated: var(--ink-raised);
  --color-bg-card: var(--ink-raised);
  --color-text: var(--vellum);
  --color-text-muted: var(--vellum-2);
  --color-text-faint: var(--vellum-3);
  --color-accent: var(--rubric);
  --color-accent-warm: var(--rubric);
  --color-accent-bright: var(--rubric-hi);
  --color-accent-dim: rgba(236, 85, 54, .10);
  --color-border: var(--rule);
  --color-border-bright: var(--rule-strong);
  --color-link: var(--rubric-hi);
  --color-link-hover: var(--vellum);
  --font-heading: var(--f-display);
  --font-body: var(--f-text);
  --font-prose: var(--f-text);
  --shadow-card: none;
  --shadow-card-hover: none;
  --transition-base: .18s ease;

  --wafq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Crect x='1' y='1' width='88' height='88' fill='none' stroke='%23EC5536' stroke-width='1.6'/%3E%3Cpath d='M30.3 1v88M59.7 1v88M1 30.3h88M1 59.7h88' stroke='%23EC5536' stroke-width='.8' opacity='.8'/%3E%3Cg fill='%23EAE3D4' font-family='Georgia,serif' font-size='19' text-anchor='middle' dominant-baseline='central'%3E%3Ctext x='15.6' y='16.4'%3E4%3C/text%3E%3Ctext x='45' y='16.4'%3E9%3C/text%3E%3Ctext x='74.4' y='16.4'%3E2%3C/text%3E%3Ctext x='15.6' y='45.6'%3E3%3C/text%3E%3Ctext x='45' y='45.6' fill='%23EC5536'%3E5%3C/text%3E%3Ctext x='74.4' y='45.6'%3E7%3C/text%3E%3Ctext x='15.6' y='74.8'%3E8%3C/text%3E%3Ctext x='45' y='74.8'%3E1%3C/text%3E%3Ctext x='74.4' y='74.8'%3E6%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--vellum);
  font-family: var(--f-text);
  font-optical-sizing: auto;
  font-weight: 430;
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--rubric); color: var(--ink); }

/* No uppercase-tracked labels anywhere (beats inline style attributes too). */
body *, body *::before, body *::after { text-transform: none !important; }
:is(h1, h2, h3, h4, summary, .logo-text, .header-nav a, .footer-company, .footer-affiliate-disclosure,
  .section-eyebrow, .hero-eyebrow, .article-eyebrow, .page-eyebrow, .articles-eyebrow, .shop-strip-eyebrow,
  .why-label, .why-item .why-label, .terms-nav-label, .book-volume-badge, .book-feature-vol, .book-cta-vol,
  .book-hero-vol, .related-link-eyebrow, .breadcrumb, .book-meta, .book-hero-meta, .article-meta, .page-meta,
  .article-card .meta, .article-card .number, .article-card .read-more, .article-footer a, .article-footer a *, .book-arabic,
  .book-translit, .book-btn, .book-btn-format, .btn-primary, .btn-secondary, .buy-btn, .book-feature-cta,
  .shop-strip-cta, .subscribe-btn, .contact-email-link, .kindle-unlimited-badge, .tradition-item h3 .latin,
  .policy-content h2, .article-body),
[style*="letter-spacing"], [style*="letter-spacing"] * { letter-spacing: normal !important; }
/* Light legacy weights would thin out in Newsreader on a dark field. */
body :is(p, li, dd, dt, td, th, figcaption, blockquote, summary, label) { font-weight: 430; }
body :is(strong, b) { font-weight: 600; }

/* Display face: one weight, no italic — never synthesize either. */
body :is(h1, h2, h3, h4, .logo-text, .footer-company, .section-title, .hero-title,
  .book-title, .book-hero-title, .article-title, .articles-title, .page-title,
  .book-cta-title, .book-feature-title, .related-link-title, .cta-title,
  .shop-strip-title, .title) {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal !important;
  text-wrap: balance;
}
body :is(h1, h2) { line-height: 1.04; }
/* Emphasis inside display type is rubrication, not italic. */
body :is(h1, h2, .hero-title, .section-title, .article-title, .articles-title, .page-title) :is(em, i) {
  font-style: normal !important;
  color: var(--rubric) !important;
}

/* Legacy hard-coded font stacks inside a few templates */
body :is(.article-body, .policy-content, .terms-body, .page-body) :is(p, li, td) { font-family: var(--f-text); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--rubric) !important; outline-offset: 3px !important; }
.skip-link {
  position: absolute; left: 1rem; top: -200px; z-index: 999; padding: .5rem 1rem;
  background: var(--rubric); color: var(--ink) !important; font-family: var(--f-text); border-radius: 0; text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 0; }

[lang="ar"], .book-arabic, .book-hero-arabic, .arabic, .arabic-recite {
  font-family: var(--f-ar) !important;
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.7;
}

/* Mono: shelfmarks, extents, prices, dates, breadcrumbs — always sentence case. */
.breadcrumb, .book-meta, .book-hero-meta, .article-meta, .page-meta,
.article-card .meta, .book-volume-badge, .book-hero-vol, .book-cta-vol,
.book-feature-vol, .related-link-eyebrow, .why-number {
  font-family: var(--f-mono) !important;
  font-weight: 400 !important;
}

/* Italics in running text are transliterations, not accents. */
.article-body :is(em, i), .book-description :is(em, i), .book-hero-description :is(em, i),
.hero-description :is(em, i), .section-subtitle :is(em, i), .faq-answer :is(em, i),
.tradition-item p :is(em, i), .policy-content :is(em, i) { color: inherit !important; }

/* --------------------------------------------------------------------------
   2. Masthead
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(18, 17, 16, .94);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header-inner { gap: 24px; align-items: center; }
.logo-mark { gap: 14px; align-items: center; }
.logo-sigil { width: 40px !important; height: 40px !important; opacity: 1 !important; flex: 0 0 40px; }
.logo-text {
  font-family: var(--f-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1.1;
  color: var(--vellum) !important;
  white-space: nowrap;
}
.header-nav { gap: 6px 26px !important; }
.header-nav a {
  font-family: var(--f-text) !important;
  font-size: 17px !important;
  font-weight: 430 !important;
  color: var(--vellum-2) !important;
  padding: 10px 0;
  background: linear-gradient(var(--rubric), var(--rubric)) left calc(100% - 4px) / 0 1px no-repeat;
  transition: color .18s, background-size .25s;
}
.header-nav a:hover, .header-nav a:focus-visible, .header-nav a[aria-current="page"] {
  color: var(--vellum) !important;
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   3. Labels that used to be tracked caps -> rubricated sentence-case marks
   -------------------------------------------------------------------------- */
.section-eyebrow, .hero-eyebrow, .article-eyebrow, .page-eyebrow, .articles-eyebrow,
.shop-strip-eyebrow, .why-label, .terms-nav-label, .book-feature-vol, .book-cta-vol,
.book-hero-vol, .related-link-eyebrow {
  font-family: var(--f-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal;
  color: var(--rubric) !important;
  opacity: 1 !important;
}
.hero-eyebrow, .section-eyebrow, .article-eyebrow, .page-eyebrow, .articles-eyebrow {
  display: inline-block;
  padding-left: 14px;
  border-left: 3px solid var(--rubric);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   4. Ornaments: diamonds and centre-dot dividers become manuscript ruling
   -------------------------------------------------------------------------- */
.hero-divider, .section-divider, .article-divider, .policy-divider {
  display: block !important;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--rubric) 0 56px, var(--rule-strong) 56px 100%);
  max-width: 100%;
  margin: 40px 0 !important;
}
.hero-divider > *, .section-divider > *, .article-divider > * { display: none !important; }

.dot, .book-hero-meta .dot, .article-meta .dot, .article-card .meta .dot {
  display: inline-block !important;
  width: 1px !important;
  height: .95em !important;
  background: var(--rule-strong) !important;
  transform: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  margin: 0 .7em !important;
  vertical-align: -.12em !important;
}
.inside-list li::before, .policy-content ul li::before {
  width: .7em !important;
  height: 2px !important;
  background: var(--rubric) !important;
  transform: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  top: .78em !important;
}
.ornament-band, .forthcoming-sigil svg, .hero-ornament svg { display: none !important; }
/* Old-identity glows and underline flourishes (the hero glow also caused sideways scroll on phones) */
.article-hero::before, .articles-hero::before, .page-hero::before, .page-header::before,
.article-body h2::after, .book-feature-card::before, .book-cta-card::before { display: none !important; content: none !important; }
.hero-ornament, .forthcoming-sigil {
  width: 120px; height: 120px;
  background: var(--wafq) center / contain no-repeat;
  opacity: 1 !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   5. Buttons — solid vermilion = the primary action; the rest are outlined
   -------------------------------------------------------------------------- */
.btn-primary, .buy-btn-primary, .book-btn-amazon, .book-feature-cta, .book-cta-link,
.shop-strip-cta, .contact-email-link, .jfp-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px !important;
  background: var(--rubric) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rubric) !important;
  border-radius: 0 !important;
  font-family: var(--f-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn-primary:hover, .buy-btn-primary:hover, .book-btn-amazon:hover, .book-feature-cta:hover,
.book-cta-link:hover, .shop-strip-cta:hover, .contact-email-link:hover, .jfp-btn:hover,
.btn-primary:focus-visible, .buy-btn-primary:focus-visible, .book-btn-amazon:focus-visible, .jfp-btn:focus-visible {
  background: var(--vellum) !important;
  border-color: var(--vellum) !important;
  color: var(--ink) !important;
}
.btn-secondary, .buy-btn-secondary, .subscribe-btn, .jfp-btn-ghost,
.book-feature-info .book-feature-cta ~ .book-feature-cta,
.book-cta-info .book-cta-link ~ .book-cta-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px !important;
  background: transparent !important;
  color: var(--vellum) !important;
  border: 1px solid var(--vellum-3) !important;
  border-radius: 0 !important;
  font-family: var(--f-text) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-secondary:hover, .buy-btn-secondary:hover, .subscribe-btn:hover, .jfp-btn-ghost:hover,
.book-feature-info .book-feature-cta ~ .book-feature-cta:hover,
.book-cta-info .book-cta-link ~ .book-cta-link:hover {
  border-color: var(--rubric) !important;
  color: var(--vellum) !important;
  background: transparent !important;
}
/* Format links (Kindle / Paperback / Hardcover / Read sample) */
.book-btn-format, .book-btn-sample {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  font-family: var(--f-text) !important;
  font-size: 16px !important;
  font-weight: 430 !important;
  color: var(--vellum-2) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--rule-strong) !important;
  text-underline-offset: 4px;
}
.book-btn-format, .book-btn-sample { white-space: nowrap; }
.book-btn-format:hover, .book-btn-sample:hover { color: var(--vellum) !important; text-decoration-color: var(--rubric) !important; }

/* Kindle Unlimited badge: was teal — now a plain ruled mono note */
.kindle-unlimited-badge {
  background: transparent !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 0 !important;
  color: var(--vellum) !important;
  font-family: var(--f-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.kindle-unlimited-badge svg { fill: none !important; stroke: var(--rubric) !important; }

/* --------------------------------------------------------------------------
   6. Covers: mounted plates, no glow
   -------------------------------------------------------------------------- */
.book-cover, .book-hero-cover, .book-cta-cover, .book-feature-cover {
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 1px solid var(--rule-strong);
  outline-offset: 7px;
  transition: outline-color .2s;
}
a:hover > .book-cover, a:hover > .book-cta-cover, a:hover > .book-feature-cover,
.book-card:hover .book-cover { outline-color: var(--rubric); transform: none !important; }
.book-cover-frame { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.book-volume-badge {
  position: static !important;
  display: block !important;
  width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important;
  transform: none !important; writing-mode: horizontal-tb !important; clip-path: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 0 14px !important;
  color: var(--rubric) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   7. Cards & lists -> ruled register entries
   -------------------------------------------------------------------------- */
.book-card, .article-card, .related-link, .tradition-item, .why-item, .faq-item,
.book-feature-card, .book-cta-card, .terms-section {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.related-link, .article-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  padding: 20px 0 !important;
  transform: none !important;
}
.related-link:hover, .article-card:hover { border-top-color: var(--rubric) !important; }
.related-link-title, .article-card .title { font-family: var(--f-display) !important; font-weight: 400 !important; color: var(--vellum) !important; }
.article-card .read-more { font-family: var(--f-text) !important; color: var(--rubric) !important; font-size: 16px !important; }
.article-card .number { font-family: var(--f-display) !important; color: var(--rubric) !important; }

/* FAQ: Gloock summaries with a vermilion marker */
.faq-item { background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important; }
.faq-item summary { font-family: var(--f-display) !important; font-weight: 400 !important; color: var(--vellum) !important; font-size: clamp(20px, 2vw, 24px) !important; line-height: 1.25; }
.faq-item summary::after { color: var(--rubric) !important; font-family: var(--f-text) !important; transform: translateY(-50%) !important; right: 4px !important; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg) !important; }
.faq-answer, .faq-item p { color: var(--vellum-2); font-size: 18px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   8. Homepage & collection page
   -------------------------------------------------------------------------- */
.hero { text-align: left !important; }
.hero::before, .contact-section::before { display: none !important; }
.hero-content {
  text-align: left !important;
  max-width: 1136px !important;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.hero-content > * { grid-column: 2; }
.hero-content > .hero-ornament {
  grid-column: 1; grid-row: 1 / span 6;
  width: 168px; height: 168px; margin: 8px 0 0 !important;
  justify-self: end;
}
.hero-title {
  font-size: clamp(42px, 5.6vw, 84px) !important;
  line-height: .98 !important;
  color: var(--vellum) !important;
  margin: 18px 0 0 !important;
}
body .hero-content .hero-title > :is(em, i) { color: var(--vellum) !important; }
.hero-description { font-size: clamp(19px, 1.6vw, 22px) !important; color: var(--vellum-2) !important; max-width: 40em; margin-left: 0 !important; margin-right: 0 !important; }
.hero-actions { justify-content: flex-start !important; gap: 12px !important; flex-wrap: wrap; }

.section-header { text-align: left !important; max-width: 1136px; margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(36px, 4.6vw, 62px) !important; color: var(--vellum) !important; }
.section-subtitle { color: var(--vellum-2) !important; font-size: 19px !important; max-width: 46em; margin-left: 0 !important; }
.section-subtitle strong { color: var(--vellum); }

/* Book catalogue: every title as a ruled register entry with its cover */
.books-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: 1136px;
  margin-left: auto; margin-right: auto;
}
.book-card {
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  padding: 44px 0 !important;
  transform: none !important;
  overflow: visible !important;
}
.book-card:hover { border-top-color: var(--rubric) !important; }
.book-cover-frame { grid-column: 1; width: 168px; padding: 0 !important; aspect-ratio: auto !important; height: auto !important; }
.book-cover { width: 100% !important; height: auto !important; }
.book-body { grid-column: 2; padding: 0 !important; }
.book-body, .book-body > *, .book-title, .book-translit, .book-meta, .book-description { text-align: left !important; }
.book-arabic {
  color: var(--rubric) !important; font-size: 26px !important; opacity: 1 !important;
  text-align: right !important; width: fit-content; max-width: 100%; margin: 0 0 4px !important;
}
.book-title { font-size: clamp(28px, 2.8vw, 38px) !important; line-height: 1.08 !important; margin: 0 0 6px !important; }
.book-title a { color: var(--vellum) !important; text-decoration: none; }
.book-title a:hover { color: var(--rubric) !important; }
.book-translit { font-family: var(--f-text) !important; font-style: italic !important; color: var(--vellum-2) !important; font-size: 18px !important; opacity: 1 !important; }
.book-meta { color: var(--vellum-3) !important; font-size: 14px !important; line-height: 1.6 !important; margin: 12px 0 !important; }
.book-description { color: var(--vellum-2) !important; font-size: 18px !important; line-height: 1.6 !important; max-width: 40em; }
.book-actions {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: flex-start !important; align-items: center !important;
  gap: 8px 26px !important; margin-top: 20px !important;
}
.book-actions .book-btn-amazon { width: auto !important; }
.book-format-row { display: flex !important; width: auto !important; flex: 0 1 auto; gap: 4px 22px !important; justify-content: flex-start !important; }
.book-card-forthcoming .book-cover-frame--coming { display: flex; align-items: flex-start; justify-content: flex-end; min-height: 0 !important; }

.tradition-section, .faq-section, .contact-section, .books-section, .lineage-section { background: transparent !important; }
.tradition-section, .faq-section, .contact-section { border-top: 1px solid var(--rule); }
.tradition-grid { gap: 0 48px !important; }
.tradition-item { background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important; padding: 24px 0 !important; }
.tradition-item h3 { color: var(--vellum) !important; font-size: 24px !important; }
.tradition-item h3 .latin { font-family: var(--f-text) !important; font-style: italic !important; color: var(--rubric) !important; font-size: 17px !important; }
.contact-content { text-align: left !important; max-width: 1136px; margin: 0 auto; }
.contact-email-link { margin-top: 12px; }

/* Collection page "why" grid */
.why-item { background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important; }
.why-number { color: var(--rubric) !important; font-size: 15px !important; }

/* --------------------------------------------------------------------------
   9. Book pages
   -------------------------------------------------------------------------- */
.book-hero { gap: 56px !important; }
.book-hero-cover { width: 280px; }
.book-hero-title { font-size: clamp(36px, 4.6vw, 58px) !important; line-height: 1.02 !important; color: var(--vellum) !important; }
.book-hero-arabic { color: var(--rubric) !important; opacity: 1 !important; font-size: 30px !important; text-align: left; }
.book-hero-meta { color: var(--vellum-3) !important; font-size: 14px !important; }
.book-hero-description { color: var(--vellum-2) !important; font-size: 19px !important; }
.whats-inside h2, .related-articles h2, .subscribe-section h2 { font-family: var(--f-display) !important; font-weight: 400 !important; }
.inside-list li { color: var(--vellum-2) !important; font-size: 18px !important; }
.buy-buttons { gap: 10px !important; }

/* --------------------------------------------------------------------------
   10. Articles
   -------------------------------------------------------------------------- */
.article-hero { text-align: left !important; }
.article-title { font-size: clamp(38px, 5vw, 70px) !important; line-height: 1.02 !important; color: var(--vellum) !important; }
.article-description { color: var(--vellum-2) !important; font-size: clamp(19px, 1.6vw, 22px) !important; }
.article-meta { color: var(--vellum-3) !important; font-size: 14px !important; }
.article-body {
  max-width: 660px !important;
  font-family: var(--f-text) !important;
  font-size: 19px !important;
  line-height: 1.72 !important;
  color: var(--vellum) !important;
}
.article-body p, .article-body li { font-size: inherit !important; line-height: inherit !important; color: var(--vellum) !important; font-weight: 430 !important; }
.article-body > p:first-of-type::first-letter {
  float: none !important; font-size: inherit !important; line-height: inherit !important;
  padding: 0 !important; margin: 0 !important; font-family: inherit !important; color: inherit !important;
}
.article-body > p:first-of-type::first-line { color: var(--rubric); }
.article-body h2 {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 2.8vw, 36px) !important;
  line-height: 1.12 !important;
  color: var(--vellum) !important;
  padding-top: 26px;
  margin-top: 52px !important;
  border-top: 1px solid var(--rule-strong);
  background: linear-gradient(var(--rubric), var(--rubric)) left top / 56px 1px no-repeat;
}
.article-body h3 {
  font-family: var(--f-text) !important;
  font-weight: 600 !important;
  font-size: 21px !important;
  color: var(--rubric) !important;
}
.article-body h3 :is(em, i) { color: inherit !important; }
.article-body a:not([class]) {
  color: var(--vellum) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--rubric) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:not([class]):hover { color: var(--rubric) !important; text-decoration-thickness: 2px; }
.article-body blockquote {
  font-family: var(--f-display) !important;
  font-style: normal !important;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  line-height: 1.3 !important;
  color: var(--vellum) !important;
  border: 0 !important;
  border-top: 2px solid var(--rubric) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  background: transparent !important;
  padding: 22px 0 !important;
  margin: 40px 0 !important;
}
.article-body blockquote p { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.article-body table, .comparison-table, .jinn-kings-table { border-collapse: collapse; font-size: 16px; }
.article-body :is(th, td) { border-color: var(--rule) !important; }
/* Wide tables scroll inside their own box on phones; long words wrap instead of widening the page */
.article-body > table, .comparison-table { display: block; max-width: 100%; overflow-x: auto; }
.jinn-kings-table { display: table !important; min-width: 640px; }
.table-scroll-wrapper { max-width: 100%; overflow-x: auto; }
.article-body :is(p, li, h2, h3, blockquote) { overflow-wrap: break-word; }
/* Inline-styled leftovers of the old type stack */
.venus-square caption, .article-body caption { font-family: var(--f-text) !important; }
.article-body th { font-family: var(--f-text) !important; font-weight: 600 !important; color: var(--vellum) !important; background: var(--ink-raised) !important; }

/* In-article book boxes: jadwal frame (double rule) */
.book-feature-card, .book-cta-card {
  background: var(--ink-raised) !important;
  border: 1px solid var(--rubric) !important;
  outline: 1px solid var(--rule-red);
  outline-offset: -7px;
}
.book-feature-title, .book-cta-title { color: var(--vellum) !important; }
.book-feature-subtitle, .book-cta-subtitle { color: var(--vellum-2) !important; font-style: italic; }
.badge-complete, .badge-partial, .badge-academic {
  background: transparent !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 0 !important;
  color: var(--vellum-2) !important;
  font-family: var(--f-mono) !important;
  font-size: 14px !important;
}
.subscribe-band { background: var(--ink-raised) !important; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.article-footer a { font-family: var(--f-text) !important; color: var(--vellum-2) !important; }
.article-footer a span.label { font-family: var(--f-mono) !important; color: var(--rubric) !important; }
.related-topics a { color: var(--vellum-2); }

/* Essays index */
.articles-title { font-size: clamp(40px, 5.4vw, 76px) !important; color: var(--vellum) !important; }
.articles-subtitle { color: var(--vellum-2) !important; }
.shop-strip { background: var(--ink-raised) !important; border: 1px solid var(--rubric) !important; border-radius: 0 !important; outline: 1px solid var(--rule-red); outline-offset: -7px; }

/* Legal pages & about */
.page-title { color: var(--vellum) !important; }
.policy-content h2, .terms-body h2, .terms-section h2 { font-family: var(--f-display) !important; font-weight: 400 !important; color: var(--vellum) !important; }
.terms-nav a { color: var(--vellum-2); }

/* --------------------------------------------------------------------------
   11. Colophon (footer)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-sunk) !important; border-top: 1px solid var(--rule) !important; }
.footer-company {
  font-family: var(--f-display) !important;
  font-size: 21px !important;
  color: var(--vellum) !important;
  display: inline-flex; align-items: center; gap: 14px;
}
.footer-company::before {
  content: ""; width: 34px; height: 34px; flex: 0 0 34px;
  background: var(--wafq) center / contain no-repeat;
}
.footer-social a { color: var(--vellum-3) !important; }
.footer-social a:hover { color: var(--rubric) !important; }
.footer-email a { font-family: var(--f-mono) !important; font-size: 15px !important; color: var(--vellum-2) !important; }
.footer-legal { font-family: var(--f-mono) !important; font-size: 14px !important; color: var(--vellum-3) !important; }
.footer-legal a { margin-left: .9em; }
.footer-affiliate-disclosure { font-family: var(--f-text) !important; font-size: 15px !important; color: var(--vellum-3) !important; }
.breadcrumb { color: var(--vellum-3) !important; font-size: 14px !important; }
.breadcrumb a { color: var(--vellum-2) !important; }
.breadcrumb a:hover { color: var(--rubric) !important; }

/* --------------------------------------------------------------------------
   12. New components: stockists & wholesale
   -------------------------------------------------------------------------- */
.jfp-trade { border-top: 1px solid var(--rule); padding: 96px 0; }
.jfp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.jfp-mark {
  display: inline-block; padding-left: 14px; border-left: 3px solid var(--rubric);
  font-family: var(--f-mono); font-size: 14px; color: var(--rubric); margin: 0 0 14px;
}
.jfp-h1, .jfp-h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.04; color: var(--vellum); margin: 0 0 18px; text-wrap: balance; }
.jfp-h1 { font-size: clamp(40px, 5.4vw, 76px); }
.jfp-h2 { font-size: clamp(32px, 4vw, 52px); }
.jfp-lede { font-size: clamp(19px, 1.6vw, 22px); color: var(--vellum-2); max-width: 44em; margin: 0 0 32px; }
.stockists {
  list-style: none; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px;
}
.stockists li { border-top: 1px solid var(--rule-strong); padding: 18px 0 22px; }
.stockists a {
  font-family: var(--f-display); font-size: 25px; line-height: 1.15; color: var(--vellum);
  text-decoration: underline; text-decoration-color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.stockists a:hover { color: var(--rubric); }
.stockists .city { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 14px; color: var(--vellum-3); }
.trade-panel {
  background: var(--ink-raised);
  border: 1px solid var(--rubric);
  outline: 1px solid var(--rule-red); outline-offset: -7px;
  padding: 36px 40px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 48px; align-items: center;
}
.trade-panel h2, .trade-panel h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; color: var(--vellum); margin: 0; }
.trade-panel p { color: var(--vellum-2); margin: 0 0 18px; }
.trade-panel .addr { display: block; margin-top: 12px; font-family: var(--f-mono); font-size: 14px; color: var(--vellum-3); }
.trade-list { width: 100%; border-collapse: collapse; margin: 8px 0 40px; font-size: 16px; }
.trade-list caption { text-align: left; font-family: var(--f-mono); font-size: 14px; color: var(--vellum-3); padding: 0 0 12px; }
.trade-list th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 14px; color: var(--vellum-3); border-bottom: 1px solid var(--rule-strong); padding: 10px 14px 10px 0; }
.trade-list td { border-bottom: 1px solid var(--rule); padding: 14px 14px 14px 0; vertical-align: top; color: var(--vellum-2); }
.trade-list td.t a { font-family: var(--f-display); font-size: 19px; color: var(--vellum); text-decoration: none; }
.trade-list td.t a:hover { color: var(--rubric); }
.trade-list td.ar { font-family: var(--f-ar); color: var(--rubric); font-size: 19px; direction: rtl; text-align: right; white-space: nowrap; }
.trade-list td.n, .trade-list td.isbn { font-family: var(--f-mono); font-size: 14px; white-space: nowrap; }
.trade-list td.v { font-family: var(--f-display); color: var(--rubric); font-size: 20px; }
.checklist { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: c; }
.checklist li { counter-increment: c; padding: 6px 0 6px 34px; position: relative; color: var(--vellum-2); }
.checklist li::before { content: counter(c, lower-roman) "."; position: absolute; left: 0; font-family: var(--f-display); color: var(--rubric); }
.jfp-faq { max-width: 860px; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-content { grid-template-columns: 132px minmax(0, 1fr); column-gap: 40px; }
  .hero-content > .hero-ornament { width: 132px; height: 132px; }
  .book-card { grid-template-columns: 140px minmax(0, 1fr); column-gap: 40px; }
  .book-cover-frame { width: 140px; }
}
@media (max-width: 820px) {
  .hero-content { display: block !important; }
  .hero-content > .hero-ornament { width: 72px; height: 72px; margin: 0 0 8px !important; }
  .hero-title { font-size: clamp(38px, 10vw, 56px) !important; }
  /* Phone: cover floats left, title block wraps beside it, actions clear below */
  .book-card { display: flow-root !important; padding: 32px 0 !important; }
  .book-cover-frame { float: left; width: 96px; margin: 4px 20px 12px 0 !important; }
  .book-body { display: block; }
  .book-arabic { font-size: 22px !important; margin-left: auto !important; }
  .book-title { font-size: 25px !important; }
  .book-actions { clear: both; padding-top: 4px; }
  .book-actions .book-btn-amazon { width: 100% !important; }
  .hero-content > .hero-ornament { margin-left: 0 !important; justify-self: start; }
  .stockists { grid-template-columns: 1fr; }
  .trade-panel { grid-template-columns: 1fr; padding: 28px 22px; }
  .trade-list thead { display: table-header-group !important; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .trade-list caption { display: block; width: 100%; }
  .trade-list td.isbn::before { content: "ISBN-13 "; color: var(--vellum-3); }
  .trade-list, .trade-list tbody, .trade-list tr, .trade-list td { display: block; width: 100%; }
  .trade-list tr { border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .trade-list td { border: 0; padding: 2px 0; text-align: left !important; }
  .trade-list td.ar { text-align: left !important; }
  .article-body { font-size: 18px !important; }
  .logo-text { font-size: 20px !important; }
  .logo-sigil { width: 34px !important; height: 34px !important; flex-basis: 34px; }
  .jfp-trade { padding: 64px 0; }
}
@media (max-width: 480px) {
  .header-nav { display: flex !important; flex-wrap: wrap; gap: 0 18px !important; }
  .header-nav a { font-size: 16px !important; }
  .header-inner { flex-wrap: wrap; }
  .jfp-wrap { padding: 0 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   15. Inline-styled article blocks (related topics, in-article FAQ):
       map the old hard-coded palette onto the identity tokens
   -------------------------------------------------------------------------- */
body [style*="#c9a96e" i], body [style*="#e8dcc8" i] { color: var(--vellum) !important; }
body [style*="#b8a88a" i] { color: var(--vellum-2) !important; }
body [style*="#8a7b6b" i] { color: var(--vellum-3) !important; }
body [style*="#12100e" i], body [style*="#0d0b09" i] { background: var(--ink-raised) !important; }
body [style*="#2a2420" i], body [style*="#1e1a17" i], body [style*="#3a3020" i] { border-color: var(--rule-strong) !important; }
.related-topics h3, .faq-section h2 { font-family: var(--f-display) !important; font-weight: 400 !important; }
.faq-section summary { font-family: var(--f-display) !important; font-weight: 400 !important; font-size: 21px !important; line-height: 1.3; }
.faq-section summary::marker { color: var(--rubric); }

/* --------------------------------------------------------------------------
   16. Review fixes (4-lens design review, 2026-10-09)
   -------------------------------------------------------------------------- */
/* Sticky masthead must never hide focus or anchor targets (WCAG 2.4.11) */
html { scroll-padding-top: 96px; }
@media (max-width: 820px) {
  .site-header { position: static !important; }
  html { scroll-padding-top: 16px; }
}
/* One masthead/colophon width on every template (about/wholesale used an 800px container) */
.site-header > .container, .site-footer > .container,
.site-header > .container-wide, .site-footer > .container-wide { max-width: 1200px !important; }

/* Wholesale/home trade labels: page-body rules must not demote the mono rubric mark */
body .jfp-mark, p.jfp-mark { font-family: var(--f-mono) !important; font-size: 14px !important; color: var(--rubric) !important; margin: 0 0 14px !important; }
.page-header .jfp-h1 { font-size: clamp(40px, 5.4vw, 76px) !important; margin-bottom: 18px !important; }
.trade-panel { align-items: start; }
.trade-panel > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trade-panel > div > :is(p, ol, .jfp-mark, h2, h3) { flex: 1 0 100%; }
.trade-panel > div > .addr { flex: 1 0 100%; margin-top: 0; }
.trade-list { table-layout: fixed; }
.trade-list th:nth-child(1) { width: 56px; }
.trade-list th:nth-child(3) { width: 230px; text-align: right; }
.trade-list th:nth-child(4) { width: 84px; }
.trade-list th:nth-child(5) { width: 180px; }
.trade-list th:nth-child(6) { width: 180px; }
.trade-list :is(th:nth-child(3), td.ar) { padding-right: 28px; }
.jfp-trade.jfp-faq { max-width: none; }
.jfp-faq > * { max-width: 860px; }
@media (max-width: 820px) { .trade-list { table-layout: auto; } }

/* Homepage essay lists still carried inline old-identity styles */
#essays a[style*="accent-bright"] { color: var(--vellum) !important; }
#essays a[style*="accent-bright"]:hover { color: var(--rubric) !important; }
section[aria-labelledby="more-essays-heading"] h3 {
  font-family: var(--f-mono) !important; font-size: 14px !important; font-weight: 400 !important;
  color: var(--rubric) !important; padding-left: 14px; border-left: 3px solid var(--rubric);
}
section[aria-labelledby="more-essays-heading"] a { font-family: var(--f-text) !important; font-style: normal !important; font-size: 18px !important; color: var(--vellum-2) !important; }
section[aria-labelledby="more-essays-heading"] a:hover { color: var(--vellum) !important; }

/* No synthesized italic of the display face, anywhere */
body [style*="font-heading"][style*="italic"] { font-family: var(--f-text) !important; }
.book-hero-title-sub, .book-feature-subtitle, .book-cta-subtitle {
  font-family: var(--f-text) !important; font-style: italic !important; font-weight: 400 !important; color: var(--vellum-2) !important;
}
.article-body blockquote :is(em, i), :is(.faq-item, .faq-section) summary :is(em, i) { font-style: normal !important; }
.article-body blockquote p:last-child:not(:first-child) {
  font-family: var(--f-mono) !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--vellum-3) !important; margin-top: 14px;
}
.book-volume-badge { font-style: normal !important; }
.book-cover-frame .book-volume-badge { display: none !important; }
.book-card-forthcoming .book-volume-badge { display: block !important; text-align: right; }

/* Alignment: every page type sets its display stack flush left */
.articles-hero, .articles-hero .container, .page-header, .shop-strip, .subscribe-section, .collection-cta { text-align: left !important; }
.articles-hero :is(.articles-title, .articles-subtitle), .shop-strip-text, .collection-cta .cta-inner, .subscribe-section p { margin-left: 0 !important; margin-right: 0 !important; }
.collection-cta .cta-inner { max-width: 1136px !important; }
.collection-cta .hero-ornament { margin: 0 0 32px !important; }
.subscribe-section :is(.subscribe-links, .subscribe-buttons) { justify-content: flex-start !important; }
.article-description { margin-left: 0 !important; margin-right: 0 !important; }

/* Book-page hero: wider title column, actions within the first screen */
.book-hero-info { display: flex; flex-direction: column; align-items: flex-start; }
.book-hero-description { order: 9; margin-top: 28px !important; }
@media (min-width: 769px) {
  .book-hero, .breadcrumb { margin-inline: calc((100% - min(976px, 100vw - 64px)) / 2) !important; }
  /* the rest of a book page shares the hero's left edge (text keeps its own measure) */
  .container:has(> .book-hero) > :not(.book-hero):not(.breadcrumb) { margin-inline: calc((100% - min(976px, 100vw - 64px)) / 2) !important; }
}
@media (max-width: 768px) {
  .book-hero { align-items: flex-start !important; text-align: left !important; }
  .book-hero-cover { width: 200px !important; }
  .book-hero-info, .book-hero-info > *, .book-feature-info, .book-feature-info > *, .book-cta-info, .book-cta-info > * { text-align: left !important; }
  .buy-buttons { align-items: flex-start !important; justify-content: flex-start !important; }
}
.trade-note { margin: 16px 0 0; font-size: 16px; }
.trade-note a { color: var(--vellum-2); text-decoration: underline; text-decoration-color: var(--rubric); text-underline-offset: 4px; }
.trade-note a:hover { color: var(--vellum); }

/* One link treatment for running prose on every template */
:is(main, article, .page-body, .policy-content, .terms-body) :is(p, li, dd) a:not([class]) {
  color: var(--vellum) !important; border-bottom: 0 !important;
  text-decoration: underline !important; text-decoration-color: var(--rubric) !important;
  text-decoration-thickness: 1px !important; text-underline-offset: 3px;
}
:is(main, article, .page-body, .policy-content, .terms-body) :is(p, li, dd) a:not([class]):hover { color: var(--rubric) !important; text-decoration-thickness: 2px !important; }

/* Long-form prose: same voice and comfortable measure everywhere (~65-75 characters) */
.article-body > :is(p, ul, ol, h2, h3, blockquote) { max-width: 30em; }
.terms-section :is(p, li), .policy-content :is(p, li), .book-overview :is(p, li), .whats-inside > p, .faq-section > p,
.tradition-item p, .series-info p {
  font-size: 17px !important; line-height: 1.65 !important; font-weight: 430 !important; max-width: 31em;
}
.book-overview :is(p, li), .book-overview ~ .faq-section p { color: var(--vellum-2) !important; }
.book-overview ~ .faq-section h3 { font-family: var(--f-display) !important; font-weight: 400 !important; border-top: 1px solid var(--rule); padding-top: 18px; }
.faq-section details > p, .faq-answer { max-width: 31em; }
.book-description { max-width: 28em !important; }
.section-subtitle { max-width: 29em !important; }
.hero-description, .jfp-lede { max-width: 30em !important; }
.bio-text, .method-intro, .inside-list li, .article-card .desc, .topic-guide-intro, .aka-variants { max-width: 29em; }
.section-subtitle + .section-subtitle { margin-top: 16px !important; }

/* Article furniture */
.article-body hr:has(+ h2) { display: none !important; }
.article-body hr { background: var(--rule-strong) !important; border: 0 !important; height: 1px; }
.article-body :is(th, td) { padding: 10px 16px 10px 0 !important; border-bottom: 1px solid var(--rule) !important; vertical-align: top !important; text-align: left; }
.article-body :is(th, td):last-child { padding-right: 0 !important; }
.article-body td[lang="ar"], :is(p, li, td) > [lang="ar"] { font-size: 1.2em; }
.article-body td[lang="ar"] { text-align: right !important; line-height: 1.4; }
.arabic-name { font-family: var(--f-text) !important; font-style: italic; direction: ltr; unicode-bidi: normal; color: var(--vellum-2); }
.color-dot { display: none !important; }
.faq-section > h2 { margin-bottom: 20px !important; }
.faq-section summary { list-style: none; padding: 9px 0; min-height: 44px; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after { content: " +"; color: var(--rubric); font-family: var(--f-text); }
.faq-section details[open] summary::after { content: " \2212"; }
.article-footer a strong { display: block; }
.article-footer a + a { margin-left: auto; }
.book-feature-info .book-feature-cta { margin: 0 8px 10px 0; }
.book-feature-cta[style*="opacity"] { opacity: 1 !important; }

/* FAQ lists align with their headings */
.faq-list { margin-left: 0 !important; max-width: 860px; gap: 0 !important; }
.faq-item summary { padding: 22px 44px 22px 0 !important; }
.faq-answer { padding: 0 0 24px !important; }

/* Grids without orphans; stats as rubricated figures */
.tradition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 820px) { .tradition-grid { grid-template-columns: 1fr !important; } }
.collection-why { background: transparent !important; }
.collection-why .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .collection-why .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-item { text-align: left !important; padding-top: 18px !important; }
.why-item .why-number { font-family: var(--f-display) !important; font-size: clamp(40px, 4vw, 56px) !important; line-height: 1 !important; margin-bottom: 6px; }
.why-label { color: var(--vellum-2) !important; }
.collection-cta .cta-title, .article-body strong { color: var(--vellum) !important; }

/* Square corners, cards without fills */
.series-info, .topic-guide, body [style*="border-radius"] { border-radius: 0 !important; }
.series-info { background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important; padding: 24px 0 !important; }
.series-info h3 { color: var(--vellum) !important; }

/* Labels: one system (left rubric bar) */
.book-hero-vol, .book-feature-vol, .book-cta-vol, .terms-nav-label, .shop-strip-eyebrow { display: inline-block; padding-left: 14px; border-left: 3px solid var(--rubric); line-height: 1.3; }
.book-card-forthcoming .book-btn-amazon { background: transparent !important; color: var(--vellum) !important; border-color: var(--vellum-3) !important; font-weight: 500 !important; }
.nw { white-space: nowrap; }

/* 14px floor, tap targets, contrast */
.article-card .meta, .article-footer a span.label, .terms-nav a, .page-meta { font-size: 14px !important; }
.breadcrumb .sep { opacity: 1 !important; color: var(--vellum-3) !important; }
.footer-social a { display: inline-flex !important; width: 44px; height: 44px; align-items: center; justify-content: center; }
.footer-legal a, .footer-email a, .breadcrumb a { display: inline-block; padding: 12px 0; }
.terms-nav a { padding-block: 8px; }

/* Colophon */
.footer-company { white-space: nowrap; }
.footer-legal a { margin-left: 0 !important; margin-right: 1.1em; text-decoration: none !important; }
.footer-legal a:hover { color: var(--rubric) !important; }
.footer-email a + a { margin-left: 1.1em; }

/* Book pages: breathing room before the SEO overview section */
.book-overview { padding-top: 40px; }
.book-overview h2 { font-family: var(--f-display) !important; font-weight: 400 !important; }

/* --------------------------------------------------------------------------
   17. Homepage tabs (jfp-tabs.js) + compact cover grid
   Without JS every section shows, exactly as before.
   -------------------------------------------------------------------------- */
.jfp-tabs {
  position: sticky; top: 72px; z-index: 50;
  background: rgba(18, 17, 16, .96);
  border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.jfp-tabs-list {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  display: flex; gap: 6px 30px; overflow-x: auto; scrollbar-width: none;
}
.jfp-tabs-list::-webkit-scrollbar { display: none; }
.jfp-tabs-list [role="tab"] {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  padding: 16px 0 14px; min-height: 48px;
  font-family: var(--f-text); font-size: 17px; font-weight: 430; color: var(--vellum-2);
  background-image: linear-gradient(var(--rubric), var(--rubric));
  background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px;
  transition: color .18s, background-size .25s;
}
.jfp-tabs-list [role="tab"]:hover { color: var(--vellum); }
.jfp-tabs-list [role="tab"][aria-selected="true"] { color: var(--vellum); background-size: 100% 2px; }
.jfp-tab-count { font-family: var(--f-mono); font-size: 13px; color: var(--rubric); margin-left: 2px; }
.jfp-tabs-on main > section[role="tabpanel"] { scroll-margin-top: 140px; }
.jfp-tabs-on main > section[role="tabpanel"]:not([hidden]) { border-top: 0 !important; }

@media (min-width: 821px) {
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 48px 32px !important; }
  .book-card {
    display: flex !important; flex-direction: column; gap: 0;
    border-top: 0 !important; padding: 0 !important;
  }
  .book-card:hover { border-top-color: transparent !important; }
  .book-cover-frame { width: 100% !important; margin-bottom: 22px; }
  .book-cover { width: 100% !important; max-width: 100%; }
  .book-body { display: flex; flex-direction: column; flex: 1; }
  .book-arabic { font-size: 22px !important; margin-left: auto !important; }
  .book-title { font-size: 24px !important; }
  .book-translit { font-size: 16px !important; }
  .book-meta { font-size: 13px !important; margin: 10px 0 !important; }
  .book-description {
    font-size: 16px !important;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  .book-actions { margin-top: auto !important; padding-top: 18px; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
  .book-actions .book-btn-amazon { width: 100% !important; font-size: 15px !important; padding: 12px 14px !important; }
  .book-format-row { gap: 2px 16px !important; }
}
@media (max-width: 820px) {
  .jfp-tabs { top: 0; }
  .jfp-tabs-list { padding: 0 1.25rem; gap: 0 22px; }
  .jfp-tabs-list [role="tab"] { font-size: 16px; }
}