/* ══════════════════════════════════════════════════════════════════════════
   AALAMIN REDESIGN — PHASE 1: tokens, global shell, homepage.

   ADDITIVE BY DESIGN. Every selector here is namespaced `rd-`, and no existing
   selector is overridden. Existing pages keep their own body styling and simply
   inherit the new shell, so this slice cannot silently restyle the reader, Ask
   or the 156 studies. That is what makes the reskin verifiable rather than
   hopeful.

   Tokens are COPIED from the prototype's own stylesheet (index-C0JOarvX.css),
   not eyeballed. Names are prefixed --rd- so they cannot collide with the
   existing :root scale, which stays live and untouched on every other page.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — warm paper */
  /* READING POLISH 2026-09-14: ONE SET. These names ALIAS style.css's tokens, which now
     hold the prototype values these hex literals used to carry, so a change lands in
     one place and the page and its panels cannot drift apart again. */
  --rd-bg:var(--paper);        --rd-card:var(--paper-raised); --rd-paper-deep:var(--paper-inset);
  --rd-border:var(--line);     --rd-input:var(--line-strong);
  /* ink */
  --rd-ink:var(--ink);         --rd-ink-soft:var(--ink-soft);
  /* #676d68 came from the prototype and measures 4.48:1 on --rd-paper-deep -
     two hundredths under the 4.5 floor for the 12px footer headings it carries.
     contrast_gate caught it. Darkened on the same hue to the smallest value that
     clears the floor with headroom: 4.68:1 there, 5.11:1 on the page ground. */
  --rd-ink-muted:var(--ink-faint);
  /* gold */
  --rd-gold:#8a6a18;    --rd-gold-light:#c7a24e;
  /* dark panel — the estate brand-pack ground, present in the prototype too */
  --rd-dark:#191816;    --rd-dark-ink:#e9e7e1; --rd-dark-soft:#a6aca6;

  /* EVIDENCE COLOURS ARE RESERVED. One per layer, never decorative. A pill in
     indigo means "derived"; it may not be used because indigo looked right. */
  --rd-derived:#465b92;   --rd-derived-soft:#e4e8f3;   /* computed from the text */
  --rd-traditional:#a63c33; --rd-traditional-soft:#f3e6e4; /* named later sources */
  --rd-academic:#59676f;  --rd-academic-soft:#e6eaec;  /* independent history   */

  /* type — BOTH SHIPPED FACES ARE NOW SELF-HOSTED AND SIL OFL 1.1, so neither
     depends on a fallback firing and the site still makes no external request.

     Inter is vendored for this redesign (app/static/fonts/inter-var-*.woff2).
     The reading serif is Source Serif 4, which the estate ALREADY self-hosts:
     Charter is not obtainable through the vendoring route used for every other
     family here, and its Bitstream licence is not OFL and carries conditions,
     so it was not vendored on a guess. Charter stays in the stack below Source
     Serif 4 purely so a reader who has it locally is not worse off. */
  --rd-sans:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rd-serif:'Source Serif 4','Iowan Old Style',Charter,Georgia,serif;
  /* Arabic is the EXISTING CLEARED face, self-hosted, unchanged by this slice. */
  --rd-arabic:'Amiri',serif;

  --rd-xs:.75rem; --rd-sm:.875rem; --rd-base:1rem; --rd-lg:1.125rem;
  --rd-xl:1.5rem; --rd-2xl:2rem; --rd-3xl:2.75rem;
  --rd-lh-tight:1.25; --rd-lh-snug:1.375; --rd-lh:1.5; --rd-lh-relaxed:1.625;

  --rd-space:.25rem;
  --rd-r:1rem; --rd-r-sm:.5rem; --rd-r-xs:.125rem; --rd-r-panel:28px;
  --rd-motion:.15s cubic-bezier(.4,0,.2,1);
  --rd-measure:34rem;
}

/* ── GLOBAL SHELL ────────────────────────────────────────────────────────── */

.rd-shell{
  font-family:var(--rd-sans);
  background:var(--rd-bg);
  color:var(--rd-ink);
}
.rd-wrap{width:min(1120px,100% - 3rem);margin-inline:auto}

.rd-header{
  border-bottom:1px solid var(--rd-border);
  background:var(--rd-bg);
}
.rd-header .rd-wrap{
  display:flex;align-items:center;gap:1.5rem;
  min-height:5.75rem;flex-wrap:wrap;
}
/* Brand click goes Home. It is a link, not a logo image, so it has a real
   accessible name and it prints. */
/* THE LOCKUP. One link, three parts, vertically centred on each other. */
.rd-brand{
  display:flex;align-items:center;gap:.85rem;
  text-decoration:none;color:var(--id-ink);margin-inline-end:auto;
}
/* Isolated so the RTL run cannot reorder the Latin beside it. Ink, never gold. */
.rd-brand-ar{
  font-family:var(--rd-arabic);
  font-size:2.05rem;line-height:1;
  unicode-bidi:isolate;
  color:var(--id-ink);
  /* Amiri sits high in its em box; this pulls the optical centre onto the
     English block's centre rather than the box's. */
  transform:translateY(-.06em);
}
/* Structural ornament, and the only gold in the lockup. Height is set from the
   English block so the rule always matches what it divides. */
