/* نجاة بالصدفة — reader
 *
 * Everything is scoped under .njt-reader. No html/body/:root selectors: this
 * has to survive being dropped inside a WordPress theme that knows nothing
 * about it. Custom properties live on .njt-reader itself for the same reason.
 *
 * Layer order is declared first so our own rules stay predictable among
 * themselves. Unlayered CSS beats layered CSS, though, and most WP themes
 * ship unlayered -- so the handful of properties that must not be overridden
 * (family, leading, tracking, direction, measure) are also restated outside
 * the layers at a specificity a theme rule will not clear.
 */

@layer njt-reset, njt-base, njt-type, njt-chrome;

/* ------------------------------------------------------------------ fonts */
/* SIL's own web build, unmodified. Not subset: the family carries Reserved
 * Font Names, and subsetting would force a rename -- when the whole point is
 * that this reads in the face the book was printed in. url() resolves against
 * this stylesheet, so the same file works from any directory. */

@font-face {
  font-family: "Scheherazade New";
  src: url("../assets/fonts/ScheherazadeNew-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Scheherazade New";
  src: url("../assets/fonts/ScheherazadeNew-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer njt-reset {
  .njt-reader,
  .njt-reader *:not(svg):not(svg *),
  .njt-reader *::before,
  .njt-reader *::after {
    /* `revert`, not `initial`: initial makes every element inline and
     * destroys the layout. Not `revert-layer` either -- the point is to
     * neutralise the host theme's author styles, not just our own.
     *
     * SVG subtrees are excluded, and that exclusion is load-bearing. SVG 2
     * promotes several presentation attributes to real CSS properties --
     * including `d` on a <path> -- and `all: revert` rolls the cascade back
     * past author origin, which is where a presentation attribute lives. So
     * `all: revert` on a <path> computed `d: none`: geometry gone,
     * getTotalLength() 0, getBBox().width 0. Every icon rendered as an empty
     * 15x15 box with a perfectly good stroke colour and nothing to stroke.
     * Excluding svg and its descendants leaves the icons' own attributes to
     * do their job; .njt-i below still pins the paint properties so a host
     * theme's `svg { fill: currentColor }` cannot fill these outline icons in. */
    all: revert;
    box-sizing: border-box;
  }

  .njt-reader button,
  .njt-reader a {
    font: inherit;
    color: inherit;
  }
}

@layer njt-base {
  .njt-reader {
    /* The book's own paper, sampled from the cover art: both covers average
     * #f3e7d2. Lifted a little here because a screen is lit and a page is not. */
    --paper: #f4ebda;
    --paper-raised: #eee2ca;
    --ink: #1b1712;
    --ink-soft: #5f5445;
    --rule: #d6c6a8;
    --accent: #8a2b1c; /* oxblood -- book cloth, not a brand colour */
    --grain: 0.055;
    --shadow: 0 1px 2px rgba(60, 44, 20, 0.08), 0 8px 30px rgba(60, 44, 20, 0.07);

    --fs: 20px;
    --fs-scale: 1; /* the stepper scales this, so the responsive base survives */
    --lh: 1.95;
    /* Tuned against the printed book, not against a rule of thumb. Print
     * pages 21, 61 and 121 run 55-56 characters to the line; measured in the
     * browser this face advances 0.381em per character, so 21.5em lands on
     * ~56. A 24em column reads 63 -- still inside the comfortable band, but
     * wider than the book it is reproducing. */
    --measure: 21.5em;
    --gutter: 1.5rem;

    /* Scheherazade New's own metrics compute to a 2.0396em line box
     * (hhea 2750 / -1427 over 2048upem). Anything much under that is
     * compressing the face below what its designers drew, and the tashkeel
     * starts colliding. 1.95 is the floor for comfortable, 1.82 for compact. */

    position: relative;
    background: var(--paper);
    color: var(--ink);
    min-height: 100%;
    font-synthesis: none;
    -webkit-text-size-adjust: 100%;
  }

  .njt-reader[data-theme="bright"] {
    /* The book's interior stock: its pages are white, only the cover is
     * parchment. This is for readers who want the crisper of the two. */
    --paper: #fbfaf7;
    --paper-raised: #f2efe8;
    --ink: #14120f;
    --ink-soft: #5a544a;
    --rule: #ddd8cc;
    --grain: 0.03;
  }

  .njt-reader[data-theme="night"] {
    --paper: #15171b;
    --paper-raised: #1d2026;
    --ink: #ddd8cf;
    --ink-soft: #8d867a;
    --rule: #2f343d;
    --accent: #d4735c;
    --grain: 0.035;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  /* Paper tooth. Real books are not flat colour, and a solid fill is the
   * single fastest way to make a reading surface look like a screen. */
  .njt-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .njt-reader > *:not(.njt-grain) {
    position: relative;
    z-index: 1;
  }
}

/* ------------------------------------------------------------------- type */

@layer njt-type {
  .njt-prose {
    max-width: var(--measure);
    margin-inline: auto;
  }

  .njt-prose p {
    margin: 0 0 1.15em;
  }

  /* The print sets its paragraphs open, with space between and no first-line
   * indent. Matched rather than improved on. */
  .njt-prose p.lead {
    font-weight: 700;
  }

  .njt-prose > p:first-of-type {
    font-size: 1.06em;
  }

  .njt-prose h3 {
    margin: 2.2em 0 0.9em;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.5;
  }

  .njt-prose h3::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-top: 0.55em;
    background: var(--rule);
  }

  /* Verse. Arabic has no italic, so a stanza is set apart by measure, weight
   * and a rule rather than by slanting the face. */
  .njt-verse {
    margin: 2em auto;
    max-width: 20em;
    text-align: center;
    color: var(--ink-soft);
    border-block: 1px solid var(--rule);
    padding-block: 1.2em;
  }

  .njt-verse p {
    margin: 0 0 0.25em;
    line-height: 1.75;
  }

  .njt-verse cite {
    display: block;
    margin-top: 0.9em;
    font-size: 0.82em;
    font-style: normal;
    color: var(--accent);
  }

  .njt-verse cite::before {
    content: "— ";
  }

  strong {
    font-weight: 700;
  }
}

/* ------------------------------------------------------------ layout/chrome */

@layer njt-chrome {
  .njt-reader {
    display: block;
    padding-block: 0 5rem;
  }

  /* The spine. In an RTL book the binding is on the right, so chapter
   * progress fills a ribbon down the right edge -- the same place a hardback
   * keeps its bookmark. */
  .njt-spine {
    position: fixed;
    inset-block: 0;
    /* inline-START, not end. In RTL the inline axis runs right-to-left, so
     * `inline-start` is the right edge -- which is where an Arabic book's
     * binding is, and where this ribbon belongs. `inline-end` would pin it to
     * the fore-edge on the left. */
    inset-inline-start: 0;
    width: 3px;
    background: color-mix(in srgb, var(--rule) 55%, transparent);
    z-index: 40;
  }

  .njt-spine b {
    display: block;
    width: 100%;
    height: var(--read, 0%);
    background: var(--accent);
    transition: height 0.18s linear;
  }

  .njt-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem var(--gutter);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  }

  /* The author's signature stands in for a home button. It is his mark on
   * the cover and the back page, so it reads as "back to the book" in a way
   * a generic glyph never would. Legible from about 44px up -- below that it
   * turns to mush, which is why the favicon uses a single ن instead. */
  .njt-home {
    padding-inline: 0.4rem;
  }

  .njt-home img {
    display: block;
    width: auto;
    /* 2.3rem is where this becomes a signature rather than a smudge. Rendered
     * at candidate sizes against the paper: at 26px the letters collapse into
     * a blur, at 32px they start to resolve, and only around 37-40px does
     * "يوسف الساعدي" actually read. Anything smaller looks like a rendering
     * fault rather than a mark. */
    height: 2.3rem;
  }

  .njt-reader[data-theme="night"] .njt-home img {
    filter: invert(1);
  }

  /* The reset's `all: revert` (njt-reset layer, applied to .njt-reader *)
   * strips every SVG's stroke="currentColor" / fill="none" presentation
   * attributes back to their CSS-initial values -- stroke: none, fill:
   * black -- because a presentation attribute is itself an author-origin
   * declaration and revert rolls past it. On Lucide's open, unfilled paths
   * that means no visible pixels at all: every icon rendered blank.
   *
   * Fixed here rather than in the reset, because this is a later layer
   * (njt-chrome comes after njt-reset in the @layer order at the top of this
   * file), so it wins regardless of specificity. stroke/fill/stroke-width/
   * stroke-linecap/stroke-linejoin are all CSS-inherited properties, so
   * setting them once on the <svg> reaches every <path> inside it even
   * though each path's own presentation attributes were reverted too.
   */
  .njt-i {
    flex: none;
    vertical-align: -0.125em;
    /* Sized here, not left to the width/height attributes: a host theme's
     * `svg { width: 100% }` would otherwise stretch every icon. */
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .njt-bar__title {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .njt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.7rem;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .njt-btn:hover {
    background: var(--paper-raised);
  }

  .njt-btn[aria-pressed="true"],
  .njt-btn.is-on {
    border-color: var(--accent);
    color: var(--accent);
  }

  .njt-reader :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* --- chapter ------------------------------------------------------- */

  .njt-chapter {
    padding-inline: var(--gutter);
    padding-block: 2.5rem;
  }

  .njt-opener {
    max-width: var(--measure);
    margin: 0 auto 2.5rem;
    text-align: center;
  }

  .njt-opener h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.55;
  }

  .njt-opener__rule {
    width: 100%;
    height: 1px;
    margin: 1.4rem 0 0;
    background: linear-gradient(
      to left,
      transparent,
      var(--rule) 20%,
      var(--rule) 80%,
      transparent
    );
  }

  /* Illustrations sit as plates, allowed to run a little wider than the
   * measure the way a printed plate runs into the margin. */
  .njt-plate {
    margin: 2.4rem auto;
    max-width: min(30em, 100%);
    text-align: center;
  }

  .njt-plate img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
  }

  .njt-reader[data-theme="night"] .njt-plate img,
  .njt-reader[data-theme="night"] .njt-mark img {
    /* The drawings are black ink on transparency. Inverting gives white ink;
     * alpha is untouched by the filter, so the paper stays out of it. */
    filter: invert(1);
  }

  .njt-chapnav .njt-btn {
    gap: 0.4em;
  }

  .njt-chapnav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--measure);
    margin: 3.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }

  /* --- panels -------------------------------------------------------- */

  .njt-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(20, 14, 6, 0.4);
    backdrop-filter: blur(2px);
  }

  .njt-panel {
    position: fixed;
    inset-block: 0;
    /* Same reasoning as the spine: inline-start is the right edge here, which
     * is the side an RTL drawer opens from. */
    inset-inline-start: 0;
    z-index: 50;
    width: min(24rem, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-inline-end: 1px solid var(--rule);
    box-shadow: var(--shadow);
  }

  /* No entrance animation. An element whose position or opacity comes from a
   * keyframe is unreachable wherever those keyframes do not run -- a
   * throttled tab, a stalled renderer, a reduced-motion override applied
   * unevenly. A drawer that simply appears costs nothing and cannot fail. */

  .njt-panel__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--rule);
  }

  .njt-panel__head h2 {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .njt-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 2rem;
  }

  .njt-toc__item {
    display: flex;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: 2px;
    background: transparent;
    text-align: start;
    line-height: 1.5;
    cursor: pointer;
  }

  .njt-toc__item:hover {
    background: var(--paper-raised);
  }

  .njt-toc__item[aria-current="true"] {
    color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .njt-toc__n {
    flex: none;
    width: 1.9em;
    color: var(--ink-soft);
    font-size: 0.85em;
    padding-top: 0.25em;
  }

  .njt-set {
    padding: 1rem;
  }

  /* Live sample. Pinned above the controls so a change is visible in the
   * same glance as the tap that caused it. It carries the real reading
   * font-size and leading, not a scaled-down approximation -- the whole point
   * is that what you see here is what the page will do. */
  .njt-preview {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -1rem -1rem 1.4rem;
    padding: 1rem;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--rule);
  }

  .njt-preview__label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
  }

  .njt-preview__text {
    display: block;
    max-height: 8.5em;
    overflow: hidden;
    color: var(--ink);
  }

  .njt-set legend {
    display: flex;
    align-items: center;
    gap: 0.45em;
  }

  .njt-set fieldset {
    margin: 0 0 1.4rem;
    padding: 0;
    border: 0;
  }

  .njt-set legend {
    padding: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
  }

  .njt-seg {
    display: flex;
    gap: 0.35rem;
  }

  .njt-hint {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .njt-seg .njt-btn {
    flex: 1;
    border: 1px solid var(--rule);
  }

  /* --- landing ------------------------------------------------------- */

  .njt-hero {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    /* On a phone the cover sits directly under the bar with nothing between
     * them, so 3rem of air read as a gap rather than as breathing room. The
     * wide layout keeps the full measure, where the cover sits beside the
     * title block and the space is doing real work. */
    padding: 1.5rem var(--gutter) 1rem;
    max-width: 62rem;
    margin-inline: auto;
  }

  .njt-hero__art {
    margin: 0;
  }

  .njt-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: var(--shadow);
  }

  /* On a narrow screen the cover sits directly above this, and the cover
   * already carries the wordmark -- showing it twice in one viewport reads as
   * a mistake. It earns its place only in the two-column layout, where the
   * cover is beside the text rather than above it. */
  .njt-mark {
    display: none;
  }

  .njt-mark {
    margin: 0;
  }

  .njt-mark img {
    display: block;
    width: min(19rem, 78%);
    height: auto;
    margin-bottom: 1.4rem;
  }

  .njt-hero p.njt-kicker {
    margin: 0 0 0.4rem;
    color: var(--ink-soft);
    font-size: 1.02rem;
  }

  .njt-hero .njt-byline {
    margin: 0.2rem 0 1.6rem;
    font-size: 1.05rem;
    color: var(--ink-soft);
  }

  .njt-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .njt-cta .njt-btn {
    border: 1px solid var(--ink);
    padding-inline: 1.2rem;
    gap: 0.5em;
  }

  .njt-cta .njt-btn--primary {
    position: relative;
    background: var(--ink);
    color: var(--paper);
  }

  .njt-cta .njt-btn--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
  }

  /* Onboarding nudge on the primary CTA, first visit only -- a pulsing
   * ring so the button reads as "press me" without needing an explainer.
   * Suppressed once a reader has a resume card (see renderLanding() in
   * reader.js): by then they already know what the button does. */
  .njt-start-wrap {
    position: relative;
    display: inline-flex;
  }

  .njt-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .njt-ripple::before,
  .njt-ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: njt-ripple 2.4s ease-out infinite;
  }

  .njt-ripple::after {
    animation-delay: 1.2s;
  }

  @keyframes njt-ripple {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

  .njt-ded {
    max-width: 30em;
    margin: 3.5rem auto;
    padding-inline: var(--gutter);
    text-align: center;
    color: var(--ink-soft);
  }

  .njt-ded h2 {
    margin: 0 0 1.2rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: var(--ink-soft);
  }

  .njt-contents {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 1rem;
    border-top: 1px solid var(--rule);
  }

  .njt-contents > h2,
  .njt-about > h2 {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
  }

  .njt-contents ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.15rem;
  }

  .njt-about {
    max-width: 44rem;
    margin: 2rem auto 0;
    padding: 2.5rem var(--gutter);
    border-top: 1px solid var(--rule);
  }

  .njt-about__grid {
    display: grid;
    gap: 1.6rem;
  }

  .njt-about img.njt-portrait {
    width: 9.5rem;
    height: auto;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
  }

  .njt-about p {
    margin: 0 0 0.7em;
  }

  .njt-sig img {
    width: 11rem;
    height: auto;
    margin-top: 1rem;
    opacity: 0.9;
  }

  .njt-colophon {
    max-width: 44rem;
    margin-inline: auto;
    padding: 2rem var(--gutter) 0;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.88rem;
  }

  .njt-resume {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    transition: border-color 0.15s;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
    text-align: start;
    cursor: pointer;
  }

  .njt-resume__mark {
    flex: none;
    display: flex;
    color: var(--accent);
  }

  .njt-resume__mark .njt-i {
    width: 1.4em;
    height: 1.4em;
  }

  /* margin-inline-start:auto pushes this to the far end of the row, which in
   * RTL is the left. align-self:end drops it to the bottom of the card. */
  .njt-resume__go {
    display: flex;
    align-self: end;
    margin-inline-start: auto;
    color: var(--accent);
  }

  .njt-resume:hover .njt-resume__go {
    transform: translateX(-2px);
  }

  .njt-resume__go .njt-i {
    width: 1.2em;
    height: 1.2em;
  }

  .njt-resume__text {
    min-width: 0;
  }

  .njt-resume b {
    display: block;
    font-weight: 700;
  }

  .njt-resume span {
    color: var(--ink-soft);
    font-size: 0.88rem;
  }

  .njt-noscript {
    padding: 3rem var(--gutter);
  }

  .njt-noscript h2 {
    margin: 0 0 0.5rem;
    font-weight: 700;
  }

  .njt-credit {
    max-width: 44rem;
    margin-inline: auto;
    padding: 1.4rem var(--gutter) 2.5rem;
    text-align: center;
  }

  .njt-credit a {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }

  .njt-credit a:hover,
  .njt-credit a:focus-visible {
    color: var(--accent);
    border-color: currentColor;
  }

  [hidden] {
    display: none !important;
  }

  .njt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------- wide-up */

