/* The reader: Part One on paper, with Wei's notation drawn as you read, a scroll whose roll
   thins as you go, and a lamp mode that reads by a pool of light. */
body[data-page="read"] { --reader-size: 1.1875rem; --note-amber: #8f530b; background-image: none; }
body[data-page="read"][data-theme="ink"] { --bg: #16140e; --bg-2: #1f1c15; --fg: #e8e1cf; --fg-2: #c3b9a2; --muted: #8e8573; --rule: rgba(232,225,207,.14); --accent: var(--gold-2); --panel: rgba(22,20,14,.96); --focus: var(--gold-1); --ink-fact: #e8e1cf; --ink-crossref: #86a6d8; --ink-discrepancy: #ef6a4c; --ink-amber: #e0a24a; --note-amber: var(--ink-amber); color-scheme: dark; }
body[data-page="read"][data-theme="lamp"] { --bg: #0f0b07; --bg-2: #18110a; --fg: #efe2c4; --fg-2: #cdbb96; --muted: #927f60; --rule: rgba(239,226,196,.12); --accent: var(--gold-2); --panel: rgba(15,11,7,.96); --focus: var(--gold-1); --ink-fact: #efe2c4; --ink-crossref: #8fb0e0; --ink-discrepancy: #f07050; --ink-amber: #f0b050; --note-amber: var(--ink-amber); color-scheme: dark; }
body[data-page="read"][data-size="small"] { --reader-size: 1.0625rem; }
body[data-page="read"][data-size="large"] { --reader-size: 1.375rem; }

.reader { position: relative; }
.reader-head, .reader-text { width: 100%; max-width: calc(38rem + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.reader-head { padding-top: clamp(3rem, 9vh, 6rem); padding-bottom: 2rem; }
.reader-title { margin: 1rem 0 1.2rem; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); text-wrap: balance; }
.reader-head .lede { text-wrap: pretty; }
/* The key: the sentence on its own line, then the four marks two by two (one by one on phones). */
.reader-key { font-size: .95rem; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 1.4rem 0 0; }
.reader-key::after { content: ""; order: 1; flex-basis: 100%; margin-bottom: -.2rem; }
.key-item { order: 2; flex: 1 1 14rem; display: inline-flex; align-items: center; gap: .45rem; }
.key-swatch { display: inline-block; flex: none; width: 1.3rem; height: .8rem; }
.key-circle { border: 1.5px solid var(--ink-discrepancy); border-radius: 50%; }
.key-box { border: 1.5px solid var(--fg); }
.key-underline { border-bottom: 1.5px solid var(--fg); height: .5rem; }
.key-amber { background: color-mix(in srgb, var(--ink-amber) 40%, transparent); }
.reader-resume { margin: 1.6rem 0 2rem; }
.reader-toc { margin-top: 2.2rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.reader-toc ol { list-style: none; padding: 0; margin: .6rem 0 0; columns: 2; column-gap: 2rem; }
@media (max-width: 560px) { .reader-toc ol { columns: 1; } }
.reader-toc li { break-inside: avoid; }
/* Rows at least 44px tall: they are the chapter navigation, and on phones they are tapped. */
.reader-toc a { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0; text-decoration: none; text-wrap: balance; }
.reader-toc a:hover { color: var(--accent); }
.reader-toc a.is-read .label { color: var(--accent); }

.reader-text { font-size: var(--reader-size); line-height: 1.68; padding-bottom: 8rem; hyphens: auto; font-variation-settings: "opsz" 16; }
.reader-text p { margin: 0 0 1.05em; text-wrap: pretty; }
.chapter { position: relative; padding-top: clamp(3rem, 8vh, 5.5rem); }
.chapter + .chapter { border-top: 1px solid var(--rule); margin-top: 2rem; }
.chapter-num { margin-bottom: .6rem; }
.chapter-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 350; font-style: italic; letter-spacing: -.01em; margin: 0 0 1.6rem; font-variation-settings: "opsz" 60; text-wrap: balance; }
.chapter > .chapter-title + p::first-letter {
  float: left; font-family: var(--f-display); font-weight: 600; font-size: 3.4em; line-height: .78; padding: .08em .1em 0 0; color: var(--accent);
}
.reader-text em { font-style: italic; }

/* Wei's notes. Where the page has room (980px and up) they stand in the left margin beside the
   phrase; on narrower screens each is a gloss under its paragraph, so nothing has to be tapped
   to be read. read.js places each note right after the paragraph that holds its mark. */
.margin-note {
  position: relative; display: block; margin: -.7rem 0 1.3rem;
  font-family: var(--f-mono); font-size: .7rem; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; text-wrap: balance;
  color: var(--note-ink, var(--muted)); opacity: 0; transition: opacity .8s var(--ease-ink), transform .8s var(--ease-ink);
}
.margin-note::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; background: currentColor; vertical-align: middle; margin-right: .6rem; opacity: .6; }
.margin-note.is-in { opacity: 1; transform: none; }
@media (min-width: 980px) {
  .margin-note { position: absolute; right: calc(100% + 1.6rem); width: 9rem; margin: 0; text-align: right; transform: translateX(8px); }
  .margin-note::before { content: none; }
  .margin-note::after { content: ""; display: inline-block; width: 1.2rem; height: 1px; background: currentColor; vertical-align: middle; margin-left: .5rem; opacity: .6; }
}
@media (min-width: 1181px) { .margin-note { width: 10.5rem; } }
.hide-marks .mark-svg, .hide-marks .margin-note { display: none !important; }
.hide-marks .wei-mark[data-mark="amber"] { background-size: 0 0 !important; }

.reader-end { margin-top: 5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.reader-text .reader-end-line { font-size: var(--step-2); line-height: 1.25; font-weight: 350; margin: .8rem 0 1.6rem; text-wrap: balance; }
.reader-text .reader-end-note { margin: 1.4rem 0 0; font-size: .92rem; color: var(--muted); }

/* The toolbar floats at the foot of the page while you read. It works only with JavaScript. */
.reader-bar {
  position: fixed; z-index: 30; left: 50%; bottom: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: .35rem; padding: .35rem .45rem .35rem .9rem; max-width: calc(100vw - 1.5rem); overflow-x: auto;
  background: var(--panel); color: var(--fg); border: 1px solid var(--rule); border-radius: 2rem; box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transition: opacity .4s, transform .5s var(--ease-ink);
}
.reader-bar.is-hidden { opacity: 0; transform: translate(-50%, 140%); pointer-events: none; }
/* Reached by keyboard while it is tucked away: it comes back. */
.reader-bar:focus-within, .reader-bar.is-open { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
/* The chapter you are in; it is also the link back to the list of chapters (read.js). */
.reader-where { display: inline-flex; align-items: center; min-height: 2.25rem; white-space: nowrap; margin-right: .4rem; min-width: 5.5rem; text-decoration: none; }
a.reader-where:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }
a.reader-where:focus-visible { outline-offset: 1px; border-radius: 1rem; }
.bar-group { display: inline-flex; border-left: 1px solid var(--rule); padding-left: .3rem; margin-left: .1rem; }
.bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: .2rem .6rem; border: 0; border-radius: 1rem; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
  transition: color .2s, background-color .2s;
}
.bar-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.bar-btn:active { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.bar-btn[aria-pressed="true"], .bar-btn[aria-expanded="true"] { color: var(--bg); background: var(--fg); }
.bar-btn:focus-visible { outline-offset: 1px; }
/* The settings button exists only on phones (read.js adds it). */
.bar-more { display: none; font-family: var(--f-body); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
@media (pointer: coarse) { .bar-btn { min-height: 2.75rem; min-width: 2.75rem; } .reader-where { min-height: 2.75rem; } }
@media (max-width: 700px) { .reader-where { display: none; } .reader-bar { padding-left: .45rem; } .bar-btn { padding: .2rem .45rem; } }
/* Phones: the bar folds to the chapter and "Aa"; the text size, page, marks and focus open above
   it in two rows, every control at least 44px square. */
@media (max-width: 560px) {
  .reader-bar { gap: .25rem; padding: .3rem; }
  .reader-bar .bar-btn { min-height: 2.75rem; min-width: 2.75rem; }
  .reader-bar .reader-where { display: flex; order: 2; flex: 1 1 auto; min-width: 0; min-height: 2.75rem; margin: 0 .2rem 0 .45rem; padding: 0 .25rem; }
  .bar-more { display: inline-flex; order: 5; }
  .reader-bar:not(.is-open) .bar-group, .reader-bar:not(.is-open) [data-marks-toggle], .reader-bar:not(.is-open) [data-focus-toggle] { display: none; }
  .reader-bar.is-open { flex-wrap: wrap; width: calc(100vw - 1.5rem); border-radius: 1.4rem; overflow: visible; }
  .reader-bar.is-open .bar-group { order: 1; flex: 1 1 40%; margin: 0; padding: 0; border: 0; justify-content: space-between; }
  .reader-bar.is-open .bar-group + .bar-group { border-left: 1px solid var(--rule); padding-left: .25rem; }
  .reader-bar.is-open .bar-group .bar-btn { flex: 1 1 auto; }
  .reader-bar.is-open [data-marks-toggle] { order: 3; }
  .reader-bar.is-open [data-focus-toggle] { order: 4; }
}

/* The scroll: the unread roll thins, the read roll thickens. */
.scroll-roll { position: fixed; z-index: 20; right: 1.4rem; top: calc(var(--masthead-h) + 2rem); bottom: 5.5rem; width: 2.2rem; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; pointer-events: none; }
@media (max-width: 1100px) { .scroll-roll { display: none; } }
.roll { display: block; width: 2.2rem; border-radius: .35rem; background: linear-gradient(180deg, #d8c9a4, #b99f6c 40%, #8a6f3e 70%, #c8b387); box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.12); transition: height .25s linear; }
.roll-top { height: calc(.5rem + var(--read, 0) * 1.9rem); }
.roll-bottom { height: calc(.5rem + (1 - var(--read, 0)) * 1.9rem); }
.roll-strip { width: 1.3rem; background: color-mix(in srgb, var(--fg) 7%, var(--bg)); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--fg) 14%, transparent) 7px 8px); background-size: 60% 100%; background-repeat: no-repeat; background-position: center; }
.reader-progress { position: fixed; z-index: 45; left: 0; top: 0; height: 2px; width: calc(var(--read, 0) * 100%); background: var(--accent); }
@media (min-width: 1101px) { .reader-progress { display: none; } }
/* Without JavaScript the toolbar could not act and the roll could not move: the page is just the text. */
html:not(.js) .reader-bar, html:not(.js) .scroll-roll, html:not(.js) .reader-progress, html:not(.js) .lamp { display: none; }

/* Lamp: a pool of warm light that follows where you read. At its darkest the text outside the
   pool still reads at 4.8:1; the head, chapter labels, Wei's notes and the end of the part sit
   above the shade, so small type keeps its full contrast. */
.lamp { position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(38rem 26rem at 50% var(--lamp-y, 50%), rgba(255,190,110,.06), rgba(10,6,3,0) 40%, rgba(5,3,1,.46) 75%); }
body[data-theme="lamp"] .lamp { opacity: 1; }
body[data-theme="lamp"] .reader-text { text-shadow: 0 0 18px rgba(255,170,80,.06); }
body[data-theme="lamp"] .reader-head, body[data-theme="lamp"] .chapter-num, body[data-theme="lamp"] .reader-end { position: relative; z-index: 16; }
body[data-theme="lamp"] .margin-note { z-index: 16; }

/* Focus: nothing but the page. */
html.reading-focus .masthead, html.reading-focus .site-footer, html.reading-focus .scroll-roll { opacity: 0; pointer-events: none; }
html.reading-focus .reader-bar { opacity: .35; }
html.reading-focus .reader-bar:hover, html.reading-focus .reader-bar:focus-within, html.reading-focus .reader-bar.is-open { opacity: 1; }

@media print { .reader-bar, .scroll-roll, .lamp, .reader-progress, .margin-note { display: none !important; } }