.rd-brand-rule{
  flex:none;width:1px;align-self:stretch;min-height:2.4rem;
  background:var(--id-gold);
}
.rd-brand-en{display:flex;flex-direction:column;gap:.22rem;justify-content:center}
.rd-brand-name{
  font-family:var(--rd-serif);font-size:var(--rd-lg);font-weight:600;
  letter-spacing:.02em;line-height:1;
}
.rd-brand-sub{
  font-size:var(--rd-xs);color:var(--rd-ink-muted);
  letter-spacing:.01em;line-height:1;
}
.rd-nav{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.rd-nav a{
  font-size:var(--rd-sm);color:var(--rd-ink-soft);text-decoration:none;
  padding-block:.35rem;border-bottom:1.5px solid transparent;
  transition:color var(--rd-motion),border-color var(--rd-motion);
}
.rd-nav a:hover{color:var(--rd-ink)}
.rd-nav a[aria-current="page"]{color:var(--rd-ink);border-bottom-color:var(--rd-gold-light)}
/* "Open reader" is the SOLE header action. One button, so there is never a
   question about what the primary move is. */
.rd-action{
  font-size:var(--rd-sm);font-weight:500;
  background:var(--rd-ink);color:var(--rd-bg);
  padding:.55rem 1.1rem;border-radius:var(--rd-r-sm);
  text-decoration:none;white-space:nowrap;
  transition:background var(--rd-motion);
}
.rd-action:hover{background:#0e1512}

/* THE FOOTER IS A DARK PANEL. #191816 is the identity ground, so the identity
   tokens REVERSE inside it - paper on ink - which is the same rule the mark
   follows everywhere. Scoped to the element rather than to a theme, because this
   panel is dark on a light page by design, not because the OS asked. */
.rd-footer{
  background:var(--rd-dark);color:var(--rd-dark-ink);
  border-top:0;margin-top:5rem;padding-block:3.5rem 3rem;
  --id-ink:#E9E7E1; --id-ink-2:#A6ACA6; --id-gold:#C7A24E;
}
.rd-footer-grid{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:2.5rem;flex-wrap:wrap;
}
.rd-footer-brand{max-width:38ch}
.rd-footer .rd-mark-name{font-size:1.45rem;margin:0 0 .45rem}
.rd-footer .rd-mark-desc{margin:0 0 1.35rem}
.rd-footer-claim{
  font-family:var(--rd-serif);font-size:var(--rd-base);line-height:1.6;
  color:var(--rd-dark-soft);margin:0;
}
.rd-footer-links{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.rd-footer-links a{
  font-size:var(--rd-sm);color:var(--rd-dark-ink);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.1rem;
  transition:border-color var(--rd-motion);
}
.rd-footer-links a:hover{border-bottom-color:var(--rd-gold-light)}
/* The metadata credit sits on the dark panel, so the paper-ground .attrib colours
   reverse here: soft ink for the line, full ink for the notice, links underlined
   rather than lapis (lapis is a paper-ground colour). */
.rd-footer-credit{margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid rgba(233,231,225,.16)}
.rd-footer-credit .attrib,.rd-footer-credit .attrib .k,.rd-footer-credit .attrib .sep{color:var(--rd-dark-soft)}
.rd-footer-credit .attrib-notice{color:var(--rd-dark-ink);font-size:var(--rd-sm);line-height:1.6;max-width:72ch;margin:.5rem 0 0}
.rd-footer-credit a{color:var(--rd-dark-ink);text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere}
@media (max-width:47.99rem){
  .rd-footer-links{flex-direction:row;flex-wrap:wrap;gap:1rem 1.5rem}
}

/* ── HOMEPAGE ────────────────────────────────────────────────────────────── */

/* THE LEDE IS TWO COLUMNS from 1024 up: hero left, the reading card in a right
   rail beside it. Below that they stack in DOM order, which puts the card after
   the hero - the single-column fallback the brief asks for, and it needs no
   reordering because the markup is already in reading order. */
.rd-lede{padding-block:4.5rem 1rem}
@media (min-width:64rem){
  .rd-lede{
    display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    gap:3.5rem;align-items:start;
  }
}
.rd-hero{min-width:0}
/* Authored sentence-case, shown as caps. A screen reader and a copy-paste both
   get ordinary case; only the presentation is uppercase. */
.rd-kicker{
  font-size:var(--rd-xs);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;margin:0 0 1rem;
  /* THE BRIEF ASKED FOR #C7A24E. It measures 2.23:1 on this ground - far under
     the 4.5 floor for small text - and contrast_gate would fail it, having
     already caught one token in this design. --rd-gold is the estate's gold for
     ink on paper and reads as the same accent at 4.67:1. #C7A24E is kept for the
     dark panel, which is where the prototype actually uses it and where it
     measures 7.36:1. */
  color:var(--rd-gold);
}
.rd-hero h1{
  font-family:var(--rd-serif);font-weight:600;
  /* Roughly double what it was, and tighter. The measure is set in ch so the
     line breaks after "you" without a <br> - the break is a consequence of the
     measure, not a hard-coded one that would strand a word at another size. */
  font-size:clamp(2.4rem,5.2vw,4.1rem);
  line-height:1.06;letter-spacing:-.028em;
  margin:0 0 1.4rem;
  /* "Start with what you" and "want to understand." are 19 characters each, so
     a 20ch measure breaks after "you" on its own. The break is a consequence of
     the measure, not a hard <br> that would strand a word at another size. */
  max-width:20ch;
}
.rd-hero-sub{
  font-size:1.25rem;line-height:1.6;
  color:var(--rd-ink-soft);margin:0 0 2.25rem;max-width:42ch;
}

/* THE SEARCH IS A LABELLED CARD, not a bare input. The label is visible rather
   than screen-reader-only, which names the field for everyone. Still a plain GET
   form to /ask, so it works with scripting off. */
.rd-ask-card{
  background:var(--rd-card);border:1px solid var(--rd-border);
  border-radius:var(--rd-r);padding:1.1rem 1.15rem 1.15rem;
  max-width:34rem;
}
.rd-ask-label{
  display:block;font-size:var(--rd-xs);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;color:var(--rd-ink-muted);
  margin:0 0 .7rem;
}
.rd-ask-row{
  display:flex;align-items:center;gap:.6rem;
  border:1px solid var(--rd-input);border-radius:var(--rd-r-sm);
  background:var(--rd-bg);padding:.15rem .15rem .15rem .8rem;
  transition:border-color var(--rd-motion),box-shadow var(--rd-motion);
}
/* The ring goes on the ROW, because the row is what reads as the control. The
   input's own outline is suppressed only because the row takes it on. */
.rd-ask-row:focus-within{
  border-color:var(--rd-gold);box-shadow:0 0 0 3px rgba(138,106,24,.15);
}
.rd-ask-icon{flex:none;color:var(--rd-ink-muted)}
.rd-ask-row input{
  flex:1;min-width:0;font:inherit;font-size:var(--rd-base);
  border:0;background:transparent;color:var(--rd-ink);
  padding:.7rem 0;
}
.rd-ask-row input:focus{outline:none}
.rd-ask-row button{
  flex:none;font:inherit;font-size:var(--rd-sm);font-weight:500;cursor:pointer;
  background:var(--rd-ink);color:var(--rd-bg);border:0;
  padding:.7rem 1.1rem;border-radius:calc(var(--rd-r-sm) - .15rem);
  transition:background var(--rd-motion);
}
.rd-ask-row button:hover{background:#0e1512}
.rd-ask-eg{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;max-width:34rem}
.rd-ask-eg a{
  font-size:var(--rd-sm);color:var(--rd-ink-soft);text-decoration:none;
  background:var(--rd-card);border:1px solid var(--rd-border);
  padding:.35rem .7rem;border-radius:999px;
  transition:border-color var(--rd-motion),color var(--rd-motion);
}
.rd-ask-eg a:hover{border-color:var(--rd-gold-light);color:var(--rd-ink)}
.rd-ask-note{font-size:var(--rd-sm);color:var(--rd-ink-muted);margin:.9rem 0 0}

/* The right rail. Sticky is deliberately NOT used: the estate's standing note is
   that a floating chrome beside RTL content is a surprise nobody asked for. */
.rd-rail{min-width:0}
@media (max-width:63.99rem){ .rd-rail{margin-top:2.5rem} }

/* Latest signed reading — a REAL verse, real Arabic, real signed gloss. */
.rd-continue{
  background:var(--rd-card);
  border:1px solid var(--rd-border);border-radius:var(--rd-r);
  padding:1.5rem;
}
.rd-eyebrow{
  font-size:var(--rd-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--rd-ink-muted);margin:0 0 1rem;font-weight:600;
}
.rd-ref{
  font-size:var(--rd-sm);color:var(--rd-gold);font-weight:600;
  letter-spacing:.02em;margin:0;
}
.rd-arabic{
  font-family:var(--rd-arabic);font-size:1.5rem;line-height:2.05;
  margin:.75rem 0 1.25rem;color:var(--rd-ink);
}
/* The label is not decoration. It says WHO wrote the sentence below it. */
.rd-gloss-label{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--rd-xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--rd-traditional);background:var(--rd-traditional-soft);
  border-radius:var(--rd-r-xs);padding:.2rem .5rem;font-weight:600;
}
.rd-gloss{
  font-family:var(--rd-serif);font-size:var(--rd-base);
  line-height:var(--rd-lh-relaxed);color:var(--rd-ink);margin:.6rem 0 0;
}
.rd-continue-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin-top:1.25rem;
  padding-top:1rem;border-top:1px solid var(--rd-border);
}
.rd-continue-foot span{font-size:var(--rd-sm);color:var(--rd-ink-muted)}
.rd-continue-foot a{font-size:var(--rd-sm);color:var(--rd-gold);font-weight:500;
  text-decoration:none;white-space:nowrap}
.rd-continue-foot a:hover{text-decoration:underline}

/* Choose a way in */
/* The lede's bottom padding and this top padding used to stack into a dead
   band under the chips. Tightened at the top, kept at the bottom. */
.rd-section{padding-block:2.25rem 3.5rem}
.rd-section-head h2{
  font-family:var(--rd-serif);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;
  line-height:1.12;letter-spacing:-.02em;margin:0;
}
/* Eyebrow left, headline right, as the comp sets it. Stacks under 64rem so the
   headline never has to share a narrow line with the kicker. */
.rd-section-head--split{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:2.25rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--rd-border);
}
.rd-section-head--split .rd-kicker{margin:0}
.rd-section-head--split h2{text-align:right;max-width:22ch}
@media (max-width:63.99rem){
  .rd-section-head--split{align-items:flex-start}
  .rd-section-head--split h2{text-align:left}
}
.rd-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem}
.rd-way{
  background:var(--rd-card);border:1px solid var(--rd-border);
  border-radius:var(--rd-r);padding:1.5rem;
  display:flex;flex-direction:column;
  transition:border-color var(--rd-motion);
}
.rd-way:hover{border-color:var(--rd-gold-light)}
.rd-num{
  font-size:var(--rd-xs);letter-spacing:.12em;color:var(--rd-gold);
  font-weight:600;margin:0;
}
.rd-way-top{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1rem}
.rd-way-icon{flex:none;color:var(--rd-gold)}
.rd-way h3{font-family:var(--rd-serif);font-size:var(--rd-xl);margin:0 0 .5rem;font-weight:600}
.rd-way p{color:var(--rd-ink-soft);font-size:var(--rd-sm);line-height:var(--rd-lh-relaxed);margin:0 0 1.25rem}
.rd-way a{
  margin-top:auto;font-size:var(--rd-sm);font-weight:500;
  color:var(--rd-ink);text-decoration:none;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1.5px solid var(--rd-gold-light);padding-bottom:.15rem;
}
.rd-way a:hover{border-bottom-color:var(--rd-gold)}