@media (min-width: 48rem) {
  .njt-reader {
    --fs: 21px;
    --lh: 2;
    --gutter: 2.5rem;
  }

  .njt-hero {
    grid-template-columns: 20rem 1fr;
    padding-top: 3rem;
  }

  .njt-mark {
    display: block;
  }

  .njt-about__grid {
    grid-template-columns: 9.5rem 1fr;
    align-items: start;
  }

  /* A printed book's margins are not symmetrical -- the gutter beside the
   * binding is tighter than the fore-edge. In an RTL book the binding is on
   * the right, so `margin-inline: <start> <end>` means a small fixed gap on
   * the right and the slack taken up on the left. Getting these the wrong way
   * round pushes the column away from the spine, which reads as a mistake
   * rather than as a book. Plates keep the same spine gap and run wider into
   * the fore-edge margin, the way a printed plate does. */
  .njt-chapter .njt-prose,
  .njt-chapter .njt-opener,
  .njt-chapter .njt-chapnav {
    margin-inline: 6vw auto;
  }

  .njt-chapter .njt-plate {
    margin-inline: 6vw auto;
    max-width: min(32em, calc(100% - 6vw));
  }
}

/* ------------------------------------------------------------ overrides */
/* Restated outside the layers. Unlayered CSS beats layered CSS, and most
 * WordPress themes ship unlayered -- a theme's `.entry-content p { line-height:
 * 1.6 }` would otherwise win over everything above. These are the properties
 * that would visibly break the reading if the host clobbered them. */

