/* ============================================================
   ROOHLE — Combined theme stylesheet
   This file is the union of two stylesheets developed during
   the static design phase:
     1. The homepage stylesheet (hero, four-doors, recent writing)
     2. maps.css — the article + Map + category-landing system
   They share the same design tokens, so combining them here is
   safe; the second file's tokens override the first where they
   differ (the map system is canonical).
   ============================================================ */

/* ---------------- HOMEPAGE STYLES (hero, doors, recent) ---------------- */
:root{
    --bg:#FAFAFA;
    --ink:#232323;
    --ink-soft:#5a5a5a;
    --ink-mute:#717171;
    --rule:#e6e6e6;
    --rule-soft:#efefef;
    --accent:#AA4FFF;
    --accent-ink:#7e2fcf;
    --serif:"Source Serif 4", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --arabic:"Amiri", "Scheherazade New", Georgia, serif;
    --maxw:1180px;
    --prose:680px;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--serif);
    font-size:18px;
    line-height:1.55;
    font-feature-settings:"liga","kern";
  }
  ::selection{ background:#e8d5ff; color:#3a1864; }

  /* Mathematical/physicist marginalia — research-paper register */
  .marginalia{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
  }
  .smallcaps{
    font-family:var(--sans);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
  }

  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
  img{ display:block; max-width:100%; }

  .container{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){
    .container{ padding:0 22px; }
  }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(250,250,250,0.86);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--rule-soft);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:96px;
  }
  .nav-brand{
    display:flex; align-items:center; gap:6px;
    font-family:var(--serif);
    font-weight:600;
    font-size:24px;
    letter-spacing:-0.005em;
    color:var(--ink);
  }
  .nav-brand .mark{ width:56px; height:56px; object-fit:contain; }
  .nav-links{
    display:flex; align-items:center; gap:28px;
    font-family:var(--sans);
    font-size:13.5px;
    font-weight:500;
    color:var(--ink);
  }
  .nav-links a{
    position:relative;
    padding:6px 0;
    color:var(--ink);
    transition:color .2s ease;
  }
  .nav-links a:hover{ color:var(--accent-ink); }
  .nav-links a.divider-before{
    margin-left:8px;
    padding-left:28px;
  }
  .nav-links a.divider-before::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:14px; background:var(--rule);
  }
  .nav-toggle{
    display:none;
    width:38px; height:38px;
    align-items:center; justify-content:center;
    border:1px solid var(--rule);
    border-radius:8px;
  }
  .nav-toggle svg{ width:18px; height:18px; }
  @media (max-width:880px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    .nav-links.is-open{
      display:flex; flex-direction:column; align-items:flex-start;
      gap:0;
      position:absolute; left:0; right:0; top:96px;
      background:var(--bg);
      border-bottom:1px solid var(--rule);
      padding:14px 22px 22px;
    }
    .nav-links.is-open a{
      width:100%;
      padding:14px 0;
      border-bottom:1px solid var(--rule-soft);
    }
    .nav-links.is-open a:last-child{ border-bottom:0; }
    .nav-links.is-open a.divider-before{
      margin-left:0; padding-left:0;
    }
    .nav-links.is-open a.divider-before::before{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{
    /* Golden-ratio-influenced vertical proportion: ~123 / 199 ≈ 1:φ */
    padding:123px 0 199px;
    position:relative;
    overflow:hidden;
  }
  /* Orbit watermark — celestial signature, ~6% opacity */
  .hero-orbit{
    position:absolute;
    right:-180px;
    top:60px;
    width:760px;
    height:760px;
    pointer-events:none;
    opacity:0.55;
    color:var(--ink);
  }
  .hero-orbit svg{ width:100%; height:100%; display:block; }
  /* Horizon line — earth-meets-sky, abstract */
  .hero-horizon{
    position:absolute;
    left:0; right:0; bottom:0;
    height:120px;
    pointer-events:none;
    overflow:hidden;
  }
  .hero-horizon svg{ width:140%; height:100%; margin-left:-20%; display:block; }
  .hero-citation{
    position:absolute;
    right:32px;
    top:36px;
    text-align:right;
    line-height:1.5;
    z-index:1;
  }
  .hero-citation .label{
    display:block;
    color:var(--ink-mute);
  }
  .hero-citation .verse{
    display:block;
    color:var(--ink-soft);
    font-style:italic;
    font-family:var(--serif);
    font-size:13px;
    letter-spacing:0;
    margin-top:4px;
    max-width:240px;
  }
  .hero > .container{ position:relative; z-index:2; }
  .hero-mark-row{
    display:flex; align-items:center; gap:18px;
    margin-bottom:64px;
  }
  .hero-mark{
    width:160px; height:160px;
    flex-shrink:0;
    object-fit:contain;
  }
  .hero-wordmark{
    font-family:var(--serif);
    font-weight:600;
    font-size:48px;
    line-height:1;
    letter-spacing:-0.022em;
    color:var(--ink);
  }
  /* Arabic phrase — co-equal voice, real breath */
  .hero-arabic-block{
    margin-left:auto;
    text-align:right;
    padding-left:48px;
    border-left:1px solid var(--rule);
  }
  .hero-arabic{
    font-family:var(--arabic);
    font-weight:400;
    font-size:68px;
    line-height:1;
    color:var(--ink);
    direction:rtl;
    letter-spacing:0;
  }
  .hero-arabic-trans{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:10.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-mute);
    margin-top:14px;
  }
  .hero-positioning{
    font-family:var(--serif);
    font-weight:400;
    font-size:42px;
    line-height:1.22;
    letter-spacing:-0.018em;
    color:var(--ink);
    max-width:880px;
    text-wrap:balance;
    margin:0 0 56px;
  }
  .hero-positioning em{
    font-style:italic;
    font-weight:400;
  }
  .hero-positioning .accent{
    color:var(--accent-ink);
    font-style:italic;
  }

  .subscribe{
    display:flex; align-items:stretch;
    max-width:520px;
    border-bottom:1px solid var(--ink);
    transition:border-color .2s ease;
  }
  .subscribe:focus-within{ border-color:var(--accent); }
  .subscribe input{
    flex:1;
    border:0; outline:0; background:transparent;
    font-family:var(--sans);
    font-size:15px;
    padding:14px 0;
    color:var(--ink);
  }
  .subscribe input::placeholder{ color:var(--ink-mute); }
  .subscribe button{
    font-family:var(--sans);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--accent-ink);
    padding:14px 0 14px 24px;
    transition:color .2s ease, transform .2s ease;
  }
  .subscribe button:hover{ color:#5e1ca8; transform:translateX(2px); }
  .subscribe-status{
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink-mute);
    margin-top:14px;
    min-height:1em;
  }
  .subscribe-status.ok{ color:var(--accent-ink); }

  .hero-author{
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink-mute);
    margin-top:36px;
    letter-spacing:0.01em;
  }

  @media (max-width:760px){
    .hero{ padding:72px 0 88px; }
    .hero-mark{ width:104px; height:104px; }
    .hero-wordmark{ font-size:34px; }
    .hero-arabic{ font-size:48px; }
    .hero-arabic-block{ padding-left:0; border-left:0; margin-left:0; text-align:left; }
    .hero-positioning{ font-size:28px; margin-bottom:40px; }
    .hero-mark-row{ margin-bottom:36px; gap:20px; }
    .hero-orbit{ width:520px; height:520px; right:-220px; top:120px; opacity:0.7; }
    .hero-citation{ display:none; }
    .hero-horizon{ height:80px; }
  }
  @media (max-width:460px){
    .hero-mark-row{ flex-direction:column; align-items:flex-start; gap:24px; }
  }

  /* ---------- SECTION HEADER ---------- */
  .section{
    padding:110px 0;
    position:relative;
  }
  /* Orbit-arc section divider — supplements the hairline */
  .section-divider{
    display:block;
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
    color:var(--ink);
    opacity:0.42;
  }
  .section-divider svg{
    width:100%;
    height:34px;
    display:block;
  }
  .section-eyebrow{
    font-family:var(--sans);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-mute);
    margin:0 0 14px;
  }
  .section-title{
    font-family:var(--serif);
    font-weight:500;
    font-size:34px;
    letter-spacing:-0.012em;
    line-height:1.2;
    margin:0 0 56px;
    color:var(--ink);
  }
  @media (max-width:760px){
    .section{ padding:72px 0; }
    .section-title{ font-size:26px; margin-bottom:36px; }
  }

  /* ---------- DOORS ---------- */
  .doors{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--rule);
    border-left:1px solid var(--rule);
  }
  .door{
    border-right:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    border-left:2px solid var(--door-color, var(--rule));
    padding:48px 44px 44px;
    background:var(--bg);
    transition:background .25s ease;
    display:flex; flex-direction:column;
    min-height:340px;
    position:relative;
  }
  .door:hover{ background:color-mix(in srgb, var(--door-color, #AA4FFF) 6%, var(--bg)); }
  .door .door-cta,
  .door .door-num .idx{ color:var(--door-color, var(--accent-ink)); }
  .door .door-num .tag{ color:var(--door-color, var(--ink-mute)); opacity:0.85; }
  .door[data-track="maps"]{        --door-color:#AA4FFF; }
  .door[data-track="surahs"]{      --door-color:#358FBF; }
  .door[data-track="reflections"]{ --door-color:#5a5a5a; }
  .door[data-track="eschatology"]{ --door-color:#B62E03; }
  /* Door number — equation-index register */
  .door-num{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:11px;
    font-weight:500;
    letter-spacing:0.14em;
    color:var(--ink-mute);
    margin-bottom:22px;
    font-variant-numeric:tabular-nums;
    display:flex; align-items:baseline; gap:8px;
  }
  .door-num .idx{
    font-size:11px;
    color:var(--ink);
  }
  .door-num .sep{
    color:var(--rule);
  }
  .door-num .tag{
    font-family:var(--sans);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
  }
  .door-title{
    font-family:var(--serif);
    font-weight:500;
    font-size:30px;
    line-height:1.15;
    letter-spacing:-0.012em;
    color:var(--ink);
    margin:0 0 14px;
  }
  .door-desc{
    font-family:var(--serif);
    font-size:17px;
    line-height:1.5;
    color:var(--ink-soft);
    max-width:42ch;
    margin:0 0 28px;
  }
  .door-items{
    list-style:none;
    margin:0 0 28px;
    padding:0;
    font-family:var(--serif);
    font-size:15.5px;
    line-height:1.4;
    color:var(--ink-soft);
    /* Tighter rows by default; the colored left-bar provides the
       category cue, so the thin top/bottom rules from before are
       no longer needed and have been removed. */
  }
  /* Plain-text fallback for "Forthcoming" rows — no left bar. */
  .door-items li.muted{
    color:var(--ink-mute);
    font-style:italic;
    padding:8px 0;
  }
  /* Article rows — color-coded by the door's --door-color, with a
     small essence label below the title for context. */
  .door-items .door-item{ margin:0; padding:0; }
  .door-items .door-item a{
    display:block;
    padding:10px 0 10px 14px;
    margin:0 0 4px;
    border-left:2px solid color-mix(in srgb, var(--door-color, var(--ink)) 35%, transparent);
    transition:border-color .2s ease, padding-left .2s ease, background .2s ease;
    text-decoration:none;
    color:inherit;
  }
  .door-items .door-item a:hover{
    border-left-color:var(--door-color, var(--accent));
    padding-left:18px;
    background:color-mix(in srgb, var(--door-color, var(--accent)) 4%, transparent);
  }
  .door-items .door-item .ttl{
    display:block;
    font-family:var(--serif);
    font-size:15.5px;
    line-height:1.35;
    color:var(--ink);
    text-wrap:pretty;
  }
  .door-items .door-item:hover .ttl,
  .door-items .door-item a:hover .ttl{
    color:var(--door-color, var(--ink));
  }
  .door-items .door-item .ess{
    display:block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--door-color, var(--accent));
    font-weight:500;
    margin-top:5px;
    /* Truncate long series names to one line — the title already
       carries the article-specific context. */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .door-cta{
    margin-top:auto;
    font-family:var(--sans);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--accent-ink);
    display:inline-flex; align-items:center; gap:6px;
    transition:gap .25s ease, color .2s ease;
  }
  .door-cta:hover{ gap:12px; color:#5e1ca8; }
  @media (max-width:760px){
    .doors{ grid-template-columns:1fr; }
    .door{ padding:36px 28px 32px; min-height:0; }
  }

  /* ---------- RECENT WRITING ---------- */
  .featured{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
    gap:56px;
    align-items:start;
    margin-bottom:72px;
  }
  .featured-img{
    aspect-ratio:4/3;
    background-color:#f0ecf5;
    background-image:
      repeating-linear-gradient(135deg,
        rgba(35,35,35,0.045) 0,
        rgba(35,35,35,0.045) 1px,
        transparent 1px,
        transparent 12px);
    border:1px solid var(--rule);
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .featured-img-label{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-mute);
    text-transform:uppercase;
    background:rgba(250,250,250,0.85);
    padding:6px 10px;
    border:1px solid var(--rule);
  }
  .featured-meta{
    font-family:var(--sans);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--accent-ink);
    margin:0 0 16px;
  }
  .featured-title{
    font-family:var(--serif);
    font-weight:500;
    font-size:36px;
    line-height:1.18;
    letter-spacing:-0.014em;
    margin:0 0 18px;
    color:var(--ink);
    text-wrap:balance;
  }
  .featured-title a:hover{ color:var(--accent-ink); }
  .featured-dek{
    font-family:var(--serif);
    font-size:18px;
    line-height:1.55;
    color:var(--ink-soft);
    margin:0 0 28px;
  }
  .featured-byline{
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink-mute);
    display:flex; flex-wrap:wrap; gap:8px 14px;
    align-items:center;
  }
  .featured-byline .by{ color:var(--ink); }
  .featured-byline .dot{ color:var(--rule); }

  .recent-list{
    list-style:none;
    margin:0; padding:0;
    border-top:1px solid var(--rule);
  }
  .recent-item{
    display:grid;
    grid-template-columns:90px 1fr auto;
    gap:32px;
    align-items:baseline;
    padding:22px 0;
    border-bottom:1px solid var(--rule);
    transition:padding-left .25s ease;
  }
  .recent-item:hover{ padding-left:8px; }
  .recent-date{
    font-family:var(--sans);
    font-size:12px;
    color:var(--ink-mute);
    letter-spacing:0.05em;
    text-transform:uppercase;
  }
  .recent-title{
    font-family:var(--serif);
    font-size:20px;
    line-height:1.35;
    color:var(--ink);
    letter-spacing:-0.005em;
  }
  .recent-item:hover .recent-title{ color:var(--accent-ink); }
  .recent-cat{
    font-family:var(--sans);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-mute);
  }
  @media (max-width:760px){
    .featured{ grid-template-columns:1fr; gap:32px; margin-bottom:48px; }
    .featured-title{ font-size:28px; }
    .recent-item{ grid-template-columns:1fr; gap:6px; padding:20px 0; }
    .recent-cat{ order:1; }
    .recent-title{ order:2; font-size:18px; }
    .recent-date{ order:3; }
  }

  /* ---------- BEHIND ---------- */
  .behind{
    display:grid;
    grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
    gap:72px;
    align-items:start;
  }
  .behind-photo{
    aspect-ratio:4/5;
    background-color:#efeef0;
    border:1px solid var(--rule);
    overflow:hidden;
    position:relative;
  }
  .behind-photo img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    filter:grayscale(0.08) contrast(1.02);
  }
  .behind-photo-label{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    color:var(--ink-mute);
    text-transform:uppercase;
    background:rgba(250,250,250,0.85);
    padding:5px 8px;
    border:1px solid var(--rule);
  }
  .behind-bio{
    font-family:var(--serif);
    font-size:24px;
    line-height:1.45;
    color:var(--ink);
    letter-spacing:-0.005em;
    margin:0 0 32px;
    text-wrap:pretty;
    max-width:30ch;
  }
  .behind-bio em{ font-style:italic; }
  .behind-name{
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink-mute);
    margin-bottom:24px;
    letter-spacing:0.02em;
  }
  .read-more{
    font-family:var(--sans);
    font-size:13px;
    font-weight:600;
    color:var(--accent-ink);
    display:inline-flex; align-items:center; gap:6px;
    transition:gap .25s ease, color .2s ease;
  }
  .read-more:hover{ gap:12px; color:#5e1ca8; }
  @media (max-width:760px){
    .behind{ grid-template-columns:1fr; gap:32px; }
    .behind-photo{ max-width:280px; }
    .behind-bio{ font-size:20px; }
  }

  /* ---------- OLIVE BREAK ---------- */
  .olive-break{
    padding:48px 0 8px;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    gap:12px;
  }
  .olive-break svg{
    width:200px; height:64px;
    color:var(--ink);
    opacity:0.62;
  }
  .olive-break .cite{
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-mute);
  }

  /* ---------- FOOTER ---------- */
  .footer{
    border-top:1px solid var(--rule);
    padding:42px 0;
  }
  .footer-inner{
    display:flex; flex-wrap:wrap; gap:8px 14px;
    align-items:center;
    font-family:var(--sans);
    font-size:13px;
    color:var(--ink-mute);
  }
  .footer-inner .arabic{
    font-family:var(--arabic);
    font-size:15px;
    color:var(--ink-soft);
    direction:rtl;
    margin:0 2px;
  }
  .footer-inner .dot{ color:var(--rule); }
  .footer-inner a{ color:var(--ink-soft); transition:color .2s ease; }
  .footer-inner a:hover{ color:var(--accent-ink); }

  /* ---------- TWEAKS PANEL custom styling not needed ---------- */

/* ---------------- ARTICLE / MAP / CATEGORY-LANDING SYSTEM ---------------- */
/* ============================================================
   Roohle article — shared system
   ============================================================ */

:root{
  --bg:#FAFAFA;
  --ink:#232323;
  --ink-soft:#5a5a5a;
  --ink-mute:#717171;
  --ink-faint:#bcbcbc;
  --rule:#e6e6e6;
  --rule-soft:#efefef;
  --accent:#AA4FFF;
  --accent-ink:#7e2fcf;
  --accent-deep:#5e1ca8;
  --accent-tint:#EEDCFF;

  /* per-track accent — overridden per article */
  --track-color:#AA4FFF;          /* Maps = purple (this article is in Maps) */
  --track-color-deep:#7e2fcf;

  --serif:"Source Serif 4","Iowan Old Style","Apple Garamond",Georgia,serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --arabic:"Amiri","Scheherazade New",Georgia,serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  font-feature-settings:"liga","kern";
}
::selection{ background:#e8d5ff; color:#3a1864; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; }

/* ---------- Reading progress bar ---------- */
.r-progress{
  position:fixed; left:0; top:0;
  height:2px; width:0%;
  background:var(--track-color);
  z-index:60;
  transition:width 90ms linear;
}

/* ---------- NAV (compact, same lockup as homepage) ---------- */
.r-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,250,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.r-nav-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.r-brand{ display:flex; align-items:center; gap:6px; font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-0.005em; color:var(--ink); }
.r-brand img{ width:48px; height:48px; object-fit:contain; }
.r-nav-links{ display:flex; align-items:center; gap:26px; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink); }
.r-nav-links a{ transition:color .2s ease; }
.r-nav-links a:hover{ color:var(--track-color-deep); }
.r-nav-links a.cur{ color:var(--track-color-deep); }

/* ---------- ARTICLE CONTAINER ---------- */
.r-article{
  display:block;
  padding:0 0 80px;
}

.r-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- HEAD (title block) ---------- */
.r-head{
  padding:88px 0 56px;
  max-width:760px;
  margin:0 auto;
  text-align:left;
}
.r-eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  margin:0 0 24px;
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.r-eyebrow .sep{ color:var(--rule); font-weight:400; }
.r-eyebrow .verse-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--ink-mute);
  text-transform:none;
  font-weight:500;
}

