@font-face{font-family:Ethiopic;src:url(assets/NotoSansEthiopic-Regular.ttf) format("truetype");font-display:swap}
:root{
  color-scheme:light;
  --site-head:68px;
  --bg:#f8f7ef;
  --paper:#fffdf6;
  --ink:#212d23;
  --muted:#536357;
  --line:#e0e5d6;
  --leaf:#31563d;
  --leaf-hover:#24422e;
  --wash:#edf1e3;
  --cover:#264431;
  --coverText:#e0eab6;
  --gold:#b88b22;
  --font-size:19px;
  font:15px/1.5 system-ui,sans-serif
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141d16;
  --paper:#1d2920;
  --ink:#e7eee0;
  --muted:#a9b7a4;
  --line:#3a4b3d;
  --leaf:#a3c780;
  --leaf-hover:#b8dc94;
  --wash:#263629;
  --cover:#284332;
  --gold:#e2b653
}
:root[data-theme="paper"]{
  --bg:#f2ebd9;
  --paper:#fff8eb;
  --ink:#3d3324;
  --muted:#6f604c;
  --line:#e2d4be;
  --leaf:#6b5530;
  --leaf-hover:#554324;
  --wash:#ece1c8;
  --gold:#b37e17
}

*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased
}
[hidden]{display:none!important}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--leaf);
  outline-offset:3px
}
[lang=am]{font-family:Ethiopic,system-ui,sans-serif}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;top:-100px;left:8px;z-index:8;background:var(--paper);padding:9px}
.skip-link:focus{top:8px}

/* Header & Navigation */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  height:var(--site-head);
  padding:0 max(22px,calc((100% - 1180px)/2));
  border-bottom:1px solid var(--line);
  background:var(--paper);
  transition:transform .28s cubic-bezier(0.16,1,0.3,1);
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font:700 29px/1 Georgia,serif;
  letter-spacing:-1.3px;
  text-decoration:none;
  flex:none
}
.period{color:#7b9865}
.brand svg{color:var(--leaf)}
.brand svg,.btn svg,.small-button svg,.back-link svg,.status svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle
}
#main-nav{display:flex;align-items:center;gap:6px}
#main-nav a{
  font-size:13px;
  font-weight:650;
  color:var(--muted);
  padding:7px 12px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s,color .15s
}
#main-nav a[aria-current="page"],#main-nav a:hover{
  background:var(--wash);
  color:var(--leaf)
}
.header-account{position:relative;display:flex;align-items:center;gap:8px}
.avatar{
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:50%;
  height:37px;
  width:37px;
  font-weight:800;
  color:var(--leaf);
  display:grid;
  place-items:center
}
.account-menu{
  position:absolute;
  right:0;
  top:48px;
  min-width:220px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  box-shadow:0 12px 28px rgba(18,28,20,.18);
  z-index:20
}
.account-menu small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

main,.site-footer{width:min(1180px,calc(100% - 44px));margin:0 auto}
main{padding:26px 0 42px;min-height:calc(100vh - 150px);outline:none}
.site-footer{
  border-top:1px solid var(--line);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--muted)
}
.site-footer>span{font:700 22px Georgia,serif}

