/* ===========================================================================
   reader.css -- immersive book reader: scrollytelling scene bands + reading flow
   (progress bar + chapter-dot wayfinder + scroll-linked scene reveal).
   Linked ONLY on blog/classified2.html (book detail pages), after the base
   bundle, so it stays out of the global CSS. Builds on tokens.css / effects.css
   (reuses --accent, --fg-*, --bg-*, --border-soft, --radius-*, --shadow-*,
   --fs-*, --ff-display/body, .dits-reveal, .dits-motif, .dits-container).
   =========================================================================== */

/* ---- Masthead: cover thumb + read-time + action buttons + intro video ---- */
.dits-reader__masthead {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  flex-wrap: wrap;
  padding-block: clamp(20px, 4vh, 40px);
}
.dits-reader__cover {
  flex: 0 0 auto;
  width: clamp(96px, 13vw, 132px);
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
}
.dits-reader__cover img { width: 100%; height: 100%; object-fit: cover; }
.dits-reader__meta {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dits-reader__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
}
.dits-reader__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dits-reader__video { margin-block: clamp(20px, 4vh, 40px); }
.dits-reader__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.dits-reader__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Reading flow: full width so scene bands run edge-to-edge ---- */
.dits-reader { width: 100%; }
.dits-reader__block { margin-block: clamp(36px, 8vh, 92px); scroll-margin-top: 16px; }
.dits-reader__block:first-child { margin-block-start: clamp(20px, 4vh, 36px); }

/* ---- Editorial scene: a SHARP framed figure paired with the reading column in
   an asymmetric split that alternates sides per scene. The framed photo gets a
   gentle scroll-scrubbed parallax via the native view timeline -- continuous and
   tactile, NOT a fade; with no support / reduced-motion it's simply a crisp
   framed photo. Replaces the old full-bleed scrim + sticky band (which read as
   2020 scrollytelling). ---- */
.dits-scene2 {
  display: grid;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  grid-template-columns: 1.06fr .94fr;
}
.dits-scene2--imgright { grid-template-areas: "text media"; }
.dits-scene2--imgleft  { grid-template-areas: "media text"; }
.dits-scene2__media {
  grid-area: media;
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  isolation: isolate;
}
.dits-scene2__media img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;             /* overscan gives the scroll parallax room */
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.dits-scene2__text { grid-area: text; }
.dits-scene2__heading {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 60, "WONK" 0;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--fg-text);
  margin: 0 0 .55em;
  text-wrap: balance;
  max-width: 20ch;
}
/* a short accent rule under the heading -- an editorial signature */
.dits-scene2__heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: .5em;
  border-radius: 3px;
  background: var(--accent);
}
.dits-scene2 .dits-reader__prose {
  margin-inline: 0;
  padding-inline: 0;
  max-width: 58ch;
}

/* Scroll-scrubbed parallax: the framed photo glides as the block crosses view. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dits-scene2__media { view-timeline-name: --dits-scene2; }
    .dits-scene2__media img {
      animation: dits-scene2-parallax linear both;
      animation-timeline: --dits-scene2;
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes dits-scene2-parallax {
  from { transform: translateY(-8%); }
  to   { transform: translateY(8%); }
}

/* Stack to a single column on narrow screens (image first, then text). */
@media (max-width: 760px) {
  .dits-scene2,
  .dits-scene2--imgleft,
  .dits-scene2--imgright {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text";
  }
  .dits-scene2__media { aspect-ratio: 16 / 10; }
}

/* ---- Reading column: comfortable measure on the theme surface ---- */
.dits-reader__prose {
  max-width: 64ch;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
  font-family: var(--ff-reading);
  font-size: calc(var(--fs-lg) + 1px);
  line-height: 1.75;
  color: var(--fg-text);
  /* Editorial polish: kerning, ligatures, contextual alternates and
     old-style figures so dates ("570 CE") and refs ("33:40") flow as text. */
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1, "onum" 1;
  text-rendering: optimizeLegibility;
}
.dits-reader__figure + .dits-reader__prose { padding-block-start: clamp(24px, 5vh, 48px); }