.njt-reader,
.njt-reader p,
.njt-reader h2,
.njt-reader h3,
.njt-reader button,
.njt-reader li {
  font-family: "Scheherazade New", "Noto Naskh Arabic", Times, serif;
  letter-spacing: 0; /* Arabic joins -- any tracking breaks the strokes */
  direction: rtl;
}

.njt-reader .njt-prose,
.njt-reader .njt-verse,
.njt-reader .njt-opener,
.njt-reader .njt-preview__text {
  font-size: calc(var(--fs) * var(--fs-scale));
  line-height: var(--lh);
  text-align: start;
  hyphens: none; /* Arabic does not hyphenate */
  overflow-wrap: break-word;
}

.njt-reader[data-space="compact"] {
  --lh: 1.82;
}

/* Opt-in only. No browser engine does real Arabic justification -- there is
 * no kashida elongation, no swash substitution, just stretched word spaces --
 * so on a 24em measure this produces rivers. Offered because some readers
 * prefer the block edge anyway; never the default. */
.njt-reader[data-align="justify"] .njt-prose p,
.njt-reader[data-align="justify"] .njt-preview__text {
  text-align: justify;
  text-justify: inter-word;
}

@media (prefers-reduced-motion: reduce) {
  .njt-reader *,
  .njt-reader *::before,
  .njt-reader *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}