/* Hero Section */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:330px;
  border-radius:20px;
  padding:48px clamp(24px,5vw,60px);
  background:linear-gradient(135deg,#1c3527 0%,#244533 100%);
  color:#f4f3e6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 12px 32px rgba(24,44,30,.25)
}
.hero-copy{position:relative;z-index:1;max-width:560px}
.eyebrow{
  margin:0;
  color:var(--leaf);
  font-size:11px;
  letter-spacing:.15em;
  font-weight:800;
  text-transform:uppercase
}
.hero .eyebrow{color:#d5e4ac}
.eyebrow span{
  display:inline-block;
  width:7px;
  height:7px;
  background:#b9d18a;
  border-radius:50%;
  margin-right:7px
}
.hero h1,.section-title,.reader-title{
  font:400 clamp(42px,7vw,76px)/.96 Georgia,serif;
  letter-spacing:-.05em;
  margin:12px 0 14px
}
.hero em{color:#d8e5b0;font-weight:400;font-style:italic}
.hero-copy>p:last-child{
  margin:0;
  font:16px/1.55 Georgia,serif;
  color:#e4ebd9;
  max-width:440px
}
.hero-art{
  position:absolute;
  width:min(50%,470px);
  height:100%;
  right:0;
  top:0;
  z-index:-1;
  pointer-events:none
}
.hero-pills{
  display:flex;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
  color:#eef4df;
  font-weight:600
}

/* Notice & Alerts */
.notice{
  margin:0 0 16px;
  padding:11px 15px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--leaf);
  font-weight:600
}
.notice.error{color:#a43b27}
:root[data-theme=dark] .notice.error{color:#ffc2ad}

.sign-in{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:20px 0 28px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 20px;
  color:var(--muted)
}
.sign-in strong{color:var(--ink);display:block;font-size:15px}
.sign-in p{margin:3px 0 0;font-size:13px}

/* Buttons */
.btn,.small-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  background:var(--leaf);
  color:var(--paper);
  border:1px solid var(--leaf);
  border-radius:9px;
  padding:9px 15px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:background .15s,filter .15s,transform .12s
}
.btn:hover,.small-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active,.small-button:active{transform:translateY(0)}
.btn svg,.small-button svg,.back-link svg{width:16px;height:16px}
.btn.secondary,.small-button{
  color:var(--leaf);
  background:var(--paper);
  border-color:var(--line)
}
.small-button{font-size:12px;padding:6px 11px}
.small-button.danger-button{color:#cb2b2b!important;border-color:#f0c4c4!important;background:#fff8f8!important}
.small-button.danger-button:hover{background:#ffebeb!important;border-color:#cb2b2b!important;color:#a81c1c!important}

/* Section Headings & Filter Tabs */
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin:32px 0 16px
}
.section-heading h2,.section-title{
  margin:0;
  font:400 clamp(28px,3.8vw,44px)/1.1 Georgia,serif;
  letter-spacing:-.03em
}
.section-heading span{color:var(--muted);font-size:13px;font-weight:600}

/* Category Tabs Navigation - Elegant Editorial Style */
.shelf-tabs-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  border-bottom:1px solid var(--line);
  margin:18px 0 28px;
  padding:0 4px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.shelf-tabs-nav::-webkit-scrollbar{display:none}

.shelf-tab-link{
  flex-shrink:0;
  background:none;
  border:none;
  border-bottom:2.5px solid transparent;
  padding:10px 14px 12px;
  font-size:14.5px;
  font-weight:550;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  transition:color .15s,border-color .15s;
  margin-bottom:-1px;
  -webkit-tap-highlight-color:transparent;
}
.shelf-tab-link:hover{
  color:var(--ink);
}
.shelf-tab-link.active{
  color:#e53935;
  font-weight:700;
  border-bottom-color:#e53935;
}

@media(min-width:768px){
  .shelf-tabs-nav{
    justify-content:center;
    gap:14px;
    padding:0;
  }
  .shelf-tab-link{
    padding:10px 16px 12px;
    font-size:15px;
  }
}

/* Beautiful Editorial Bookshelf Grid */
.shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:32px 22px;
  align-items:start;
}

.book-card{
  display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
  padding:0;
  text-decoration:none;
  position:relative;
  transition:transform .2s cubic-bezier(0.16,1,0.3,1);
}

.book-card-cover-wrap{
  width:100%;
  position:relative;
  margin-bottom:12px;
}

.book-card-cover{
  width:100%;
  aspect-ratio:1 / 1.48;
  max-height:270px;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,var(--cover),#182e21);
  box-shadow:0 6px 18px rgba(18,36,24,.18),0 2px 4px rgba(0,0,0,.08);
  transition:box-shadow .2s,transform .2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.book-card:hover .book-card-cover{
  box-shadow:0 14px 28px rgba(18,36,24,.28),0 4px 8px rgba(0,0,0,.12);
  transform:translateY(-4px);
}

.book-card-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cover-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
  color:var(--coverText);
  font:700 16px/1.3 Georgia,serif;
  background:linear-gradient(135deg,#1f3b2b,#112219);
}

/* Metadata below cover */
.book-card-info{
  display:flex;
  flex-direction:column;
  padding:0 2px;
}

.book-card-price{
  color:#e53935;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 4px;
  line-height:1.2;
}

.book-card-title{
  font:700 15px/1.28 Georgia,Cambria,serif;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .15s;
}
.book-card:hover .book-card-title{
  color:#e53935;
}

.book-card-author{
  font-size:13px;
  color:var(--muted);
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.book-card-progress{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.progress-bar-track{
  flex:1;
  height:4px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  background:#e53935;
  border-radius:2px;
}
.progress-percent{
  font-size:11px;
  font-weight:700;
  color:#e53935;
}

/* Floating Reader Pill - Bottom Right */
.floating-reader-pill{
  position:fixed;
  bottom:26px;
  right:28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 18px 8px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.04);
  z-index:90;
  animation:pillFadeIn .3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes pillFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.pill-close{
  background:transparent;
  border:none;
  font-size:16px;
  line-height:1;
  color:var(--muted);
  cursor:pointer;
  padding:2px 4px;
  border-radius:50%;
  transition:color .15s;
}
.pill-close:hover{color:#e53935}
.pill-content{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2563eb;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s;
}
.pill-content:hover{
  color:#1d4ed8;
  text-decoration:underline;
}
:root[data-theme=dark] .floating-reader-pill{
  background:#1e293b;
  border-color:#334155;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
:root[data-theme=dark] .pill-content{
  color:#60a5fa;
}
  white-space:nowrap
}

.empty{
  padding:28px 20px;
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  text-align:center
}
.empty p{margin:4px 0}
.loading{color:var(--muted);padding:28px 0;text-align:center}

/* Publishing & Admin Section */
.publish{max-width:840px;margin:auto}
.publish p{color:var(--muted)}
.publish-form{
  display:grid;
  gap:14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  margin:20px 0
}
.publish-form label{display:grid;gap:5px;font-size:13px;font-weight:650}
.publish-form input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--wash)}
.publish-form .btn{justify-self:start}
.manage-book{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--paper);
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  margin:10px 0
}
.manage-book small{display:block;color:var(--muted);font-size:12px}
.manage-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}

/* Team & Publishers Management */
.team-management{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  margin:32px 0
}
.owner-banner{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:18px;
  font-size:13px
}
.add-role-bar{
  display:flex;
  gap:10px;
  margin:16px 0 20px;
  flex-wrap:wrap
}
.add-role-bar input{
  flex:2;
  min-width:200px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--wash)
}
.add-role-bar select{
  flex:1;
  min-width:140px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--wash)
}
.team-list{display:grid;gap:10px}
.team-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  gap:12px
}
.team-item-info strong{display:block;font-size:14px}
.team-item-info small{color:var(--muted);font-size:12px}
.role-badge{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:4px
}
.role-badge.owner{background:#fdf2d7;color:#8a6411;border:1px solid #ebd39c}
.role-badge.admin{background:var(--wash);color:var(--leaf);border:1px solid var(--line)}
.role-badge.publisher{background:#e3f0fc;color:#185794;border:1px solid #bddbfc}
.role-badge.reader{background:var(--line);color:var(--muted)}

.role-actions{display:flex;gap:5px;align-items:center}
.role-btn{
  font-size:11px;
  font-weight:650;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted)
}
.role-btn:hover{background:var(--wash);color:var(--ink)}

/* Deep Reading Mode Auto-Hide Styles */
body.deep-reading .site-header{
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1)
}
body.deep-reading .reader-toolbar{
  transform:translateY(calc(-100% - var(--site-head)));
  opacity:0;
  pointer-events:none;
  transition:transform .3s cubic-bezier(0.16,1,0.3,1),opacity .2s ease
}
.deep-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:var(--leaf);
  z-index:9999;
  box-shadow:0 0 8px rgba(49,86,61,.45);
  transition:width .12s ease-out;
  pointer-events:none;
  opacity:0
}
body.deep-reading .deep-progress{opacity:1}