/* What makes AALAMIN different — the dark panel, two columns.
   Argument left, the four layers as a vertical LIST right. The old version put
   the layers in an auto-fit grid, which left empty voids whenever the four did
   not divide evenly into the available track count; a list cannot do that. */
.rd-panel{
  background:var(--rd-dark);color:var(--rd-dark-ink);
  border-radius:var(--rd-r-panel);padding:3.25rem 3rem;margin-block:1rem 3rem;
}
.rd-panel-grid{display:grid;gap:3rem}
@media (min-width:64rem){
  .rd-panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:start}
}
.rd-panel h2{
  font-family:var(--rd-serif);font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:600;
  margin:0 0 1rem;color:var(--rd-dark-ink);line-height:1.14;letter-spacing:-.02em;
}
.rd-panel .rd-body{
  font-size:var(--rd-base);color:var(--rd-dark-soft);
  line-height:var(--rd-lh-relaxed);margin:0 0 1.75rem;max-width:46ch;
}
/* On the dark ground the light gold is the correct one: 7.36:1 here, where on
   paper it measures 2.23:1. Same token that reverses on the mark. */
.rd-kicker--onDark{color:var(--rd-gold-light)}
.rd-panel-cta{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--rd-sm);font-weight:500;text-decoration:none;
  color:var(--rd-dark);background:var(--rd-dark-ink);
  padding:.65rem 1.15rem;border-radius:var(--rd-r-sm);
  transition:background var(--rd-motion);
}
.rd-panel-cta:hover{background:#fff}

.rd-layers{list-style:none;margin:0;padding:0}
/* A row per layer, divided. The divider is the list's own structure, so the
   last row does not carry one. */
.rd-layer{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:1rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid rgba(233,231,225,.16);
}
.rd-layer:first-child{padding-top:0}
.rd-layer:last-child{border-bottom:0;padding-bottom:0}
.rd-layer .rd-num{color:var(--rd-gold-light)}
.rd-layer h3{font-size:var(--rd-base);margin:0 0 .2rem;color:var(--rd-dark-ink);font-weight:600}
.rd-layer p{font-size:var(--rd-sm);color:var(--rd-dark-soft);line-height:var(--rd-lh-snug);margin:0}
/* Evidence pills — the colour IS the claim about provenance. */
.rd-pill{
  display:inline-block;font-size:var(--rd-xs);letter-spacing:.06em;
  padding:.2rem .55rem;border-radius:999px;font-weight:600;white-space:nowrap;
}
.rd-pill-source{background:var(--rd-dark-ink);color:var(--rd-dark)}
.rd-pill-traditional{background:var(--rd-traditional-soft);color:var(--rd-traditional)}
.rd-pill-academic{background:var(--rd-academic-soft);color:var(--rd-academic)}
.rd-pill-derived{background:var(--rd-derived-soft);color:var(--rd-derived)}
@media (max-width:47.99rem){
  .rd-layer{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}
  .rd-layer .rd-pill{grid-column:2}
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .rd-wrap{width:min(1120px,100% - 2rem)}
  .rd-header .rd-wrap{min-height:auto;padding-block:.9rem;gap:.75rem}
  .rd-brand{margin-inline-end:0}
  /* Scaled down proportionally, not re-laid-out: the lockup keeps its shape. */
  .rd-brand-ar{font-size:1.7rem}
  .rd-brand-name{font-size:1.2rem;letter-spacing:.15em}
  .rd-brand-sub{font-size:.6rem;letter-spacing:.16em}
  .rd-brand-rule{min-height:2rem}
  .rd-nav{gap:1rem;order:3;flex-basis:100%}
  .rd-action{order:2;margin-inline-start:auto}
  .rd-lede{padding-block:3rem 2rem}
  /* The row stays a ROW: it is one bordered control, and stacking its parts
     would break the thing the border is drawn around. The button tightens and
     drops its arrow instead - at 390 the arrow cost enough width to truncate the
     placeholder to "What would you li", and the button already says Search. */
  .rd-ask-row{padding-left:.6rem;gap:.4rem}
  .rd-ask-row input{font-size:.95rem}
  .rd-panel{padding:2rem 1.5rem;border-radius:var(--rd-r)}
  .rd-continue{padding:1.25rem}
  .rd-arabic{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  .rd-shell *{transition:none!important}
}

/* Visually hidden but announced. Used for the Ask label, which is redundant to
   a sighted reader who can see the placeholder but is the only thing a screen
   reader has to name the field. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── THE RAIL THE SHELL REPLACES ──────────────────────────────────────────
   From 1024px up, style.css puts the WHOLE PAGE on a two-column grid -
   body{display:grid; grid-template-areas:"rail main" "rail foot"} - because the
   old chrome was a 15rem LEFT RAIL, and header.top was assigned grid-area:rail.

   The redesign replaces that rail with a top bar, and the new header carries a
   different class, so it was auto-placing into the rail track: a 240px column
   with the nav stacked vertically down the left edge, while main and footer
   sat correctly in the right-hand column because the rail rules address them
   by element selector and still matched.

   So the grid itself has to go for the new shell. Scoped to body.rd-shell and
   to the same breakpoint, which leaves every rule in style.css untouched for
   anything that is not wearing this shell. main keeps its own max-width and is
   simply centred, now that there is no rail to sit beside; the homepage opts
   out of that width because it manages its own with .rd-wrap. */
@media (min-width:64rem){
  body.rd-shell{display:block}
  body.rd-shell > main{margin-inline:auto}
  body.rd-shell > main.rd-home{max-width:none;padding:0}
}

/* ── PAPER-FIRST, INCLUDING THE PARTS THE BROWSER PAINTS ──────────────────
   The attribute on <html> stops the legacy dark THEME. It does not tell the
   browser anything, and `color-scheme` is what governs the surfaces CSS does
   not own: form-control internals, the caret, and the scrollbars. Without this
   a reader on a dark OS gets a dark-chrome Ask field and dark scrollbars framing
   a light page.

   Note this could NOT have replaced the attribute: `color-scheme` has no effect
   on whether `prefers-color-scheme: dark` matches, so on its own it would have
   left every legacy token dark and fixed only the widgets.

   Keyed to the attribute, so it applies to exactly what the shell sets and
   nothing else. */
:root[data-theme="light"]{color-scheme:light}

/* ══════════════════════════════════════════════════════════════════════════
   THE WORDMARK SYSTEM — built as TEXT, not artwork.

   The v4 pack ships every one of these marks as SVG, but its own manifest
   records why that is a problem: "Production SVG text is converted to outlined
   paths and is therefore not machine-readable as text", excluded from
   qurayn_form_gate. Built as live type instead, the name is selectable,
   searchable, scales with the reader's own settings, prints, and can be READ by
   the estate's gates. Every word moved from artwork to text is a word the
   estate can govern.

   IDENTITY TOKENS, taken from the pack manifest and README, not invented.
   They REVERSE BY THEME - ink on paper in light, paper on ink in dark - and they
   are separate from the page tokens so the mark cannot drift when page colour
   is tuned. Evidence hues are ABSENT by construction: the manifest lists
   #333C8F, #96452E, #535B5F and their tints as forbidden_identity_hues, and no
   rule in this block references any of them.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --id-ink:#17201D;      /* manifest light.primary_ink        */
  --id-ink-2:#585F5A;    /* manifest light.secondary_ink      */
  --id-gold:#8A6A18;     /* manifest light.ornamental_gold    */
}
/* THE GOLD IS NOT CONSTANT, and the brief's "#C7A24E across themes" would be
   wrong on paper: it measures 2.23:1 there, against 4.67:1 for #8A6A18. The
   pack already resolved this - manifest and README both give ornamental gold as
   #8A6A18 light / #C7A24E dark - and #C7A24E is right where the pack uses it,
   measuring 7.36:1 on the dark ground. The artefact's own documentation
   outranks a prose instruction, so the token reverses. */
:root[data-theme="dark"]{
  --id-ink:#E9E7E1; --id-ink-2:#A6ACA6; --id-gold:#C7A24E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --id-ink:#E9E7E1; --id-ink-2:#A6ACA6; --id-gold:#C7A24E;
  }
}