.r-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:54px;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 28px;
  color:var(--ink);
  text-wrap:balance;
}
.r-title em{ font-style:italic; }

.r-dek{
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0 0 36px;
  max-width:62ch;
  text-wrap:pretty;
}

.r-byline{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 16px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-mute);
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.r-byline .by{ color:var(--ink); font-weight:500; }
.r-byline .dot{ color:var(--rule); }

/* ---------- HERO image (small, below title) ---------- */
.r-hero-img{
  margin:32px auto 64px;
  max-width:880px;
  aspect-ratio:16/9;
  background:#efeef0;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(35,35,35,0.045) 0,
      rgba(35,35,35,0.045) 1px,
      transparent 1px, transparent 12px);
  border:1px solid var(--rule);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:14px;
  position:relative;
}
.r-hero-cap{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-mute);
  background:rgba(250,250,250,0.85);
  padding:5px 9px;
  border:1px solid var(--rule);
}

/* ---------- BODY (prose column) ---------- */
.r-body{
  max-width:680px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  color:#2a2a2a;
}
.r-body > * + * { margin-top:1.1em; }
.r-body p{ margin:0 0 1.1em; text-wrap:pretty; }
.r-body h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-0.012em;
  color:var(--ink);
  margin:64px 0 18px;
  text-wrap:balance;
}
.r-body h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:21px;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin:40px 0 10px;
}
.r-body em{ font-style:italic; }
.r-body strong{ font-weight:600; }
.r-body a{
  color:var(--track-color-deep);
  border-bottom:1px solid color-mix(in srgb, var(--track-color) 30%, transparent);
  transition:border-color .2s ease;
}
.r-body a:hover{ border-bottom-color:var(--track-color); }

/* drop cap */
.r-body .r-firstpara::first-letter{
  font-family:var(--serif);
  font-weight:500;
  font-size:5.6em;
  line-height:0.9;
  float:left;
  margin:0.04em 0.1em -0.06em 0;
  color:var(--ink);
}

/* ---------- AYAH (Arabic + translation) ---------- */
.r-ayah{
  margin:48px auto;
  max-width:680px;
  padding:28px 0 24px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
  position:relative;
}
.r-ayah .ar{
  font-family:var(--arabic);
  font-weight:400;
  font-size:34px;
  line-height:1.7;
  color:var(--ink);
  direction:rtl;
  text-align:center;
  margin:0 0 16px;
  letter-spacing:0;
}
.r-ayah .tr{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:54ch;
  margin:0 auto 14px;
  text-wrap:pretty;
}
.r-ayah .ref{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- PULL QUOTE ---------- */
.r-pull{
  margin:56px auto;
  max-width:760px;
  padding:0 0 0 32px;
  border-left:2px solid var(--track-color);
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:28px;
  line-height:1.32;
  letter-spacing:-0.008em;
  color:var(--ink);
  text-wrap:balance;
}

/* ---------- FOOTNOTE (hover popover) ---------- */
.r-fn{
  font-family:var(--sans);
  font-size:0.7em;
  font-weight:600;
  vertical-align:super;
  line-height:0;
  color:var(--track-color-deep);
  cursor:help;
  position:relative;
  padding:0 1px;
  border-bottom:0;
  margin-left:1px;
}
.r-fn::before{ content:"["; opacity:0.55; }
.r-fn::after{ content:"]"; opacity:0.55; }
.r-fn .pop{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  width:280px;
  background:var(--ink);
  color:#f2f2f2;
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:13.5px;
  line-height:1.5;
  letter-spacing:0;
  padding:14px 16px;
  border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
  vertical-align:baseline;
  z-index:30;
  text-align:left;
  text-transform:none;
}
.r-fn .pop::after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--ink);
}
.r-fn:hover .pop, .r-fn:focus .pop, .r-fn:focus-within .pop{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s 0s;
}

/* ---------- DIVIDER (subtle dot row between major sections) ---------- */
.r-break{
  text-align:center;
  margin:56px auto;
  color:var(--ink-faint);
  letter-spacing:0.6em;
  font-size:10px;
}

/* ---------- SUBSCRIBE BLOCK (end of article) ---------- */
.r-subscribe{
  max-width:680px;
  margin:88px auto 0;
  padding:48px 0 0;
  border-top:1px solid var(--rule);
}
.r-subscribe .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  margin:0 0 12px;
}
.r-subscribe .h{
  font-family:var(--serif);
  font-weight:500;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-0.012em;
  margin:0 0 14px;
  color:var(--ink);
  text-wrap:balance;
}
.r-subscribe .d{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 22px;
  max-width:54ch;
}
.r-subscribe form{
  display:flex; align-items:stretch;
  max-width:480px;
  border-bottom:1px solid var(--ink);
}
.r-subscribe input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--sans); font-size:15px;
  padding:12px 0; color:var(--ink);
}
.r-subscribe input::placeholder{ color:var(--ink-mute); }
.r-subscribe button{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--track-color-deep);
  padding:12px 0 12px 22px;
}
.r-subscribe button:hover{ color:var(--accent-deep); }

