/* Generated at build time from style.css by scripts/purge-css.mjs — do not edit. */
@property --pct{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
*,*::before,*::after{box-sizing: border-box; margin: 0; padding: 0;}
.hidden{display: none !important;}
@font-face{
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
:root{color-scheme: dark;
  --bg:          #171310;
  --surface:     #1f1a15;
  --surface-hi:  #2a231c;
  --border:      #3a3129;
  --accent:      #c9a26a;
  --accent-dim:  #b08d58;
  --accent-glow: rgba(201,162,106,.16);
  --text:        #f1e8d8;
  /* Bug-bash round 5 a11y P1 #8: --text-3 was #8a8a85, ~4.05:1 on
   * --bg = WCAG AA fail. Lifted to #a4a49e (~5.1:1) so secondary
   * labels, timestamps, placeholders stay readable. --text-2 stays at
   * the prior #9a9a94 (~4.4:1) — still AA, but the most fragile token. */
  --text-2:      #b3a898;
  --text-3:      #a79f90;
  --danger:      #e05252;
  --success:     #7fa377;
  --warn: #d98e52;
  --secondary:   #6f8f6a;   /* sage — rules, secondary chips */

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;

  --font-ui:   system-ui, -apple-system, sans-serif;
  --font-book: 'Liberation Serif', Georgia, 'Times New Roman', serif;
  /* Display/logotype face only. Reading text stays on --font-book. */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --player-h: 94px;
    /* Rendered height of .trial-floating-cta on one line (desktop/tablet). Reserved as .reader bottom padding while body.trial-cta-active, so the CTA pushes reading text up instead of floating on top of it. */
      --trial-cta-h: 76px;
  --nav-h:    60px;}
html{height: 100%;}
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior: smooth;}
}
body{font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  display: flex; flex-direction: column;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;}
a{color: inherit; text-decoration: none;}
button{font-family: inherit; cursor: pointer; border: none; background: none;}
input,select{font-family: inherit;}
:focus-visible{outline: 2px solid var(--accent);
  outline-offset: 2px;}
::-webkit-scrollbar{width: 6px;}
::-webkit-scrollbar-track{background: var(--bg);}
::-webkit-scrollbar-thumb{background: var(--border); border-radius: 3px;}
html{scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);}
.nav{position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(23,19,16,.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;}
.nav-logo{font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--accent);
  display: flex; align-items: center; gap: 8px;}
.nav-logo svg{width: 22px; height: 22px;}
.nav-spacer{flex: 1;}
.btn{display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: .88rem; font-weight: 600;
  transition: opacity .15s, transform .1s;}