/* REDUCED MASTHEAD — the nav-bar form. Letter-spaced serif caps, no Arabic, no
   rule, no descriptor: the README is explicit that the reduced mark carries
   none of those and must not be reconstructed by cropping the full lockup. */
.rd-brand-name{
  font-family:var(--rd-serif);font-weight:600;
  font-size:1.5rem;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--id-ink);
}
.rd-brand-sub{
  font-family:var(--rd-sans);
  font-size:.66rem;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--id-ink-2);white-space:nowrap;
}

/* FULL STACKED BILINGUAL LOCKUP — a brand moment, not the nav. Arabic, gold
   hairline, name, descriptor, in that order down the page. */
.rd-mark{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;margin:0 0 2rem}
.rd-mark-ar{
  font-family:var(--rd-arabic);font-size:1.25rem;line-height:1.6;
  color:var(--id-ink);margin:0;
}
/* Structural ornament, not a separator between two things - it is part of the
   mark. Decorative, so it is hidden from assistive tech. */
.rd-mark-rule{display:block;width:4.5rem;height:1px;background:var(--id-gold)}
.rd-mark-name{
  font-family:var(--rd-serif);font-weight:600;
  font-size:1.6rem;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;color:var(--id-ink);margin:0;
}
/* Sans caps, muted. Authored sentence-case and presented as caps, so a screen
   reader and a copy-paste both get ordinary case. */
.rd-mark-desc{
  font-family:var(--rd-sans);font-size:var(--rd-xs);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--id-ink-2);margin:0;
}
@media (max-width:720px){
  .rd-mark-name{font-size:1.35rem;letter-spacing:.16em}
}

/* THE ASK ROW WRAPS BELOW 480px, and only there. Tightening the button first
   was not enough: the placeholder needs 257px and the input had 171px, so it
   still truncated to "What would you li". Wrapping does NOT break the bordered
   control - the border encloses both parts, the box simply gets taller - which
   is the objection that ruled stacking out at wider sizes, and it does not
   apply here. The button keeps its arrow; the placeholder keeps its words. */
@media (max-width:30rem){
  .rd-ask-row{flex-wrap:wrap;padding:.15rem .15rem .15rem .7rem}
  /* .95rem still left the placeholder 10px short of the field at 390. At .9rem
     it needs ~243px against ~247px available, so the words fit rather than
     truncate - measured, not eyeballed. */
  .rd-ask-row input{flex:1 1 auto;min-width:8rem;font-size:.9rem}
  .rd-ask-row button{flex:1 0 100%;margin-top:.35rem;justify-content:center}
}

/* NARROW: the descriptor goes FIRST, as instructed, and only then. Arabic and
   AALAMIN are the name; the descriptor is a gloss on it, so it is the line that
   can be lost without losing the identity. Dropped with display:none rather
   than visibility, so it costs no space and cannot force an overflow. */
/* 26rem. Lowering this to 22 was tried and measured wrong: with the descriptor
   in place at 390 the lockup grows wide enough to push "Open reader" onto its
   own row - brand centre 33, button centre 85. That IS crowding, which is the
   condition for dropping the descriptor. At 26rem the two sit on one row at
   390 and the identity keeps Arabic and AALAMIN, which is what matters. */