.dits-reader__prose p { margin: 0 0 1.05em; }
.dits-reader__prose p:last-child { margin-bottom: 0; }
.dits-reader__prose h2,
.dits-reader__prose h3,
.dits-reader__heading {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 600;
  color: var(--fg-text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.dits-reader__prose h2 { font-size: var(--fs-2xl); margin: 1.5em 0 .4em; }
.dits-reader__prose h3 { font-size: var(--fs-xl); margin: 1.3em 0 .3em; }
.dits-reader__prose ul,
.dits-reader__prose ol { margin: 0 0 1.05em; padding-inline-start: 1.4em; }
.dits-reader__prose li { margin: .3em 0; }
.dits-reader__prose li::marker { color: var(--accent); }
.dits-reader__prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dits-reader__prose strong,
.dits-reader__prose b { font-weight: 700; }
.dits-reader__prose blockquote {
  margin: 1.6em 0;
  padding: .1em 0 .1em 1.2em;
  border-inline-start: 3px solid var(--accent);
  color: var(--fg-text);
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 40, "wght" 420;
  font-size: 1.16em;
  font-style: italic;
  line-height: 1.5;
}

/* Lede: the opening paragraph is a touch larger and lighter so it introduces
   the chapter -- a clean, modern intro (no drop-cap / small-caps book flourish,
   which read as "traditional"). */
.dits-reader__lead > p:first-of-type {
  font-size: 1.18em;
  line-height: 1.66;
  letter-spacing: -0.004em;
  color: var(--fg-text);
}

/* ---- Figure block (book 5 name-cards): foreground, sharp, full colour ---- */
.dits-reader__figure {
  margin: 0 auto;
  max-width: 560px;
  padding-inline: clamp(20px, 4vw, 32px);
  text-align: center;
}
.dits-reader__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  background: var(--bg-surface);
}

/* ---- Reading-only block: a motif divider then a centred heading + column ---- */
.dits-reader__heading {
  font-size: var(--fs-2xl);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto .7em;
}
/* A short accent rule under the section heading -- a small editorial signature
   that keeps headings from reading as a plain bold line of text. */
.dits-reader__heading::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: .55em auto 0;
  border-radius: 3px;
  background: var(--accent);
}
.dits-reader__divider { margin-block: clamp(20px, 4vh, 40px); opacity: .5; }

/* ── Become-a-Muslim hub (.text page via prose_blocks) ──────────────────────
   Its authored illustrations are mismatched stock photos (a gold/magenta Qur'an,
   green dollar bills, a daylight mosque…). Duotone them to the sky-blue theme so
   the set reads as one designed piece -- the same recolour spirit as the book
   reader's scene photos. A deep-navy base shows through the shadows; the filter
   maps the image's tones onto the brand blue. Scoped to .dits-bm so book 5's
   full-colour calligraphy figures elsewhere stay untouched. */
.dits-bm .dits-reader__figure { max-width: 660px; }
.dits-bm .dits-reader__figure img {
  background: #0a2740;
  filter: grayscale(1) sepia(1) hue-rotate(168deg) saturate(2.15) brightness(1.04) contrast(1.05);
  transition: filter .5s var(--ease-out, ease), transform .5s var(--ease-out, ease);
}
/* On hover the duotone eases back toward true colour -- a quiet reveal. */
.dits-bm .dits-reader__figure:hover img {
  filter: grayscale(.15) sepia(.1) hue-rotate(8deg) saturate(1.15) brightness(1.02) contrast(1.02);
}

/* ---- "Continue the seven" ---- */
.dits-reader__more {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-soft);
}
.dits-reader__more-head { text-align: center; margin-bottom: 28px; }
.dits-reader__more-title {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 600;
  font-size: clamp(28px, 3.4vw, 36px);
  margin: 0 0 6px;
  color: var(--fg-text);
}
.dits-reader__more-sub { color: var(--fg-muted); margin: 0; }

@media (max-width: 640px) {
  .dits-reader__masthead { gap: 16px; }
  .dits-reader__actions { width: 100%; }
  .dits-reader__actions > * { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
   SCROLLYTELLING CHROME -- turns the static page into a scroll-driven, reader-
   paced experience: a reading-progress bar, a chapter-dot rail that tracks and
   jumps, and scene visuals that reveal + drift as you scroll. Everything is
   progressive: with no scroll-driven-animation support or reduced-motion, the
   page stays fully readable and content is untouched (presentation only).
   =========================================================================== */

/* (Smooth anchor scrolling lives in base.css, gated to no-preference so
   reduced-motion users get instant chapter jumps.) */

/* ---- Reading-progress bar (fills as you move through the book) ---- */
.dits-reader__progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .dits-reader__progress {
    animation: dits-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes dits-progress { to { transform: scaleX(1); } }

/* ---- Chapter-dot rail: one dot per block, active dot tracks the read position,
   click jumps. A modern in-page wayfinder, not a table of contents. ---- */
.dits-chapters {
  position: fixed;
  inset-inline-end: clamp(10px, 1.8vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
}
.dits-chapters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.dits-chapters__item { margin: 0; }
.dits-chapters__dot {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fg-muted) 50%, transparent);
  background: transparent;
  transition: border-color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.dits-chapters__dot:hover,
.dits-chapters__dot:focus-visible { border-color: var(--accent); outline: none; }
.dits-chapters__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}
.dits-chapters__label {
  position: absolute;
  inset-inline-end: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  max-width: 42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  color: var(--fg-text);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease-out),
              transform .22s var(--ease-out),
              visibility .22s;
}
.dits-chapters__dot:hover .dits-chapters__label,
.dits-chapters__dot:focus-visible .dits-chapters__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* The rail is a desktop wayfinder; on narrow screens the progress bar carries it. */
@media (max-width: 900px) {
  .dits-chapters { display: none; }
}


/* (The old blur -> focus LINE REVEAL was removed in the 2026 reader rebuild:
   kinetic blur on reading copy reads dated and hurts legibility. Headings, the
   lede and pull-quotes now render crisp; depth comes from the scroll-scrubbed
   scene parallax above. reader.js no longer splits text into per-line spans.) */

/* ===========================================================================
   DIMENSIONAL COVER HERO  —  flagship 2026 hero for book detail pages.
   A sharp, sky-recoloured Islamic star-tile depth layer (NO blur, per brand
   rule), a 3D pointer-reactive cover with a live specular sheen, and a kinetic
   Fraunces title that settles its optical size + weight on load. Built on the
   existing tokens + effects (.dits-aurora / .dits-noise / .dits-eyebrow /
   .dits-btn) and the bento duotone recolour recipe. Every motion is gated on
   prefers-reduced-motion and pointer:fine; with JS/anim off it degrades to a
   clean, fully static two-column hero. Presentation only.
   =========================================================================== */
.dits-bookhero {
  position: relative;
  padding-block: clamp(28px, 6vh, 76px);
  margin-bottom: clamp(8px, 3vh, 28px);
}
.dits-bookhero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  column-gap: clamp(24px, 5vw, 76px);
  row-gap: 18px;
  grid-template-columns: minmax(0, 1.04fr) minmax(260px, .96fr);
  grid-template-areas:
    "eyebrow stage"
    "title   stage"
    "meta    stage"
    "actions stage";
}
.dits-bookhero__eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
.dits-bookhero__title   { grid-area: title; }
.dits-bookhero__meta    { grid-area: meta; }
.dits-bookhero__actions { grid-area: actions; align-self: start; }
.dits-bookhero__stage   { grid-area: stage; }

/* ---- Kinetic display title (variable-font settle, not a fade) ---- */
.dits-bookhero__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 60, "WONK" 0;
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  text-wrap: balance;
  background: linear-gradient(150deg, var(--fg-text) 28%,
              color-mix(in srgb, var(--accent-strong) 72%, var(--fg-text)));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .dits-bookhero__title { animation: dits-bookhero-settle 1.05s var(--ease-out) both; }
}
@keyframes dits-bookhero-settle {
  from { font-variation-settings: "opsz" 24, "wght" 330, "SOFT" 0, "WONK" 0; }
  to   { font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 60, "WONK" 0; }
}

/* ---- Read-time badge + action buttons ---- */
.dits-bookhero__meta { display: flex; }
.dits-bookhero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 600;
}
.dits-bookhero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Star-tile medallion: a SHARP, sky-recoloured Islamic star tile centred
   behind the cover so the book floats on its heritage. A soft sky halo sits
   under it; both are radially masked so the museum ground dissolves (no blurred
   photo) and the medallion drifts in parallax against the cursor. ---- */
.dits-bookhero__halo {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: 50%; inset-inline-start: 50%;
  width: 152%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--accent-soft) 85%, transparent),
              color-mix(in srgb, var(--accent-soft) 18%, transparent) 56%, transparent 72%);
  opacity: .75;
}
.dits-bookhero__motif {
  position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: 50%; inset-inline-start: 50%;
  width: min(146%, 540px); aspect-ratio: 1; translate: -50% -50%;
  transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
  background: var(--motif) center / contain no-repeat;
  /* effects.css bento duotone recipe → brand sky-blue */
  filter: grayscale(1) sepia(1) hue-rotate(168deg) saturate(2.5) brightness(.98) contrast(1.06);
  mix-blend-mode: multiply;
  opacity: .5;
  -webkit-mask-image: radial-gradient(54% 54% at 50% 50%, #000 40%, transparent 74%);
          mask-image: radial-gradient(54% 54% at 50% 50%, #000 40%, transparent 74%);
  transition: transform .4s var(--ease-out);
}
[data-theme="dark"] .dits-bookhero__halo,
:root:not([data-theme="light"]) .dits-bookhero__halo { opacity: .5; }
[data-theme="dark"] .dits-bookhero__motif,
:root:not([data-theme="light"]) .dits-bookhero__motif {
  mix-blend-mode: screen; opacity: .42;
}

/* ---- 3D-tilt cover stage ---- */
.dits-bookhero__stage {
  position: relative;
  perspective: 1200px;
  isolation: isolate;
  display: grid; place-items: center;
  min-height: clamp(300px, 42vw, 470px);
}
.dits-bookhero__cover {
  position: relative; z-index: 2; margin: 0;
  width: clamp(220px, 31vw, 348px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg),
              0 40px 80px -42px color-mix(in srgb, var(--accent-strong) 55%, transparent);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change: transform;
}
.dits-bookhero__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* live specular sheen follows the pointer */
.dits-bookhero__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(40% 52% at var(--gx, 50%) var(--gy, 8%),
              rgba(255,255,255,.55), rgba(255,255,255,.12) 38%, transparent 66%);
  mix-blend-mode: soft-light; opacity: .92;
  transition: background .2s var(--ease-out);
}
.dits-bookhero__edge {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* soft contact shadow on the floor */
.dits-bookhero__floor {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 84%; translate: -50% -50%;
  width: 60%; height: 36px; border-radius: 50%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--accent-strong) 38%, transparent), transparent);
  filter: blur(12px); opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  .dits-bookhero__cover { transition: none; }
}

/* ---- Responsive: stack to a centred column ---- */
@media (max-width: 860px) {
  .dits-bookhero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "stage" "meta" "actions";
    justify-items: center; text-align: center;
  }
  .dits-bookhero__title { max-width: 18ch; }
  .dits-bookhero__stage { margin-block: 10px 4px; }
  .dits-bookhero__actions { justify-content: center; }
}
@media (max-width: 420px) {
  .dits-bookhero__actions { width: 100%; }
  .dits-bookhero__actions > * { flex: 1 1 auto; justify-content: center; }
}