/* Three reading treatments. The writing and enlarged Bloom scene are shared. */
body[data-reading] {
  --reader-gutter: clamp(28px, 4.2vw, 72px);
  --reader-bar: 84px;
  --reading-size: 23px;
  --reading-leading: 1.75;
  --reading-font: Georgia, 'Times New Roman', serif;
}
body[data-reading] #writings { --muted: #b9b9b9; --line: #414141; scroll-margin-top: -24px; }
body[data-reading] .site-header .text-button { font-size: 15px; }
body[data-reading] .observatory-read { font-size: 16px; }
body[data-reading] .site-footer .text-button { font-size: 14px; }
body[data-reading] .site-footer > span { font-size: 16px; }

/* The comparison controls stay available without restarting the globe. */
body[data-reading] .reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 12;
  max-width: none;
  min-height: var(--reader-bar);
  padding: 16px var(--reader-gutter);
  gap: 24px;
  align-items: center;
  background: #101010f5;
  border-bottom: 1px solid #363636;
  backdrop-filter: blur(16px);
}
.reading-options { display: flex; gap: 4px; padding: 4px; border: 1px solid #444; border-radius: 4px; }
.reading-options button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  min-height: 44px;
  color: #bdbdbd;
  font: 500 15px var(--sans);
  border-radius: 2px;
}
.reading-options button span { font: 400 11px var(--mono); opacity: .7; }
.reading-options button[aria-pressed=true] { background: #eee; color: #141414; }
.reading-options button:hover:not([aria-pressed=true]) { background: #242424; color: #fff; }
.reader-actions { display: flex; gap: 12px; }
body[data-reading] .reader-toolbar .text-button {
  min-height: 46px;
  padding: 0 17px;
  font-size: 15px;
  color: #eee;
  border: 1px solid #575757;
  border-radius: 3px;
  gap: 16px;
}
body[data-reading] .reader-toolbar .text-button:hover,
body[data-reading] .reader-toolbar .text-button[aria-pressed=true] { background: #eee; color: #111; }

/* All dates, identifiers, links, and passage notes have a readable baseline. */
body[data-reading] .manuscript-grid {
  max-width: 1700px;
  grid-template-columns: 240px minmax(0, 680px) 170px;
  column-gap: clamp(30px, 3.5vw, 64px);
  padding: 52px var(--reader-gutter) 96px;
}
body[data-reading] .manuscript-main { min-width: 0; }
body[data-reading] .manuscript-sidebar { top: calc(var(--reader-bar) + 30px); }
body[data-reading] .sidebar-volume { font-size: 104px; margin: 0 0 26px; }
.chapter-toggle { display: none; }
body[data-reading] .volume-tabs { gap: 6px; border: 0; margin: 0 0 18px; }
body[data-reading] .volume-tabs button {
  flex: 1;
  min-height: 50px;
  margin: 0;
  padding: 8px;
  border: 1px solid #515151;
  color: #c6c6c6;
  font-size: 18px;
}
body[data-reading] .volume-tabs button[aria-pressed=true] { background: #eee; color: #101010; border-color: #eee; }
body[data-reading] .volume-tabs button:hover:not([aria-pressed=true]) { background: #282828; color: white; }
body[data-reading] .manuscript-nav-item {
  min-height: 64px;
  padding: 16px 10px;
  grid-template-columns: 25px minmax(0, 1fr) 16px;
  gap: 10px;
  color: #bdbdbd;
  font: 400 16px/1.5 var(--sans);
  border-bottom-color: #3b3b3b;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-reading] .manuscript-nav-item > .eyebrow { font-size: 12px; color: inherit; letter-spacing: 0; }
body[data-reading] .manuscript-nav-item > span:last-child { opacity: 1; color: inherit; }
body[data-reading] .manuscript-nav-item.is-current { background: #262626; box-shadow: inset 2px 0 #ededed; color: #fff; }
body[data-reading] .manuscript-nav-item:hover { color: #fff; background: #222; }
body[data-reading] .manuscript-meta { flex-direction: row; font: 400 14px/1.6 var(--mono); letter-spacing: 0; color: #c5c5c5; }
body[data-reading] .manuscript-meta > :last-child { color: #ededed; }
body[data-reading] .manuscript-title { margin: 30px 0 38px; font-size: clamp(72px, 7.1vw, 104px); }
body[data-reading] .manuscript-rule { padding: 16px 0; border-top-color: #a0a0a0; }
body[data-reading] .manuscript-rule > .eyebrow { font: 400 14px/1.5 var(--sans); letter-spacing: .04em; color: #c9c9c9; }
body[data-reading] .manuscript-body {
  padding-top: 36px;
  font: 400 var(--reading-size)/var(--reading-leading) var(--reading-font);
  letter-spacing: 0;
  color: #e0e0e0;
  overflow-wrap: break-word;
}
body[data-reading] .manuscript-body .letter-paragraph { margin-bottom: 1.25em; }
body[data-reading] .manuscript-body .salutation { font-size: 1.12em; margin-bottom: 1.2em; }
body[data-reading] .manuscript-body .signature { font-size: 20px; line-height: 1.6; }
body[data-reading] .manuscript-body .signature-name { font-size: 54px; }
body[data-reading] .manuscript-next { padding: 24px 0; border-top-color: #676767; gap: 17px; }
body[data-reading] .manuscript-next > .eyebrow { font-size: 14px; letter-spacing: .04em; color: #c2c2c2; }
body[data-reading] .manuscript-next > span:last-child { font-size: 36px; line-height: 1.2; }
body[data-reading] .manuscript-next > span:last-child > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border: 1px solid #777; border-radius: 50%; font: 24px var(--sans); }
body[data-reading] .marginalia { padding-top: 279px; }
body[data-reading] .margin-note { font-size: 15px; line-height: 1.55; gap: 13px; color: #bdbdbd; padding: 18px 0; }
body[data-reading] .note-number { font-size: 33px; color: #e1e1e1; }
body[data-reading] .margin-note > .eyebrow { font-size: 12px; color: #b0b0b0; }
body[data-reading] .letter-paragraph[tabindex] { scroll-margin-top: calc(var(--reader-bar) + 32px); }

/* 02 — a centered folio, with its contents laid out above the letter. */
body[data-reading=folio] { --reading-size: 26px; --reading-leading: 1.7; }
body[data-reading=folio] .manuscript-grid { display: block; max-width: 1400px; }
body[data-reading=folio] .manuscript-sidebar {
  position: static;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 30px;
  padding-bottom: 32px;
  margin-bottom: 42px;
  border-bottom: 1px solid #535353;
}
body[data-reading=folio] .sidebar-volume { font-size: 96px; }
body[data-reading=folio] .volume-tabs { max-width: 228px; margin-bottom: 22px; }
body[data-reading=folio] #manuscript-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; border: 0; }
body[data-reading=folio] .manuscript-nav-item { min-height: 84px; align-items: start; border: 1px solid #515151; padding: 15px 12px; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 7px; }
body[data-reading=folio] .manuscript-nav-item.is-current { background: #e8e8e8; color: #141414; border-color: #e8e8e8; box-shadow: none; }
body[data-reading=folio] .manuscript-main { max-width: 740px; margin: auto; }
body[data-reading=folio] .manuscript-meta { font-size: 17px; }
body[data-reading=folio] .manuscript-title { text-align: center; font-size: 100px; margin: 36px 0; }
body[data-reading=folio] .manuscript-rule { justify-content: center; }
body[data-reading=folio] .manuscript-rule > .eyebrow { font-size: 16px; letter-spacing: .1em; }
body[data-reading=folio] .manuscript-body { padding-top: 44px; color: #e4e4e4; }
body[data-reading=folio] .marginalia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; max-width: 740px; margin: 54px auto 0; padding-top: 0; }
body[data-reading=folio] .margin-note { margin-top: 0; }

/* 03 — large sans serif text and a clearly separated chapter rail. */
body[data-reading=clarity] { --reading-size: 24px; --reading-leading: 1.7; --reading-font: var(--sans); }
body[data-reading=clarity] .manuscript-grid { max-width: 1440px; grid-template-columns: minmax(0, 760px) 290px; grid-template-areas: 'text chapters' 'notes chapters'; gap: 44px 72px; }
body[data-reading=clarity] .manuscript-main { grid-area: text; }
body[data-reading=clarity] .manuscript-sidebar { grid-area: chapters; padding-left: 30px; border-left: 1px solid #515151; }
body[data-reading=clarity] .sidebar-volume { font: 500 56px/1 var(--sans); letter-spacing: -.055em; margin: 0 0 25px; }
body[data-reading=clarity] .volume-tabs { margin-bottom: 22px; }
body[data-reading=clarity] .manuscript-nav-item { font-size: 18px; padding: 18px 12px; }
body[data-reading=clarity] .manuscript-nav-item.is-current { background: #eee; color: #121212; box-shadow: none; }
body[data-reading=clarity] .manuscript-meta { font-size: 17px; padding: 0 0 22px; border-bottom: 1px solid #797979; }
body[data-reading=clarity] .manuscript-title { font: 500 clamp(60px, 5.4vw, 78px)/1.05 var(--sans); letter-spacing: -.06em; margin: 36px 0; }
body[data-reading=clarity] .manuscript-title em { font-style: normal; color: #f0f0f0; }
body[data-reading=clarity] .manuscript-rule { border-top: 0; padding: 0 0 22px; }
body[data-reading=clarity] .manuscript-rule > .eyebrow { font-size: 16px; }
body[data-reading=clarity] .manuscript-body { color: #ededed; letter-spacing: -.01em; }
body[data-reading=clarity] .manuscript-body .salutation { font-style: normal; font-weight: 500; }
body[data-reading=clarity] .manuscript-body .signature-name { font: 500 38px/1.5 var(--sans); letter-spacing: -.05em; }
body[data-reading=clarity] .marginalia { grid-area: notes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; padding: 0; }
body[data-reading=clarity] .margin-note { margin-top: 0; }
body[data-reading=clarity] .note-number { font: 400 22px var(--mono); }
body[data-reading=clarity] .manuscript-next > span:last-child { font: 500 29px/1.3 var(--sans); letter-spacing: -.03em; }

/* Focus keeps the chosen type treatment, with a comfortable line length. */
body[data-reading] .is-focused .manuscript-grid { display: block; max-width: 900px; }
body[data-reading] .is-focused .manuscript-sidebar,
body[data-reading] .is-focused .marginalia { display: none; }
body[data-reading] .is-focused .manuscript-title { font-size: clamp(72px, 7.1vw, 104px); }
body[data-reading=clarity] .is-focused .manuscript-title { font-size: clamp(60px, 5.4vw, 78px); }

/* The index uses the same readable size hierarchy as the letter. */
body[data-reading] .index-dialog { width: min(760px, 100%); }
body[data-reading] .index-top > .eyebrow { font-size: 13px; letter-spacing: .04em; }
body[data-reading] .icon-button { width: 46px; height: 46px; }
body[data-reading] .index-dialog h2 { font-size: 78px; }
body[data-reading] .search-wrap input { font-size: 18px; }
body[data-reading] .search-wrap kbd { font-size: 11px; }
body[data-reading] .index-filters { gap: 10px; margin-top: 24px; }
body[data-reading] .index-filters button { min-width: 60px; min-height: 46px; font-size: 16px; border: 1px solid #a0a0a0; }
body[data-reading] .index-filters button[aria-pressed=true] { background: #171717; color: #eee; border-color: #171717; }
body[data-reading] #index-count { font-size: 13px; letter-spacing: .02em; }
body[data-reading] .index-result { grid-template-columns: 64px minmax(0, 1fr) 26px; padding: 24px 0; }
body[data-reading] .index-result > .eyebrow { font-size: 12px; letter-spacing: 0; }
body[data-reading] .index-result-title { font-size: 34px; }
body[data-reading] .index-result-detail { font-size: 15px; color: #555; }
body[data-reading=clarity] .index-result-title { font: 500 26px/1.3 var(--sans); letter-spacing: -.03em; }

@media (max-width: 1200px) {
  body[data-reading=margin] .manuscript-grid { grid-template-columns: 218px minmax(0, 680px); gap: 44px; }
  body[data-reading=margin] .marginalia { display: grid; grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; padding-top: 0; }
  body[data-reading=clarity] .manuscript-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; }
  body[data-reading=clarity] .manuscript-sidebar { padding-left: 24px; }
}
@media (max-width: 950px) {
  body[data-reading] { --reading-size: 22px; }
  body[data-reading=folio] { --reading-size: 25px; }
  body[data-reading=margin] .manuscript-grid { grid-template-columns: 185px minmax(0, 1fr); gap: 32px; }
  body[data-reading=margin] .manuscript-nav-item { font-size: 15px; grid-template-columns: 20px minmax(0, 1fr) 12px; gap: 8px; padding-left: 8px; padding-right: 8px; }
  body[data-reading=clarity] .manuscript-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; }
  body[data-reading=clarity] .manuscript-nav-item { font-size: 16px; grid-template-columns: 22px minmax(0, 1fr) 13px; gap: 7px; padding-left: 7px; padding-right: 7px; }
  body[data-reading] .manuscript-meta { font-size: 13px; }
  body[data-reading=folio] .manuscript-meta { font-size: 16px; }
  body[data-reading=clarity] .manuscript-meta { font-size: 15px; }
}
@media (max-width: 700px) {
  body[data-reading] { --reader-gutter: 24px; --reader-bar: 128px; --reading-size: 21px; --reading-leading: 1.75; }
  body[data-reading=folio] { --reading-size: 23px; }
  body[data-reading=clarity] { --reading-size: 22px; }
  body[data-reading] .reader-toolbar { flex-wrap: wrap; gap: 10px; padding: 10px var(--reader-gutter); }
  .reading-options { flex: 1 0 100%; gap: 3px; padding: 3px; }
  .reading-options button { flex: 1; min-height: 40px; padding: 0 8px; gap: 8px; font-size: 14px; }
  .reading-options button span { font-size: 11px; }
  .reader-actions { width: 100%; justify-content: space-between; }
  body[data-reading] .reader-toolbar .text-button { min-height: 44px; padding: 0 13px; font-size: 14px; }
  body[data-reading] .manuscript-grid,
  body[data-reading] .is-focused .manuscript-grid { display: block; padding: 28px var(--reader-gutter) 55px; }
  body[data-reading] .manuscript-sidebar { display: block; position: static; border: 0; padding: 0; margin: 0 0 35px; }
  body[data-reading] .sidebar-heading { display: none; }
  .chapter-toggle {
    width: 100%; min-height: 64px; padding: 13px 15px;
    display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
    border: 1px solid #727272; color: #f3f3f3; background: #202020;
    text-align: left; font: 500 16px/1.5 var(--sans);
  }
  .chapter-toggle-number { font: 400 12px/1.4 var(--mono); color: #c1c1c1; }
  .chapter-chevron { font: 400 24px/1 var(--sans); }
  .chapter-toggle[aria-expanded=true] .chapter-chevron { transform: rotate(180deg); }
  body[data-reading] .chapter-list { display: none; border: 1px solid #515151; border-top: 0; padding: 15px; }
  body[data-reading] .chapters-open .chapter-list { display: block; }
  body[data-reading] .volume-tabs { max-width: none; margin-bottom: 10px; }
  body[data-reading] #manuscript-nav { display: block; overflow: visible; border: 0; }
  body[data-reading] .manuscript-nav-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: baseline; padding: 14px 10px; min-height: 56px; font-size: 16px; gap: 9px; border: 0; border-bottom: 1px solid #454545; }
  body[data-reading] .manuscript-nav-item > .eyebrow,
  body[data-reading] .manuscript-nav-item > span:last-child { display: block; }
  body[data-reading] .manuscript-meta { font-size: 14px; gap: 10px; }
  body[data-reading] .manuscript-title,
  body[data-reading] .is-focused .manuscript-title { font-size: clamp(66px, 15vw, 94px); margin: 27px 0 30px; }
  body[data-reading=folio] .manuscript-title { text-align: left; }
  body[data-reading=clarity] .manuscript-title,
  body[data-reading=clarity] .is-focused .manuscript-title { font-size: clamp(48px, 10.8vw, 70px); letter-spacing: -.055em; }
  body[data-reading] .manuscript-body { padding-top: 28px; }
  body[data-reading] .manuscript-body .signature { font-size: 18px; }
  body[data-reading] .marginalia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 0; margin-top: 45px; }
  body[data-reading] .margin-note { font-size: 14px; margin-top: 0; }
  body[data-reading] .manuscript-next > span:last-child { font-size: 32px; }
  body[data-reading=clarity] .manuscript-next > span:last-child { font-size: 26px; }
  body[data-reading] .is-focused .manuscript-sidebar,
  body[data-reading] .is-focused .marginalia { display: none; }
  body[data-reading] .index-dialog { padding: 24px; }
  body[data-reading] .index-dialog h2 { font-size: 68px; }
  body[data-reading] .index-result { grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 10px; }
  body[data-reading] .index-result-title { font-size: 30px; overflow-wrap: anywhere; }
  body[data-reading=clarity] .index-result-title { font-size: 23px; }
  body[data-reading] .index-result-detail { font-size: 14px; }
  body[data-reading] .site-header .text-button { font-size: 13px; }
  body[data-reading] .header-actions { gap: 16px; }
  body[data-reading] .observatory-read { font-size: 15px; }
}
@media (max-width: 370px) {
  body[data-reading] { --reader-gutter: 20px; }
  .reading-options button { font-size: 13px; gap: 6px; padding: 0 5px; }
  body[data-reading] .manuscript-meta { font-size: 13px; }
  body[data-reading] .index-dialog { padding: 20px; }
  body[data-reading] .index-filters button { min-width: 54px; }
  body[data-reading] .header-actions { gap: 12px; }
  body[data-reading] .site-header .text-button { font-size: 12px; }
  body[data-reading] .site-header { gap: 12px; }
  body[data-reading] .brand { font-size: 17px; }
  body[data-reading] .site-footer .text-button { font-size: 12px; }
}
@media print {
  body[data-reading] .reader-toolbar { display: none; }
  body[data-reading] .manuscript-grid { display: block; padding: 0; }
  body[data-reading] .manuscript-body { font-size: 12pt; color: black; }
  body[data-reading] .manuscript-title { font-size: 40pt; color: black; }
}