@media (max-width:26rem){
  .rd-brand-sub{display:none}
  .rd-brand{gap:.6rem}
  .rd-brand-ar{font-size:1.55rem}
  .rd-brand-name{font-size:1.05rem;letter-spacing:.13em}
  .rd-brand-rule{min-height:1.5rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   STUDY DETAIL — /study/<slug>

   Two columns from 1024 up. Evidence reads down the left; the rail on the right
   carries a MAP of what is here and a list of what the study cannot say. The
   rail holds NO conclusion: a reader who wants the answer has to read the
   verses, which is the posture of the whole platform.

   The five zones are visually distinct because they are epistemically
   different, and a reader has to be able to tell them apart at a glance:
   the ANCHOR, the PASSAGES and their translation differences, the DERIVED
   layer, the ABSENT layers, and the editorial RESTATEMENT.
   ══════════════════════════════════════════════════════════════════════════ */
.rd-study{display:block}
/* THE RAIL IS 16rem, NOT 19rem. It lost a third of its content when the
   "what this study cannot say" card came off (06f7681) and was never resized,
   so it was reserving a column for two small cards. The 3rem is given back to
   the evidence column. main.reading is deliberately NOT widened with it: prose
   in here caps at the 68ch measure, so extra page width past that widens
   PANELS and not TEXT - the reading line would not move and the page would
   just look emptier. align-items:start is load-bearing for the sticky rail
   below: a stretched grid item is already full height and can never stick. */
@media (min-width:64rem){
  .rd-study{display:grid;grid-template-columns:minmax(0,1fr) 16rem;
    gap:3rem;align-items:start}
}
.rd-study-main{min-width:0}
.rd-study-q{font-family:var(--rd-serif);letter-spacing:-.015em}

/* THE ANCHOR, named before the evidence. */
.rd-anchor-line{
  font-size:var(--rd-sm);color:var(--rd-ink-soft);
  border-left:2px solid var(--rd-gold);padding-left:.8rem;margin:0 0 1.5rem;
}
.rd-anchor-k{
  text-transform:uppercase;letter-spacing:.12em;font-size:var(--rd-xs);
  font-weight:600;color:var(--rd-gold);margin-inline-end:.4rem;
}

/* A carried passage. The gold edge marks evidence the study stands on. */
.rd-passage{border-left:3px solid var(--rd-gold-light);scroll-margin-top:1.5rem}
/* Derived is computed from the text; absent is a layer that does not exist yet.
   Different edges, because they are different kinds of nothing-and-something. */
.rd-layer-derived{border-left:3px solid var(--rd-derived)}
.rd-layer-absent{border-left:3px dashed var(--rd-border)}
/* The restatement is a person's sentence, and is marked as the one thing on the
   page that is not the text or a measurement of it. */
.rd-restatement{border-left:3px solid var(--rd-traditional)}

/* ── THE RAIL ─────────────────────────────────────────────────────────────── */
.rd-study-rail{min-width:0;display:flex;flex-direction:column;gap:1rem}
@media (max-width:63.99rem){ .rd-study-rail{margin-top:2rem} }
/* THE MAP FOLLOWS THE READER. A study runs to many screens and the rail held
   two short cards at the top, so the right column was dead from the first
   screenful down. Sticky makes the passage map a live table of contents at
   every scroll depth instead - the reader can always see where they are in the
   study and jump. Only at the two-column breakpoint: below it the rail is
   stacked UNDER the evidence, where sticking it would pin a footer-ish block
   over the text it is supposed to follow.

   The header is static (.rd-header sets no position), so 2rem clears the top
   edge with nothing to collide with. max-height + overflow is the guard for the
   day the rail grows taller than the viewport: without it a long rail would
   stick with its lower half permanently off-screen and unreachable. */
@media (min-width:64rem){
  .rd-study-rail{
    position:sticky;top:2rem;
    max-height:calc(100vh - 4rem);overflow-y:auto;
  }
}
.rd-rail-card{
  background:var(--rd-card);border:1px solid var(--rd-border);
  border-radius:var(--rd-r-sm);padding:1.1rem 1.15rem;
}
.rd-rail-map{list-style:none;margin:0;padding:0;font-size:var(--rd-sm)}
.rd-rail-map li{padding:.28rem 0;border-bottom:1px solid var(--rd-border)}
.rd-rail-map li:last-child{border-bottom:0}
.rd-rail-map a{color:var(--rd-ink);text-decoration:none}
.rd-rail-map a:hover{text-decoration:underline}
.rd-rail-tag{
  font-size:var(--rd-xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--rd-gold);font-weight:600;margin-inline-start:.35rem;
}
.rd-rail-limits ul{list-style:none;margin:0;padding:0;font-size:var(--rd-sm)}
.rd-rail-limits li{margin-bottom:.6rem;line-height:var(--rd-lh-snug);color:var(--rd-ink-soft)}
.rd-rail-limits strong{color:var(--rd-ink);font-weight:600}
.rd-rail-note{font-size:var(--rd-xs);color:var(--rd-ink-muted);margin:.5rem 0 0;line-height:1.5}
.rd-rail-meta dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .7rem;
  margin:0;font-size:var(--rd-sm)}
.rd-rail-meta dt{color:var(--rd-ink-muted);font-size:var(--rd-xs);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;align-self:center}
.rd-rail-meta dd{margin:0;color:var(--rd-ink)}
.rd-cite{font-family:var(--rd-mono,ui-monospace,monospace);font-size:var(--rd-xs);
  word-break:break-all;color:var(--rd-ink-soft)}

/* ── WHO WROTE THIS RENDERING, SAID ONCE PER SURFACE ──────────────────────────
   `span.who` has existed in every translation block from the start and had NO
   base rule: it was only ever styled when scoped (.rend-head, .card-intro,
   .hit, .sig-mark). Inside a context neighbour nothing scoped it, so it
   inherited .tr whole - same family, same size, same weight, same colour as the
   translation - and the translator's name read as the first two words of his
   own sentence. Two shapes carry a translation and each gets the treatment that
   fits it, rather than one rule pretending they are the same block:

     BLOCK  article.rendering > header.rend-head > .who + .when, then p.tr
            - on study passages and verse pages
     INLINE p.tr.small > .who + text
            - in a context neighbour

   Two surfaces are deliberately NOT touched. /surah/n/read already names its
   translators through .sig-mark.diverge .who, in mono at --t-xs, and a second
   opinion about that block belongs to whoever redesigns it. And .who on
   ask.html and library.html names an EDITOR, not a translator; a bare .who rule
   would have followed it there and dressed a signature as a citation, which is
   the reason this is written as two scoped rules and not one loose one. */

/* A - THE BLOCK SHAPE, study passages and verse pages alike. The name already
   sits on its own line above the words - .rend-head .who has carried
   display:block since style.css:765 - and from 40rem up .rendering is a 16ch
   gutter grid that sets the whole header beside the translation. NEITHER IS
   TOUCHED HERE: that side-label grid is the verse page's spine, a column of
   translator names a reader scans down, and flattening it would have bought a
   label line at the cost of the thing that already worked. This restyles the
   NAME only, into the section-label idiom the rest of the page uses. The year
   is left exactly as it is - the block shape already prints it correctly, the
   translator's dates on a verse page and the publication year on a study. */
.rend-head .who{
  font-family:var(--rd-sans);
  font-size:var(--rd-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--rd-ink-soft);
}

/* B - CONTEXT NEIGHBOURS: the name stays on the translation's line and stops
   being part of it. Ink and semibold against --rd-ink-soft prose, the year in
   mono behind it, and a separator so the sentence starts where the attribution
   ends. No added height: sixteen neighbours times five renderings is exactly
   where a label line per rendering would have cost the most. */
.ctx-verse .tr .who,
.sig-mark.diverge .tr .who{
  font-weight:650;
  color:var(--rd-ink);
  font-family:var(--rd-sans);
}
.ctx-verse .tr .when,
.sig-mark.diverge .tr .when{
  margin-inline-start:.4rem;
  font-family:var(--rd-mono,ui-monospace,monospace);
  font-size:var(--rd-xs);
  color:var(--rd-ink-muted);
}
/* The separator sits after the year when there is one and after the name when
   there is not. Where :has() is missing the reader gets one extra middot -
   "Palmer - 1880 - text" - which is legible, not broken. */
.ctx-verse .tr .who::after,
.ctx-verse .tr .when::after,
.sig-mark.diverge .tr .who::after,
.sig-mark.diverge .tr .when::after{
  content:"\00b7";
  margin:0 .4rem;
  color:var(--rd-ink-muted);
  font-weight:400;
}
.ctx-verse .tr .who:has(+ .when)::after,
.sig-mark.diverge .tr .who:has(+ .when)::after{content:"";margin:0}

/* ── PRINT: provenance survives the printer ───────────────────────────────────
   A printed study that has lost its sources is an assertion. The rail is kept
   and placed after the evidence, link targets are expanded so a citation
   survives on paper, and nothing that carries provenance is display:none. */
@media print{
  .rd-header,.rd-footer{display:none}
  .rd-study{display:block}
  /* The sticky rail is UNDONE for paper, explicitly rather than by trusting
     that a print surface never reports 64rem. Sticky is meaningless in print
     and `overflow-y:auto` would silently CLIP a rail taller than its box - and
     what it would clip is the citation and the signing metadata, which is
     exactly what this block exists to keep. */
  .rd-study-rail{margin-top:1.5rem;break-inside:avoid;
    position:static;max-height:none;overflow:visible}
  .rd-rail-card{border:1px solid #999}
  .rd-passage,.rd-layer-derived,.rd-layer-absent,.rd-restatement{break-inside:avoid}
  /* The citation URL and every source link print as text. */
  .attrib a[href]::after,.rd-rail-note a[href]::after{content:" (" attr(href) ")";font-size:.85em}
  a[href^="/"]::after{content:" (aalamin.com" attr(href) ")";font-size:.85em}
  .rd-rail-map a[href^="#"]::after,.crumbs a::after{content:""}
}

/* ── AYAH-LEVEL TRANSLITERATION ───────────────────────────────────────────
   Both schemes ship in the DOM and ONE root attribute decides which is seen.
   The swap is a CSS rule rather than a re-render, so it is instant, needs no
   request, and cannot disagree with what the server sent.

   THE DEFAULT IS THE SIMPLIFIED TRACK AND IT IS THE SERVER-RENDERED ONE: with
   no attribute set and no script running, .tl-din is display:none and the
   simplified line is what a reader gets. Everything below is an upgrade on a
   page that already works. */
.tl{margin:.3rem 0 .75rem}
.tl-track{
  margin:0;
  font-family:var(--rd-sans);
  font-size:var(--rd-sm);
  line-height:var(--rd-lh-snug);
  color:var(--rd-ink-soft);
  font-style:italic;
}
.tl-k{
  display:inline-block;
  margin-inline-end:.5rem;
  font-style:normal;
  font-size:var(--rd-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--rd-ink-muted);
  white-space:nowrap;
}
.tl-din{display:none}
:root[data-translit="din31635"] .tl-simple{display:none}
:root[data-translit="din31635"] .tl-din{display:block}

.tl-head{
  margin:1rem 0 1.25rem;
  padding:.75rem .9rem;
  background:var(--rd-paper-deep);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-r-sm);
}
.tl-toggle{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.tl-btn{
  font:inherit;
  font-size:var(--rd-sm);
  padding:.2rem .6rem;
  color:var(--rd-ink-soft);
  background:var(--rd-card);
  border:1px solid var(--rd-input);
  border-radius:var(--rd-r-xs);
  cursor:pointer;
  transition:color var(--rd-motion),border-color var(--rd-motion);
}
.tl-btn:hover{color:var(--rd-ink)}
.tl-btn[aria-pressed="true"]{
  color:var(--rd-ink);
  border-color:var(--rd-gold-light);
  box-shadow:inset 0 -2px 0 var(--rd-gold-light);
}
.tl-note{
  margin:0;
  font-size:var(--rd-xs);
  line-height:var(--rd-lh);
  color:var(--rd-ink-muted);
  max-width:var(--rd-measure);
}
.tl-note strong{color:var(--rd-ink-soft);font-weight:600}

/* ── STUDY SECTIONS AS NATIVE <details> ───────────────────────────────────
   The disclosure is the element's own, not a script's. Everything here is
   presentation: remove the default marker, draw our own, and make the summary
   read as the panel header it replaces. With CSS off the page is still a
   working set of open/close sections with visible headings. */
.rd-sec > summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  cursor:pointer; list-style:none; position:relative; padding-inline-start:1.4rem;
}
.rd-sec > summary::-webkit-details-marker{display:none}
/* our own marker: a caret that turns. Built from borders so it needs no asset
   and inherits the ink colour in both themes. */
.rd-sec > summary::before{
  content:""; position:absolute; inset-inline-start:0; top:.45em;
  width:.4rem; height:.4rem; border-right:2px solid var(--rd-ink-muted);
  border-bottom:2px solid var(--rd-ink-muted); transform:rotate(-45deg);
  transition:transform var(--rd-motion);
}
.rd-sec[open] > summary::before{transform:rotate(45deg); top:.35em}
.rd-sec > summary:hover::before{border-color:var(--rd-ink)}
.rd-sec > summary:focus-visible{outline:2px solid var(--rd-gold-light); outline-offset:3px}
/* THE STATUS LINE IS THE POINT OF THIS WHOLE CHANGE: it is what a reader gets
   from a section they never open, so it must stay legible rather than fade to
   decoration. */
.rd-sec-status{
  flex:1 1 100%; font-size:var(--rd-sm); line-height:var(--rd-lh-snug);
  color:var(--rd-ink-soft); font-weight:400;
}
.rd-sec-absent{color:var(--rd-ink-muted); font-style:italic}
.rd-sec-group{margin:0}
.rd-sec-grouphead{margin-bottom:.75rem}

.rd-secall{display:flex; gap:.5rem; margin:1rem 0 1.25rem}
.rd-secall-btn{
  font:inherit; font-size:var(--rd-sm); padding:.2rem .6rem;
  color:var(--rd-ink-soft); background:var(--rd-card);
  border:1px solid var(--rd-input); border-radius:var(--rd-r-xs); cursor:pointer;
  transition:color var(--rd-motion),border-color var(--rd-motion);
}
.rd-secall-btn:hover{color:var(--rd-ink); border-color:var(--rd-gold-light)}

/* ── THE PROVENANCE FOLD ──────────────────────────────────────────────────
   Same native mechanism as the study sections, sized down: this sits under a
   translation, so it must read as apparatus and never compete with the text
   above it. The summary carries the rights basis, which is the one part of the
   provenance a reader should not have to click for. */
.attrib-fold > summary{
  cursor:pointer; list-style:none; position:relative;
  padding-inline-start:1.1rem;
  font-size:var(--rd-xs); color:var(--rd-ink-muted);
  line-height:var(--rd-lh-snug);
}
.attrib-fold > summary::-webkit-details-marker{display:none}
.attrib-fold > summary::before{
  content:""; position:absolute; inset-inline-start:.15rem; top:.4em;
  width:.32rem; height:.32rem;
  border-right:1.5px solid var(--rd-ink-muted);
  border-bottom:1.5px solid var(--rd-ink-muted);
  transform:rotate(-45deg); transition:transform var(--rd-motion);
}
.attrib-fold[open] > summary::before{transform:rotate(45deg); top:.3em}
.attrib-fold > summary:hover{color:var(--rd-ink-soft)}
.attrib-fold > summary:focus-visible{outline:2px solid var(--rd-gold-light); outline-offset:2px}
.attrib-fold .attrib{margin-top:.3rem}

/* The scope statement. Said once on a study and once on /how-to-read, and it
   has to read as a description of the platform rather than as an apology for a
   gap - so it is set as a statement, not as a `.note`, and carries no warning
   colour. */
.scope{
  margin:.75rem 0 0;
  font-size:var(--rd-base);
  line-height:var(--rd-lh-relaxed);
  color:var(--rd-ink-soft);
  max-width:var(--rd-measure);
  border-inline-start:2px solid var(--rd-gold-light);
  padding-inline-start:.9rem;
}
.scope strong{color:var(--rd-ink); font-weight:600}
.scope-panel .scope{margin-top:0}

/* ── THE SURROUNDING PASSAGE ──────────────────────────────────────────────
   The neighbours are set BELOW the anchor in weight, not in prominence: they
   are the same kind of thing - verse, renderings, wording band - shown smaller
   so a reader can tell at a glance which verse is the subject and which are
   its context. Nothing here implies the neighbours qualify the anchor. */
.rd-context{background:var(--rd-paper-deep)}
.ctx-verse{
  padding:.6rem 0; border-top:1px solid var(--rd-border);
}
.ctx-verse:first-of-type{border-top:0}
.ctx-verse .ar{font-size:1.15rem; line-height:2; margin:.2rem 0 .4rem}
/* THE NEIGHBOURS READ SMALLER, WHICH IS WHAT THE NOTE ABOVE ALREADY CLAIMED.
   The markup says <p class="tr small"> and the size never arrived: there is no
   generic .small font rule, only .note.small and .sig-mark.diverge .tr.small,
   so .tr's own --t-base won and every context translation rendered at the
   ANCHOR's size. Sixteen neighbours x five renderings at full size is what made
   the study page read as a wall. Stated here in the same rule that sets their
   colour, so the size and the de-emphasis cannot drift apart again. */
.ctx-verse .tr{
  font-size:var(--t-sm);
  line-height:var(--rd-lh);
  margin:.15rem 0; color:var(--rd-ink-soft);
}
.ctx-ref{
  font-size:var(--rd-xs); color:var(--rd-ink-muted); text-decoration:none;
  border-bottom:1px solid var(--rd-border);
}
.ctx-ref:hover{color:var(--rd-ink)}
/* THE ANCHOR IS MARKED BY WHAT SITS BETWEEN THE NEIGHBOURS, not by styling the
   anchor twice: the verse itself is already rendered in full above this block,
   so repeating it here would print it twice. This line says where it sits. */
.rd-context-anchor{
  margin:.5rem 0; padding:.4rem .7rem;
  border-inline-start:3px solid var(--rd-gold-light);
  background:var(--rd-card);
  font-size:var(--rd-sm); color:var(--rd-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFE VISUAL PASS · 2026-09-10 · staged, reversible, additive only.
   Appended rather than edited in place so every rule here can be removed in one
   block and the file returns to exactly what it was. Serif headings and Arabic
   typography are deliberately untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* C1 · METADATA LEGIBILITY. MEASURED, NOT GUESSED. The greys already clear
   WCAG AA for small text - --rd-ink-soft #585f5a is 6.07:1 on the page ground
   #f7f6f1 and 6.50:1 on a card, --rd-ink-muted #646a65 is 5.12 and 5.49. So
   COLOUR was not the deficit and darkening alone would have been theatre.
   SIZE was: --rd-xs is .75rem = 12px, and it carries the monospaced metadata,
   which reads smaller than serif at the same pixel height. These rules lift the
   metadata to 13px and take the muted grey to #474e49 (7.91:1 / 8.48:1), which
   is a legibility change on top of a standard already met rather than a
   compliance fix. Scoped to the metadata classes; --rd-xs itself is untouched,
   so nothing else on the page moves. */
:root{ --rd-meta:.8125rem; --rd-ink-meta:#474e49; }
.rd-cite,
.rd-rail-meta dt,
.sig-mark.diverge .tr .when,
.ctx-verse .tr .who,
.rd-eyebrow{ font-size:var(--rd-meta); }
.rd-cite{ color:var(--rd-ink-meta); }
.sig-mark.diverge .tr .when{ color:var(--rd-ink-meta); }

/* C2 · ACCORDION HEADINGS AS ROWS WITH CHEVRONS. An underlined heading reads as
   a link and invites a click that navigates; a chevron says "this opens here".
   The marker is removed on both the modern and the WebKit pseudo-element, and
   the chevron is a CSS triangle rather than a glyph so no font has to carry it. */
.panel.rd-sec > summary{
  text-decoration:none;
  display:flex; align-items:center; gap:.55rem;
  padding-block:.5rem;
  cursor:pointer;
}
.panel.rd-sec > summary::-webkit-details-marker{ display:none; }
.panel.rd-sec > summary{ list-style:none; }
.panel.rd-sec > summary::marker{ content:""; }
.panel.rd-sec > summary .lname{ text-decoration:none; }
.panel.rd-sec > summary::before{
  content:""; flex:0 0 auto;
  width:0; height:0;
  border-left:.36rem solid currentColor;
  border-top:.28rem solid transparent;
  border-bottom:.28rem solid transparent;
  transform:rotate(0deg); transform-origin:35% 50%;
  transition:transform .15s ease;
  opacity:.75;
}
.panel.rd-sec[open] > summary::before{ transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){
  .panel.rd-sec > summary::before{ transition:none; }
}

/* C4 · MOBILE: THE VERSION CARD GOES LAST. On a phone the provenance card sat
   between the reader and the study. It is still in the same place in the DOM -
   this is a flex order change inside the existing column, so screen-reader and
   tab order follow the visual order and nothing is duplicated or hidden. */
@media (max-width: 63.99rem){
  /* .rd-study-rail is ALREADY display:flex / column and already stacks after
     .rd-study-main at this width, so this is one order property inside an
     existing flex context - not a new layout. The card keeps its place in the
     DOM, so tab order and screen-reader order follow the visual order. */
  .rd-study-rail > .rd-version-card{ order:99; }
}

/* C5 · CITATION. The raw URL wrapped mid-token with word-break:break-all, which
   is unreadable and un-selectable in practice. The formatted citation now reads
   as a sentence and the URL is carried by a copy button instead. */
.rd-cite-block{ display:flex; flex-direction:column; gap:.5rem; }
.rd-cite-formatted{ font-family:inherit; font-size:var(--rd-meta);
  color:var(--rd-ink-meta); word-break:normal; line-height:1.5; }
.rd-cite-copy{
  align-self:flex-start;
  font:inherit; font-size:var(--rd-meta);
  padding:.3rem .7rem; border:1px solid var(--rd-ink-muted, #646a65);
  border-radius:.25rem; background:transparent; color:var(--rd-ink, #17201d);
  cursor:pointer;
}
.rd-cite-copy:hover{ background:var(--rd-paper-deep, #eeece3); }
.rd-cite-copy:focus-visible{ outline:2px solid var(--rd-ink, #17201d); outline-offset:2px; }
.rd-cite-copy[data-copied="1"]{ border-color:var(--rd-ink, #17201d); }

/* ═══════════════════════════════════════════════════════════════════════════
   VERSE NAV · 2026-09-11 · the verse view's prev/next, app/templates/_verse_nav.html
   Appended as one block, namespaced rd-vnav, overriding no existing selector:
   removing this block and the macro call returns the page to what it was.

   Built from the verse view's OWN tokens (--paper, --paper-raised,
   --paper-inset, --ink, --ink-soft, --f-mono) rather than the rd- set, because
   the thing it replaces - the pager - is drawn in them, and the bar should read
   as that same apparatus voice made large, not as new chrome. No colour literal
   is introduced.

   EDGES ARE --ink-soft, NOT --line-strong, BECAUSE contrast_gate SAID SO. The
   first build drew the button outlines and the bar's top rule in --line-strong,
   #C9BEA4 on the bar's #FFFFFF: 1.84:1, under WCAG 1.4.11's 3:1 for the edge
   that tells a reader where a control is. --ink-soft measures 6.07:1 on the bar,
   5.57:1 on the button fill and 5.14:1 on the hover fill.
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-vnav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--paper-raised);
  border-top:1px solid var(--ink-soft);
}
/* The pair is a centred control, not an alignment to the text column: tying it
   to main's width would copy main's max-width and padding into a second place,
   and the first change to either would split them silently. */
.rd-vnav-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  width:min(40rem,100%);margin-inline:auto;
  padding:.5rem clamp(.5rem,3vw,1rem);box-sizing:border-box;
}
.rd-vnav a{
  display:flex;align-items:center;min-height:3.25rem;padding:0 1rem;
  font-family:var(--f-mono);font-size:1.125rem;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;
  background:var(--paper);border:1px solid var(--ink-soft);
  border-radius:var(--rd-r-sm);
}
.rd-vnav-prev{justify-content:flex-start}
.rd-vnav-next{justify-content:flex-end}
.rd-vnav a:hover{background:var(--paper-inset)}
.rd-vnav a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The page reserves exactly the bar's height below the footer - the link's
   min-height, the inner padding above and below, and the 1px top rule - so the
   last line of the page scrolls clear of the bar rather than under it. :has is
   already relied on by style.css (.zone-a:has(>.locator)). */
body:has(.rd-vnav){padding-bottom:calc(3.25rem + 1rem + 1px)}
@media print{
  .rd-vnav{display:none}
  body:has(.rd-vnav){padding-bottom:0}
}

/* ── A279 (board order A279): the front door's language line, "Read in" strip, featured-verse tabs, counts band and
      credits line. Existing tokens only: no new colour, face or size enters the palette. Phones stack; chips wrap. ── */
.rd-hero-langs{font-size:var(--rd-lg);line-height:var(--rd-lh-relaxed);color:var(--rd-ink);margin:0 0 1.5rem;max-width:var(--rd-measure)}
.rd-langs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1.75rem}
.rd-langs-k{font-size:var(--rd-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-ink-muted);margin-right:.25rem}
.rd-chip-f{display:inline;margin:0}
.rd-chip{display:inline-block;font:inherit;font-size:var(--rd-sm);line-height:1.2;color:var(--rd-ink);background:var(--rd-card);border:1px solid var(--rd-border);border-radius:999px;padding:.4rem .8rem;cursor:pointer;text-decoration:none}
.rd-chip:hover,.rd-chip:focus-visible{border-color:var(--rd-gold)}
.rd-chip--more{border-style:dashed;color:var(--rd-gold);font-weight:600}
.rd-tabs{margin:0 0 1rem}
.rd-tab-in{position:absolute;opacity:0;pointer-events:none}
.rd-tab-row{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid var(--rd-border);margin:0 0 .75rem}
.rd-tab{font-size:var(--rd-sm);padding:.4rem .6rem;color:var(--rd-ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.rd-tab-p{display:none}
.rd-tab-tr{font-family:var(--rd-serif);font-size:var(--rd-lg);line-height:var(--rd-lh-snug);margin:0 0 .35rem}
.rd-tab-by{font-size:var(--rd-xs);color:var(--rd-ink-muted);margin:0}
.rd-tab-note{font-size:var(--rd-sm);color:var(--rd-ink-soft);margin:.35rem 0}
.rd-tabs > .rd-tab-in:focus-visible ~ .rd-tab-row{outline:2px solid var(--rd-gold);outline-offset:2px}
.rd-tab-in:nth-of-type(1):checked ~ .rd-tab-row .rd-tab:nth-of-type(1),
.rd-tab-in:nth-of-type(2):checked ~ .rd-tab-row .rd-tab:nth-of-type(2),
.rd-tab-in:nth-of-type(3):checked ~ .rd-tab-row .rd-tab:nth-of-type(3),
.rd-tab-in:nth-of-type(4):checked ~ .rd-tab-row .rd-tab:nth-of-type(4),
.rd-tab-in:nth-of-type(5):checked ~ .rd-tab-row .rd-tab:nth-of-type(5){color:var(--rd-ink);border-bottom-color:var(--rd-gold)}
.rd-tab-in:nth-of-type(1):checked ~ .rd-tab-p--1,.rd-tab-in:nth-of-type(2):checked ~ .rd-tab-p--2,
.rd-tab-in:nth-of-type(3):checked ~ .rd-tab-p--3,.rd-tab-in:nth-of-type(4):checked ~ .rd-tab-p--4,
.rd-tab-in:nth-of-type(5):checked ~ .rd-tab-p--5{display:block}
.rd-band{background:var(--rd-paper-deep);border-top:1px solid var(--rd-border);border-bottom:1px solid var(--rd-border);margin:2.5rem 0 0;padding:1.75rem 0 1rem}
.rd-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.rd-stat{margin:0;padding-left:1rem;border-left:1px solid var(--rd-border)}
.rd-stat:first-child{border-left:0;padding-left:0}
.rd-stat b{display:block;font-family:var(--rd-serif);font-weight:500;font-size:var(--rd-2xl);line-height:var(--rd-lh-tight)}
.rd-stat span{font-size:var(--rd-sm);color:var(--rd-ink-soft)}
.rd-band-note{font-size:var(--rd-xs);color:var(--rd-ink-muted);margin:1rem 0 0}
.rd-credits{font-size:var(--rd-sm);line-height:var(--rd-lh-relaxed);color:var(--rd-ink-soft);border-top:1px solid var(--rd-border);margin:3rem 0 0;padding:1.25rem 0 0}
.rd-credits a{color:var(--rd-gold)}
@media (max-width:47.99rem){
  .rd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-stat{border-left:0;padding-left:0}
}

/* ── A279 amendments 1-3: the surah pages, the footer, /how-to-read. Existing tokens only. ── */
.rd-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.5rem 0 1.5rem}
.rd-fact{font-size:var(--rd-sm);background:var(--rd-card);border:1px solid var(--rd-border);border-radius:999px;padding:.3rem .75rem}
.rd-pw{margin:0 0 1.5rem}
.rd-viewswitch{margin:0 0 .5rem}
.rd-viewhelp{margin:0 0 1.25rem}
.rd-surahtop{margin-top:1.5rem}
.rd-differ-more{margin-top:1rem}
.rd-differ-more > summary{cursor:pointer;color:var(--rd-gold);font-weight:600}
.rd-fold{background:var(--rd-card);border:1px solid var(--rd-border);border-radius:var(--rd-r-sm);padding:1rem 1.25rem;margin:1rem 0 0}
.rd-fold > summary{cursor:pointer;font-family:var(--rd-serif);font-size:var(--rd-lg)}
.rd-fold > .panel{margin:1rem 0 0}
.rd-footer-grid--cols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2rem}
.rd-footer-col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.rd-footer-col a{font-size:var(--rd-sm);color:var(--rd-dark-ink);text-decoration:none;border-bottom:1px solid transparent}
.rd-footer-col a:hover{border-bottom-color:var(--rd-gold-light)}
.rd-footer-h{font-size:var(--rd-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-dark-soft);margin:0 0 .25rem}
.rd-footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid rgba(233,231,225,.16)}
.rd-footer-bottom p{margin:0;font-size:var(--rd-xs);color:var(--rd-dark-soft)}
.rd-toc{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.rd-toc a{font-size:var(--rd-sm);border:1px solid var(--rd-border);background:var(--rd-card);border-radius:999px;padding:.35rem .8rem;text-decoration:none;color:var(--rd-ink)}
.rd-htr{margin:3rem 0 0}
.rd-htr-k{font-size:var(--rd-xs);letter-spacing:.12em;color:var(--rd-gold);margin:0}
.rd-htr h2{margin-top:.25rem}
.rd-htr-lead{color:var(--rd-ink-soft);margin:0 0 1.25rem}
.rd-anat{background:var(--rd-card);border:1px solid var(--rd-border);border-radius:var(--rd-r-sm);padding:.5rem 1.5rem .5rem 3rem;margin:0}
.rd-anat li{padding:.9rem 0;border-bottom:1px solid var(--rd-border)}
.rd-anat li:last-child{border-bottom:0}
.rd-anat h3{margin:0 0 .25rem;font-size:var(--rd-lg)}
.rd-anat p{margin:0}
.rd-labels{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.rd-label{background:var(--rd-card);border:1px solid var(--rd-border);border-radius:var(--rd-r-sm);padding:1rem 1.1rem}
.rd-label p{margin:.5rem 0 0}
@media (max-width:47.99rem){
  .rd-footer-grid--cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-labels{grid-template-columns:1fr}
}
/* A279 capture fixes: space above the language strip; the counts band full width; the fold title's tag spaced. */
.rd-langs{margin-top:1rem}
.rd-band{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.rd-fold > summary .tier-tag{margin-left:.6rem}

/* A280 (board order A280, option B): the marks are off by default; the checkbox turns them on (no script). */
.tr-own-ctl { margin: var(--rd-xs) 0 var(--rd-sm); display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; }
.tr-own-ctl label { cursor: pointer; color: var(--rd-ink-soft); }
.tr-own-cb { width: 1.05em; height: 1.05em; accent-color: var(--rd-gold); margin: 0; }
.tr-own-hide, .tr-own-legend { display: none; }
.tr-own-legend { flex-basis: 100%; margin: 0; }
.panel:has(.tr-own-cb:checked) .tr-own-show { display: none; }
.panel:has(.tr-own-cb:checked) .tr-own-hide { display: inline; }
.panel:has(.tr-own-cb:checked) .tr-own-legend { display: block; }
.panel:has(.tr-own-cb:checked) span.tr-own { text-decoration: underline; text-decoration-color: var(--rd-gold);
  text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* VERSE-UX (Anwar, 4 Oct 2026): the verse page's top row and spacing, so the translations sit on the first screen. Layout only:
   no rule here adds, removes or moves a word. Scoped to the verse page: its locator (.locator.vux) and its verse zone (.zone-verse,
   which only the verse page has). The zone divs keep their classes exactly, so every gate's zone marker still matches. */
.locator.vux{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem}
.locator.vux > .vv-eyebrow, .locator.vux > .crumbs, .locator.vux > .vv-credit{flex-basis:100%}
.locator.vux .lang-pick{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:0}
.locator.vux .lang-pick .rdr-ctl{flex-direction:row;align-items:center;gap:.5rem}
.locator.vux .lang-pick .rdr-select{max-width:9.5rem}
.locator.vux .toggle.lenses{margin:0}
.locator.vux .toggle.lenses a{padding:.3rem .5rem;font-size:.68rem;letter-spacing:.02em}
main.reading:has(.locator.vux){padding-top:var(--s3)}
.zone-verse > .plate{padding-top:var(--s2);padding-bottom:var(--s2);margin-bottom:0}
.zone-verse + .zone-renderings > .panel:first-child{margin-top:var(--s2);padding-top:var(--s2)}
.zone-renderings .panel > .L-verdict:has(+ .tr-own-ctl){display:inline-block;margin-right:1.25rem}
.zone-renderings .panel > .L-verdict + .tr-own-ctl{display:inline-flex}
.bism-fold > summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none}
.bism-fold > summary::-webkit-details-marker{display:none}
.bism-fold > summary::before{content:"\25B8";color:var(--rd-ink-soft);font-size:.9em;transition:transform .15s}
.bism-fold[open] > summary::before{transform:rotate(90deg)}
.bism-fold > summary .bism{display:block;flex:1;line-height:1.7}
.zone-verse .bism-fold{margin:0}
.zone-verse .ar.big{margin-top:var(--s1);margin-bottom:var(--s2)}

/* STUDY-UX (Anwar's rulings, 5 Oct 2026): the once-per-page Tanzil notice at the foot of the page, open, in small type; the
   one-line edition credit near the first Arabic. Layout only - no rule adds, removes or moves a word. */
.page-notice{margin:var(--s4) 0 var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.page-notice .attrib-notice{font-size:var(--t-xs);line-height:1.5;color:var(--ink-soft, inherit);white-space:pre-line;margin:0}
.attrib.src-credit{font-size:var(--t-xs);margin:var(--s1) 0 0}

/* READER-BATCH-1 (Anwar's rulings, 5 Oct 2026): the non-reading sections behind their own headings; the bismillah note's label.
   Layout only - no rule adds, removes or moves a word. */
details.rb1-zone-fold > summary, details.rb1-sec-fold > summary{cursor:pointer;list-style:none}
details.rb1-zone-fold > summary::-webkit-details-marker, details.rb1-sec-fold > summary::-webkit-details-marker{display:none}
details.rb1-zone-fold > summary h2, details.rb1-sec-fold > summary h2{display:inline}
details.rb1-zone-fold > summary::after, details.rb1-sec-fold > summary::after{content:" \25B8";color:var(--rd-ink-soft)}
details.rb1-zone-fold[open] > summary::after, details.rb1-sec-fold[open] > summary::after{content:" \25BE"}
details.rb1-fold{margin:var(--s1) 0}
details.rb1-fold > summary{cursor:pointer;font-size:var(--t-xs);color:var(--rd-ink-soft)}
.bism-fold > summary .bism-label{font-size:var(--t-xs);color:var(--rd-ink-soft);white-space:nowrap}