/* ============================================================
   RHODE READER  —  reader.css   (2026-07-05, NEW file, additive)
   ------------------------------------------------------------
   The whole reading + browsing experience rendered "the Rhode way",
   grounded 1:1 in the Alan-approved reference
   (scratchpad/rhode-reader.html).

   THE SYSTEM (frozen):
   - ONE cool-putty ground everywhere. Text, chrome and photography
     all sit directly on --reader-ground. No framed cards, no dark
     glass INSIDE the reading column.
   - BLEND type: heavy LOWERCASE grotesque for big display; Didot for
     editorial accents; Avenir for prose; mono for tiny labels/fine
     print. Extreme scale contrast is the personality.
   - Frameless photography: product/texture floats on the ground with
     only a soft drop-shadow, OR runs full-bleed edge-to-edge.
   - The navy CLAIM block: one saturated big-number moment amid the calm.
   - The FLOP component: a segmented control that seamlessly swaps the
     body beneath it in place (crossfade + height ease) — the three
     DEPTH TIERS on every reader card.

   LOAD ORDER (documented for the build agents):
     tokens.css  →  editorial.css  →  glass.css  →  reader.css
   reader.css must load LAST so its reader-idiom overrides win the
   cascade over the shared editorial/glass rules it intentionally
   re-grounds. Exact <link> tag is in the delivery notes.

   THEME: Rhode-light is the DEFAULT reader look. Dark theme is a
   navy-ground variant that still reads Rhode (tokens in tokens.css).
   Both AA. Frameless surfaces carry ZERO backdrop-filter, so the
   ≤3-backdrop-filter-per-viewport budget (owned by glass.css) is
   untouched by this file.

   CONTRACT: every value reads var(--x, default); no existing class,
   token or route is renamed. All new class names are prefixed .r-
   (reader) or .flop- / .ed- as noted, so nothing collides with the
   Studio's shared classes.
   ============================================================ */


/* ============================================================
   1. THE READER SHELL  —  the one putty ground
   ------------------------------------------------------------
   .reader is the scroll container. It re-points the LOCAL --ground /
   --ink / --line to the reader-putty tokens on its OWN subtree, so
   every shared class inside it (.rt-spec, .quiz-choice, .rt-callout…)
   inherits the putty ground for free — no per-class edits needed. The
   page's global --ground / --ink are untouched OUTSIDE .reader.
   ============================================================ */
