/* The Shadows of War: the on-screen reader.
   A book page, not a web page: one column of about 65 characters, a reading
   face, generous leading. Three themes, each checked for contrast:
   light 13.9:1, sepia 11.2:1, dark 12.6:1 (body text). */

.reader {
  --r-bg: #fbf8f1; --r-ink: #1f2128; --r-soft: #5a5e68; --r-line: rgba(31,33,40,.14); --r-accent: #8e4f2c; --r-bar: rgba(251,248,241,.94);
  --r-size: 1.2rem;
  background: var(--r-bg); color: var(--r-ink);
  transition: background-color 300ms ease, color 300ms ease;
  padding-bottom: var(--s-9);
}
.reader[data-theme="sepia"] { --r-bg: #f1e5cc; --r-ink: #3b2f22; --r-soft: #6a5a45; --r-line: rgba(59,47,34,.18); --r-accent: #8e4f2c; --r-bar: rgba(241,229,204,.94); }
.reader[data-theme="dark"] { --r-bg: #14171f; --r-ink: #d9d4c9; --r-soft: #a19c92; --r-line: rgba(217,212,201,.14); --r-accent: #e6c88f; --r-bar: rgba(20,23,31,.94); }
.reader[data-theme="dark"] :focus-visible { outline-color: var(--lamp); }
.reader :focus-visible { outline-color: var(--r-accent); }

/* Toolbar */
.reader-bar {
  position: sticky; top: 4.25rem; z-index: 40;
  background: var(--r-bar); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--r-line);
}
.reader-bar__progress { height: 2px; background: var(--r-line); }
.reader-bar__progress span { display: block; height: 100%; width: 0; background: var(--r-accent); transform-origin: left; }
.reader-bar__inner { display: flex; align-items: center; gap: var(--s-2); width: min(100% - 1rem, 56rem); margin-inline: auto; min-height: 3.25rem; }
.reader-bar__now { flex: 1; margin: 0; min-width: 0; text-align: center; font-family: var(--f-display); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--r-soft); }
@media (max-width: 34em) { .reader-bar__now { display: none; } .reader-bar__inner { justify-content: space-between; } }
.rb-group { display: inline-flex; gap: 2px; align-items: center; }
.rb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; min-width: 44px; padding: 0 .7rem;
  background: transparent; border: 0; border-radius: var(--radius); color: var(--r-ink); cursor: pointer;
  font-family: var(--f-label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.rb-btn:hover { background: var(--r-line); }
.rb-btn svg { width: 18px; height: 18px; }
.rb-btn--icon { font-family: var(--f-display); text-transform: none; letter-spacing: 0; padding: 0; }
.rb-btn[disabled] { opacity: .4; cursor: not-allowed; }
.rb-swatch { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.rb-swatch::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(127,127,127,.6); }
.rb-swatch--light::before { background: #fbf8f1; }
.rb-swatch--sepia::before { background: #e9d9b6; }
.rb-swatch--dark::before { background: #14171f; }
.rb-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--r-bg), 0 0 0 4px var(--r-accent); }

.reader-contents { border-top: 1px solid var(--r-line); }
.reader-contents ol { list-style: none; margin: 0 auto; padding: var(--s-3) 0 var(--s-4); width: min(100% - 2rem, 40rem); counter-reset: ch; }
.reader-contents a { display: block; padding: var(--s-3) var(--s-2); text-decoration: none; border-radius: var(--radius); color: var(--r-ink); }
.reader-contents a:hover, .reader-contents a[aria-current="true"] { background: var(--r-line); }
.reader-contents .t { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.reader-contents .d { font-size: .88rem; font-style: italic; color: var(--r-soft); }

.resume { width: min(100% - 2rem, 34em); margin: var(--s-5) auto 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--r-line); font-size: .95rem; text-align: center; }
.resume p { margin: 0; }
.rb-link { background: none; border: 0; padding: .4rem .2rem; min-height: 44px; font: inherit; color: var(--r-accent); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.rb-link--quiet { color: var(--r-soft); }

/* Title page */
.reader-title { text-align: center; padding: clamp(3rem, 2rem + 5vw, 6rem) 1rem var(--s-6); }
.reader-title .eyebrow { color: var(--r-accent); }
.reader-title h1 { font-size: var(--step-4); margin-bottom: var(--s-2); }
.reader-title .by { font-family: var(--f-label); letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; color: var(--r-soft); }
.reader-title .note { font-size: .95rem; color: var(--r-soft); margin-top: var(--s-5); }
.reader-title .note a { color: var(--r-ink); }

/* The chapter */
.chapter { width: min(100% - 2.5rem, 34em); margin-inline: auto; font-size: var(--r-size); padding-top: var(--s-8); scroll-margin-top: 8rem; }
.chapter + .chapter { border-top: 1px solid var(--r-line); margin-top: var(--s-8); }
.chapter__head { text-align: center; margin-bottom: var(--s-7); }
.chapter__img { margin: 0 calc(50% - min(50vw - 1.25rem, 20em)) var(--s-7); }
.chapter__img img { width: 100%; max-height: 70svh; object-fit: cover; }
.reader[data-theme="dark"] .chapter__img img { filter: brightness(.88); }
.chapter__num { font-family: var(--f-label); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--r-accent); margin-bottom: var(--s-3); }
.chapter__num--orn svg { width: 28px; height: 14px; margin-inline: auto; }
.chapter__head h2 { font-size: calc(var(--r-size) * 2); margin-bottom: var(--s-3); }
.chapter__date { font-style: italic; color: var(--r-soft); font-size: .95em; }
.chapter__text { font-family: var(--f-serif); line-height: 1.75; hyphens: auto; -webkit-hyphens: auto; font-variant-numeric: oldstyle-nums; }
.chapter__text p { margin: 0; text-indent: 1.5em; }
.chapter__text p:first-child, .chapter__text .awaiting + p, .chapter__text .sample-label + p, .chapter__text .scene + p { text-indent: 0; }
.chapter__text > p:first-child:not(.awaiting)::first-letter, .chapter__text > .sample-label + p::first-letter { font-family: var(--f-display); float: left; font-size: 3.4em; line-height: .8; padding: .08em .08em 0 0; color: var(--r-accent); }
.chapter__text .scene { text-align: center; text-indent: 0; margin: 1.2em 0; letter-spacing: .5em; color: var(--r-soft); }
.awaiting { text-indent: 0 !important; padding: var(--s-4); border: 1px dashed var(--r-line); font-size: .9rem; color: var(--r-soft); margin-bottom: var(--s-6) !important; font-style: italic; }
.sample-label { text-indent: 0 !important; font-family: var(--f-label); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--r-soft); margin-bottom: var(--s-3) !important; }

.chapter__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-8); }
.chapter__nav a { display: flex; flex-direction: column; padding: var(--s-4); border: 1px solid var(--r-line); text-decoration: none; color: var(--r-ink); min-height: 56px; }
.chapter__nav a:hover { border-color: var(--r-accent); }
.chapter__next { text-align: right; grid-column: 2; }
.chapter__nav .k { font-family: var(--f-label); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--r-soft); }
.chapter__nav .t { font-family: var(--f-display); font-size: 1.1rem; }

/* The end of the sample */
.continues { width: min(100% - 2rem, 40rem); margin: var(--s-9) auto 0; text-align: center; }
.continues .orn-rule { color: var(--r-accent); }
.continues h2 { font-size: var(--step-3); }
.continues p { color: var(--r-soft); }
.continues__form { text-align: left; margin-top: var(--s-7); }