/* Folio for the web: the same printed-page look as the Android app. */
@font-face { font-family: Fraktur; src: url(fonts/unifraktur.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Fell; src: url(fonts/fell_regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Fell; font-style: italic; src: url(fonts/fell_italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: FellSC; src: url(fonts/fell_sc.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Cinzel; src: url(fonts/cinzel.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Garamond; src: url(fonts/garamond.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Amita; src: url(fonts/amita.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Tiro; src: url(fonts/tiro.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Tiro; font-style: italic; src: url(fonts/tiro_italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Brush; src: url(fonts/yujimai.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Zen; src: url(fonts/zenantique.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Copperplate; src: url(fonts/pinyon.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Primer; src: url(fonts/greatprimer.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Primer; font-style: italic; src: url(fonts/greatprimer_italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Pica; src: url(fonts/pica.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Pica; font-style: italic; src: url(fonts/pica_italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: OldStandard; src: url(fonts/oldstandard.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: OldStandard; font-style: italic; src: url(fonts/oldstandard_italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Typewriter; src: url(fonts/specialelite.woff2) format("woff2"); font-display: swap; }

:root {
  --page: #EFE9DD; --paper: #F8F4EA; --ink: #1A1814; --faded: #6A6357; --rule: rgba(26,24,20,.2); --rubric: #8E1B12;
  --plank: rgba(26,24,20,.82); --scale: 1; --lines: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #12100D; --paper: #1C1915; --ink: #E8E1D2; --faded: #A39B8B; --rule: rgba(232,225,210,.2); --rubric: #C9503F; --plank: #4A4037; color-scheme: dark; }
}
:root[data-theme="dark"] { --page: #12100D; --paper: #1C1915; --ink: #E8E1D2; --faded: #A39B8B; --rule: rgba(232,225,210,.2); --rubric: #C9503F; --plank: #4A4037; color-scheme: dark; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--ink); font: 17px/1.5 Fell, Georgia, serif; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--rubric); }
img { max-width: 100%; }

#app { max-width: 560px; margin: 0 auto; min-height: 100%; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.screen { padding: calc(14px + env(safe-area-inset-top)) 18px 24px; }

.label { font-family: FellSC, serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rubric); }
.faded { color: var(--faded); }
.it { font-style: italic; }
.masthead h1 { font: 46px/1.12 Fraktur, serif; margin: 6px 0 2px; font-weight: normal; }
.masthead p { margin: 0; font-style: italic; color: var(--faded); }
.masthead::after { content: ""; display: block; height: 3px; margin-top: 10px; border-top: .6px solid var(--ink); border-bottom: .6px solid var(--ink); opacity: .6; }
.panel { background: var(--paper); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -5px; border-radius: 3px; padding: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.scroller { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x proximity; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { flex: 0 0 auto; scroll-snap-align: start; }
.section { margin-top: 22px; }
.section h2 { margin: 0; font: 28px Fraktur, serif; font-weight: normal; }
.pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px;
  font-family: FellSC, serif; letter-spacing: .05em; font-size: 15px; }
.pill.on { background: var(--ink); color: var(--paper); }
.pill.red { background: var(--rubric); border-color: var(--rubric); color: var(--paper); }
.chip { border: 1px solid var(--faded); border-radius: 999px; padding: 6px 13px; font: 13px FellSC, serif; white-space: nowrap; }
.chip.red { background: var(--rubric); border-color: var(--rubric); color: var(--paper); }

/* install hint for iPhone */
.install { margin: 10px 0 0; padding: 12px 14px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 15px; line-height: 1.35; display: flex; gap: 12px; align-items: flex-start; }
.install b { font-family: FellSC, serif; letter-spacing: .04em; }
.install .x { margin-left: auto; font-size: 20px; line-height: 1; opacity: .7; }
.share-glyph { display: inline-block; width: 15px; height: 17px; vertical-align: -2px; border: 1.6px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; position: relative; margin: 0 2px; }
.share-glyph::before { content: "↑"; position: absolute; left: 50%; transform: translateX(-50%); top: -10px; font-size: 14px; }

/* quota */
.quota { display: flex; gap: 14px; align-items: center; }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--rubric) calc(var(--p) * 1%), var(--rule) 0); }
.ring div { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; text-align: center; line-height: 1; }
.ring b { font-size: 24px; font-weight: normal; } .ring small { font-size: 11px; color: var(--faded); }
.seal { display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b5372a, #7a150e 70%);
  color: #f3e7cf; font-family: Fell, serif; box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 3px rgba(0,0,0,.12); }
.seal.off { background: none; border: 1.5px solid var(--rule); color: var(--faded); box-shadow: none; }

/* small cards in rows */
.mini { width: 158px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 12px; text-align: left; }
.mini h3 { margin: 0 0 4px; font: 20px/1.15 Fraktur, serif; font-weight: normal; min-height: 46px; }
.mini.wide { width: 230px; } .mini.wide h3 { font: 18px/1.3 Fell, serif; min-height: 70px; }
.bar { height: 3px; background: var(--rule); margin-top: 6px; } .bar i { display: block; height: 100%; background: var(--rubric); }

/* bookcase */
.shelfchips { position: sticky; top: 0; z-index: 5; background: var(--page); margin: 0 -18px; padding: 8px 18px; border-bottom: .6px solid var(--rule); }
.plate { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; }
.plate .name { flex: 1; text-align: center; background: var(--paper); outline: 1px solid var(--rule); outline-offset: -3px; border: 1px solid var(--rule); padding: 7px 10px; }
.plate .name b { display: block; font: 15px FellSC, serif; letter-spacing: .13em; font-weight: normal; }
.plate .name span { font-style: italic; font-size: 12px; color: var(--faded); }
.plate .orn { color: var(--rubric); }
.books { position: relative; display: flex; gap: 5px; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding: 0 4px 10px; min-height: 206px; }
.books::-webkit-scrollbar { display: none; }
.books::after { content: ""; position: sticky; }
.shelfwrap { position: relative; }
.shelfwrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--plank); border-radius: 1px; }
.spine { position: relative; flex: 0 0 auto; border-radius: 3px 3px 1px 1px; display: grid; place-items: center; overflow: hidden; transition: transform .25s cubic-bezier(.3,1.6,.6,1); }
.spine:active { transform: translateY(-10px) rotate(-2deg); }
.spine .t { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; max-height: 82%; line-height: 1.12; padding: 0 3px; }
.spine .band { position: absolute; left: 5px; right: 5px; height: 2px; }
.spine .hl { position: absolute; top: 0; bottom: 0; left: 18%; width: 12%; background: rgba(255,255,255,.07); }
.spine .foot { position: absolute; bottom: 4px; font-size: 12px; }
.spine.remote::before { content: ""; position: absolute; inset: 0; background: var(--page); opacity: .28; }
.spine .ribbon { position: absolute; top: 0; right: 6px; width: 5px; height: 32%; background: var(--rubric); }
.ghost { flex: 0 0 auto; width: 52px; height: 170px; border: 1.2px dashed var(--faded); opacity: .55; border-radius: 4px; display: grid; place-items: center; }
.ghost span { writing-mode: vertical-rl; transform: rotate(180deg); font-style: italic; font-size: 14px; color: var(--faded); }

/* bottom sheet */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; animation: fade .2s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto; max-height: 88vh; overflow-y: auto;
  background: var(--paper); border-radius: 16px 16px 0 0; padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); animation: up .25s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--rule); margin: 0 auto 14px; }
@keyframes up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }

/* tab bar */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); border-top: .6px solid var(--rule);
  display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
nav.tabs div { display: flex; width: 100%; max-width: 560px; }
nav.tabs a { flex: 1; text-align: center; padding: 9px 0 8px; text-decoration: none; color: var(--faded); font: 11px FellSC, serif; letter-spacing: .12em; }
nav.tabs a i { display: block; font-style: normal; font-size: 21px; line-height: 1.2; font-family: Fell, serif; }
nav.tabs a.on { color: var(--rubric); }

/* reader */
.reader { position: fixed; inset: 0; z-index: 20; background: var(--page); display: flex; flex-direction: column; }
.rtop { display: flex; align-items: center; padding: calc(6px + env(safe-area-inset-top)) 6px 4px; border-bottom: .6px solid var(--rule); }
.rtop .mid { flex: 1; text-align: center; line-height: 1.2; min-width: 0; }
.rtop .mid b { display: block; font: 13px FellSC, serif; letter-spacing: .14em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtop .mid small { font-style: italic; color: var(--faded); font-size: 12px; }
.icon { width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; }
.pages { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.leaf { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); perspective: 1600px; }
.flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.flip.over { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-y: auto; overscroll-behavior: auto contain;
  background: var(--paper); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -6px; border-radius: 3px; padding: 20px 22px 26px; }
.face.back { transform: rotateY(180deg); }
.fhead { display: flex; align-items: baseline; gap: 8px; }
.fhead .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn { font: 12px FellSC, serif; color: var(--rubric); padding: 2px 6px; }
.link { border-left: 2px solid var(--rubric); padding-left: 10px; margin-top: 10px; font-style: italic; color: var(--faded); font-size: calc(15px * var(--scale)); line-height: 1.4; }
.pic { margin-top: 12px; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -5px; padding: 7px; aspect-ratio: 4/3; display: grid; place-items: center; }
.pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
:root[data-theme="dark"] .pic img { opacity: .85; }
.cap { text-align: center; font-style: italic; font-size: 11px; color: var(--faded); margin-top: 4px; }
.ctitle { margin: 16px 0 10px; font-weight: normal; line-height: 1.2; }
.ctext { font-size: calc(18px * var(--scale)); line-height: calc(1.5 * var(--lines)); }
.ctext.cap1::first-letter { float: left; font-family: var(--display); font-size: calc(18px * var(--scale) * 4.2); line-height: .82; padding: 6px 8px 0 0; color: var(--rubric); }
.ctext.cap1.ill::first-letter { background: var(--rubric); color: var(--paper); padding: 8px 10px 6px; margin: 4px 10px 0 0; }
.w { color: var(--rubric); text-decoration: underline dotted; text-underline-offset: 3px; }
.fleuron { text-align: center; color: var(--rubric); margin: 18px 0 8px; display: flex; align-items: center; gap: 12px; }
.fleuron::before, .fleuron::after { content: ""; flex: 1; height: .6px; background: var(--rule); }
.quote { text-align: center; font-style: italic; font-size: calc(20px * var(--scale)); line-height: 1.45; }
.attr { text-align: center; font: 12px FellSC, serif; color: var(--faded); margin-top: 6px; }
.acts { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.acts button { width: 44px; height: 44px; font-size: 20px; color: var(--faded); } .acts button.on { color: var(--rubric); }
.hint { display: block; width: 100%; text-align: center; font-style: italic; font-size: 13px; color: var(--rubric); padding: 4px; }
.sealbtn { display: block; width: 100%; margin-top: 16px; padding: 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 16px FellSC, serif; letter-spacing: .06em; }
.sealbtn.done { background: none; border: 1px solid var(--rule); color: var(--rubric); }
.h { font: 12px FellSC, serif; letter-spacing: .16em; color: var(--rubric); margin-top: 16px; }
.passage { font-size: calc(17px * var(--scale)); line-height: calc(1.55 * var(--lines)); white-space: pre-line; }
.passage mark { background: none; color: var(--rubric); font-weight: 600; }

/* toast + celebration */
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 999px; font-size: 15px; animation: fade .2s; max-width: 90vw; text-align: center; }
.party { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.45); animation: fade .25s; }
.party .card { background: var(--paper); border-radius: 6px; padding: 28px 26px; width: min(86vw, 360px); text-align: center; animation: stamp .45s cubic-bezier(.2,1.6,.5,1); }
.party h3 { font: 30px Fraktur, serif; margin: 12px 0 6px; font-weight: normal; }
@keyframes stamp { from { transform: scale(1.6) rotate(-8deg); opacity: 0; } }

.list-item { padding: 14px 0; border-bottom: .6px solid var(--rule); }
input[type=search] { width: 100%; padding: 11px 14px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 17px Fell, serif; }
input[type=range] { width: 100%; accent-color: var(--rubric); }
.center { text-align: center; }
.empty { text-align: center; padding: 48px 0; font-style: italic; color: var(--faded); }
.empty b { display: block; font-size: 46px; color: var(--rubric); opacity: .7; font-style: normal; }
.studio-prev { display: block; max-height: 56vh; max-width: 100%; margin: 0 auto; border-radius: 6px; border: 1px solid var(--rule); }
.mini .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }