/* Deep Read: one book-style layout, three colour themes on html[data-theme]. */
:root, [data-theme="paper"] { color-scheme: only light;
  --bg: #f6f1e7; --text: #2a2621; --muted: #7a6f60; --accent: #8a5a3b;
  --rule: #e4dac8; --ornament: #b39a7c; --field: #fffdf8; --field-border: #cfc3ad;
  --button: #2a2621; --button-text: #f6f1e7; --bar: #a8876a;
}
[data-theme="white"] { color-scheme: only light;
  --bg: #ffffff; --text: #1f1f1f; --muted: #6e6e6e; --accent: #7a4a2b;
  --rule: #ececec; --ornament: #b8b8b8; --field: #ffffff; --field-border: #d4d4d4;
  --button: #1f1f1f; --button-text: #ffffff; --bar: #8a8a8a;
}
[data-theme="black"] { color-scheme: only dark;
  --bg: #121110; --text: #e4ddd1; --muted: #978f82; --accent: #d4a373;
  --rule: #2b2825; --ornament: #6e6457; --field: #1c1a18; --field-border: #3a3631;
  --button: #e4ddd1; --button-text: #121110; --bar: #d4a373;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html { --reader-size: 20px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--reader-size)/1.72 Literata, Georgia, serif;
  -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; }
body[data-view="search"] .reader { display: none; }
body[data-view="reader"] .search { display: none; }
a { color: inherit; }
.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* search */
.search { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; }
.search .brand { font: 600 3.4rem/1 Literata, serif; letter-spacing: -.02em; margin: 0; }
.search .tagline { font-style: italic; color: var(--muted); margin: .8rem 0 2.2rem; text-align: center; }
.search form { display: flex; width: min(40rem, 100%); }
.search input { flex: 1; min-width: 0; font: inherit; padding: .9rem 1.1rem; color: inherit; background: var(--field);
  border: 1px solid var(--field-border); border-right: 0; border-radius: 4px 0 0 4px; }
.search input::placeholder { color: var(--muted); }
.search button { font: inherit; cursor: pointer; padding: 0 1.4rem; border: 1px solid var(--button);
  background: var(--button); color: var(--button-text); border-radius: 0 4px 4px 0; }

/* reader */
.topbar { display: flex; align-items: center; gap: 1rem; max-width: 36rem; margin: 0 auto; padding: 1.4rem 1.25rem 0;
  font: italic 400 .95rem Literata, serif; color: var(--muted); }
.brand-small { text-decoration: none; }
.progress { flex: 1; height: 2px; background: var(--rule); }
.progress span { display: block; height: 100%; width: 0; background: var(--bar); }
article { max-width: 36rem; margin: 0 auto; padding: 3rem 1.25rem 12rem; }
article h1 { font: 600 2.5rem/1.15 Literata, serif; letter-spacing: -.015em; text-align: center; margin: 0 0 2.5rem; }
article h1 + p::first-letter { float: left; font-size: 4.2em; line-height: .82; padding: .08em .08em 0 0; color: var(--accent); }
article h2 { font: italic 600 1.35rem/1.3 Literata, serif; text-align: center; margin: 3.2rem 0 1.2rem; }
article h2::before { content: "❦"; display: block; font-style: normal; color: var(--ornament); margin-bottom: .8rem; }
article h3 { font: 600 1.1rem/1.4 Literata, serif; margin: 2rem 0 .6rem; }
article p { margin: 0 0 1.25rem; }
article table { border-collapse: collapse; width: 100%; font-size: .9em; }
article th, article td { padding: .4rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
article blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--ornament); color: var(--muted); font-style: italic; }
.status { max-width: 36rem; margin: -10rem auto 10rem; padding: 0 1.25rem; font-style: italic; color: var(--muted); }
.status:empty { display: none; }
.pace { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 20; padding: .35rem .8rem;
  border-radius: 999px; background: var(--button); color: var(--button-text); font: italic 400 .8rem/1 Literata, serif; }

