:root { --paper: #f4efe5; --paper-light: #fffdf7; --ink: #17211e; --muted: #69716e; --forest: #163f37; --line: rgba(23,33,30,.17); --sans: "DM Sans", system-ui, sans-serif; --serif: "EB Garamond", Georgia, serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, select { font: inherit; }
.reader-header { position: relative; z-index: 5; display: grid; grid-template-columns: 54px 1fr auto; min-height: 72px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(244,239,229,.96); }
.reader-back { display: grid; height: 72px; place-items: center; border-right: 1px solid var(--line); color: var(--ink); font-size: 1.25rem; text-decoration: none; }
.reader-title { min-width: 0; padding: .7rem 1.2rem; line-height: 1.15; }
.reader-title span { display: block; color: var(--muted); font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.reader-title strong { display: block; overflow: hidden; margin-top: .25rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reader-tools { display: flex; height: 72px; align-items: center; padding-right: .8rem; }
.reader-tools button, .reader-tools select, .reader-tools a { min-height: 38px; padding: .5rem .7rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font-size: .7rem; text-decoration: none; cursor: pointer; }
.reader-shell { display: grid; grid-template-columns: 290px 1fr; height: calc(100% - 72px); }
.reader-sidebar { overflow: auto; border-right: 1px solid var(--line); background: #ebe5d8; }
.contents-heading { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: #ebe5d8; font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.contents-heading button { display: none; border: 0; background: transparent; font-size: 1.4rem; }
[data-contents] { padding: .75rem 0 2rem; }
[data-contents] button { display: block; width: 100%; padding: .6rem 1rem; border: 0; background: transparent; color: var(--muted); font-size: .72rem; line-height: 1.35; text-align: left; cursor: pointer; }
[data-contents] button:hover, [data-contents] button[aria-current="true"] { background: rgba(255,255,255,.55); color: var(--ink); }
[data-contents] button.nested { padding-left: 1.8rem; }
.reader-main { position: relative; display: grid; grid-template-rows: 1fr 52px; min-width: 0; min-height: 0; background: var(--paper-light); }
#viewer { min-width: 0; min-height: 0; padding: 1.1rem clamp(.5rem, 4vw, 4rem); }
#viewer iframe { background: var(--paper-light); box-shadow: 0 8px 35px rgba(20,28,24,.08); }
.reader-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--paper-light); color: var(--muted); font-family: var(--serif); font-size: 1.2rem; }
.reader-status.hidden { display: none; }
.reader-status.error { color: #8f2d20; }
.reader-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); background: var(--paper); }
.reader-footer button { height: 100%; padding-inline: 1rem; border: 0; background: transparent; color: var(--ink); font-size: .7rem; cursor: pointer; }
.reader-footer button:first-child { text-align: left; }
.reader-footer button:last-child { text-align: right; }
.reader-footer span { color: var(--muted); font-size: .65rem; }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  .reader-header { grid-template-columns: 46px minmax(0,1fr) auto; min-height: 62px; }
  .reader-back { height: 62px; }
  .reader-title { padding-inline: .8rem; }
  .reader-title strong { font-size: 1rem; }
  .reader-tools { height: 62px; padding-right: .25rem; }
  .reader-tools button { display: none; }
  .reader-tools select, .reader-tools a { padding-inline: .5rem; }
  .reader-shell { display: block; height: calc(100% - 62px); }
  .reader-sidebar { position: fixed; inset: 62px auto 0 0; z-index: 8; width: min(88vw, 340px); border-right: 1px solid var(--line); box-shadow: 15px 0 50px rgba(0,0,0,.2); transform: translateX(-105%); transition: transform 180ms ease; }
  .reader-sidebar.open { transform: translateX(0); }
  .contents-heading button { display: block; }
  .reader-main { height: 100%; }
  .menu-toggle { position: absolute; z-index: 3; top: .65rem; left: .65rem; display: block; padding: .45rem .6rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .65rem; }
  #viewer { padding: .5rem .15rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }