/* ==========================================================================
   reader.css · the case-study reading view (the "account page" side of the brand)
   Owner: Case Study Bot. Needs case-tokens.css + blocks.css. JS: reader.js.

   Phone (< 64em): one comfortable column, full-bleed media, a solid bottom dock
     (back to work + contents sheet + % read), a 3px progress line.
   Desktop (≥ 64em): chapter rail on the left (contents, progress, Present),
     wider media and margin notes inside the blocks.
   No glass here (case bodies stay solid; glass.css rule). Transform/opacity only.

   Hooks for the /work card → case transition (owned by Portfolio Site Bot):
     [data-cs-hero]  the cover figure (or img); its <img> is named case-cover when <html data-cs-vt> is set (v0.3.5)
     [data-cs-title] the h1;          gets view-transition-name from --cs-title-vt (none while Present is open or on its copies, v0.3.6)
     document event  "csreader:ready" (detail: { root, hero, title }) after init.
   ========================================================================== */

/* sticky needs a non-scrolling body: the site sets body{overflow-x:hidden}; clip keeps the
   no-horizontal-scroll behaviour without making body a scroll container. Scoped to reader pages. */
html:has(.cs-reader) body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html:has(.cs-reader) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { html:has(.cs-reader) { scroll-behavior: auto; } }

/* The live site nav (styles.css .navbar, fixed, top 12px) ends 68px (desktop) to 88px (phone) down,
   taller than base --nav-h. Until PSB exposes a base token for it, the reader clears 96px. */
.cs-reader {
  --cs-nav-clear: 96px;
  /* legacy `section`/`main` rules must not leak in */
  display: block; position: relative; width: 100%; margin: 0; background: var(--about-bg, var(--cs-bg)); color: var(--about-text, var(--cs-text));
  font: 400 var(--about-body-size, var(--cs-t-body))/var(--about-body-leading, var(--cs-t-body-lh)) var(--about-face-body, var(--cs-font-body)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.cs-reader *, .cs-reader *::before, .cs-reader *::after { box-sizing: border-box; }
.cs-reader-grid { display: block; max-width: calc(var(--cs-read-wide) + var(--cs-rail-w) + 8rem); margin: 0 auto; padding: 0 var(--about-gutter, var(--cs-gutter)); }
.cs-flow { min-width: 0; padding-bottom: var(--cs-space-2xl); }

/* the site nav floats over the page top: the cover and the rail start below it */
.cs-reader .cs-b--cover { padding-top: var(--about-cover-pad-top, calc(var(--cs-nav-clear) + var(--cs-space-xl))); }

[data-cs-hero] { view-transition-name: none; }   /* the figure (plate) stays out of the card morph */
/* the one image name: case-cover on the hero <img> only (TurboTax puts data-cs-hero on the img itself). Not while Present
   is open and never on Present's .cs-slide copies, so a page never has two. --cs-hero-vt is kept but names nothing. */
html[data-cs-vt]:not(.csp-open) [data-cs-hero]:not(.cs-slide [data-cs-hero]) .cs-media img,
html[data-cs-vt]:not(.csp-open) img[data-cs-hero]:not(.cs-slide img) { view-transition-name: case-cover; }
[data-cs-title] { view-transition-name: var(--cs-title-vt, none); }
/* like the hero (efb4c51): no title name while Present is open, and never on Present's slide copies or anything in its deck */
html.csp-open [data-cs-title], .cs-slide [data-cs-title], .csp [data-cs-title] { view-transition-name: none; }

/* ---- progress line (top edge, above the floating site nav) ---- */
.cs-progress { position: fixed; left: 0; right: 0; top: 0; height: var(--rd-progress-h); z-index: var(--rd-progress-z); pointer-events: none; background: var(--rd-progress-track); }
.cs-progress span { display: block; height: 100%; background: var(--rd-progress-fill); transform-origin: 0 50%; transform: scaleX(var(--cs-p, 0)); }

/* ---- desktop chapter rail ---- */
.cs-toc { display: none; }
.cs-toc a, .cs-dock a, .cs-toc-sheet a { color: inherit; text-decoration: none; }
.cs-back { display: inline-flex; align-items: center; gap: var(--rd-back-gap); min-height: var(--rd-back-min-h); font: var(--rd-back-weight) var(--rd-back-size)/1 var(--rd-back-face); color: var(--rd-back-ink) !important; }
.cs-back:hover { color: var(--rd-back-ink-hover) !important; }
/* v0.3.2 back A (Shah OK 10:03am Oct 29): "All work" above the cover eyebrow, phone and tablet only; on desktop the rail
   carries the same link, so one is enough. 44px hit area, pulled back with negative margins so the cover rhythm is unchanged. */
.cs-b .cs-back--top { align-self: flex-start; min-height: var(--about-back-hit, var(--rd-back-top-hit)); margin: var(--rd-back-top-pull); padding-right: var(--rd-back-top-pad-end); text-decoration: none; }
.cs-b .cs-back--top:hover, .cs-b .cs-back--top:focus-visible { text-decoration: underline; text-underline-offset: var(--rd-back-underline-offset); }
@media (min-width: 64em) { .cs-back--top { display: none; } }
.cs-slide .cs-back--top { display: none !important; }
.cs-toc-title { font: var(--rd-toc-title-weight) var(--rd-toc-title-size)/var(--rd-toc-title-leading) var(--cs-chrome-font); color: var(--cs-text); margin: var(--rd-toc-title-space); }
.cs-toc-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1px; }
.cs-toc-list::before { content: ""; position: absolute; left: 0; top: var(--rd-progress-rail-inset); bottom: var(--rd-progress-rail-inset); width: var(--rd-progress-rail-w); background: var(--rd-progress-rail-track); }
.cs-toc-list::after { content: ""; position: absolute; left: 0; top: var(--rd-progress-rail-inset); bottom: var(--rd-progress-rail-inset); width: var(--rd-progress-rail-w); background: var(--rd-progress-rail-fill);
  transform-origin: 50% 0; transform: scaleY(var(--cs-p, 0)); }
.cs-toc-list a { display: flex; gap: var(--rd-toc-link-gap); align-items: baseline; padding: var(--rd-toc-link-pad); border-radius: var(--rd-toc-link-radius);
  font: 400 var(--rd-toc-link-size)/var(--rd-toc-link-leading) var(--rd-toc-link-face); color: var(--rd-toc-link-ink); transition: color var(--cs-dur-ui) var(--cs-ease-ui), background-color var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-toc-list a:hover { color: var(--cs-text); background: var(--rd-toc-link-hover-fill); }
.cs-toc-list a[aria-current="true"] { color: var(--rd-toc-link-ink-current); font-weight: var(--rd-toc-link-weight-current); }
.cs-toc-n { font: var(--rd-toc-num-weight) var(--rd-toc-num-size)/1 var(--rd-toc-num-face); color: var(--rd-toc-num-ink); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.cs-toc-list a[aria-current="true"] .cs-toc-n { color: var(--rd-toc-num-ink-current); }
.cs-toc-foot { margin-top: var(--rd-toc-foot-space); display: grid; gap: var(--rd-toc-foot-gap); justify-items: start; font: 400 var(--rd-toc-foot-size)/1.4 var(--cs-chrome-font); color: var(--cs-muted); }
.cs-toc a:focus-visible, .cs-toc button:focus-visible, .cs-dock :focus-visible, .cs-toc-sheet :focus-visible { outline: none; box-shadow: var(--rd-focus); }

@media (min-width: 64em) {
  .cs-reader-grid { display: grid; grid-template-columns: var(--rd-rail-w) minmax(0, var(--rd-read-wide)); column-gap: var(--rd-grid-gap); justify-content: center; padding: 0 var(--rd-grid-pad); }
  .cs-toc { display: block; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto;
    padding: var(--rd-toc-pad-top) 0 var(--rd-toc-pad-bottom); scrollbar-width: thin; }
  .cs-dock, .cs-toc-sheet { display: none !important; }
}
@media (max-width: 79.99em) and (min-width: 64em) { .cs-reader { --cs-rail-w: 11rem; } }

/* ---- phone / tablet dock: solid, bottom-left (the chat pill owns bottom-right) ---- */
.cs-dock {
  position: fixed; left: var(--rd-dock-inset); bottom: calc(var(--rd-dock-inset) + env(safe-area-inset-bottom, 0px)); z-index: var(--rd-dock-z);
  display: flex; align-items: center; gap: var(--rd-dock-gap); padding: var(--rd-dock-pad); max-width: var(--rd-dock-max); min-width: 0;
  background: var(--rd-dock-fill); color: var(--cs-text); border: var(--rd-dock-border); border-radius: var(--rd-dock-radius);
  box-shadow: var(--rd-dock-shadow); font: var(--rd-dock-weight) var(--rd-dock-size)/1 var(--rd-dock-face);
  transform: translateY(0); opacity: 1; transition: transform var(--cs-dur-ui) var(--cs-ease-ui), opacity var(--cs-dur-ui) var(--cs-ease-ui);
}
.cs-dock.is-hidden { transform: var(--rd-dock-hide); opacity: 0; pointer-events: none; }
.cs-dock-back, .cs-dock-toc { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--rd-dock-btn-gap); min-height: var(--rd-dock-btn-min); min-width: var(--rd-dock-btn-min); padding: var(--rd-dock-btn-pad); border-radius: var(--cs-radius-pill); cursor: pointer; }
.cs-dock-back { justify-content: center; padding: 0; font-size: var(--rd-dock-back-size); }
.cs-dock-back:hover, .cs-dock-toc:hover { background: var(--rd-dock-hover-fill); }
.cs-dock-toc { min-width: 0; border-left: 1px solid var(--cs-rule); border-radius: 0 var(--cs-radius-pill) var(--cs-radius-pill) 0; }
.cs-dock-ch { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cs-dock-pct { color: var(--rd-dock-pct-ink); font-variant-numeric: tabular-nums; font-size: var(--rd-dock-pct-size); }

/* contents sheet (native <dialog>: focus trap + Esc for free) */
.cs-toc-sheet {
  margin: auto auto 0; width: 100%; max-width: var(--rd-sheet-max); max-height: var(--rd-sheet-max-h); border: 0; padding: var(--rd-sheet-pad);
  border-radius: var(--rd-sheet-radius); background: var(--rd-sheet-fill); color: var(--cs-text); font-family: var(--cs-chrome-font, system-ui);
  box-shadow: var(--rd-sheet-shadow);
}
.cs-toc-sheet::backdrop { background: rgb(26 25 23 / .40); }   /* literal: ::backdrop does not inherit custom properties in older engines */
.cs-toc-sheet[open] { animation: cs-sheet-in var(--cs-dur-ui) var(--cs-ease-ui); }
@keyframes cs-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-toc-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: var(--rd-sheet-head-pad); font: 600 var(--rd-sheet-head-size)/1.2 var(--cs-chrome-font); }
.cs-toc-sheet-head button { all: unset; cursor: pointer; min-width: var(--rd-sheet-close-hit); min-height: var(--rd-sheet-close-hit); display: grid; place-items: center; border-radius: 50%; font-size: var(--rd-sheet-close-size); color: var(--cs-muted); }
.cs-toc-sheet ol { list-style: none; margin: 0; padding: 0; display: grid; }
.cs-toc-sheet ol a { display: flex; gap: var(--rd-sheet-item-gap); align-items: baseline; min-height: var(--rd-sheet-item-min-h); padding: var(--rd-sheet-item-pad); border-radius: var(--rd-sheet-item-radius); font-size: var(--rd-sheet-item-size); }
.cs-toc-sheet ol a[aria-current="true"] { background: var(--rd-sheet-item-current-fill); font-weight: 600; }
.cs-toc-sheet .cs-back { padding: var(--rd-sheet-back-pad); min-height: 44px; font-size: 15px; }

/* ---- end of article ---- */
/* the site's legacy `footer {…card…}` rule (assets/css/styles.css) is reset here, as .cs-b does for section: end card B has no box */
.cs-reader .cs-end { margin: 0; width: auto; max-width: none; border-radius: 0; overflow: visible; box-shadow: none; background: none; }
.cs-end { display: grid; gap: var(--about-end-gap, var(--rd-end-gap)); padding: var(--about-end-pad, var(--cs-space-2xl) 0 calc(var(--cs-space-2xl) + 48px)); border-top: var(--about-rule-line, var(--rd-end-rule)); }
.cs-end-links { display: flex; flex-wrap: wrap; gap: var(--about-end-links-gap, 10px); }
.cs-end-links a { display: inline-flex; align-items: center; gap: var(--about-cta-gap, var(--rd-end-link-gap)); min-height: var(--about-cta-height, var(--cs-tap)); padding: var(--about-cta-pad, var(--rd-end-link-pad)); border-radius: var(--about-cta-radius, var(--cs-radius-pill));
  font: var(--about-cta-weight, 600) var(--about-cta-size, var(--cs-t-small))/1 var(--about-face-ui, var(--cs-font-ui)); text-decoration: none; color: var(--about-text, var(--cs-text)); box-shadow: var(--about-cta-ring, var(--rd-end-link-ring)); background: var(--about-cta-fill, var(--cs-surface)); }
.cs-end-links a.is-primary { background: var(--about-cta-primary-fill, var(--rd-end-link-primary-fill)); color: var(--about-cta-primary-text, var(--rd-end-link-primary-ink)); box-shadow: none; }
.cs-end-links a:focus-visible { outline: none; box-shadow: var(--about-focus, var(--cs-focus)); }

/* ---- end of article, v0.3.7 (Shah asked, Oct 30): compact Liquid Glass next-case card ----
   Replaces the v0.3.2 centred teaser (too much empty space). Same markup, hrefs and copy: one link for the whole card
   (thumbnail, label, title, company), then a small "All work" glass pill. Material = the restored chat glass
   (05c8d9b, chat.css): white .84 → sand-100 fill, blur 20 + saturate 160, white .65 edge, top/bottom rims, sheen.
   Built from the shared --glass-* tokens (system.css), not a fork. KB 37: static blur (never animated), transform and
   opacity only for motion, solid fill when backdrop-filter is off, unsupported, glass-lite, reduce-transparency or more-contrast.
   The decorative ambient wash behind the card is what the blur refracts; it is part of this block only. */
.cs-end--next { position: relative; isolation: isolate; justify-items: center; text-align: left; gap: 0;
  padding: var(--cs-space-xl) 0; }   /* the footer follows, so the phone dock never sits over the card */
.cs-end--next::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 38% 56%, color-mix(in srgb, var(--coral-500, #FF5A36) 14%, transparent), transparent),
              radial-gradient(closest-side at 70% 42%, color-mix(in srgb, var(--cs-accent) 8%, transparent), transparent); }   /* closest-side: fades out before the block edge */
.cs-end--next > .cs-eyebrow { margin: 0 0 var(--cs-space-s); text-align: center; }

.cs-next { --nc-thumb: 5.25rem; position: relative; isolation: isolate; box-sizing: border-box; width: 100%; max-width: 40rem; min-height: var(--cs-tap);
  display: grid; grid-template-columns: var(--nc-thumb) minmax(0, 1fr); grid-template-areas: "m k" "m t" "m co"; align-content: center;
  column-gap: var(--cs-space-m); row-gap: 4px; padding: 10px var(--cs-space-m) 10px 10px; border-radius: 22px; color: var(--cs-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
  background: linear-gradient(120deg, rgb(255 255 255 / .84), color-mix(in srgb, var(--sand-100, #FAF8F5) 78%, transparent));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate-light, 160%));
          backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate-light, 160%));
  border: 1px solid var(--glass-border-highlight, rgb(255 255 255 / .65));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--navy-900, #0E1528) 12%, transparent), 0 0 0 .5px color-mix(in srgb, var(--navy-900, #0E1528) 10%, transparent),
              var(--glass-rim-top, inset 0 1px rgb(255 255 255 / .78)), var(--glass-rim-bottom, inset 0 -1px rgb(14 21 40 / .03));
  transition: transform var(--cs-dur-ui) var(--cs-ease-ui), box-shadow var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-next::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass-sheen-light, linear-gradient(135deg, rgb(255 255 255 / .7), transparent 60%)); opacity: .55; transition: opacity var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-next:focus-visible { outline: none; box-shadow: var(--cs-focus); }
.cs-next-media { grid-area: m; align-self: stretch; display: block; min-height: 4rem; margin: 0; border: 0; border-radius: 13px; overflow: hidden;
  background: var(--cs-plate, #ECE6DD); box-shadow: inset 0 0 0 .5px rgb(26 25 23 / .08); }
.cs-next-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-next-media picture { display: contents; }   /* review fix 9: AVIF/WebP <picture> wrapper, img keeps filling the media slot */
.cs-next-media img { aspect-ratio: 3 / 2; }   /* work-cards art (CSB Oct 31): the slot keeps the old 300x200 thumb geometry whatever the cover file's shape (case heroes, phone crops) */
.cs-next-k { grid-area: k; align-self: end; font: 600 var(--cs-t-label)/1.2 var(--cs-font-ui); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--cs-muted); }
.cs-next-co { grid-area: co; align-self: start; display: inline-flex; align-items: center; gap: 6px; font: 500 var(--cs-t-small)/1.2 var(--cs-font-ui); color: var(--cs-muted); }
.cs-next-co img { width: 16px; height: 16px; flex: none; }
.cs-next-t { grid-area: t; font: 400 1.0625rem/1.28 var(--cs-font-display); text-wrap: pretty; max-width: 40ch; margin: 0; color: var(--cs-text); }
.cs-next-t .cs-ico { width: .8em; height: .8em; margin-left: .3em; vertical-align: -.06em; color: var(--cs-accent); transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
@media (hover: hover) {
  .cs-next:hover { transform: translateY(-2px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--navy-900, #0E1528) 16%, transparent), 0 0 0 .5px color-mix(in srgb, var(--navy-900, #0E1528) 12%, transparent),
                var(--glass-rim-top, inset 0 1px rgb(255 255 255 / .78)), var(--glass-rim-bottom, inset 0 -1px rgb(14 21 40 / .03)); }
  .cs-next:hover::before { opacity: 1; }
  .cs-next:hover .cs-next-t .cs-ico { transform: translateX(3px); }
  .cs-next:hover .cs-next-media img { transform: scale(1.03); }
}
.cs-next:active { transform: scale(var(--press-scale, .97)); transition-duration: 90ms; }

.cs-end-back { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--cs-tap); margin-top: var(--cs-space-s); padding: 0 var(--cs-space-m) 0 14px;
  border-radius: var(--cs-radius-pill); font: 600 var(--cs-t-small)/1 var(--cs-font-ui); color: var(--cs-text); text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(120deg, rgb(255 255 255 / .78), color-mix(in srgb, var(--sand-100, #FAF8F5) 70%, transparent));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
          backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
  border: 1px solid var(--glass-border-highlight, rgb(255 255 255 / .65));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--navy-900, #0E1528) 8%, transparent), 0 0 0 .5px color-mix(in srgb, var(--navy-900, #0E1528) 10%, transparent), var(--glass-rim-top, inset 0 1px rgb(255 255 255 / .78));
  transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
.cs-end-back .cs-ico { width: 16px; height: 16px; color: var(--cs-muted); transition: transform var(--cs-dur-ui) var(--cs-ease-ui); }
@media (hover: hover) { .cs-end-back:hover { transform: translateY(-1px); } .cs-end-back:hover .cs-ico { transform: translateX(-2px); } }
.cs-end-back:active { transform: scale(var(--press-scale, .97)); transition-duration: 90ms; }
.cs-end-back:focus-visible { outline: none; box-shadow: var(--cs-focus); }

@container cs (min-width: 46rem) {
  .cs-next { --nc-thumb: 10.5rem; column-gap: var(--cs-space-l); padding: 12px var(--cs-space-l) 12px 12px; border-radius: 26px; row-gap: 6px; }
  .cs-next-media { min-height: 7rem; border-radius: 15px; }
  .cs-next-t { font-size: 1.375rem; line-height: 1.25; }
}
@media (min-width: 64em) { .cs-end--next { padding: var(--cs-space-xl) var(--cs-space-l) calc(var(--cs-space-xl) + 8px); } }   /* no dock on desktop */

/* solid fallbacks: no backdrop-filter, glass-lite (low-end phones / Save-Data), reduce transparency, more contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cs-next, .cs-end-back { background: var(--glass-fill-solid-light, #FAF8F5); }
}
html.glass-lite .cs-next, html.glass-lite .cs-end-back { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill-solid-light, #FAF8F5); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cs-next, .cs-end-back { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill-solid-light, #FAF8F5); border-color: var(--color-border, rgb(26 25 23 / .16)); }
  .cs-next::before, .cs-end--next::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-next, .cs-next::before, .cs-next-media img, .cs-next-t .cs-ico, .cs-end-back, .cs-end-back .cs-ico { transition: none; }
  .cs-next:hover, .cs-next:active, .cs-end-back:hover, .cs-end-back:active, .cs-next:hover .cs-next-media img, .cs-next:hover .cs-next-t .cs-ico, .cs-end-back:hover .cs-ico { transform: none; }
}

/* pause anything animated while it is offscreen (reader.js toggles the class) */
.cs-reader .is-offscreen, .cs-reader .is-offscreen * { animation-play-state: paused !important; }

/* image zoom (reader.js) */
.cs-reader .cs-zoomable { cursor: zoom-in; }
.cs-reader .cs-zoomable:focus-visible { outline: var(--rd-zoom-focus); outline-offset: var(--rd-zoom-focus-offset); }
.cs-zoom { border: 0; padding: 0; margin: auto; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; background: transparent; display: none; }
.cs-zoom[open] { display: grid; place-items: center; cursor: zoom-out; }
.cs-zoom::backdrop { background: rgb(17 17 17 / .9); }
.cs-zoom img { max-width: calc(100vw - var(--rd-zoom-gap)); max-height: calc(100dvh - var(--rd-zoom-gap)); width: auto; height: auto; object-fit: contain; border-radius: var(--rd-zoom-img-radius); background: var(--rd-zoom-plate); }
.cs-zoom-x { position: fixed; top: var(--rd-zoom-close-inset); right: var(--rd-zoom-close-inset); width: var(--rd-zoom-close); height: var(--rd-zoom-close); border-radius: 50%; border: 0; font: 400 28px/1 system-ui; background: #fff; color: #111; cursor: pointer; }

/* v0.3: the rail already shows the read time on desktop */
@media (min-width: 64em) { .cs-reader .cs-b--cover .cs-cover-actions:not(:has(button, a)) { display: none; } }