/* ---------- FOOTER ---------- */
.r-footer{
  border-top:1px solid var(--rule);
  margin-top:72px;
  padding:32px 0;
}
.r-footer-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-mute);
}
.r-footer-inner .dot{ color:var(--rule); }
.r-footer-inner a{ color:var(--ink-soft); }
.r-footer-inner a:hover{ color:var(--track-color-deep); }

/* ============================================================
   MAPS — extensions to the article system
   A Map is a thematic atlas: a structured outline of a Qur'anic
   domain with sub-territories, key verses, lexicon, article
   pointers, and cross-references. It reuses the article CSS
   tokens and column system so Maps and Articles feel like
   one publication.
   ============================================================ */

/* ---------- INDEX (the table of all Maps) ---------- */
.r-maps-head{
  padding:88px 0 72px;
  max-width:980px;
  margin:0 auto;
  text-align:left;
}
.r-maps-head .r-eyebrow{ margin-bottom:32px; }
.r-maps-head .r-title{
  font-size:88px;
  line-height:1.0;
  letter-spacing:-0.03em;
  font-weight:400;
  margin:0 0 28px;
}
.r-maps-head .r-dek{
  font-size:24px;
  max-width:60ch;
  margin:0 0 0;
}

.r-maps-list{
  max-width:980px;
  margin:0 auto;
  border-top:1px solid var(--ink);
}
.r-map-row{
  display:grid;
  grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1.2fr) 130px;
  column-gap:48px;
  align-items:start;
  padding:48px 0 44px;
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:background .25s ease;
}
.r-map-row:hover{
  background:color-mix(in srgb, var(--map-color, var(--track-color)) 4%, transparent);
}
.r-map-row .num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:8px;
}
.r-map-titlecell{ display:flex; flex-direction:column; gap:14px; }
.r-map-name{
  font-family:var(--serif);
  font-size:34px;
  line-height:1.12;
  letter-spacing:-0.014em;
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}
.r-map-name a{ color:inherit; }
.r-map-name a:hover{ color:var(--map-color, var(--track-color-deep)); }
.r-map-territories{
  display:flex; flex-wrap:wrap; gap:6px 8px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}
.r-map-territories .t{
  padding:4px 10px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:transparent;
}
.r-map-desc{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  text-wrap:pretty;
  margin:0;
  padding-top:6px;
}
.r-map-desc em{ font-style:italic; color:var(--ink); }
.r-map-status{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px;
  padding-top:8px;
}
.r-map-status .pill{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--map-color-deep, var(--track-color-deep));
  padding:5px 10px;
  border:1px solid color-mix(in srgb, var(--map-color, var(--track-color)) 40%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--map-color, var(--track-color)) 8%, transparent);
}
.r-map-status .pill.draft{
  color:var(--ink-mute);
  border-color:var(--rule);
  background:transparent;
}
.r-map-status .pill.notyet{
  color:var(--ink-faint);
  border-color:var(--rule-soft);
  background:transparent;
}
.r-map-status .arrow{
  font-family:var(--serif);
  font-size:24px;
  font-weight:300;
  color:var(--ink-mute);
  transition:transform .2s ease, color .2s ease;
  margin-top:8px;
}
.r-map-row:hover .arrow{
  color:var(--map-color-deep, var(--track-color-deep));
  transform:translateX(6px);
}
.r-map-row[data-status="notyet"]{ pointer-events:none; }
.r-map-row[data-status="notyet"] .r-map-name{ color:var(--ink-soft); }
.r-map-row[data-status="notyet"] .arrow{ visibility:hidden; }

/* per-Map color tokens for the index (and re-used on each Map page) */
.r-map-row[data-map="ruh"]        { --map-color:#AA4FFF; --map-color-deep:#7e2fcf; }
.r-map-row[data-map="prophets"]   { --map-color:#C58A4F; --map-color-deep:#9c6429; }
.r-map-row[data-map="amr"]        { --map-color:#3F8FBF; --map-color-deep:#1f6a99; }
.r-map-row[data-map="eschatology"]{ --map-color:#C8553D; --map-color-deep:#963829; }

/* ---------- LEGEND (under the index, what makes a Map a Map) -- */
.r-maps-legend{
  max-width:980px;
  margin:96px auto 0;
  padding:48px 0 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns: 220px 1fr;
  column-gap:48px;
}
.r-maps-legend .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
}
.r-maps-legend .body{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:60ch;
  text-wrap:pretty;
}
.r-maps-legend .body p{ margin:0 0 14px; }
.r-maps-legend .body em{ font-style:italic; color:var(--ink); }

/* ---------- MAP PAGE — TITLE BLOCK ---------- */
.r-map-head{
  padding:88px 0 56px;
  max-width:980px;
  margin:0 auto;
}
.r-map-head .r-eyebrow{ margin-bottom:28px; }
.r-map-head .r-title{
  font-size:96px;
  line-height:0.98;
  letter-spacing:-0.034em;
  font-weight:400;
  margin:0 0 32px;
}
.r-map-head .r-dek{
  font-size:24px;
  line-height:1.45;
  max-width:62ch;
  margin:0 0 40px;
}
.r-map-meta{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:24px;
  border-top:1px solid var(--rule);
  padding-top:24px;
  font-family:var(--sans);
}
.r-map-meta .cell{ display:flex; flex-direction:column; gap:4px; }
.r-map-meta .k{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.r-map-meta .v{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.35;
  color:var(--ink);
}

/* ---------- MAP — Editor's note (overture) ---------- */
.r-map-overture{
  max-width:980px;
  margin:64px auto 0;
  padding:56px 0 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns: 220px minmax(0,1fr);
  column-gap:48px;
}
.r-map-overture .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
}
.r-map-overture .body{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.55;
  color:var(--ink);
  max-width:62ch;
  text-wrap:pretty;
}
.r-map-overture .body p + p{ margin-top:1.1em; }
.r-map-overture .body em{ font-style:italic; }

/* ---------- TERRITORIES TOC (jump links) ---------- */
.r-map-toc{
  max-width:980px;
  margin:80px auto 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);
}
.r-map-toc-label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  padding:22px 0 18px;
  display:flex; align-items:center; gap:14px;
  border-bottom:1px solid var(--rule-soft);
}
.r-map-toc-label .ct{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:none;
  font-weight:400;
  color:var(--ink-mute);
  margin-left:auto;
}
.r-map-toc-list{ list-style:none; margin:0; padding:0; }
.r-map-toc-item{
  display:grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  column-gap:32px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--rule-soft);
  transition:color .2s ease;
}
.r-map-toc-item:last-child{ border-bottom:0; }
.r-map-toc-item .num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.r-map-toc-item .ttl{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.3;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.005em;
}
.r-map-toc-item .ttl em{ font-style:italic; }
.r-map-toc-item .ttl a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.r-map-toc-item .ttl a:hover{
  color:var(--track-color-deep);
  border-bottom-color:var(--track-color);
}
.r-map-toc-item .gloss{
  font-family:var(--serif);
  font-style:italic;
  font-size:14.5px;
  color:var(--ink-mute);
  text-align:right;
}

/* ---------- TERRITORY (a section of the map) ---------- */
.r-territory{
  max-width:980px;
  margin:120px auto 0;
  scroll-margin-top:96px;
}
.r-territory:first-of-type{ margin-top:96px; }

.r-terr-head{
  display:grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap:32px;
  align-items:baseline;
  padding-bottom:24px;
  border-bottom:1px solid var(--ink);
}
.r-terr-head .num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  font-weight:500;
}
.r-terr-head .ttl{
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0 0 8px;
  text-wrap:balance;
}
.r-terr-head .ttl em{ font-style:italic; }
.r-terr-head .gloss{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0;
  max-width:50ch;
}

/* Territory body uses the article body system, but with a wider
   prose column to match the 980px Maps rail. */
.r-terr-body{
  display:grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap:32px;
  padding-top:32px;
}
.r-terr-body .gutter{
  /* per-territory tag column */
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:6px;
  position:sticky;
  top:96px;
  align-self:start;
}
.r-terr-prose{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  color:#2a2a2a;
  max-width:62ch;
}
.r-terr-prose > * + * { margin-top:1.1em; }
.r-terr-prose p{ margin:0; text-wrap:pretty; }
.r-terr-prose em{ font-style:italic; }
.r-terr-prose strong{ font-weight:600; }
.r-terr-prose h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:21px;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin:36px 0 8px;
}
.r-terr-prose a{
  color:var(--track-color-deep);
  border-bottom:1px solid color-mix(in srgb, var(--track-color) 30%, transparent);
}
.r-terr-prose a:hover{ border-bottom-color:var(--track-color); }

/* Verse blocks inside a territory (smaller than article ayah,
   but same vocabulary). */
.r-terr-prose .ayah{
  margin:36px 0 !important;
  padding:24px 0 22px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-align:center;
}
.r-terr-prose .ayah .ar{
  font-family:var(--arabic);
  font-size:30px;
  line-height:1.7;
  color:var(--ink);
  direction:rtl;
  margin:0 0 12px;
}
.r-terr-prose .ayah .tr{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0 auto 10px;
  max-width:54ch;
  text-wrap:pretty;
}
.r-terr-prose .ayah .ref{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* Pull-line ("the claim of this territory") */
.r-terr-prose .r-terr-claim{
  margin:32px 0;
  padding:0 0 0 22px;
  border-left:2px solid var(--track-color);
  font-family:var(--serif);
  font-style:italic;
  font-size:24px;
  line-height:1.32;
  letter-spacing:-0.006em;
  color:var(--ink);
  text-wrap:balance;
}

/* Article card inside a territory (inline pointer to a full article) */
.r-terr-prose .r-article-card,
.r-article-card{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap:24px;
  align-items:center;
  margin:36px 0;
  padding:22px 24px;
  border:1px solid var(--rule);
  background:color-mix(in srgb, var(--track-color) 3%, transparent);
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.r-article-card:hover{
  border-color:var(--track-color);
  background:color-mix(in srgb, var(--track-color) 6%, transparent);
}
.r-article-card .ac-meta{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  margin:0 0 6px;
}
.r-article-card .ac-title{
  font-family:var(--serif);
  font-size:20px;
  line-height:1.28;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.005em;
  margin:0 0 6px;
  text-wrap:balance;
}
.r-article-card .ac-dek{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
  max-width:54ch;
}
.r-article-card .ac-arrow{
  font-family:var(--serif);
  font-size:28px;
  font-weight:300;
  color:var(--ink-mute);
  transition:transform .2s ease, color .2s ease;
}
.r-article-card:hover .ac-arrow{
  color:var(--track-color-deep);
  transform:translateX(4px);
}

/* ---------- LEXICON (the dictionary of the Map) ---------- */
.r-lexicon{
  max-width:980px;
  margin:140px auto 0;
  padding-top:48px;
  border-top:1px solid var(--ink);
  scroll-margin-top:96px;
}
.r-lexicon .r-section-label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 6px;
}
.r-lexicon .r-section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0 0 16px;
}
.r-lexicon .r-section-dek{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:60ch;
  margin:0 0 40px;
}
.r-lex-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
}
.r-lex-entry{
  border-top:1px solid var(--rule);
  padding-top:22px;
  display:flex; flex-direction:column; gap:10px;
}
.r-lex-entry .head{
  display:flex; align-items:baseline; gap:14px;
  flex-wrap:wrap;
}
.r-lex-entry .ar{
  font-family:var(--arabic);
  font-size:34px;
  line-height:1;
  color:var(--ink);
  direction:rtl;
}
.r-lex-entry .tr{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  color:var(--ink);
}
.r-lex-entry .root{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-left:auto;
}
.r-lex-entry .gloss{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
  text-wrap:pretty;
}
.r-lex-entry .gloss em{ font-style:italic; color:var(--ink); }
.r-lex-entry .occ{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.12em;
  color:var(--track-color-deep);
}

/* ---------- VERSE INDEX (every cited verse, gathered) ---------- */
.r-verse-index{
  max-width:980px;
  margin:140px auto 0;
  padding-top:48px;
  border-top:1px solid var(--ink);
  scroll-margin-top:96px;
}
.r-verse-index .r-section-label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 6px;
}
.r-verse-index .r-section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0 0 16px;
}
.r-verse-index .r-section-dek{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:60ch;
  margin:0 0 40px;
}
.r-vidx-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr;
}
.r-vidx-item{
  display:grid;
  grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1fr) 200px;
  column-gap:32px;
  align-items:baseline;
  padding:18px 0;
  border-top:1px solid var(--rule-soft);
}
.r-vidx-item:first-child{ border-top:0; }
.r-vidx-item .ref{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--track-color-deep);
}
.r-vidx-item .ar{
  font-family:var(--arabic);
  font-size:21px;
  line-height:1.55;
  color:var(--ink);
  direction:rtl;
  text-wrap:pretty;
}
.r-vidx-item .tr{
  font-family:var(--serif);
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-soft);
  font-style:italic;
  text-wrap:pretty;
}
.r-vidx-item .terr{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-align:right;
}
.r-vidx-item .terr a{
  color:inherit;
  border-bottom:1px solid var(--rule);
}
.r-vidx-item .terr a:hover{
  color:var(--track-color-deep);
  border-bottom-color:var(--track-color);
}

/* ---------- RELATED ARTICLES (full list at end of map) ---------- */
.r-related{
  max-width:980px;
  margin:140px auto 0;
  padding-top:48px;
  border-top:1px solid var(--ink);
}
.r-related .r-section-label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 6px;
}
.r-related .r-section-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0 0 40px;
}
.r-related-list{ list-style:none; margin:0; padding:0; }
.r-related-row{
  display:grid;
  grid-template-columns: 90px minmax(0, 1fr) 140px;
  column-gap:32px;
  align-items:baseline;
  padding:22px 0;
  border-top:1px solid var(--rule);
  transition:background .2s ease;
}
.r-related-row:hover{
  background:color-mix(in srgb, var(--track-color) 4%, transparent);
}
.r-related-row .date{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--ink-mute);
}
.r-related-row .ttl{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.35;
  color:var(--ink);
  font-weight:500;
  text-wrap:balance;
}
.r-related-row .ttl a{ color:inherit; }
.r-related-row .ttl a:hover{ color:var(--track-color-deep); }
.r-related-row .ttl em{ font-style:italic; }
.r-related-row .terr{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-align:right;
}
.r-related-row.upcoming .ttl{ color:var(--ink-soft); font-style:italic; }
.r-related-row.upcoming .terr{ color:var(--ink-faint); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px){
  .r-maps-head .r-title{ font-size:54px; }
  .r-maps-head .r-dek{ font-size:19px; }
  .r-map-row{ grid-template-columns: 36px minmax(0, 1fr); column-gap:18px; }
  .r-map-row .r-map-desc, .r-map-row .r-map-status{ grid-column:2; }
  .r-map-row .r-map-status{ flex-direction:row; align-items:center; }
  .r-map-head .r-title{ font-size:54px; }
  .r-map-head .r-dek{ font-size:19px; }
  .r-map-meta{ grid-template-columns: 1fr 1fr; }
  .r-map-overture, .r-maps-legend{ grid-template-columns: 1fr; row-gap:12px; }
  .r-terr-head{ grid-template-columns: 1fr; }
  .r-terr-head .num{ margin-bottom:8px; }
  .r-terr-head .ttl{ font-size:34px; }
  .r-terr-body{ grid-template-columns: 1fr; }
  .r-terr-body .gutter{ position:static; margin-bottom:12px; }
  .r-lex-grid{ grid-template-columns: 1fr; }
  .r-vidx-item{ grid-template-columns: 90px 1fr; row-gap:6px; }
  .r-vidx-item .tr, .r-vidx-item .terr{ grid-column:2; text-align:left; }
  .r-related-row{ grid-template-columns: 70px 1fr; row-gap:4px; }
  .r-related-row .terr{ grid-column:2; text-align:left; }
}

/* ============================================================
   CATEGORY LANDING — masthead, editor framing, Map cards
   This is the page readers land on from the homepage door.
   It sits ABOVE the per-Map pages and contains:
     - Section 1: masthead with eyebrow, title, illuminated verse,
                  metadata strip, orbit-arc watermark
     - Section 2: editor's framing (Amer's voice, signed)
     - Section 3: the Maps as cards (with territory previews,
                  status, and "Read the full Map →")
     - Section 4: standalones (placeholder when empty)
     - Section 5: subscribe + orbit divider + footer
   ============================================================ */

/* ---------- MASTHEAD ---------- */
.r-cat-masthead{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:96px 32px 88px;
  overflow:hidden;
  isolation:isolate;
}
.r-cat-masthead .watermark{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:0.07;
  display:flex;
  align-items:center;
  justify-content:center;
}
.r-cat-masthead .watermark svg{
  width:140%;
  max-width:1500px;
  height:auto;
  color:var(--ink);
}

.r-cat-eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  margin:0 0 32px;
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.r-cat-eyebrow .sep{ color:var(--rule); font-weight:400; }
.r-cat-eyebrow .archive-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-mute);
  text-transform:none;
  font-weight:500;
}

.r-cat-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:120px;
  line-height:0.94;
  letter-spacing:-0.034em;
  color:var(--ink);
  margin:0 0 64px;
  text-wrap:balance;
}
.r-cat-title em{ font-style:italic; }

/* Illuminated verse — the centerpiece of the masthead */
.r-cat-verse{
  margin:0 0 64px;
  padding:32px 0 28px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  column-gap:48px;
  align-items:end;
}
.r-cat-verse .ar{
  font-family:var(--arabic);
  font-size:48px;
  line-height:1.65;
  color:var(--ink);
  direction:rtl;
  margin:0 0 14px;
  letter-spacing:0;
}
.r-cat-verse .tr{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
  max-width:54ch;
  text-wrap:pretty;
}
.r-cat-verse .ref{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-align:right;
  display:flex; flex-direction:column; gap:4px;
  align-self:end;
  padding-bottom:6px;
}
.r-cat-verse .ref .surah{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-soft);
}

/* Metadata strip — series count, article count, last updated */
.r-cat-meta{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap:32px;
  font-family:var(--sans);
}
.r-cat-meta .cell{
  display:flex; flex-direction:column; gap:4px;
}
.r-cat-meta .k{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.r-cat-meta .v{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.3;
  color:var(--ink);
  font-weight:500;
}
.r-cat-meta .v em{ font-style:italic; font-weight:400; color:var(--ink-soft); }

/* ---------- EDITORIAL FRAMING (the personal voice) ---------- */
.r-cat-editor{
  max-width:1180px;
  margin:48px auto 0;
  padding:80px 32px 96px;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap:64px;
}
.r-cat-editor .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  padding-top:8px;
}
.r-cat-editor .body{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.55;
  color:var(--ink);
  max-width:60ch;
  text-wrap:pretty;
}
.r-cat-editor .body p{
  margin:0 0 1em;
}
.r-cat-editor .body p.lede{
  font-size:30px;
  line-height:1.32;
  letter-spacing:-0.012em;
  margin-bottom:1.1em;
  text-wrap:balance;
}
.r-cat-editor .body em{ font-style:italic; }
.r-cat-editor .body strong{ font-weight:600; }
.r-cat-editor .sig{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink);
}
.r-cat-editor .sig em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-mute);
  margin-left:14px;
  font-size:13px;
}

/* ---------- THE MAPS — section heading + cards ---------- */
.r-cat-section{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
.r-cat-section-head{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:end;
  gap:24px;
  border-bottom:1px solid var(--ink);
  padding-bottom:20px;
  margin-bottom:48px;
}
.r-cat-section-head .h{
  font-family:var(--serif);
  font-weight:400;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-0.022em;
  color:var(--ink);
  margin:0;
}
.r-cat-section-head .h em{ font-style:italic; }
.r-cat-section-head .ct{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-mute);
  padding-bottom:8px;
}

/* Map card — single-column stack, substantial */
.r-mapcard{
  display:block;
  position:relative;
  padding:48px 0;
  border-top:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  transition:background .25s ease;
}
.r-mapcard:first-of-type{ border-top:1px solid var(--ink); }
.r-mapcard:hover{
  background:color-mix(in srgb, var(--track-color) 3%, transparent);
}
.r-mapcard:hover .mc-arrow{
  color:var(--track-color-deep);
  transform:translateX(6px);
}
.r-mapcard:hover .mc-name{ color:var(--track-color-deep); }

.r-mapcard-head{
  display:grid;
  /* num | thumb | titlecell | status */
  grid-template-columns: 100px 120px minmax(0, 1fr) 110px;
  column-gap:36px;
  align-items:start;
  padding-bottom:28px;
}
.r-mapcard-head .mc-thumb{
  width:120px;
  height:120px;
  overflow:hidden;
  border-radius:2px;
  background:#232323;
  align-self:start;
  margin-top:6px;
}
.r-mapcard-head .mc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter .2s ease;
}
.r-mapcard:hover .mc-thumb img{ filter:brightness(1.05); }
.r-mapcard-head .mc-num{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:14px;
}
.r-mapcard-head .mc-num strong{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:36px;
  letter-spacing:-0.014em;
  color:var(--ink);
  margin-bottom:6px;
  font-style:normal;
}
.r-mapcard-head .mc-titlecell{ display:flex; flex-direction:column; gap:14px; }
.r-mapcard-head .mc-name{
  font-family:var(--serif);
  font-weight:500;
  font-size:38px;
  line-height:1.1;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  transition:color .2s ease;
}
.r-mapcard-head .mc-name em{ font-style:italic; }
.r-mapcard-head .mc-desc{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
  max-width:62ch;
  text-wrap:pretty;
}
.r-mapcard-head .mc-desc em{ font-style:italic; color:var(--ink); }
.r-mapcard-head .mc-desc strong{ font-weight:600; color:var(--ink); }

.r-mapcard-head .mc-status{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:12px; padding-top:14px;
}
.r-mapcard-head .mc-status .pill{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  padding:5px 11px;
  border:1px solid color-mix(in srgb, var(--track-color) 40%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--track-color) 8%, transparent);
}
.r-mapcard-head .mc-status .pill.draft{
  color:var(--ink-mute);
  border-color:var(--rule);
  background:transparent;
}
.r-mapcard-head .mc-status .pill.notyet{
  color:var(--ink-faint);
  border-color:var(--rule-soft);
  background:transparent;
}

/* Territory preview row — replaces "article previews" since
   in our system a Map IS the unit, not a series of articles. */
.r-mapcard-body{
  display:grid;
  grid-template-columns: 120px minmax(0, 1fr) 140px;
  column-gap:48px;
  align-items:start;
}
.r-mapcard-body .mc-section-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:18px;
}
.r-mapcard-body .mc-territories{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-top:1px solid var(--rule-soft);
}
.r-terr-row{
  display:grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.r-terr-row .num{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  color:var(--ink-faint);
  text-transform:uppercase;
}
.r-terr-row .ttl{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.35;
  color:var(--ink);
}
.r-terr-row .ttl em{ font-style:italic; }
.r-terr-row .ttl .gloss{
  display:block;
  font-style:italic;
  font-size:14px;
  color:var(--ink-mute);
  margin-top:2px;
}
.r-terr-row:nth-last-child(-n+2){ border-bottom:0; }
.r-terr-row:nth-child(odd){ padding-right:24px; }
.r-terr-row:nth-child(even){ padding-left:24px; border-left:1px solid var(--rule-soft); }

/* "Coming" placeholder for Maps in development */
.r-mapcard-body .mc-coming{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.5;
  color:var(--ink-mute);
  border-top:1px solid var(--rule-soft);
  padding:24px 0;
  max-width:60ch;
}
.r-mapcard-body .mc-coming strong{
  font-style:normal;
  font-weight:600;
  color:var(--ink);
}

.r-mapcard-body .mc-cta-cell{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; padding-top:18px;
}
.r-mapcard-body .mc-cta{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--track-color-deep);
  display:inline-flex; align-items:center; gap:8px;
  text-transform:none;
}
.r-mapcard-body .mc-cta.disabled{
  color:var(--ink-faint);
  pointer-events:none;
}
.r-mapcard-body .mc-arrow{
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  transition:transform .2s ease, color .2s ease;
}

/* ---------- STANDALONES (Section 4) ---------- */
.r-cat-standalones{
  max-width:1180px;
  margin:120px auto 0;
  padding:0 32px;
}
.r-cat-standalones .empty{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--ink-mute);
  border-top:1px solid var(--rule);
  padding:28px 0;
  margin:0;
  max-width:60ch;
}