/* Resume Line Toast */
.resume-toast{
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(23,38,28,.95);
  color:#f5f8ed;
  padding:9px 20px;
  border-radius:24px;
  font-size:13px;
  font-weight:650;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  z-index:999;
  pointer-events:none;
  animation:toastAnim 2.4s ease forwards;
  white-space:nowrap
}
@keyframes toastAnim{
  0%{opacity:0;transform:translateX(-50%) translateY(10px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  75%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-6px)}
}

/* Auth Modal & Dropdown */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(18,28,20,.62);
  backdrop-filter:blur(4px);
  z-index:99;
  display:grid;
  place-items:center;
  padding:16px
}
.modal-dialog{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  width:min(420px,100%);
  padding:28px 24px;
  box-shadow:0 18px 36px rgba(18,28,20,.24);
  animation:appear .18s ease-out
}
.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  background:none;
  border:none;
  font-size:24px;
  line-height:1;
  color:var(--muted);
  padding:4px 8px;
  border-radius:6px
}
.modal-close:hover{color:var(--ink);background:var(--wash)}
.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab-btn{
  flex:1;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  padding:10px;
  font-size:14px;
  font-weight:700;
  color:var(--muted)
}
.tab-btn.active{color:var(--leaf);border-bottom-color:var(--leaf)}
.form-group{display:grid;gap:5px;margin-bottom:14px}
.form-group label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.form-group input{
  width:100%;
  padding:10px 12px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
  color:var(--ink)
}
.form-group input:focus{border-color:var(--leaf);background:var(--paper)}
.hint-text{font-size:11px;color:var(--muted);margin-top:2px}
.full-width{width:100%;padding:11px;font-size:14px}
.menu-user{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.menu-user strong{display:block;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis}
.menu-user small{color:var(--muted);font-size:12px}
.badge-admin{
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border-radius:4px;
  background:var(--wash);
  color:var(--leaf);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase
}
.account-menu button{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:8px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  color:#a43b27
}
.account-menu button:hover{background:var(--wash)}

@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
  :root{--site-head:57px}
  .site-header{padding:0 12px;gap:6px}
  .brand{font-size:24px;gap:5px}
  .brand svg{width:22px;height:22px}
  #main-nav{gap:2px}
  #main-nav a{font-size:11px;padding:6px 7px}
  .avatar{height:32px;width:32px}
  main,.site-footer{width:calc(100% - 22px)}
  main{padding-top:12px}
  .hero{min-height:260px;padding:24px 18px;border-radius:14px}
  .hero h1{font-size:clamp(38px,11vw,56px)}
  .hero-art{opacity:.35}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px 14px}
  .shelf-tabs-nav{
    margin:14px -11px 22px;
    padding:0 12px;
    width:calc(100% + 22px);
    gap:4px;
    justify-content:flex-start;
  }
  .shelf-tab-link{
    padding:9px 12px 11px;
    font-size:13.5px;
  }
  .add-role-bar{flex-direction:column}
  .details-top{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .cover-hero{width:auto;margin:0 auto}
  .cover-hero .cover{width:160px;height:236px}
  .details-info{align-items:center}
  .details-meta-pills{justify-content:center}
  .reading-gate{flex-direction:column;align-items:stretch;text-align:center}
  .reading-gate .btn{width:100%}
}

