/* ─────────────────────────────────────────────────────────────────
   IELTS Reading — page + lesson surfaces.
   Page bg stays dark espresso (from ielts-shell.css). Content sits
   on warm cream surfaces — book pages on a coffee-shop shelf.
   ───────────────────────────────────────────────────────────── */

/* Cream + ink palette for content (overrides nothing outside .ielts-page). */
.ielts-page {
  --paper:       #F5EBD3;
  --paper-tint:  #EFE2C4;
  --paper-deep:  #E7D6B0;
  --paper-ink:        #1F1812;
  --paper-ink-soft:   #4A3F33;
  --paper-ink-mute:   #7A6A55;
  --paper-honey:      #B57A2E;
  --paper-ember:      #B6442C;
  --paper-line:  rgba(31, 24, 18, .12);
  --paper-line-strong: rgba(31, 24, 18, .25);
}

/* ─── Reading page (lessons grid + practice) ─────────────────── */
.reading-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.rd-head {
  margin-bottom: 2.4rem;
}
.rd-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ielts-honey, #D9A268);
  margin-bottom: .6rem;
}
.rd-title {
  font-family: 'Source Serif 4', 'Tiempos', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing: -.02em;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0;
  line-height: 1.05;
}

/* Sections within the reading page */
.rd-section { margin-bottom: 3.5rem; }
.rd-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--ielts-line, rgba(242,230,204,.10));
}
.rd-section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0;
  letter-spacing: -.01em;
}
.rd-section-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  color: var(--ielts-ink-soft, #B6A484);
}

/* ─── Lessons grid (7 rows × 2 cols) ─────────────────────────── */
.rd-lessons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rd-lesson-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem 1.6rem;
  background: var(--paper, #F5EBD3);
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--paper-ink, #1F1812);
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s, border-color .2s, background .2s;
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 12px 26px -16px rgba(0,0,0,.45);
}
.rd-lesson-card:hover {
  transform: translateY(-3px);
  background: var(--paper-tint, #EFE2C4);
  border-color: var(--paper-honey, #B57A2E);
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 22px 40px -16px rgba(0,0,0,.55);
}
.rd-lesson-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: .9;
  color: var(--paper-honey, #B57A2E);
  letter-spacing: -.02em;
  font-variant-numeric: oldstyle-nums;
  align-self: center;
}
.rd-lesson-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.rd-lesson-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--paper-ink, #1F1812);
  letter-spacing: -.005em;
}
.rd-lesson-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.4;
}
.rd-lesson-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  color: var(--paper-ink-mute, #7A6A55);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: .15rem;
}

/* ─── Practice placeholder ─────────────────────────────────── */
.rd-practice-placeholder {
  padding: 2.4rem 1.5rem;
  background: var(--paper, #F5EBD3);
  border: 1px dashed var(--paper-line-strong, rgba(31,24,18,.25));
  border-radius: 12px;
  text-align: center;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-placeholder-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .55rem;
}
.rd-practice-placeholder p { margin: 0; font-size: .95rem; }

/* ─── Lesson page (single cream "book page" surface) ─────────── */
.rd-lesson-page {
  max-width: 880px;
  margin: 2.4rem auto 4rem;
  padding: 3rem 3.6rem 4rem;
  background: var(--paper, #F5EBD3);
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,.16),
    0 30px 60px -28px rgba(0,0,0,.55);
  color: var(--paper-ink, #1F1812);
}

.rd-lesson-back {
  display: inline-flex; align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--paper-ink-soft, #4A3F33);
  text-decoration: none;
  margin-bottom: 1.4rem;
  letter-spacing: .005em;
  transition: color .15s;
}
.rd-lesson-back:hover { color: var(--paper-honey, #B57A2E); }

.rd-lesson-head {
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--paper-line, rgba(31,24,18,.12));
}
.rd-lesson-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .8rem;
}
.rd-lesson-title-big {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.8vw, 3.2rem);
  line-height: 1.05;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 .5rem;
  letter-spacing: -.022em;
}
.rd-lesson-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.4;
  margin: 0 0 1.2rem;
}
.rd-lesson-meta-line {
  display: flex; gap: 1.2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-mute, #7A6A55);
  font-weight: 500;
}

/* ─── Lesson body — reading typography ─────────────────────── */
.rd-lesson-body { /* container only, blocks below carry the styling */ }

.rd-block { margin: 0 0 1.3rem; }