/* ---------- STANDALONE ROW LIST — /reflections/ and /eschatology/ ---------- */
/* Used by tag-reflections.hbs and tag-eschatology.hbs to render
   one row per post. No thumbnail (by design — these categories are
   short-form). Mobile collapses to single column via mobile.css. */
.r-cat-standalone-list{
  display:block;
}
.r-stand-row{
  display:grid;
  grid-template-columns: 60px 110px minmax(0, 1fr) auto;
  column-gap:32px;
  align-items:start;
  padding:36px 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  transition:background .25s ease, padding-left .25s ease;
}
.r-stand-row:first-of-type{ border-top:1px solid var(--ink); }
.r-stand-row:hover{
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  padding-left:10px;
}
.r-stand-row .num{
  grid-column:1;
  grid-row:1 / span 2;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:14px;
  font-variant-numeric:tabular-nums;
}
.r-stand-row .stand-thumb{
  grid-column:2;
  grid-row:1 / span 2;
  width:110px;
  height:110px;
  overflow:hidden;
  border-radius:2px;
  background:#232323;
  align-self:start;
  margin-top:6px;
}
.r-stand-row .stand-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter .2s ease;
}
.r-stand-row:hover .stand-thumb img{ filter:brightness(1.05); }
.r-stand-row .ttl{
  grid-column:3;
  grid-row:1;
  font-family:var(--serif);
  font-weight:500;
  font-size:30px;
  line-height:1.18;
  letter-spacing:-0.014em;
  color:var(--ink);
  margin:0 0 12px;
  text-wrap:balance;
  transition:color .2s ease;
}
.r-stand-row .ttl em{ font-style:italic; }
.r-stand-row:hover .ttl{ color:var(--ink-soft); }
.r-stand-row .verses{
  grid-column:3;
  grid-row:2;
  display:block;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:62ch;
  margin:0;
}
.r-stand-row .verses:empty{ display:none; }
.r-stand-row .meta{
  grid-column:4;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:16px;
  text-align:right;
  white-space:nowrap;
}
.r-stand-row .meta .dot{ display:none; }

/* Empty-state — shown when {{#get}} returns no posts. */
.r-cat-empty-state{
  border-top:1px solid var(--ink);
  padding:48px 0;
}
.r-cat-empty-state .h{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:24px;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.r-cat-empty-state .note{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.55;
  color:var(--ink-mute);
  margin:0;
  max-width:60ch;
}

/* ---------- ORBIT DIVIDER (between sections) ---------- */
.r-cat-divider{
  max-width:1180px;
  margin:96px auto 0;
  padding:0 32px;
  color:var(--ink-faint);
}
.r-cat-divider svg{
  display:block; width:100%; height:34px;
}

/* ---------- SUBSCRIBE (full-width version for category page) -- */
.r-cat-subscribe{
  max-width:1180px;
  margin:64px auto 0;
  padding:0 32px;
}
.r-cat-subscribe-inner{
  max-width:680px;
  margin:0 auto;
  padding:48px 0 0;
  border-top:1px solid var(--rule);
  text-align:left;
}
.r-cat-subscribe .label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--track-color-deep);
  margin:0 0 12px;
}
.r-cat-subscribe .h{
  font-family:var(--serif);
  font-weight:500;
  font-size:36px;
  line-height:1.18;
  letter-spacing:-0.014em;
  margin:0 0 14px;
  color:var(--ink);
  text-wrap:balance;
}
.r-cat-subscribe .d{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 24px;
  max-width:54ch;
}
.r-cat-subscribe form{
  display:flex; align-items:stretch;
  max-width:480px;
  border-bottom:1px solid var(--ink);
}
.r-cat-subscribe input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--sans); font-size:15px;
  padding:12px 0; color:var(--ink);
}
.r-cat-subscribe input::placeholder{ color:var(--ink-mute); }
.r-cat-subscribe button{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--track-color-deep);
  padding:12px 0 12px 22px;
}
.r-cat-subscribe button:hover{ color:var(--accent-deep); }

/* ---------- STICKY CATEGORY NAME IN NAV (when scrolled) ---------- */
.r-nav .r-cat-name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  color:var(--ink-soft);
  margin-left:18px;
  padding-left:18px;
  border-left:1px solid var(--rule);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.r-nav.is-scrolled .r-cat-name{
  opacity:1;
  transform:translateY(0);
}

/* ---------- RESPONSIVE — category landing ---------- */
@media (max-width: 880px){
  .r-cat-masthead{ padding:64px 32px 56px; }
  .r-cat-title{ font-size:64px; }
  .r-cat-verse{ grid-template-columns: 1fr; row-gap:18px; }
  .r-cat-verse .ar{ font-size:34px; }
  .r-cat-verse .ref{ text-align:left; }
  .r-cat-meta{ grid-template-columns: 1fr 1fr; row-gap:18px; }
  .r-cat-editor{ grid-template-columns: 1fr; row-gap:24px; padding:48px 32px 64px; }
  .r-cat-editor .body{ font-size:19px; }
  .r-cat-editor .body p.lede{ font-size:24px; }
  .r-cat-section-head .h{ font-size:36px; }
  .r-mapcard-head{ grid-template-columns: 1fr; row-gap:14px; }
  .r-mapcard-head .mc-num{ padding-top:0; }
  .r-mapcard-head .mc-num strong{ display:inline; font-size:22px; margin-right:8px; }
  .r-mapcard-head .mc-thumb{
    width:80px;
    height:80px;
    margin-top:0;
  }
  .r-mapcard-head .mc-status{ flex-direction:row; align-items:center; padding-top:0; }
  .r-mapcard-body{ grid-template-columns: 1fr; row-gap:14px; }
  .r-mapcard-body .mc-territories{ grid-template-columns: 1fr; }
  .r-terr-row:nth-child(odd),
  .r-terr-row:nth-child(even){ padding:14px 0; border-left:0; }
  .r-mapcard-body .mc-cta-cell{ align-items:flex-start; }
  .r-nav .r-cat-name{ display:none; }
}



/* ============================================================
   KOENIG EDITOR CARDS
   Required by Ghost's theme validator. These classes are stamped
   onto post content by the editor; we style them to fit Roohle.
   ============================================================ */

/* Image width modifiers — let editor images break out of the
   measure for "wide" and "full-bleed" placement. The article
   default measure is ~720px; wide goes ~1080px, full goes edge. */