.btn:active{transform: scale(.97);}
.btn:hover{opacity: .88;}
.btn-primary{background: var(--accent); color: #171310;}
.btn-ghost{background: transparent; border: 1px solid var(--border); color: var(--text-2);}
.btn-sm{padding: 6px 12px; font-size: .8rem;}
.btn:disabled{opacity: .35; pointer-events: none; cursor: not-allowed;}
.page{flex: 1;   /* fills remaining body height in the flex-column layout */
  padding: 32px 24px calc(var(--player-h) + 32px);
  max-width: 1200px; margin: 0 auto; width: 100%;}
@keyframes cover-shimmer{
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.modal{background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); width: 100%; max-width: 540px;
  max-height: 80vh; min-height: 300px; display: flex; flex-direction: column;}
.toast-container{position: fixed; bottom: calc(var(--player-h) + 16px); right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px;}
body:not(.player-active) .toast-container{bottom: 16px;}
.toast{background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: .85rem; max-width: 320px;
  animation: toast-in .2s ease;}
@keyframes toast-in{ from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
@keyframes shimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.spinner{width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;}
.btn-primary .spinner{border-color: rgba(23,19,16,.25);
  border-top-color: var(--bg);}
@keyframes spin{ to { transform: rotate(360deg); } }
.book-page{display: flex; flex: 1; min-height: 0; overflow: hidden;}
:root{--sidebar-w: 280px;}
@keyframes pulse{ 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.reader{flex: 1; overflow-y: auto;
  padding: 40px 40px calc(var(--player-h) + 40px);}
#follow-btn[aria-pressed="true"]{color: var(--accent);}
#rewind-btn,#forward-btn{width: 40px; height: 40px;}
#current-time{grid-area: tcur;}
#duration{grid-area: tdur;}
input[type="range"]{flex: 1; min-width: 0; height: 4px;
  appearance: none; -webkit-appearance: none; background: var(--surface-hi);
  border-radius: 2px; outline: none; cursor: pointer;}
input[type="range"]:focus-visible{outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: none;}
input[type="range"]::-moz-range-thumb{width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;}
input[type="range"]::-moz-range-progress{background: var(--accent);
  height: 4px;
  border-radius: 2px;}
.nav-auth{display: flex; align-items: center; gap: 8px; position: relative;}
.nav-user{/* Reset button defaults — bug-bash round 5: .nav-user is now a <button>
   * (a11y P1 #5) so it gets keyboard focus + ARIA without extra wiring.
   * Clear UA styles so the visual is unchanged. */
  appearance: none; background: transparent; border: 0;
  font-family: inherit;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-md);
  cursor: pointer; transition: background .15s;
  color: var(--text-2); font-size: .85rem;}
.nav-user:hover{background: var(--surface-hi);}
.nav-user:focus-visible{outline: 2px solid var(--accent-glow); outline-offset: 2px;}
.nav-avatar{width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #171310;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;}
.nav-user-name{max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.nav-dropdown{position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 210;
  overflow: hidden;}
.nav-dropdown-head{display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;}
.nav-avatar-lg{width: 36px; height: 36px; font-size: .95rem;}
.nav-avatar.avatar--premium{position: relative; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent);}
.nav-avatar .avatar-badge{position: absolute; right: -3px; bottom: -5px; width: 9px; height: 17px; display: block; pointer-events: none; filter: drop-shadow(0 1px 1.2px rgba(0,0,0,.7));}
.nav-avatar .avatar-badge svg{display: block; width: 100%; height: 100%;}
.nav-dropdown-head-text{min-width: 0;}
.nav-dropdown-name{font-size: .88rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.nav-dropdown-email{font-size: .76rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.nav-dropdown-divider{height: 1px; background: var(--border); margin-top: 4px;}
.nav-dropdown-item{display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 16px; text-align: left;
  font-size: .88rem; color: var(--text-2);
  transition: background .15s;}
.nav-dropdown-item svg{flex-shrink: 0; color: var(--text-3);}
.nav-dropdown-item:hover{background: var(--surface-hi); color: var(--text);}
.nav-dropdown-item:hover svg{color: var(--text-2);}
.nav-dropdown{min-width: 0; width: 284px; max-width: calc(100vw - 16px);}
@media (max-width: 400px){
.nav-user-name{display: none;}
}
.nav-dropdown-head .nav-avatar-lg.avatar--premium{box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);}
.nav-dropdown-head .nav-avatar-lg .avatar-badge{right: -4px; bottom: -6px; width: 11px; height: 20px;}
.nav-menu-status{display: flex; align-items: center; gap: 6px;
  padding: 0 16px 12px 62px; margin-top: -4px;
  font-size: .78rem; color: var(--text-3); white-space: nowrap;}
.nav-menu-status b{color: var(--accent); font-weight: 650;}
.nav-menu-status--free{padding-left: 62px;}
.nav-menu-status--free b{color: var(--text-2);}
.nav-menu-bar{flex: none; filter: drop-shadow(0 1px .8px rgba(0,0,0,.6));}
.nav-menu-action{display: flex; align-items: center; gap: 12px;
  margin: 0 12px 12px; padding: 10px 10px 10px 12px;
  border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(201,162,106,.16), rgba(201,162,106,.05));
  color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s;}
.nav-menu-action:hover{border-color: var(--accent-dim);}
.nav-menu-action:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
.nav-menu-action-text{display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;}
.nav-menu-action-text b{font-size: .84rem; font-weight: 650;}
.nav-menu-action-text small{font-size: .74rem; color: var(--text-3); line-height: 1.3;}
.nav-menu-action-btn{flex: none; padding: 5px 10px; border-radius: 7px;
  background: var(--accent); color: #171310;
  font-size: .76rem; font-weight: 700;}
.nav-dropdown-divider--tight{margin-top: 0;}
@media (max-width: 768px){
:root{--trial-cta-h: 72px;}
}
#continue-banner{display: none; /* shown via JS when resume data is available */}
#continue-banner.visible{display: block;}
@keyframes shake{
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-6px); }
  40%,80%  { transform: translateX(6px); }
}
.shake{animation: shake .35s ease;}
@keyframes modal-in{
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes auth-sheet-in{ from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
#billing-card{border-top: 2px solid var(--accent-dim);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);}
@keyframes pulse-cta{
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 106, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 162, 106, .35); }
}
#billing-card .btn-primary{padding: 11px 22px;
  font-size: .92rem;
  box-shadow: 0 6px 20px -8px rgba(201,162,106,.5);}
#billing-card .btn{margin-top: 4px;}
.sr-only{position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
@media (max-width: 768px){
.reader{padding: 20px 20px calc(var(--player-h) + 20px);}
:root{--player-h: 112px;}
#current-time{justify-self: end;}
#duration{justify-self: end;}
#current-time::after{content: " /"; color: var(--text-3);}
#rewind-btn,#forward-btn{width: 40px; height: 40px;}
#play-btn{width: 48px; height: 48px;}
#prev-btn,#next-btn{display: none;}
}
@media (max-width: 560px){
.nav{padding: 0 12px; gap: 8px;}
.nav-logo{font-size: 1rem; gap: 6px;}
.nav-logo svg{width: 18px; height: 18px;}
.nav .btn-sm{padding: 6px 10px; font-size: .78rem; white-space: nowrap;}
}
@media (max-width: 480px){
.reader{padding: 16px 16px calc(var(--player-h) + 16px);}
.nav{padding: 0 10px; gap: 6px;}
.nav-logo{font-size: .92rem; gap: 4px;}
.nav-auth{gap: 6px;}
.nav .btn-sm{padding: 6px 8px; font-size: .74rem;}
}
.btn-lg{padding: .875rem 2rem; font-size: 1rem; border-radius: 999px;}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;}
html{scroll-behavior: auto !important;}
}
#sleep-btn{position: relative;}
.shelf{margin-bottom: 28px;}
@font-face{
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
.nav-logo{font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -.012em;}
.nav-logo svg{width: 28px; height: 28px;}
#admin-draft-toggle:empty{display: none;}
body:has(#guest-hero:not(.hidden)) #library-section{padding-bottom: 0;}
.lp-footer{margin-top: 1rem; border-top: 1px solid var(--border); background: color-mix(in srgb, black 22%, var(--bg)); padding: 3rem 1.5rem 0;}
.lp-footer-grid{max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem;}
@media (max-width: 1100px){
.lp-footer-grid{grid-template-columns: 1fr 1fr 1fr;}
.lp-footer-brand{grid-column: 1 / -1;}
}
.lp-footer-name{font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text);}
.lp-footer-brand p{color: var(--text-3); font-size: .86rem; line-height: 1.6; margin: .6rem 0 0; max-width: 260px;}
.lp-footer-col h2{font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .9rem;}
.lp-footer-col ul{list-style: none; margin: 0; padding: 0;}
.lp-footer-col li{margin: 0 0 .55rem;}
.lp-footer-col a{color: var(--text-2); font-size: .88rem; text-decoration: none;}
.lp-footer-col a:hover{color: var(--accent);}
.lp-footer-col a.lp-footer-more{color: var(--accent);}
.lp-footer-bar{max-width: 1180px; margin: 2rem auto 0; padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--text-3); font-size: .8rem;}
.lp-footer-social{display: flex; gap: 1.1rem; flex-wrap: wrap;}
.lp-footer-social a{color: var(--text-3); text-decoration: none;}
.lp-footer-social a:hover{color: var(--accent);}
.lp-footer ~ #browse-footer{display: none;}
@media (max-width: 900px){
.lp-footer-grid{grid-template-columns: 1fr 1fr;}
.lp-footer-brand{grid-column: 1 / -1;}
}
@media (max-width: 640px){
.lp-footer{padding: 2.5rem 1rem 0;}
}
.book-page{--measure: 40rem; --read-font: var(--font-display);}
@keyframes tap-in{ from { opacity: 0; transform: translate(-50%, 6px); } }
#play-btn.pulse{animation: play-pulse 1.4s ease-in-out infinite;}
@keyframes play-pulse{ 0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,106,.55); } 50% { box-shadow: 0 0 0 12px rgba(201,162,106,0); } }
@media (prefers-reduced-motion: reduce){
#play-btn.pulse{animation: none;}
}
.nav-links{display: flex; gap: 2px; margin-left: 12px;}
.nav-link{padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: .9rem; font-weight: 500;}
.nav-link:hover{color: var(--text); background: var(--surface);}
.nav-link.active{color: var(--text); background: var(--surface-hi);}
.nav-search{display: flex; align-items: center; gap: 8px;
  width: min(380px, 32vw); height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-3);}
.nav-search:focus-within{border-color: var(--accent-dim); color: var(--text-2);}
.nav-search input{flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font: inherit; font-size: .88rem;}
.nav-search input::placeholder{color: var(--text-3);}
.nav-search input::-webkit-search-cancel-button{filter: invert(.6);}
.nav-search kbd{font: 500 .72rem var(--font-ui); color: var(--text-3);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; line-height: 18px;}
.nav-search:focus-within kbd{display: none;}
@media (max-width: 900px){
.nav-links,.nav-search{display: none;}
}
.site-nav .nav-links{margin-left: 12px;}
.site-nav .nav-auth{gap: 8px;}
.site-nav a.nav-user{text-decoration: none; color: var(--text);}
@media (max-width: 900px){
.site-nav .nav-user-name{display: none;}
}
@media (max-width: 640px){
body:has(#lp-sticky:not([hidden])) .lp-footer{padding-bottom: 88px;}
}