/* ?debug */
.stats { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 30; padding: .4rem .7rem;
  border-radius: 8px; background: #ff3d7f; color: #fff; font: 12px/1.2 ui-monospace, Menlo, monospace; white-space: nowrap; }

@media (max-width: 600px) {
  html { --reader-size: 18px; }
  .search { padding: 1.25rem; }
  .search form { flex-direction: column; gap: .6rem; }
  .search input { border-right: 1px solid var(--field-border); border-radius: 4px; padding: .85rem .9rem; }
  .search button { border-radius: 4px; padding: .8rem 1.4rem; }
  article h1 { font-size: 2rem; }
  .search .brand { font-size: 2.6rem; }
}

/* reading settings dial */
.dial { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 25; width: 48px; height: 48px; --r: 106px; }
.dial-goo { position: absolute; inset: -130px -10px -10px -130px; filter: url(#goo); pointer-events: none; }
.dial-goo .blob, .dial-item { position: absolute; width: 38px; height: 38px; border-radius: 50%;
  --a: calc(180deg + var(--i) * 22.5deg);
  transition: transform .42s cubic-bezier(.34, 1.4, .5, 1), opacity .2s; transition-delay: calc(var(--i) * 28ms); }
.dial-goo .blob { right: 15px; bottom: 15px; background: var(--button); }
.dial-goo .blob.main { width: 48px; height: 48px; right: 10px; bottom: 10px; }
.dial-items { position: absolute; inset: 0; pointer-events: none; }
.dial-item { left: 5px; top: 5px; border: 0; padding: 0; background: transparent; color: var(--button-text);
  display: grid; place-items: center; cursor: pointer; opacity: 0; }
.dial.open .dial-items { pointer-events: auto; }
.dial.open .dial-item, .dial.open .dial-goo .blob:not(.main) {
  transform: translate(calc(cos(var(--a)) * var(--r)), calc(sin(var(--a)) * var(--r))); }
.dial.open .dial-item { opacity: 1; }
.dial:not(.open) .dial-item, .dial:not(.open) .dial-goo .blob { transition-delay: 0s; }
.dial-item:hover, .dial-item:focus-visible { outline: none; }
.dial-item:hover .swatch, .dial-item:hover .aa, .dial-item:focus-visible .swatch, .dial-item:focus-visible .aa { transform: scale(1.15); }
.aa { font: 600 14px/1 Literata, serif; transition: transform .15s; }
.aa.small { font-size: 12px; }
.aa.large { font-size: 18px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--button-text); transition: transform .15s; }
[data-theme-choice="paper"] .swatch { background: #f6f1e7; }
[data-theme-choice="white"] .swatch { background: #ffffff; }
[data-theme-choice="black"] .swatch { background: #121110; }
[data-theme="paper"] [data-theme-choice="paper"] .swatch, [data-theme="white"] [data-theme-choice="white"] .swatch,
[data-theme="black"] [data-theme-choice="black"] .swatch { box-shadow: 0 0 0 2.5px var(--button), 0 0 0 4px var(--button-text); }
.dial-toggle { position: absolute; inset: 0; border: 0; border-radius: 50%; background: transparent; color: var(--button-text);
  display: grid; place-items: center; cursor: pointer; }
.dial-toggle > * { grid-area: 1 / 1; transition: transform .3s cubic-bezier(.34, 1.4, .5, 1), opacity .2s; }
.toggle-aa { font: 600 19px/1 Literata, serif; letter-spacing: -.02em; }
.toggle-aa small { font-size: 14px; font-weight: 400; }
.toggle-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.dial.open .toggle-aa { opacity: 0; transform: rotate(90deg) scale(.6); }
.dial.open .toggle-close { opacity: 1; transform: none; }
.dial:not(.open) { opacity: .82; transition: opacity .2s; }
.dial:not(.open):hover { opacity: 1; }
@media (max-width: 600px) { .dial { right: 1rem; bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .dial-goo .blob, .dial-item, .dial-toggle > * { transition: none; } }
/* Centre letters by their ink: trim the font's accent space above capitals and descender space below. */
.toggle-aa, .aa { display: block; text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) { .toggle-aa, .aa { transform: translateY(-.1em); } }