.gh-content :where(.kg-width-wide, .kg-width-full) {
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
  width: min(1080px, calc(100vw - 64px));
}
.gh-content .kg-width-full {
  width: 100vw;
  max-width: 100vw;
}
.gh-content .kg-width-wide img,
.gh-content .kg-width-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* Image cards — generic */
.gh-content .kg-image-card {
  margin: 2.5rem 0;
}
.gh-content .kg-image-card figcaption {
  font-family: var(--font-text, Georgia, serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-ink-soft, #6b6358);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* Bookmark cards — link previews */
.gh-content .kg-bookmark-card {
  margin: 2.5rem 0;
}
.gh-content .kg-bookmark-container {
  display: flex;
  align-items: stretch;
  min-height: 148px;
  text-decoration: none;
  color: inherit;
  background: var(--color-paper, #f5efe6);
  border: 1px solid rgba(11, 13, 15, 0.12);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}
.gh-content .kg-bookmark-container:hover {
  border-color: var(--color-ink, #1a1814);
  transform: translateY(-1px);
}
.gh-content .kg-bookmark-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  min-width: 0;
}
.gh-content .kg-bookmark-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink, #1a1814);
}
.gh-content .kg-bookmark-description {
  font-family: var(--font-text, Georgia, serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink-soft, #6b6358);
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gh-content .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft, #6b6358);
}
.gh-content .kg-bookmark-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.gh-content .kg-bookmark-author::after {
  content: "·";
  margin: 0 0.25rem;
}
.gh-content .kg-bookmark-publisher {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.gh-content .kg-bookmark-thumbnail {
  flex: 0 0 auto;
  width: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-paper-warm, #ece4d4);
}
.gh-content .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .gh-content .kg-bookmark-container { flex-direction: column-reverse; }
  .gh-content .kg-bookmark-thumbnail { width: 100%; height: 160px; }
}

/* Gallery cards */
.gh-content .kg-gallery-card {
  margin: 2.5rem 0;
}
.gh-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gh-content .kg-gallery-row {
  display: flex;
  gap: 0.5rem;
}
.gh-content .kg-gallery-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Embed cards — video, twitter, etc. */
.gh-content .kg-embed-card {
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gh-content .kg-embed-card iframe {
  max-width: 100%;
}

/* Video & audio cards */
.gh-content .kg-video-card,
.gh-content .kg-audio-card {
  margin: 2.5rem 0;
}
.gh-content .kg-video-card video,
.gh-content .kg-audio-card audio {
  width: 100%;
  display: block;
}

/* File cards — downloadable attachments */
.gh-content .kg-file-card {
  margin: 2rem 0;
}
.gh-content .kg-file-card-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(11, 13, 15, 0.12);
  border-radius: 4px;
  background: var(--color-paper, #f5efe6);
  text-decoration: none;
  color: inherit;
}
.gh-content .kg-file-card-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: 1rem;
}
.gh-content .kg-file-card-caption {
  font-family: var(--font-text, Georgia, serif);
  font-size: 0.85rem;
  color: var(--color-ink-soft, #6b6358);
}
.gh-content .kg-file-card-metadata {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft, #6b6358);
  margin-top: 0.25rem;
}

/* Button card */
.gh-content .kg-button-card {
  margin: 2rem 0;
  text-align: center;
}
.gh-content .kg-button-card a {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--color-ink, #1a1814);
  color: var(--color-paper, #f5efe6);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 180ms ease;
}
.gh-content .kg-button-card a:hover { opacity: 0.85; }

/* Callout / toggle / header cards */
.gh-content .kg-callout-card {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-accent, #8b6f3a);
  background: var(--color-paper, #f5efe6);
  border-radius: 0 4px 4px 0;
}
.gh-content .kg-toggle-card {
  margin: 2rem 0;
  border: 1px solid rgba(11, 13, 15, 0.12);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}
.gh-content .kg-toggle-heading {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  cursor: pointer;
}
.gh-content .kg-header-card {
  margin: 2.5rem 0;
  padding: 3rem 2rem;
  text-align: center;
}

/* Product card */
.gh-content .kg-product-card {
  margin: 2.5rem 0;
}

/* Code block */
.gh-content pre {
  background: var(--color-ink, #1a1814);
  color: var(--color-paper, #f5efe6);
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  line-height: 1.6;
}
.gh-content code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  background: rgba(139, 111, 58, 0.12);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
.gh-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}


/* ============================================================
   ABOUT PAGE — C+ Front Matter system
   Scoped under .gh-content so it activates only inside the
   Ghost-rendered post body (page.hbs / post.hbs).
   ============================================================ */
.gh-content .a-frontmatter{ display:block; padding:0 0 80px; }
.gh-content .a-fm-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

.gh-content .a-titlepage{
  max-width:880px; margin:0 auto;
  padding:160px 0 100px;
  text-align:center;
  border-bottom:1px solid var(--color-ink, #232323);
}
.gh-content .a-titlepage .colophon{
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:11px; font-weight:600;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--color-ink-mute, #8a8a8a); margin:0 0 56px;
}
.gh-content .a-titlepage h1{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-style:italic; font-weight:400;
  font-size:54px; line-height:1.18; letter-spacing:-0.014em;
  color:var(--color-ink, #232323); margin:0 auto 48px;
  max-width:18ch; text-wrap:balance;
}
.gh-content .a-titlepage .ar{
  font-family:"Amiri","Scheherazade New",Georgia,serif;
  font-size:38px; direction:rtl;
  color:var(--color-ink, #232323); margin:0 0 24px; line-height:1.5;
}
.gh-content .a-titlepage .dateline{
  font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11.5px; letter-spacing:0.18em;
  color:var(--color-ink-mute, #8a8a8a); text-transform:uppercase;
  margin:48px 0 0;
}
.gh-content .a-titlepage .titlepage-epigraph{
  margin-top:64px; padding-top:40px;
  border-top:1px solid rgba(11,13,15,0.12);
  display:flex; justify-content:center;
}
.gh-content .a-titlepage .titlepage-epigraph p{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-style:italic; font-size:21px; line-height:1.55;
  color:var(--color-ink, #232323); margin:0;
  max-width:46ch; text-wrap:balance;
}

.gh-content .a-frontpage{
  max-width:880px; margin:0 auto;
  padding:96px 0;
  border-bottom:1px solid rgba(11,13,15,0.12);
}
.gh-content .a-frontpage .pagenum{
  font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--color-ink-mute, #8a8a8a); margin:0 0 36px;
}
.gh-content .a-frontpage h2{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-weight:500; font-size:36px; letter-spacing:-0.014em; line-height:1.18;
  color:var(--color-ink, #232323); margin:0 0 28px;
  text-wrap:balance;
}
.gh-content .a-frontpage p{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:18px; line-height:1.62;
  color:#2a2a2a; margin:0 0 1em;
  max-width:60ch; text-wrap:pretty;
}
.gh-content .a-frontpage .sidenote{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-style:italic; font-size:15px; line-height:1.55;
  color:var(--color-ink-soft, #5a5a5a);
  border-left:1px solid var(--color-accent, #AA4FFF);
  padding-left:18px; margin:24px 0 0;
  max-width:48ch;
}

.gh-content .a-sig{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; margin:48px 0 0;
}
.gh-content .a-sig svg{ display:block; }
.gh-content .a-sig .sig-meta{
  font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.1em;
  color:var(--color-ink-mute, #8a8a8a);
}

.gh-content .a-frontpage .a-bio{
  display:grid; grid-template-columns:200px 1fr;
  gap:48px; align-items:start;
  padding:0; margin:0 auto;
  max-width:880px;
}
.gh-content .a-bio .portrait{
  width:200px; height:240px; object-fit:cover;
  background:#efeef0; border:1px solid rgba(11,13,15,0.12);
  filter:grayscale(20%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-size:48px; color:var(--color-ink-mute, #8a8a8a);
}
.gh-content .a-bio .bio-body{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:18px; line-height:1.62; color:#2a2a2a;
}
.gh-content .a-bio .bio-body h3{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-weight:500; font-size:26px;
  letter-spacing:-0.012em; margin:0 0 16px;
  color:var(--color-ink, #232323);
}
.gh-content .a-bio .bio-stand{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-style:italic; font-size:20px; line-height:1.45;
  color:var(--color-ink, #232323); margin:0 0 18px;
  letter-spacing:-0.005em; text-wrap:balance;
}
.gh-content .a-bio .bio-body p{ margin:0 0 1em; text-wrap:pretty; }
.gh-content .a-bio .bio-meta{
  margin-top:18px;
  font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11.5px; letter-spacing:0.06em;
  color:var(--color-ink-mute, #8a8a8a);
  display:flex; flex-wrap:wrap; gap:6px 16px;
}
.gh-content .a-bio .bio-meta .dot{ color:rgba(11,13,15,0.18); }

.gh-content .a-debts{
  max-width:880px; margin:36px auto 0;
  padding-top:36px; border-top:1px solid rgba(11,13,15,0.08);
}
.gh-content .a-debts h4{
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--color-ink-mute, #8a8a8a); margin:0 0 14px;
}
.gh-content .a-debts p{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:17px; line-height:1.62;
  color:var(--color-ink-soft, #5a5a5a); margin:0;
  max-width:64ch; text-wrap:pretty;
}
.gh-content .a-debts p em{
  color:var(--color-ink, #232323); font-style:normal; font-weight:500;
}

.gh-content .a-method-named{
  max-width:none; margin:0 auto;
  padding:0; border-top:0;
}
.gh-content .a-method-named .label{
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--color-accent-deep, #7e2fcf); margin:0 0 16px;
}
.gh-content .a-method-named h3{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-weight:500; font-size:42px; line-height:1.12;
  letter-spacing:-0.018em; margin:0 0 14px;
  color:var(--color-ink, #232323); text-wrap:balance;
}
.gh-content .a-method-named .ar{
  font-family:"Amiri","Scheherazade New",Georgia,serif;
  font-size:28px; color:var(--color-ink, #232323);
  direction:rtl; margin:0 0 14px; line-height:1.5;
}
.gh-content .a-method-named .lead{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-style:italic; font-size:19px; line-height:1.55;
  color:var(--color-ink-soft, #5a5a5a);
  margin:0 0 40px; max-width:60ch; text-wrap:pretty;
}
.gh-content .a-method-named .grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:32px 40px; margin-top:8px;
}
.gh-content .a-method-named .item{
  border-top:1px solid rgba(11,13,15,0.08);
  padding-top:18px;
}
.gh-content .a-method-named .item .num{
  font-family:var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.18em;
  color:var(--color-accent-deep, #7e2fcf);
  margin:0 0 8px;
}
.gh-content .a-method-named .item h4{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-weight:500; font-size:19px; letter-spacing:-0.005em;
  margin:0 0 10px; color:var(--color-ink, #232323); text-wrap:balance;
}
.gh-content .a-method-named .item p{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:15.5px; line-height:1.55;
  color:var(--color-ink-soft, #5a5a5a); margin:0; text-wrap:pretty;
}
@media (max-width:760px){
  .gh-content .a-method-named .grid{ grid-template-columns:1fr; }
  .gh-content .a-frontpage .a-bio{ grid-template-columns:1fr; }
}

.gh-content .a-contact{
  max-width:680px; margin:0 auto; padding:0;
}
.gh-content .a-contact .label{
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--color-accent-deep, #7e2fcf); margin:0 0 12px;
}
.gh-content .a-contact h3{
  font-family:var(--font-display, "Source Serif 4", Georgia, serif);
  font-weight:500; font-size:28px; line-height:1.18;
  letter-spacing:-0.012em; margin:0 0 14px;
  color:var(--color-ink, #232323); text-wrap:balance;
}
.gh-content .a-contact .d{
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:17px; line-height:1.55;
  color:var(--color-ink-soft, #5a5a5a);
  margin:0 0 32px; max-width:54ch;
}
.gh-content .a-contact form{ display:grid; gap:0; }
.gh-content .a-contact .field{
  display:flex; flex-direction:column;
  border-bottom:1px solid rgba(11,13,15,0.12);
  padding:14px 0;
}
.gh-content .a-contact .field label{
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:10.5px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--color-ink-mute, #8a8a8a); margin:0 0 6px;
}
.gh-content .a-contact .field input,
.gh-content .a-contact .field textarea{
  border:0; outline:0; background:transparent;
  font-family:var(--font-text, "Source Serif 4", Georgia, serif);
  font-size:18px; color:var(--color-ink, #232323);
  padding:0; resize:none; width:100%;
}
.gh-content .a-contact .field textarea{
  min-height:96px; line-height:1.5; font-size:17px;
}
.gh-content .a-contact .send{
  margin-top:26px; align-self:flex-start;
  font-family:var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size:13px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--color-accent-deep, #7e2fcf);
  border:0; border-bottom:1px solid var(--color-ink, #232323);
  background:none; padding:10px 0; cursor:pointer;
}
.gh-content .a-contact .send:hover{ color:#5e1ca8; }
.gh-content .a-contact .send:disabled{
  color:var(--color-ink-mute, #8a8a8a);
  border-color:rgba(11,13,15,0.12); cursor:default;
}

/* ============================================================
   VISUAL RHYTHM PASS (v1.4.0)
   --------------------------------------------------------------
   Five additive changes:
     1.1  Recent-Writing thumbnails on home + /articles/
     1.2  Selective purple accent (--accent-primary) deployed only
          on section numbers, folio markers, arrows, link hover,
          and footer-divider dots.
     1.3  Section marks (⁂) at section boundaries, replacing the
          prior orbit-divider SVG inside the same partial.
     1.4  Hero paragraph drop cap (Option A from the brief).
     1.5  Four Doors distinctive marks above each Door title.

   Constraints honored: no JS, no hero images, no carousels, no
   gradients. Accents punctuate, never colour large surfaces.
   ============================================================ */

:root{
  --accent-primary:#AA4FFF;       /* decorative use — arrows, marks, hover underline */
  --accent-primary-deep:#7e2fcf;  /* AA-compliant text use — small purple text */
}

/* ---------- 1.3  Section mark (⁂) ----------
   The orbit-divider partial wraps this in a .r-cat-divider /
   .section-divider container, which keeps the existing top-margin
   rules from the homepage and category pages. The .section-mark
   span renders the asterism. */
.section-mark{
  display:block;
  text-align:center;
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1;
  letter-spacing:0.1em;
  color:rgba(35,35,35,0.3);
  user-select:none;
  margin:48px 0;
}
/* When the wrapper already contributes margin (older
   .r-cat-divider style sets margin-top:96px on category pages),
   collapse the inner span's margin so we don't double the gap. */
.r-cat-divider .section-mark{
  margin:0;
  padding:8px 0;
}
/* Override the legacy SVG-orbit styles so the wrapper reads as
   pure spacing — the SVG is gone, but the height/margin shape
   should remain familiar. */
.r-cat-divider svg,
.section-divider svg{ display:none; }
.section-mark + p,
.section-mark + h1,
.section-mark + h2,
.section-mark + h3{ margin-top:0; }

/* On homepage the dividers appear inside .container/.section
   stacks; the existing 88px section padding already separates
   adjacent blocks, so we keep the inner mark tight (8px) rather
   than adding 48px+48px on top of section padding. */
@media (max-width:760px){
  .section-mark{ font-size:1.1rem; margin:32px 0; }
}

/* ---------- 1.5  Four Doors distinctive marks ----------
   The .door-mark img sits above .door-num inside each .door.
   48×48 on desktop, 36×36 on mobile, color comes from the SVG
   itself (purple stroke). */
.door .door-mark{
  width:48px;
  height:48px;
  display:block;
  margin:0 0 24px;
  flex:0 0 auto;
}
@media (max-width:600px){
  .door .door-mark{ width:36px; height:36px; margin-bottom:18px; }
}

/* ---------- 1.1  Recent Writing thumbnails ----------
   The recent-list previously used a 3-column grid (date | title |
   cat). v1.4.0 introduces an outer .recent-link <a> that wraps
   the whole row, with a thumbnail on the left and the text stack
   on the right. Layout: flex row, 16px gap, thumbnail 80×80
   (60×60 on mobile). The whole row is the click target. */
.recent-list .recent-item{
  display:block !important;            /* override the legacy grid */
  grid-template-columns:none !important;
  padding:0 !important;
  border-bottom:1px solid var(--rule);
}
.recent-list .recent-item:last-child{ border-bottom:0; }
.recent-list .recent-item:hover{ padding-left:0 !important; }
.recent-list .recent-link{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 0;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease;
}
.recent-list .recent-link:hover{ transform:translateX(4px); }
.recent-thumb{
  flex:0 0 80px;
  width:80px;
  height:80px;
  display:block;
  overflow:hidden;
  border-radius:2px;
  background:#232323;
}
.recent-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter .2s ease;
}
.recent-list .recent-link:hover .recent-thumb img{ filter:brightness(1.05); }
.recent-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;        /* allow ellipsis if title is long */
  flex:1 1 auto;
}
.recent-list .recent-link .recent-date{
  display:block;
  /* font properties inherit from the original .recent-date rule */
}
.recent-list .recent-link .recent-title{
  display:block;
  /* inherits from the original .recent-title rule */
}
.recent-list .recent-link:hover .recent-title{
  color:var(--accent-primary-deep);
  text-decoration:underline;
  text-decoration-color:var(--accent-primary);
  text-underline-offset:3px;
}
.recent-list .recent-link .recent-cat{ display:inline-block; }
@media (max-width:600px){
  .recent-thumb{ flex-basis:60px; width:60px; height:60px; }
  .recent-list .recent-link{ padding:18px 0; gap:14px; }
}

/* ---------- 1.2  Purple accent — selective deployment ---------- */

/* Section numbers (Door ordinals: § 01 / § 02 / § 03 / § 04).
   The existing rule paints these per-door with --door-color; we
   keep that behavior because the doors already use the brand
   purple for #01 and brand-distinct colors for the others.
   Add a fallback to --accent-primary on the wrapper itself for
   any other §-style number elsewhere. */
.section-eyebrow + .section-title,
.r-cat-eyebrow .archive-tag{
  /* keep prose ink for these */
}
.r-cat-eyebrow .archive-tag{
  color:var(--accent-primary-deep) !important;
}

/* Folio markers in category mastheads — the "§ 17:85" style cells. */
.r-cat-verse .ref > span:first-child{
  color:var(--accent-primary-deep);
}

/* Arrow indicators on CTAs. Targets the `aria-hidden` arrow
   spans inside .door-cta, .read-more, .subscribe button,
   .featured-cta. The arrow becomes purple while the text stays
   default. */
.door-cta span[aria-hidden="true"],
.read-more span[aria-hidden="true"],
a.recent-cat span[aria-hidden="true"],
.subscribe button,
.r-essay-subscribe button,
.r-cat-subscribe button{
  color:var(--accent-primary);
}

/* Link hover underline — site-wide. Body links in any prose
   context get a subtle purple underline on hover, with the link
   text color unchanged. */
.gh-content a:hover,
.r-essay-body p a:hover,
.r-essay-body li a:hover,
.behind-bio a:hover,
.recent-list a:hover{
  text-decoration:underline;
  text-decoration-color:var(--accent-primary);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* Footer divider dots — purple at 60% opacity. Target both the
   homepage footer (.footer-inner) and the article-page footer
   (.r-footer-inner / .r-essay-colophon) for consistency. */
.footer-inner .dot,
.r-footer-inner .dot,
.r-essay-colophon .dot{
  color:var(--accent-primary);
  opacity:0.6;
}

/* ---------- 1.4  Hero paragraph — drop cap ----------
   Option A: the first letter of .hero-positioning renders as a
   3-line drop cap. Below 600px reduces to ~2 lines; below 400px
   the drop cap collapses entirely (we just keep the larger
   editorial size). */
.hero-positioning::first-letter{
  font-family:var(--serif);
  font-weight:600;
  font-size:3em;
  line-height:0.9;
  float:left;
  margin:0.04em 0.08em -0.04em 0;
  color:#232333;       /* a hair warmer than --ink */
  letter-spacing:-0.02em;
}
@media (max-width:600px){
  .hero-positioning::first-letter{
    font-size:2.4em;
  }
}
@media (max-width:400px){
  .hero-positioning::first-letter{
    /* Collapse the float — keep editorial scale via the parent
       .hero-positioning rules, no drop cap. */
    float:none;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    line-height:inherit;
  }
}

/* ---------- Door layout: ensure mark sits above num ----------
   The existing .door is display:flex flex-direction:column.
   Adding the .door-mark img as the first child works naturally;
   no override needed. Keep this block only as a stability check. */
.door{
  align-items:flex-start;
}

/* ---------- Empty-state row in /articles/ ---------- */
.recent-item--empty{
  text-align:center;
}

/* ============================================================
   ARTICLE TEMPLATE — native literary-essay layout (.r-essay)
   --------------------------------------------------------------
   v1.3.3 — fixes for:

     1. Single-HTML-card pastes: when authors paste the whole
        body into one Koenig HTML card, Ghost wraps it in
        <div class="kg-card kg-html-card">…</div>. Content
        (p, h2, aside, etc.) is then a GRANDCHILD of
        .r-essay-body, not a direct child. v1.3.2 used `>`
        combinators that missed it. v1.3.3 uses descendant
        selectors with explicit overrides for nested-in-blocks.

     2. Cross-block alignment: head, body, feature, series-nav,
        subscribe and colophon all share the SAME wide rail on
        desktop (1124px) with content left-aligned at the prose
        column's x. The title's left edge is now flush with the
        body prose's left edge — which is what the PDF shows.

     3. Hard !important guards on critical layout properties so
        a stale Code Injection still loading the 1.2.x rules
        cannot break the new layout.

   Layout shape on desktop (viewport ≥ 1180px):

       |<-32->|<--- 680 prose --->|<-60->|<--- 320 gutter --->|<-32->|
                                          ^ margin notes
       Total = 1124px, centered in viewport.

       Every block (head, body, feature, series-nav, subscribe,
       colophon) has the same 1124px outer width. Content
       inside each is left-aligned at the prose column.

   Below 1180px every block collapses to a 720-wide centered
   column and margin notes render as inline styled asides.
   ============================================================ */

/* ---------- LEGACY-WRAPPER GUARD ----------
   Defensive cleanup of pre-1.3 markup.  Hide stale structural
   elements outright; reset stale container wrappers to inert
   pass-throughs so their children inherit the native rail. */
.r-essay .essay-header,
.r-essay .essay-meta,
.r-essay .essay-series,
.r-essay .folio-mark,
.r-essay .lifted-above-title,
main > .essay-header,
main > .essay-meta,
main > .lifted-above-title{
  display:none !important;
}
.r-essay .roohle-essay,
.r-essay .essay-body{
  all:unset !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  color:inherit !important;
}
.r-essay .roohle-essay > p,
.r-essay .essay-body > p{
  margin:0 0 1.5rem !important;
}

/* ---------- ROOT ---------- */
.r-essay{
  display:block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 0 96px !important;
  position:static !important;
  background:transparent;
  color:var(--ink);
  --r-prose:680px;
  --r-gap:60px;
  --r-aside:320px;
  --r-pad:32px;
  --r-rail-narrow:720px;   /*  prose + 2*pad  */
  --r-rail-wide:1124px;    /*  prose + gap + aside + 2*pad  */
}

/* ---------- SHARED RAIL — narrow default ---------- */
.r-essay-head,
.r-essay-feature,
.r-essay-folio,
.r-essay-body,
.r-essay-series-nav,
.r-essay-subscribe,
.r-essay-colophon{
  display:block !important;
  width:auto !important;
  max-width:var(--r-rail-narrow) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--r-pad) !important;
  padding-right:var(--r-pad) !important;
  box-sizing:border-box !important;
  position:static;
}

/* ---------- DESKTOP — every block widens to 1124 ----------
   Every block (not just body) widens to the full 1124 rail so
   they all share the SAME left edge for their prose content.
   Children of head/folio + descendants of body that are prose
   elements get max-width 680 left-aligned. The right ~380px
   stays empty in head; in body it holds the margin-note gutter. */
@media (min-width:1180px){
  .r-essay-head,
  .r-essay-feature,
  .r-essay-folio,
  .r-essay-body,
  .r-essay-series-nav,
  .r-essay-subscribe,
  .r-essay-colophon{
    max-width:var(--r-rail-wide) !important;
  }

  /* Body needs to be the offset parent for absolute-positioned
     margin notes. */
  .r-essay-body{ position:relative !important; }

  /* Head children at prose width, left-aligned. */
  .r-essay-head > .r-essay-strip,
  .r-essay-head > .r-essay-title,
  .r-essay-head > .r-essay-dek,
  .r-essay-head > .r-essay-byline,
  .r-essay-folio{
    max-width:var(--r-prose) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Body's prose elements at 680, left-aligned. Use descendant
     combinator so content nested inside .kg-html-card or other
     wrappers gets the constraint too. */
  .r-essay-body p,
  .r-essay-body h2,
  .r-essay-body h3,
  .r-essay-body h4,
  .r-essay-body ul,
  .r-essay-body ol,
  .r-essay-body blockquote,
  .r-essay-body hr,
  .r-essay-body .pull-quote,
  .r-essay-body .verse-callout,
  .r-essay-body section.cross-ref-index{
    max-width:var(--r-prose) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Margin notes float in the right gutter. JS sets `top` per
     note. The aside is positioned relative to .r-essay-body
     (which is position:relative on desktop). */
  .r-essay-body aside.margin-note{
    position:absolute !important;
    right:var(--r-pad) !important;
    width:var(--r-aside) !important;
    margin:0 !important;
    padding:0 0 0 1rem !important;
    background:transparent !important;
    border:0 !important;
    border-left:2px solid var(--accent) !important;
    font-size:0.875rem !important;
    top:0; /* JS overrides */
  }

  /* Subscribe + colophon content at prose width, left-aligned. */
  .r-essay-subscribe > *,
  .r-essay-colophon{
    max-width:var(--r-prose) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .r-essay-colophon{
    /* The colophon is itself a flex row of links — keep its
       items in a single line at the prose width. */
    width:var(--r-prose) !important;
  }

  /* Series nav: two cards each at half the prose width. */
  .r-essay-series-nav{
    /* Override block layout for the inner grid. */
  }
  .r-essay-series-nav-inner{
    max-width:var(--r-prose) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ---------- 3.1  Metadata strip ---------- */
.r-essay-head{
  padding-top:88px !important;
  padding-bottom:48px !important;
}
.r-essay-strip{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 28px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.5em;
  line-height:1.5;
}
.r-essay-strip .cat,
.r-essay-strip .type{
  color:var(--accent);
  font-weight:500;
}
.r-essay-strip .dot{
  color:var(--accent);
  font-weight:500;
}
.r-essay-strip .slash{
  color:#c9c9c9;
  font-weight:400;
}
.r-essay-strip .qref{
  color:#6a6a6a;
  text-transform:none;
  letter-spacing:0.05em;
  font-weight:500;
}
.r-essay-strip .series{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:0.9rem;
  letter-spacing:0;
  text-transform:none;
  color:#6a6a6a;
  flex-basis:100%;
  margin-top:2px;
}
@media (min-width:760px){
  .r-essay-strip .series{
    flex-basis:auto;
    margin-top:0;
    margin-left:0.25em;
  }
}
.r-essay-strip [hidden]{ display:none !important; }

/* ---------- 3.2  Title ---------- */
.r-essay-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:4.5rem;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 28px;
  padding:0;
  text-align:left;
  text-wrap:balance;
}

/* ---------- 3.3  Dek ---------- */
.r-essay-dek{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  font-size:1.25rem;
  line-height:1.55;
  color:#444;
  margin:0 0 36px;
  padding:0;
  max-width:60ch;
  text-align:left;
  text-wrap:pretty;
}

/* ---------- 3.4  Byline ---------- */
.r-essay-byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.05em;
  color:#6a6a6a;
  padding:14px 0;
  margin:0;
  border-top:1px solid #d0d0d0;
  border-bottom:1px solid #d0d0d0;
}
.r-essay-byline .by{ color:#3a3a3a; }
.r-essay-byline .dot{ color:#c9c9c9; }

/* ---------- 3.5  Folio ---------- */
.r-essay-folio{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#6a6a6a;
  margin:48px 0 24px;
  padding-top:0;
  padding-bottom:0;
  text-align:left;
}

/* ---------- Optional feature image ---------- */
.r-essay-feature{
  margin-top:32px !important;
  margin-bottom:56px !important;
}
.r-essay-feature img{
  display:block;
  width:100%;
  max-width:var(--r-prose);
  margin:0;
  height:auto;
  border:1px solid var(--rule);
}
.r-essay-feature figcaption{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6a6a6a;
  margin:10px 0 0;
  text-align:left;
  max-width:var(--r-prose);
}

/* ---------- 3.6  Body (prose) ----------
   Selectors use descendant combinators so single-HTML-card
   pastes (where Ghost wraps content in .kg-html-card) still
   match. Nested paragraphs in pull-quote/verse-callout get
   their own overrides. */
.r-essay-body{
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.75;
  color:var(--ink);
}
.r-essay-body p{
  margin:0 0 1.5rem;
  text-wrap:pretty;
}
.r-essay-body p:last-child{ margin-bottom:0; }

/* Drop cap on the very first paragraph of the body.

   IMPORTANT: every selector must use `>` (direct-child) so we
   don't accidentally hit the first-of-type <p> deeper inside
   structural cards (cross-ref-entry, verse-callout, pull-quote).
   In v1.3.3 the deep `p:first-of-type` selector matched the
   .entry-arabic paragraph in every cross-ref entry — every
   Arabic verse got its first character floated as a 3.5rem
   "drop cap." Using `>` restricts the rule to direct children
   of the body (or its first single-card wrapper). */
.r-essay-body > p:first-of-type::first-letter,
.r-essay-body > .kg-card:first-child > p:first-of-type::first-letter,
.r-essay-body > .kg-html-card:first-child > p:first-of-type::first-letter,
.r-essay-body > .roohle-essay:first-child > p:first-of-type::first-letter,
.r-essay-body > .essay-body:first-child > p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:3.5rem;
  font-weight:600;
  line-height:0.85;
  float:left;
  margin:0.1em 0.12em -0.05em 0;
  color:var(--ink);
}

/* Belt-and-suspenders: explicitly UNSET the drop cap on any
   paragraph that lives inside a structural card or is set in
   Arabic/RTL. Even if the rule above ever over-matches, these
   resets win because they come later AND target more-specific
   parents. Inheriting `inherit` for type properties brings the
   pseudo-element back to its parent's text styling. */
.r-essay-body p[lang="ar"]::first-letter,
.r-essay-body [lang="ar"] p::first-letter,
.r-essay-body [dir="rtl"]::first-letter,
.r-essay-body .entry-arabic::first-letter,
.r-essay-body .entry-body::first-letter,
.r-essay-body .entry-citation::first-letter,
.r-essay-body .cross-ref-entry p::first-letter,
.r-essay-body .verse-callout p::first-letter,
.r-essay-body .verse-callout figcaption::first-letter,
.r-essay-body .pull-quote p::first-letter,
.r-essay-body blockquote.pull-quote p::first-letter,
.r-essay-body aside.margin-note p::first-letter,
.r-essay-body aside.margin-note::first-letter{
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
}

/* ---------- 3.7  Section headings ---------- */
.r-essay-body h2{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.5rem;
  line-height:1.3;
  color:var(--ink);
  margin:3rem 0 1.25rem;
  text-wrap:balance;
}
.r-essay-body h3{
  font-family:var(--serif);
  font-style:normal;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.35;
  margin:2.25rem 0 0.75rem;
}

/* ---------- 3.8  Marginal citations (asides) ---------- */
.r-essay-body sup.ref{
  color:var(--accent);
  font-weight:600;
  font-size:0.7em;
  vertical-align:super;
  line-height:0;
  margin-left:0.1em;
  padding:0 1px;
}
.r-essay-body aside.margin-note{
  /* Default (mobile / narrow): styled inline aside. Desktop
     overrides above with position:absolute. */
  display:block;
  background:#f7f7f7;
  border-left:3px solid var(--accent);
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:0.95rem;
  line-height:1.55;
  color:#555;
}
.r-essay-body aside.margin-note .margin-num{
  color:var(--accent);
  font-weight:600;
  font-style:normal;
  font-family:var(--mono);
  margin-right:0.5em;
}

/* ---------- 3.9  Pull quote ---------- */
.r-essay-body .pull-quote,
.r-essay-body blockquote.pull-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:1.5rem;
  line-height:1.45;
  color:var(--ink);
  margin:2.5rem 0;
  padding:2rem 0;
  border:0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  text-align:left;
  text-wrap:balance;
}
.r-essay-body .pull-quote p,
.r-essay-body blockquote.pull-quote p{
  margin:0;
  /* Override the body-paragraph max-width 680 for nested p. */
  max-width:none !important;
}

/* ---------- 3.10  Verse callout ---------- */
.r-essay-body .verse-callout{
  text-align:center;
  margin:3rem 0;
  padding:2rem 0;
  border:0;
  border-top:1px solid #d0d0d0;
  border-bottom:1px solid #d0d0d0;
}
.r-essay-body .verse-callout p,
.r-essay-body .verse-callout figcaption{
  /* Nested elements should not pick up the 680-prose constraint;
     the callout itself is the prose-width container. */
  max-width:none !important;
}
.r-essay-body .verse-callout .arabic-large,
.r-essay-body .verse-callout p[lang="ar"]{
  font-family:var(--arabic);
  font-size:2rem;
  line-height:1.8;
  font-weight:400;
  margin:0 0 1rem;
  color:var(--ink);
  direction:rtl;
}
.r-essay-body .verse-callout .translation{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.5;
  color:#555;
  margin:0 auto 1rem;
  max-width:54ch !important;
  text-align:center;
}
.r-essay-body .verse-callout figcaption{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#6a6a6a;
}

/* ---------- 3.11  Cross-reference index ---------- */
.r-essay-body section.cross-ref-index{
  margin:4rem 0 0;
  padding:2rem 0 0;
  border-top:2px solid var(--ink);
}
.r-essay-body .cross-ref-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin:0 0 2rem;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  max-width:none !important;
}
.r-essay-body .cross-ref-title{
  color:var(--ink);
  font-weight:600;
}
.r-essay-body .cross-ref-count{
  color:#6a6a6a;
  font-weight:400;
}
.r-essay-body .cross-ref-entry{
  margin:0 0 2.5rem;
  padding:0 0 1.5rem;
  border-bottom:1px solid #ececec;
  max-width:none !important;
}
.r-essay-body .cross-ref-entry:last-child{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0;
}
.r-essay-body .entry-header{
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  margin:0 0 1rem;
  max-width:none !important;
}
.r-essay-body .entry-num{
  font-family:var(--mono);
  font-size:1rem;
  font-weight:600;
  color:var(--accent);
  flex:0 0 auto;
}
.r-essay-body .entry-root{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6a6a6a;
  display:inline-flex;
  align-items:baseline;
  gap:0.5em;
}
.r-essay-body .entry-root [lang="ar"]{
  font-family:var(--arabic);
  font-size:1.05rem;
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
}
.r-essay-body .entry-root .root-label{
  color:#6a6a6a;
}
.r-essay-body .entry-arabic{
  font-family:var(--arabic);
  font-size:1.5rem;
  line-height:1.9;
  font-weight:400;
  color:var(--ink);
  text-align:right;
  direction:rtl;
  margin:0.5rem 0 1rem;
  max-width:none !important;
}
.r-essay-body .entry-body{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  font-family:var(--serif);
  font-size:0.95rem;
  line-height:1.6;
  color:#444;
  text-align:left !important;
  direction:ltr !important;
  margin:0;
}
.r-essay-body .entry-body em{
  display:inline !important;
  font-style:italic;
}
.r-essay-body .entry-citation{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6a6a6a;
  margin:0.75rem 0 0;
  display:block;
}

/* ---------- 3.12  Series navigation ---------- */
.r-essay-series-nav{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:72px !important;
  /* On desktop, the nav widens but cards stay at prose width
     via max-width on the grid container. Actually the simpler
     approach: keep the grid at its normal max-width-rail
     constraints, the cards themselves split that width. */
}
@media (min-width:1180px){
  .r-essay-series-nav{
    /* override the wide-rail full width for series nav: keep
       the cards aligned with the prose column. */
    max-width:calc(var(--r-prose) + 2 * var(--r-pad)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    /* Re-center via a left margin equal to (rail-wide - prose-rail)/2
       so the series nav block sits flush with the prose left edge.
       Actually we want it to sit at the SAME left edge as the prose,
       not centered. Use margin-left: 0 + a left-edge offset. */
  }
}
.r-essay-series-nav .series-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 26px;
  border:1px solid #d0d0d0;
  background:transparent;
  color:var(--ink);
  transition:border-color .18s ease, background .18s ease;
  min-height:120px;
  text-decoration:none;
}
.r-essay-series-nav a.series-card:hover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 4%, transparent);
}
.r-essay-series-nav .series-card.next{
  text-align:right;
  align-items:flex-end;
}
.r-essay-series-nav .series-card .lbl{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.r-essay-series-nav .series-card .ttl{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.35;
  color:var(--ink);
  text-wrap:balance;
}
.r-essay-series-nav .series-card.placeholder{
  background:#fafafa;
  border-style:dashed;
}
.r-essay-series-nav .series-card.placeholder .ttl{
  color:#888;
}

/* ---------- 3.13  Subscribe block ---------- */
.r-essay-subscribe{
  margin-top:88px !important;
  padding-top:48px !important;
  border-top:1px solid #d0d0d0;
}
.r-essay-subscribe .lbl{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  margin:0 0 14px;
}
.r-essay-subscribe .h{
  font-family:var(--serif);
  font-weight:400;
  font-size:2rem;
  line-height:1.18;
  color:var(--ink);
  margin:0 0 14px;
  max-width:34ch;
  text-wrap:balance;
}
.r-essay-subscribe .d{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.6;
  color:#444;
  margin:0 0 24px;
  max-width:60ch;
}
.r-essay-subscribe form{
  display:flex;
  align-items:stretch;
  max-width:520px;
  border-bottom:1px solid var(--ink);
}
.r-essay-subscribe input{
  flex:1;
  border:0; outline:0;
  background:transparent;
  font-family:var(--mono);
  font-size:14px;
  padding:12px 0;
  color:var(--ink);
}
.r-essay-subscribe input::placeholder{ color:#9a9a9a; }
.r-essay-subscribe button{
  font-family:var(--mono);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  padding:12px 0 12px 22px;
}
.r-essay-subscribe button:hover{ color:var(--accent-deep, #5e1ca8); }

/* ---------- 3.14  Article colophon ---------- */
.r-essay-colophon{
  margin-top:64px !important;
  padding-top:24px !important;
  border-top:1px solid #ececec;
  display:flex !important;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.05em;
  color:#6a6a6a;
}
.r-essay-colophon .dot{ color:#c9c9c9; }
.r-essay-colophon a{
  color:#3a3a3a;
  text-decoration:none;
  transition:color .18s ease;
}
.r-essay-colophon a:hover{ color:var(--accent); }

/* ---------- Inline links in prose ---------- */
.r-essay-body p a,
.r-essay-body li a{
  color:var(--accent-deep, #7e2fcf);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition:border-color .18s ease;
}
.r-essay-body p a:hover,
.r-essay-body li a:hover{
  border-bottom-color:var(--accent);
}

/* ---------- Koenig editor cards inside prose ----------
   .kg-html-card (the wrapper Ghost adds around an HTML card)
   uses `display: contents` so its children (the author's <p>,
   <aside>, etc.) flow as if they were direct children of
   .r-essay-body. This is what makes "paste the whole article
   into one HTML card" work — paragraphs get the prose
   constraints and asides position-absolute against the body.
   Other Koenig cards (image, bookmark) keep their default
   block layout so their internal styles still apply. */
.r-essay-body .kg-html-card{
  display:contents !important;
}
.r-essay-body .kg-image-card img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.r-essay-body .kg-image-card figcaption{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#6a6a6a;
  margin-top:10px;
  text-align:left;
}

/* ---------- Body-text scaling for narrow viewports ---------- */
@media (max-width:880px){
  .r-essay-head{
    padding-top:64px !important;
    padding-bottom:32px !important;
  }
  .r-essay-title{ font-size:2.6rem; line-height:1.1; }
  .r-essay-dek{ font-size:1.1rem; }
  .r-essay-body{ font-size:1.0625rem; line-height:1.65; }
  .r-essay-body > p:first-of-type::first-letter,
  .r-essay-body > .kg-card:first-child > p:first-of-type::first-letter,
  .r-essay-body > .kg-html-card:first-child > p:first-of-type::first-letter,
  .r-essay-body > .roohle-essay:first-child > p:first-of-type::first-letter,
  .r-essay-body > .essay-body:first-child > p:first-of-type::first-letter{
    font-size:2.8rem;
  }
  .r-essay-body h2{ font-size:1.3rem; margin-top:2.25rem; }
  .r-essay-body .pull-quote{
    font-size:1.25rem;
    padding:1.5rem 0;
    margin:2rem 0;
  }
  .r-essay-body .verse-callout .arabic-large,
  .r-essay-body .verse-callout p[lang="ar"]{ font-size:1.55rem; }
  .r-essay-body .entry-arabic{ font-size:1.25rem; }
  .r-essay-series-nav{ grid-template-columns:1fr !important; gap:14px; }
  .r-essay-series-nav .series-card.next{
    text-align:left;
    align-items:flex-start;
  }
  .r-essay-subscribe{ margin-top:64px !important; padding-top:36px !important; }
  .r-essay-subscribe .h{ font-size:1.5rem; }
}

@media (max-width:480px){
  .r-essay{ --r-pad:20px; }
  .r-essay-title{ font-size:2rem; }
  .r-essay-body{ font-size:1rem; }
  .r-essay-body > p:first-of-type::first-letter,
  .r-essay-body > .kg-card:first-child > p:first-of-type::first-letter,
  .r-essay-body > .kg-html-card:first-child > p:first-of-type::first-letter,
  .r-essay-body > .roohle-essay:first-child > p:first-of-type::first-letter,
  .r-essay-body > .essay-body:first-child > p:first-of-type::first-letter{
    font-size:2.4rem;
  }
}

/* ---------- Print ---------- */
@media print{
  .r-essay-series-nav,
  .r-essay-subscribe,
  .r-progress{ display:none !important; }
  .r-essay-body aside.margin-note{
    position:static !important;
    width:auto !important;
    background:#f7f7f7 !important;
    border-left:3px solid #888 !important;
    padding:0.75rem 1rem !important;
    margin:1rem 0 !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .r-essay-series-nav .series-card,
  .r-essay-colophon a,
  .r-essay-subscribe button{
    transition:none;
  }
}