.reader {
  /* re-ground the subtree (local override; global tokens untouched) */
  --ground: var(--reader-ground, #E7E4DD);
  --ground-alt: var(--reader-ground-2, #F1EFEA);
  --ink: var(--reader-ink, #23211E);
  --ink-secondary: var(--reader-ink-soft, #6E6A63);
  --line: var(--reader-line, rgba(35, 33, 30, .14));

  background: var(--reader-ground, #E7E4DD);
  color: var(--reader-ink, #23211E);
  font-family: var(--font-body);
  font-size: 18px;                 /* reference reading size */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;              /* full-bleed bands never scroll the body */
}

/* The 620px reading measure — the reference column. Distinct from the
   66ch --rt-measure used by richtext; this keeps giant lowercase display
   from over-running. Consumed as min(measure,100%) so phones win. */
.r-col {
  max-width: min(var(--reader-measure, 620px), 100%);
  margin-inline: auto;
  padding-inline: 26px;            /* reference gutter */
}


/* ============================================================
   2. READER CHROME  —  the bare top bar + slim read-progress
   ------------------------------------------------------------
   Rhode's chrome is nearly invisible: a hairline-bottomed sticky bar
   on the SAME ground (a whisper of blur is the only glass in the
   reader, well under budget). .r-progress is an optional 2px fill.
   ============================================================ */
.r-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 1.1rem 26px;
  position: sticky;
  top: 0;
  z-index: 20;
  font-family: var(--font-grotesque);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  /* the only translucency in the reader — a bare tinted ground, not a card */
  background: color-mix(in srgb, var(--reader-ground, #E7E4DD) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
}
.r-topbar .r-back {
  color: var(--reader-ink, #23211E);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.r-topbar .r-meta {                /* "read · 4 min" — mono, quiet */
  color: var(--reader-ink-soft, #6E6A63);
  font-family: var(--font-mono);
  font-size: .72rem;
}

/* Slim read-progress bar — a 2px fill JS sizes to scroll depth. Sits
   directly under the top bar; no card, clay metal fill. */
.r-progress {
  position: sticky;
  top: 0;
  z-index: 21;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.r-progress > i {                  /* the filled portion (JS sets width) */
  display: block;
  height: 100%;
  width: var(--r-progress, 0%);
  background: var(--reader-clay, #A9673F);
  transition: width var(--dur-micro, .3s) var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce) {
  .r-progress > i { transition: none; }
}


/* ============================================================
   3. READER TYPE  —  the BLEND (grotesque display / prose / accents)
   ============================================================ */

/* eyebrow — heavy grotesque micro-caps in clay (the reader's signature) */
.r-eyebrow {
  font-family: var(--font-grotesque);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--reader-clay, #A9673F);
  margin: 0 0 .5em;
}
/* label — quieter grotesque micro-caps for spec/table/tip labels */
.r-label {
  font-family: var(--font-grotesque);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--reader-ink-soft, #6E6A63);
}

/* the hero: ENORMOUS lowercase heavy grotesque, tight — the Rhode move */
h1.r-display, .r-display {
  font-family: var(--font-grotesque);
  font-weight: var(--reader-display-weight, 800);
  /* huge on desktop, but the floor + vw are tuned so the longest single title
     token (e.g. "seneplex+:") still fits a 360px phone without clipping;
     break-word is the last-resort safety for any freakishly long token */
  font-size: clamp(2.9rem, 13.5vw, 8.5rem);
  line-height: .9;
  letter-spacing: var(--reader-display-tracking, -.035em);
  text-transform: lowercase;
  margin: .12em 0 .1em;
  color: var(--reader-ink, #23211E);
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* section head — big lowercase grotesque, one notch down from the hero */
h2.r-head, .r-head {
  font-family: var(--font-grotesque);
  font-weight: var(--reader-head-weight, 700);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: .98;
  letter-spacing: var(--reader-head-tracking, -.03em);
  text-transform: lowercase;
  margin: 0 0 .5em;
  text-wrap: balance;
  color: var(--reader-ink, #23211E);
}

/* the lead — the one large-serif-optional intro line under the hero.
   Kept in the body face at large size (the reference), with .r-lead--serif
   opting into Didot for an editorial pull. */
.r-lead {
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--reader-ink, #23211E);
  margin: 0 0 1.15em;
}
.r-lead--serif { font-family: var(--font-display); letter-spacing: 0; }

/* prose defaults inside the reader column */
.reader p { margin: 0 0 1.15em; }
/* key-phrase emphasis — the reference's true-face 650 intent (resolves to
   the crisp Demi Bold via --rt-strong-weight, no synthesis) */
.reader strong {
  font-weight: var(--rt-strong-weight, 600);
  font-synthesis-weight: none;
}
.reader em { font-style: italic; }

/* editorial ACCENT — Didot pull-quote (the reserved display-serif moment) */
.r-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  line-height: 1.24;
  letter-spacing: -.005em;
  color: var(--reader-ink, #23211E);
  margin: clamp(2rem, 5vw, 3rem) 0;
  max-width: min(var(--reader-measure, 620px), 100%);
}
.r-quote cite {                    /* attribution, quiet mono */
  display: block;
  margin-top: .8em;
  font: 400 .8rem/1.5 var(--font-mono);
  font-style: normal;
  letter-spacing: .04em;
  color: var(--reader-ink-soft, #6E6A63);
  text-transform: uppercase;
}


/* ============================================================
   4. STRUCTURE  —  hero, sections, hairline rules
   ============================================================ */
.r-hero { padding: clamp(2.5rem, 7vw, 5rem) 0 1rem; }
.r-section { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
/* a hairline divider on the ground — the calm section break */
.r-rule {
  height: 1px;
  border: 0;
  background: var(--reader-line, rgba(35, 33, 30, .14));
  margin: clamp(2rem, 5vw, 3rem) 0;
}


/* ============================================================
   5. FRAMELESS PHOTOGRAPHY  —  floats on the ground, OR full-bleed
   ------------------------------------------------------------
   NEVER a matted/framed card in the reader. Two forms only:
   .r-bleed   = product/texture floats on the ground, soft drop-shadow.
   .r-fullbleed = an edge-to-edge image band.
   Both are ZERO-backdrop-filter (content surfaces).
   ============================================================ */
.r-bleed {
  margin: clamp(2.2rem, 6vw, 4rem) 0;
  text-align: center;
}
.r-bleed img {
  width: min(560px, 86vw);
  height: auto;
  display: inline-block;
  /* the ONLY separation — a soft float shadow, no frame, no rim */
  filter: var(--reader-float-shadow, drop-shadow(0 30px 46px rgba(35, 33, 30, .14)));
}

/* [both-design PHOTO GLOW, HIGH] Dark-theme ground-clamp for reader figures.
   Product-on-white photography renders as a full-brightness WHITE rectangle
   glowing in the navy dark ground — it shatters the calm dark reading mood.
   In DARK ONLY we knock the white backdrop toward the ground so the photo
   dissolves in (DIRECTION law 2's ground-clamp idiom, here applied to the
   frameless reader figure). Two additive, markup-free layers:
     1. mix-blend-mode: multiply on the <img> — white × navy-ground → navy, so
        the white seam disappears while the product itself stays legible; a
        small brightness/contrast lift compensates for multiply's darkening.
     2. an inner vignette overlay clipped to the image box (radial darken toward
        --reader-ground at the edges) so any remaining bright rim melts in.
   Light theme is UNTOUCHED — the white blends acceptably into bone there.
   .rt-figure is included as the review-named hook in case a shell applies it. */
[data-theme="dark"] .r-bleed,
[data-theme="dark"] .rt-figure { position: relative; }
[data-theme="dark"] .r-bleed img,
[data-theme="dark"] .rt-figure img {
  mix-blend-mode: multiply;
  /* multiply darkens midtones too — nudge brightness/contrast back so the
     product reads, then re-apply the float shadow (filter is not additive) */
  filter:
    brightness(1.14) contrast(1.04)
    var(--reader-float-shadow, drop-shadow(0 30px 46px rgba(35, 33, 30, .14)));
}
/* inner vignette: sits over the centered image, sized to match .r-bleed img,
   fading the edges into the ground so a bright photo border dissolves */
[data-theme="dark"] .r-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(560px, 86vw);
  height: 100%;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 46%,
    transparent 54%,
    color-mix(in srgb, var(--reader-ground, #0B1A2E) 55%, transparent) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .r-bleed,
  :root:not([data-theme]) .rt-figure { position: relative; }
  :root:not([data-theme]) .r-bleed img,
  :root:not([data-theme]) .rt-figure img {
    mix-blend-mode: multiply;
    filter:
      brightness(1.14) contrast(1.04)
      var(--reader-float-shadow, drop-shadow(0 30px 46px rgba(35, 33, 30, .14)));
  }
  :root:not([data-theme]) .r-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(560px, 86vw);
    height: 100%;
    pointer-events: none;
    background: radial-gradient(120% 92% at 50% 46%,
      transparent 54%,
      color-mix(in srgb, var(--reader-ground, #0B1A2E) 55%, transparent) 100%);
  }
}
/* prefers-reduced-transparency: the vignette is a translucency effect — drop it
   and lean on multiply alone (which is opaque compositing, not transparency) */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="dark"] .r-bleed::after { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .r-bleed::after { display: none; }
  }
}

.r-bleed figcaption {
  margin-top: 1rem;
  color: var(--reader-ink-soft, #6E6A63);
  font-size: .9rem;
  font-style: italic;
}

/* edge-to-edge band (breaks the column; parent is .reader, not .r-col) */
.r-fullbleed {
  width: 100%;
  margin: clamp(2.5rem, 7vw, 4.5rem) 0;
}
.r-fullbleed img {
  width: 100%;
  height: clamp(280px, 54vw, 520px);
  object-fit: cover;
  display: block;
}
.r-fullbleed figcaption {          /* caption returns to the measure */
  max-width: min(var(--reader-measure, 620px), 100%);
  margin: 1rem auto 0;
  padding-inline: 26px;
  color: var(--reader-ink-soft, #6E6A63);
  font-size: .9rem;
  font-style: italic;
}


/* ============================================================
   6. THE CLAIM BLOCK  —  the navy big-number moment
   ------------------------------------------------------------
   One saturated moment amid the calm: a navy panel with a gold hairline
   crown, a HUGE grotesque stat, one sentence, and a mono fine-print
   disclaimer (the Rhode perception-claim pattern). This is the ONLY
   place the reader leaves the putty ground.
   ============================================================ */
.r-claim {
  position: relative;
  overflow: hidden;
  background: var(--reader-claim-bg, var(--navy));
  color: var(--reader-claim-ink, #EAE6DC);
  border-radius: 6px;
  padding: clamp(2rem, 6vw, 3.4rem) clamp(1.5rem, 5vw, 2.6rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}
/* the gold hairline crown (metal edge, top) */
.r-claim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--gold) 60%, transparent),
    transparent);
}
/* eyebrow inside the claim goes gold (reads on navy) */
.r-claim .r-eyebrow { color: var(--gold); }
/* the huge number */
.r-stat {
  font-family: var(--font-grotesque);
  font-weight: var(--reader-display-weight, 800);
  letter-spacing: -.03em;
  font-size: clamp(3.2rem, 13vw, 6rem);
  line-height: .9;
  color: var(--reader-claim-stat, #F3EFE6);
  margin: .2em 0;
}
/* the one sentence */
.r-say {
  font-size: 1.15rem;
  color: var(--reader-claim-say, #CFCABE);
  max-width: 32ch;
  margin: 0;
}
/* the mono fine-print disclaimer */
.r-disc {
  margin-top: 1.4rem;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .01em;
  font-family: var(--font-mono);
  color: var(--reader-claim-disc, #8E897C);
}


/* ============================================================
   7. THE FLOP COMPONENT  —  seamless in-place tab-swap
   ------------------------------------------------------------
   Rhode's front-page "Mission / Philanthropy / Sustainability" move.
   A horizontal segmented control whose segments, when clicked, SWAP
   the content beneath them in place: crossfade + height ease, no page
   change, no modal. This is how the three DEPTH TIERS render on every
   reader card: [ The Marketer · The Professional · The Skintellectual ].

   MARKUP CONTRACT (build agents author this; JS toggles .is-active):
     <div class="flop">
       <div class="flop-tabs" role="tablist">
         <button class="flop-tab is-active" role="tab" aria-selected="true"
                 aria-controls="p1" id="t1">the marketer</button>
         <button class="flop-tab" role="tab" aria-selected="false"
                 aria-controls="p2" id="t2">the professional</button>
         <button class="flop-tab" role="tab" aria-selected="false"
                 aria-controls="p3" id="t3">the skintellectual</button>
       </div>
       <div class="flop-body">
         <div class="flop-panel is-active" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
         <div class="flop-panel" role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>
         <div class="flop-panel" role="tabpanel" id="p3" aria-labelledby="t3" hidden>…</div>
       </div>
     </div>

   The active state is driven by .is-active (JS adds/removes it and the
   `hidden` attribute). CSS does the crossfade + height ease. The height
   ease uses CSS grid-rows (0fr→1fr) on .flop-body so it animates without
   JS measuring — the outgoing panel is position:absolute during the swap
   so both panels overlap for the crossfade, then the incoming panel's
   natural height drives the container.
   ============================================================ */
.flop {
  margin: clamp(2rem, 5vw, 3rem) 0;
  max-width: min(var(--reader-measure, 620px), 100%);
}

/* the segmented control */
.flop-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill, 980px);
  background: var(--reader-ground-2, #F1EFEA);
  border: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.flop-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: .55rem .4rem;
  border: 0;
  border-radius: var(--r-pill, 980px);
  background: transparent;
  color: var(--reader-ink-soft, #6E6A63);
  font-family: var(--font-grotesque);
  font-weight: 700;
  /* shrinks just enough that "the skintellectual" (the longest tier label)
     shows in full across three equal tabs on a phone — no ellipsis */
  font-size: clamp(.58rem, 2.7vw, .74rem);
  letter-spacing: .01em;
  text-transform: lowercase;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-micro, .3s) var(--ease-gentle, ease),
              background var(--dur-micro, .3s) var(--ease-gentle, ease);
}
.flop-tab.is-active {
  color: var(--reader-ink, #23211E);
  background: var(--reader-ground, #E7E4DD);
  box-shadow: 0 1px 2px rgba(35, 33, 30, .10);
}
@media (hover: hover) and (pointer: fine) {
  .flop-tab:not(.is-active):hover { color: var(--reader-ink, #23211E); }
}
.flop-tab:focus-visible {
  outline: 2px solid var(--reader-clay, #A9673F);
  outline-offset: 2px;
}

/* the swap area — grid overlaps panels so they can crossfade in place;
   height eases because the active (in-flow) panel drives the row height */
.flop-body {
  display: grid;
}
.flop-panel {
  grid-area: 1 / 1;                 /* stack every panel in the same cell */
  min-width: 0;
  color: var(--reader-ink, #23211E);
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--dur-micro, .3s) var(--ease-gentle, ease),
    transform var(--dur-micro, .3s) var(--ease-gentle, ease),
    visibility 0s linear var(--dur-micro, .3s);
}
/* the visible panel: it is the only one that participates in HEIGHT, so
   the container eases to its measure as content swaps */
.flop-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  position: relative;              /* in-flow → drives grid row height */
  transition:
    opacity var(--dur-micro, .3s) var(--ease-gentle, ease),
    transform var(--dur-micro, .3s) var(--ease-gentle, ease);
}
.flop-panel p:last-child { margin-bottom: 0; }
/* first line of a tier can be a quiet clay lead-in via .flop-panel .r-label */
.flop-panel .r-label { display: block; margin-bottom: .5em; color: var(--reader-clay, #A9673F); }

/* Height ease: when the browser supports interpolate-size, let the grid
   row animate between panel heights smoothly. Progressive — without it
   the swap is an instant height jump under a crossfade (still clean). */
@supports (interpolate-size: allow-keywords) {
  .flop-body { interpolate-size: allow-keywords; transition: none; }
}

/* REDUCED MOTION: instant swap, no fade/slide/height ease */
@media (prefers-reduced-motion: reduce) {
  .flop-panel,
  .flop-panel.is-active { transition: none; transform: none; }
  .flop-tab { transition: none; }
}
/* Progressive no-JS / hidden-attr fallback: if a panel keeps the native
   [hidden] attribute (JS toggles both), honor it so non-active panels
   never leak in when scripting is unavailable. */
.flop-panel[hidden] { display: none; }


/* ============================================================
   8. THE CALM READER QUIZ  —  reuses the shared .quiz-choice markup
   ------------------------------------------------------------
   The brief: "calm inline quiz styling REUSING quiz markup." So .r-quiz
   is a WRAPPER that restyles the existing <button class="quiz-choice">
   toward the reader idiom (putty buttons, hairline borders, grotesque
   question). No new button class — the Studio's quiz JS keeps working.
   ============================================================ */
.r-quiz { margin: clamp(2.5rem, 6vw, 4rem) 0; max-width: min(var(--reader-measure, 620px), 100%); }
/* the question — grotesque, lowercase, tight (matches section heads) */
.r-quiz .r-q {
  font-family: var(--font-grotesque);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin-bottom: 1.3rem;
  color: var(--reader-ink, #23211E);
}
/* restyle the SHARED .quiz-choice to the reader idiom (name unchanged) */
.r-quiz .quiz-choice {
  min-height: 0;
  background: var(--reader-ground-2, #F1EFEA);
  border: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  border-radius: 4px;
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--reader-ink, #23211E);
}
@media (hover: hover) and (pointer: fine) {
  .r-quiz .quiz-choice:hover { border-color: var(--reader-ink-soft, #6E6A63); }
}
/* correct/wrong keep the shared class hooks, re-tinted for the putty ground */
.r-quiz .quiz-choice.correct {
  border-color: var(--reader-correct, #3B7A57);
  background: color-mix(in srgb, var(--reader-correct, #3B7A57) 10%, var(--reader-ground-2, #F1EFEA));
}
.r-quiz .quiz-choice.wrong {
  border-color: var(--jewel-ruby);
  background: color-mix(in srgb, var(--jewel-ruby) 10%, var(--reader-ground-2, #F1EFEA));
}
/* the shared emerald tick (glass.css .quiz-choice.correct::after) still
   fires; re-point its color toward the reader emerald for tone match */
.r-quiz .quiz-choice.correct::after {
  color: color-mix(in srgb, var(--reader-correct, #3B7A57) 80%, var(--reader-ink, #23211E));
}
.r-quiz .quiz-feedback { color: var(--reader-ink, #23211E); }


/* ============================================================
   9. INLINE PROGRESSIVE DISCLOSURE  —  the science, on demand
   ------------------------------------------------------------
   The reference's <details> pattern: "the science" opens INLINE, not in
   a separate screen/sheet. A hairline-topped disclosure with a clay
   grotesque summary and a mono footnote foot.
   ============================================================ */
.r-details {
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  padding-top: 1.1rem;
  max-width: min(var(--reader-measure, 620px), 100%);
}
.r-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-grotesque);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--reader-clay, #A9673F);
}
.r-details > summary::-webkit-details-marker { display: none; }
.r-details .r-chev { transition: transform var(--dur-micro, .3s); }
.r-details[open] > summary .r-chev { transform: rotate(90deg); }
.r-details .r-inner { padding-top: 1rem; color: var(--reader-ink, #23211E); }
.r-details .r-foot {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--reader-line, rgba(35, 33, 30, .14));
  font: 400 .8rem/1.5 var(--font-mono);
  color: var(--reader-ink-soft, #6E6A63);
}
@media (prefers-reduced-motion: reduce) {
  .r-details .r-chev { transition: none; }
}


/* ============================================================
   10. THE SEAMLESS NEXT  —  next-packet footer
   ------------------------------------------------------------
   The reader never dead-ends: a calm sign-off + a large lowercase
   grotesque link to the next packet, on the same ground. .r-next is
   an <a> so the whole block is one tap target.
   ============================================================ */
.r-fin {
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(4rem, 10vw, 7rem);
  text-align: center;
}
.r-fin .r-fin-mono {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--reader-ink-faint, #A6A299);
}
.r-next {
  display: block;
  text-decoration: none;
  color: var(--reader-ink, #23211E);
  margin-top: clamp(2rem, 5vw, 3rem);
  transition: transform var(--dur-micro, .3s) var(--ease-out, ease);
}
.r-next .r-next-kicker {          /* "up next" — clay grotesque micro-caps */
  font-family: var(--font-grotesque);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--reader-clay, #A9673F);
  display: block;
  margin-bottom: .4em;
}
.r-next .r-next-title {           /* the big lowercase grotesque next-title */
  font-family: var(--font-grotesque);
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: lowercase;
  color: var(--reader-ink, #23211E);
}
@media (hover: hover) and (pointer: fine) {
  .r-next:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .r-next { transition: none; }
  .r-next:hover { transform: none; }
}


/* ============================================================
   11. REVEAL-ON-SCROLL  —  reader-scoped, motion-safe
   ------------------------------------------------------------
   The reference's gentle fade-up. Scoped to .reader so it never touches
   the Studio's own animations. JS adds .is-in when the element enters
   the viewport. Reduced-motion shows everything immediately.
   ============================================================ */
.reader .r-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .8s var(--ease-out, ease),
    transform .8s cubic-bezier(.2, .7, .3, 1);
}
.reader .r-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reader .r-reveal { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   12. READER FOCUS  —  clay outline on the putty ground
   ------------------------------------------------------------
   The reference's focus color. Scoped to .reader so the global
   --focus-ring token (which serves the rest of the app) is untouched.
   Clay-on-putty clears 3:1 for the non-text focus indicator.
   ============================================================ */
.reader :focus-visible {
  outline: 2px solid var(--reader-clay, #A9673F);
  outline-offset: 3px;
}