/* Universal Cover Constraints */
.cover{
  position:relative;
  width:180px;
  height:265px;
  border-radius:6px 10px 10px 6px;
  overflow:hidden !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--cover),#182e21);
  box-shadow:0 12px 28px rgba(18,36,24,.25),0 2px 5px rgba(0,0,0,.12);
  flex-shrink:0;
}
.cover img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.cover svg{
  width:44px;
  height:44px;
  stroke:rgba(255,255,255,.7);
}

/* Book Details & Guest Reading Gate */
.book-details{
  max-width:980px;
  margin:0 auto;
  animation:appear .2s ease-out;
  padding:10px 0 40px;
}
.details-top{
  display:flex;
  flex-direction:row;
  gap:36px;
  align-items:flex-start;
  margin-bottom:42px;
}
.cover-hero{
  flex:0 0 190px;
  width:190px;
}
.cover-hero .cover{
  width:190px;
  height:280px;
  border-radius:6px 12px 12px 6px;
  box-shadow:0 16px 36px rgba(18,36,24,.3),0 3px 8px rgba(0,0,0,.15);
  overflow:hidden;
  position:relative;
}
.cover-hero .cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.details-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.details-info .back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  margin-bottom:14px;
}
.details-info .back-link:hover{color:var(--leaf)}
.details-title{
  font:700 clamp(32px,5vw,52px)/1.12 Georgia,serif;
  letter-spacing:-.03em;
  margin:10px 0 8px;
  color:var(--ink);
}
.details-author{
  font-size:16px;
  color:var(--muted);
  margin:0 0 16px;
}
.details-author strong{color:var(--ink)}
.details-meta-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.details-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--wash);
  padding:5px 12px;
  border-radius:18px;
  font-size:12px;
  font-weight:650;
  color:var(--leaf);
}
.reading-gate{
  width:100%;
  background:linear-gradient(135deg,var(--wash) 0%,rgba(224,229,214,.4) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.reading-gate-copy h3{
  margin:0 0 4px;
  font:700 18px Georgia,serif;
  color:var(--leaf);
}
.reading-gate-copy p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.reading-gate .btn{padding:12px 20px;font-size:14px;white-space:nowrap}

.details-toc-section{
  border-top:1px solid var(--line);
  padding-top:28px;
}
.details-toc-list{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.details-toc-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.details-toc-item:hover{
  background:var(--wash);
  border-color:var(--leaf);
  transform:translateX(3px);
}
.details-toc-item .toc-num{
  font-size:12px;
  font-weight:800;
  color:var(--leaf);
  width:24px;
}
.details-toc-item .toc-info{flex:1}
.details-toc-item .toc-info strong{
  display:block;
  font-size:14px;
  color:var(--ink);
}
.details-toc-item .toc-info small{
  color:var(--muted);
  font-size:12px;
}
.toc-lock{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--wash);
  padding:4px 10px;
  border-radius:12px;
}
.details-toc-item .toc-lock{
  font-size:12px;
  font-weight:650;
  color:var(--muted)
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}