.rd-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 2.2rem;
  letter-spacing: .002em;
}

.rd-h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--paper-ink, #1F1812);
  margin: 2.6rem 0 1rem;
  letter-spacing: -.012em;
  scroll-margin-top: 100px;
}
.rd-h2:first-child { margin-top: 0; }

.rd-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--paper-ink, #1F1812);
  letter-spacing: -.003em;
}
.rd-p b { font-weight: 600; }
.rd-p i { font-style: italic; }

.rd-list {
  margin: 0 0 1.4rem;
  padding-left: 1.6rem;
}
.rd-list li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  margin-bottom: .55rem;
  padding-left: .25rem;
}
.rd-list-bullet { list-style: none; padding-left: 0; }
.rd-list-bullet li { position: relative; padding-left: 1.6rem; }
.rd-list-bullet li::before {
  content: '·';
  position: absolute; left: .5rem; top: -.05em;
  font-size: 1.6em; font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  line-height: 1;
}
.rd-list-numbered {
  list-style: decimal;
  color: var(--paper-honey, #B57A2E);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.rd-list-numbered li {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
}

/* Callout: vertical accent rule on the left, no boxed feel. */
.rd-callout {
  position: relative;
  padding: 1rem 1.2rem 1rem 1.6rem;
  margin: 1.6rem 0 1.8rem;
  background: rgba(181, 122, 46, .07);
  border-radius: 6px;
  border-left: 3px solid var(--paper-honey, #B57A2E);
}
.rd-callout-mistake {
  background: rgba(182, 68, 44, .08);
  border-left-color: var(--paper-ember, #B6442C);
}
.rd-callout-tip {
  background: rgba(31, 24, 18, .05);
  border-left-color: var(--paper-ink-mute, #7A6A55);
}
.rd-callout-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .35rem;
}
.rd-callout-mistake .rd-callout-label { color: var(--paper-ember, #B6442C); }
.rd-callout-tip .rd-callout-label { color: var(--paper-ink-soft, #4A3F33); }
.rd-callout-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
}
.rd-callout-body b { font-weight: 600; }
.rd-callout-body i { font-style: italic; }

.rd-quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--paper-honey, #B57A2E);
  margin: 1.8rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--paper-honey, #B57A2E);
}

.rd-divider {
  border: 0; height: 1px;
  background: var(--paper-line, rgba(31,24,18,.12));
  margin: 2.4rem 0;
}

.rd-example {
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.2rem;
  margin: 2rem 0;
}
.rd-example-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .55rem;
}
.rd-example-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 .6rem;
  color: var(--paper-ink, #1F1812);
}
.rd-example-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  margin-bottom: .8rem;
}
.rd-example-annotations {
  margin: .6rem 0 0;
  padding-left: 1.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-example-annotations li { margin-bottom: .35rem; line-height: 1.55; }

/* ─── Inline mark spans (used by passage + walkthrough) ─────── */
.rd-mark {
  background: rgba(181, 122, 46, .15);
  border-bottom: 1.5px solid rgba(181, 122, 46, .55);
  padding: 0 .15em;
  border-radius: 2px;
  transition: background .25s, border-color .25s, opacity .25s, color .25s;
}
.rd-mark[data-kind="synonym"] {
  background: rgba(182, 68, 44, .12);
  border-bottom-color: rgba(182, 68, 44, .55);
}
.rd-mark[data-kind="trap"] {
  background: rgba(182, 68, 44, .14);
  border-bottom: 1.5px dashed rgba(182, 68, 44, .7);
}
.rd-mark[data-kind="topic"] {
  background: rgba(181, 122, 46, .22);
  border-bottom-color: rgba(181, 122, 46, .8);
  font-weight: 500;
}
.rd-mark[data-kind="reference"] {
  background: rgba(31, 24, 18, .07);
  border-bottom-color: rgba(31, 24, 18, .35);
}

/* ─── passage block (annotated, static) ─────────────────────── */
.rd-passage {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-passage-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .55rem;
}
.rd-passage-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 .35rem;
  letter-spacing: -.005em;
}
.rd-passage-source {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: .8rem;
  color: var(--paper-ink-mute, #7A6A55);
  margin-bottom: .9rem;
}
.rd-passage-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.4rem;
}
.rd-passage-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--paper-ink, #1F1812);
}
.rd-passage-body p { margin: 0 0 .8rem; }
.rd-passage-body p:last-child { margin-bottom: 0; }

.rd-passage-notes {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 1px solid var(--paper-line, rgba(31,24,18,.12));
  padding-left: 1rem;
  display: flex; flex-direction: column;
  gap: .6rem;
}
.rd-passage-note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-passage-note-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-honey, #B57A2E);
  color: var(--paper, #F5EBD3);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .85rem;
  flex-shrink: 0;
}
.rd-passage-note-synonym .rd-passage-note-num { background: var(--paper-ember, #B6442C); }
.rd-passage-note-trap    .rd-passage-note-num { background: var(--paper-ember, #B6442C); }
.rd-passage-note-text b { font-weight: 600; }

/* ─── walkthrough block (interactive — click steps to highlight) ── */
.rd-walkthrough {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-wt-intro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.55;
  margin: 0 0 .9rem;
}
.rd-wt-question {
  background: var(--paper, #F5EBD3);
  padding: .8rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
  border-left: 3px solid var(--paper-ember, #B6442C);
}
.rd-wt-q-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .25rem;
}
.rd-wt-question p {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--paper-ink, #1F1812);
}

.rd-wt-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.4rem;
}
.rd-wt-passage {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
}
.rd-wt-passage p { margin: 0 0 .8rem; }
.rd-wt-passage p:last-child { margin-bottom: 0; }

/* When a step is active, fade unrelated marks; pop matching mark. */
.rd-walkthrough[data-active="1"] .rd-mark:not([data-step="1"]),
.rd-walkthrough[data-active="2"] .rd-mark:not([data-step="2"]),
.rd-walkthrough[data-active="3"] .rd-mark:not([data-step="3"]),
.rd-walkthrough[data-active="4"] .rd-mark:not([data-step="4"]),
.rd-walkthrough[data-active="5"] .rd-mark:not([data-step="5"]) {
  background: transparent;
  border-bottom-color: rgba(31, 24, 18, .15);
  opacity: .35;
}
.rd-walkthrough[data-active="1"] .rd-mark[data-step="1"],
.rd-walkthrough[data-active="2"] .rd-mark[data-step="2"],
.rd-walkthrough[data-active="3"] .rd-mark[data-step="3"],
.rd-walkthrough[data-active="4"] .rd-mark[data-step="4"],
.rd-walkthrough[data-active="5"] .rd-mark[data-step="5"] {
  background: rgba(181, 122, 46, .35);
  border-bottom: 2px solid var(--paper-honey, #B57A2E);
  font-weight: 500;
  border-radius: 3px;
}

.rd-wt-steps {
  display: flex; flex-direction: column;
  gap: .5rem;
}
.rd-wt-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .65rem;
  align-items: start;
  text-align: left;
  padding: .7rem .85rem;
  background: var(--paper, #F5EBD3);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.rd-wt-step:hover {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step.is-active {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-tint, #EFE2C4);
  color: var(--paper-honey, #B57A2E);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .9rem;
  flex-shrink: 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  transition: background .15s, color .15s;
}
.rd-wt-step.is-active .rd-wt-step-num {
  background: var(--paper-honey, #B57A2E);
  color: var(--paper, #F5EBD3);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.rd-wt-step-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: .98rem;
  color: var(--paper-ink, #1F1812);
  line-height: 1.2;
  letter-spacing: -.005em;
}
.rd-wt-step-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.45;
}

/* ─── compare block (two-column comparison) ─────────────────── */
.rd-compare {
  margin: 2rem 0;
}
.rd-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rd-compare-col {
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 10px;
  padding: 1rem 1.15rem 1.1rem;
}
.rd-compare-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .55rem;
}
.rd-compare-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
}
.rd-compare-body b { font-weight: 600; }
.rd-compare-body i { font-style: italic; }
.rd-compare-body p { margin: 0 0 .55rem; }
.rd-compare-body p:last-child { margin-bottom: 0; }
.rd-compare-body ul {
  list-style: none;
  margin: 0; padding: 0;
}
.rd-compare-body ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.5;
}
.rd-compare-body ul li::before {
  content: '·';
  position: absolute; left: .25rem; top: -.05em;
  font-size: 1.5em; font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  line-height: 1;
}
.rd-compare-note {
  margin: .6rem 0 0;
  padding-top: .55rem;
  border-top: 1px dashed var(--paper-line-strong, rgba(31,24,18,.18));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-style: italic;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.45;
}
.rd-compare-footnote {
  margin: .8rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  color: var(--paper-ink-soft, #4A3F33);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ─── dissect block (clickable paragraph anatomy) ─────────────── */
.rd-dissect {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-dis-paragraph {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1.2rem 1.4rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.rd-dis-sent {
  display: inline;
  padding: .15em .25em;
  margin: 0 -.05em;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  text-align: left;
}
.rd-dis-sent:hover {
  background: rgba(181, 122, 46, .12);
}
.rd-dis-sent.is-active {
  background: rgba(181, 122, 46, .35);
  box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E);
}
.rd-dis-sent.rd-dis-sent-topic.is-active        { background: rgba(181, 122, 46, .42); box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E); }
.rd-dis-sent.rd-dis-sent-evidence.is-active     { background: rgba(181, 122, 46, .26); box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E); }
.rd-dis-sent.rd-dis-sent-detail.is-active       { background: rgba(31, 24, 18, .12);   box-shadow: inset 0 -2px 0 var(--paper-ink-mute, #7A6A55); }
.rd-dis-sent.rd-dis-sent-contrast.is-active     { background: rgba(182, 68, 44, .25);  box-shadow: inset 0 -2px 0 var(--paper-ember, #B6442C); }
.rd-dis-sent.rd-dis-sent-conclusion.is-active   { background: rgba(182, 68, 44, .18);  box-shadow: inset 0 -2px 0 var(--paper-ember, #B6442C); }
.rd-dis-sent.rd-dis-sent-transition.is-active   { background: rgba(31, 24, 18, .15);   box-shadow: inset 0 -2px 0 var(--paper-ink-soft, #4A3F33); }

.rd-dis-panel {
  background: var(--paper, #F5EBD3);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  min-height: 60px;
  border-left: 3px solid var(--paper-line, rgba(31,24,18,.12));
  transition: border-left-color .2s;
}
.rd-dissect[data-active="0"] .rd-dis-panel { border-left-color: var(--paper-line, rgba(31,24,18,.12)); }
.rd-dissect:not([data-active="0"]) .rd-dis-panel { border-left-color: var(--paper-honey, #B57A2E); }
.rd-dis-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-style: italic;
  color: var(--paper-ink-mute, #7A6A55);
}
.rd-dis-note-role {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .35rem;
}
.rd-dis-note-contrast .rd-dis-note-role,
.rd-dis-note-conclusion .rd-dis-note-role { color: var(--paper-ember, #B6442C); }
.rd-dis-note-detail .rd-dis-note-role,
.rd-dis-note-transition .rd-dis-note-role { color: var(--paper-ink-soft, #4A3F33); }
.rd-dis-note-text {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
}
.rd-dis-note-text b { font-weight: 600; }
.rd-dis-note-text i { font-style: italic; }

/* ─── guess block (vocabulary guessing, progressive reveal) ───── */
.rd-guess {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-guess-sentence {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin: 0 0 1rem;
}
.rd-guess-blank {
  display: inline-block;
  min-width: 4em;
  padding: 0 .3em;
  background: rgba(31, 24, 18, .08);
  border-bottom: 2px solid var(--paper-honey, #B57A2E);
  color: transparent;
  border-radius: 3px;
  text-align: center;
  font-style: italic;
  transition: background .25s, color .25s;
}
.rd-guess[data-revealed="true"] .rd-guess-blank {
  background: rgba(181, 122, 46, .35);
  color: var(--paper-ink, #1F1812);
  font-style: normal;
  font-weight: 600;
  min-width: 0;
}

.rd-guess-clues {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.rd-guess-clue {
  display: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink-soft, #4A3F33);
  padding: .6rem .9rem .6rem 2.4rem;
  position: relative;
  margin-bottom: .4rem;
  background: var(--paper, #F5EBD3);
  border-radius: 6px;
  border-left: 3px solid var(--paper-honey, #B57A2E);
  animation: rdGuessIn .3s ease-out;
}
.rd-guess-clue::before {
  content: 'Hint ' attr(data-i);
  position: absolute; top: .55rem; left: .85rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: .82rem;
  color: var(--paper-honey, #B57A2E);
  font-weight: 500;
}
@keyframes rdGuessIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.rd-guess[data-clue-idx="1"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="2"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="2"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="3"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="3"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="4"] {
  display: block;
}

.rd-guess-answer {
  display: none;
  background: var(--paper, #F5EBD3);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--paper-ember, #B6442C);
  animation: rdGuessIn .35s ease-out;
}
.rd-guess[data-revealed="true"] .rd-guess-answer { display: block; }
.rd-guess-word {
  display: inline-block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .4rem;
}
.rd-guess-explanation {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
}
.rd-guess-explanation b { font-weight: 600; }
.rd-guess-explanation i { font-style: italic; }

.rd-guess-controls {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.rd-guess-hint, .rd-guess-reveal, .rd-guess-reset {
  padding: .55rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.25));
  background: var(--paper, #F5EBD3);
  color: var(--paper-ink-soft, #4A3F33);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rd-guess-hint:hover:not(:disabled) {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
  color: var(--paper-honey, #B57A2E);
}
.rd-guess-hint:disabled { opacity: .5; cursor: not-allowed; }
.rd-guess-reveal {
  background: var(--paper-ember, #B6442C);
  color: #fff;
  border-color: var(--paper-ember, #B6442C);
}
.rd-guess-reveal:hover {
  background: color-mix(in srgb, var(--paper-ember, #B6442C) 80%, #000);
}
.rd-guess[data-revealed="true"] .rd-guess-reveal { display: none; }
.rd-guess-reset { color: var(--paper-ink-mute, #7A6A55); }
.rd-guess-reset:hover { color: var(--paper-ink, #1F1812); }

/* Mobile: stack the passage + notes / steps. */
@media (max-width: 760px) {
  .rd-passage-grid,
  .rd-wt-grid,
  .rd-compare-grid { grid-template-columns: 1fr; }
  .rd-passage-notes { border-left: 0; padding-left: 0; padding-top: .8rem; border-top: 1px solid var(--paper-line, rgba(31,24,18,.12)); }
  .rd-passage, .rd-walkthrough, .rd-dissect, .rd-guess { padding: 1.2rem 1.2rem 1rem; }
  .rd-dis-paragraph, .rd-guess-sentence { padding: 1rem; font-size: 1rem; }
}

/* ─── Lesson nav (prev/next at bottom of lesson) ─────────────── */
.rd-lesson-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 3.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--paper-line, rgba(31,24,18,.12));
}
.rd-lesson-nav-prev,
.rd-lesson-nav-next {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem 1.1rem;
  background: var(--paper-tint, #EFE2C4);
  border-radius: 9px;
  text-decoration: none;
  color: var(--paper-ink, #1F1812);
  transition: transform .15s, background .15s;
  border: 1px solid transparent;
}
.rd-lesson-nav-next { text-align: right; }
.rd-lesson-nav-prev:hover,
.rd-lesson-nav-next:hover {
  transform: translateY(-2px);
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-lesson-nav-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
}
.rd-lesson-nav-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.2;
}

/* ─── God edit toggle (placeholder for full inline editor) ──── */
.rd-god-edit {
  position: fixed;
  bottom: 1.6rem; right: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ielts-card, #2A1F17);
  border: 1px solid var(--ielts-honey, #D9A268);
  color: var(--ielts-honey, #D9A268);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
  transition: transform .15s, box-shadow .2s;
}
.rd-god-edit:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 32px -10px rgba(217,162,104,.45);
}

/* ─── Empty / loading states ────────────────────────────────── */
.rd-empty, .rd-loading, .rd-coming {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ielts-ink-soft, #B6A484);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.rd-coming {
  background: var(--paper, #F5EBD3);
  border-radius: 12px;
  padding: 3rem 2rem;
  color: var(--paper-ink-soft, #4A3F33);
  margin: 2rem 0;
}
.rd-coming p { margin: 0; font-style: normal; font-family: 'Inter', system-ui, sans-serif; }
.rd-back {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  color: var(--ielts-honey, #D9A268);
  text-decoration: none;
}

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .reading-page { padding: 2rem 1.2rem 4rem; }
  .rd-lessons-grid { grid-template-columns: 1fr; }
  .rd-lesson-card { padding: 1.1rem 1.2rem; gap: 1rem; }
  .rd-lesson-num { font-size: 2rem; }
  .rd-lesson-title { font-size: 1.05rem; }
  .rd-lesson-meta { display: none; }

  .rd-lesson-page { margin: 1.2rem; padding: 2rem 1.4rem 2.4rem; }
  .rd-lesson-title-big { font-size: 1.9rem; }
  .rd-lesson-subtitle { font-size: 1rem; }
  .rd-lesson-nav { grid-template-columns: 1fr; }
}