:root { --ink:#352b29; --wine:#672d32; --wine-dark:#3d2027; --gold:#b68d53; --paper:#fffaf3; --sand:#f3e9da; --white:#fffdf9; --muted:#78695e; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background: radial-gradient(ellipse at 50% 15%,#f7ecde 0%,#f9f5ee 46%,#f5f0e9 100%); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; }
a { color:inherit; }
button { font:inherit; }
.site-header { display:flex;align-items:center;justify-content:space-between; gap:16px; max-width:1230px; margin:auto; padding:17px clamp(18px,4vw,46px); border-bottom:1px solid #deceba; }
.wordmark {display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--wine-dark);}
.wordmark .mark {font-size:33px;color:#b88c45; line-height:1}
.wordmark strong {font-size:13px;letter-spacing:.19em;display:block;}
.wordmark small {font:italic 13px Georgia,serif;color:#8d6e52;display:block;margin-top:2px}
.site-home {font-size:12px;letter-spacing:.03em;text-decoration:none;border-bottom:1px solid #c5aa84;padding:7px 0}
.site-home:hover {color:var(--wine)}
.main {max-width:1200px;margin:auto;padding:18px clamp(12px,3.5vw,40px) 36px}
.heading {text-align:center;margin:6px auto 20px;}
.eyebrow {text-transform:uppercase;font-size:10px;letter-spacing:.19em;font-weight:700;color:#a36f49;margin-bottom:8px}
.ornament {color:#c9a16c; margin:0 8px}
h1 {font:italic 500 clamp(30px,4.4vw,57px)/1.12 Georgia,"Times New Roman",serif;color:var(--wine);margin:0 0 3px;letter-spacing:-.02em}
.translation {color:#955c3a;font-size:17px;margin:6px auto;}
.intro {font:italic clamp(13px,1.6vw,17px)/1.5 Georgia,serif; color:#7a6656;margin:9px 0 6px}
.eventline {font-size:12px;letter-spacing:.03em;color:#86684d;margin:4px 0;}
.eventline span {color:#c3a27d;padding:0 6px}
.reader-shell {background:rgba(255,252,248,.85);border:1px solid #eaded0;box-shadow:0 20px 60px rgba(78,51,35,.08);border-radius:16px;padding:16px clamp(8px,1.6vw,22px) 15px; overflow:hidden}
.reader-topline {display:flex;align-items:center;justify-content:space-between;gap:8px; padding:0 8px;}
.reader-topline h2 {color:#643338;margin:0;font:600 17px Georgia,serif}
.small-muted {font:12px system-ui,sans-serif; color:#9a8e82; padding-left:8px}
.reader-info {font-size:11px;color:#9e8470;display:flex;gap:15px;align-items:center}
.keyboard-hint {padding:4px 6px;border:1px solid #dbc8af;border-radius:4px;color:#967c63}
.book-area {width:100%;display:flex;align-items:center;justify-content:center;min-height:320px; padding:18px 5px 14px; perspective:1800px;touch-action:pan-y}
.book-stage {position:relative;perspective:2400px; flex:none;background:transparent;transition: width .25s ease,height .25s ease;}
.page-view {position:absolute;inset:0;display:flex;align-items:stretch;justify-content:center;gap:0;z-index:1;transition:opacity .16s ease}
.page-view.second-view {z-index:0;opacity:1}
.page-view.single-view .page-frame {width:50%;}
.page-view.double-view .page-frame {width:50%;}
.page-view.mobile-view.single-view .page-frame,.page-view.mobile-view.double-view .page-frame {width:100%;}
.page-frame {height:100%;background:var(--paper);display:flex;align-items:stretch;justify-content:center;position:relative;cursor:zoom-in;overflow:hidden;border:1px solid #ddccba}
.page-view.double-view .page-frame:first-child {box-shadow:-8px 13px 25px rgba(67,44,32,.17); border-radius:2px 0 0 2px}
.page-view.double-view .page-frame:last-child {box-shadow:8px 13px 25px rgba(67,44,32,.17); border-radius:0 2px 2px 0;border-left-color:#b69e86;}
.page-view.single-view .page-frame {box-shadow:0 14px 30px rgba(67,44,32,.23);border-radius:3px;}
.page-frame img {width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.page-view.double-view:after {content:"";position:absolute;left:50%;top:0;height:100%;width:16px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(to right, transparent,rgba(63,42,27,.14),rgba(253,247,237,.14), transparent);z-index:4;}
.turning-page {position:absolute;z-index:20;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;transform:rotateY(0);box-shadow:8px 0 18px rgba(47,27,19,.16);will-change:transform;pointer-events:none;background:var(--paper)}
.turning-page img {display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.turning-page.forward {transform-origin:0% 50%}
.turning-page.backward {transform-origin:100% 50%}
.turning-page.forward.turning {transform:rotateY(-172deg)}
.turning-page.backward.turning {transform:rotateY(172deg)}
.reader-controls {min-height:49px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:3px auto 6px}
.control {background:transparent;color:var(--wine);border:1px solid #dcc7ad;cursor:pointer;border-radius:7px;padding:9px 12px;min-height:36px;transition:.16s ease}
.control:hover {background:#f3e3d2;border-color:#b88d54}
.control:focus-visible,.primary-link:focus-visible,.thumb:focus-visible {outline:3px solid #d7973c;outline-offset:2px}
.control:disabled {opacity:.3;cursor:default}
.circle {border-radius:50%;width:42px;height:42px;padding:0;line-height:1;font-size:30px;display:grid;place-items:center}
.circle span {transform:translateY(-2px)}
.page-label {min-width:98px;text-align:center;font:600 13px Georgia,serif;color:#5f4438;}
.text-control {font-size:12px;letter-spacing:.01em}
.control-separator {width:1px;height:24px;background:#dccdbb;margin:0 5px}
.thumb-heading {max-width:930px;margin:12px auto 6px;padding:0 4px;display:flex;justify-content:space-between;font-size:11px;color:#896b53;font-weight:600;letter-spacing:.05em}
.thumb-tip {font-weight:400;color:#a59688}
.thumb-strip {display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c4a27a transparent;max-width:940px;padding:7px 5px 12px;margin:0 auto;scroll-snap-type:x proximity}
.thumb {flex:0 0 auto;background:transparent;border:2px solid transparent;padding:3px;border-radius:5px;cursor:pointer;scroll-snap-align:start}
.thumb img {display:block;width:47px;height:67px;object-fit:contain;box-shadow:0 2px 6px rgba(70,35,20,.15)}
.thumb span {display:block;font-size:10px;color:#8d7d6b;text-align:center;margin-top:4px}
.thumb.active {border-color:#af7549;background:#faefde}
.below-reader {display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:20px}
.download-panel,.links-panel {border:1px solid #e5d9c8;border-radius:12px;background:#fffcf7}
.download-panel {display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:16px 18px}
.download-panel .panel-icon {font-size:35px;color:#b88d52}
.download-panel h2 {font:600 18px Georgia,serif;color:#623338;margin:0 0 4px}
.download-panel p {font-size:12px;line-height:1.5;color:#81705f;margin:0;max-width:410px}
.primary-link {background:#6e3239;color:#fffdf7;padding:12px 17px;text-decoration:none;border-radius:6px;white-space:nowrap;font-size:12px;font-weight:600;box-shadow:0 3px 5px rgba(45,22,22,.12)}
.primary-link:hover {background:#4c2529}
.links-panel {display:flex;flex-direction:column;justify-content:stretch;padding:4px 14px}
.links-panel a {display:grid;grid-template-columns:95px 1fr auto;align-items:center;gap:8px;text-decoration:none;flex:1;padding:10px 0;border-bottom:1px solid #e9dfd3;font-size:12px;color:#887662}
.links-panel a:last-child {border-bottom:none}
.links-panel b {font-size:12px;color:var(--wine)}
.links-panel a:hover b {text-decoration:underline}
footer {text-align:center;padding:18px 12px 28px;font-size:11px;color:#958273}
footer a {text-decoration:none;border-bottom:1px solid #bea184}
footer span {padding:0 5px}
.zoom-dialog {border:1px solid #dbb991;padding:0;background:#f8f0e7;width:min(96vw,1150px);max-height:96vh;box-shadow:0 18px 80px rgba(15,10,8,.5);border-radius:9px;overflow:hidden}
.zoom-dialog::backdrop {background:rgba(33,22,19,.83)}
.zoom-head {height:47px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px;border-bottom:1px solid #dfc7b2;color:#63343b;font:500 17px Georgia,serif}
.zoom-head button {background:transparent;color:#67353b;border:1px solid #c3a589;cursor:pointer;padding:5px 10px;border-radius:4px;font-size:12px}
.zoom-content {height:calc(96vh - 58px);overflow:auto;text-align:center;padding:16px}
.zoom-content img {display:block;width:auto;max-width:none;min-height:100%;height:auto;margin:auto;box-shadow:0 7px 25px rgba(40,22,15,.18)}
#toast {position:fixed;z-index:100;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;background:#4b292d;border-radius:20px;padding:10px 18px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .15s}
#toast.visible {opacity:1}
@media(max-width:780px){
  .site-header {padding:14px 18px}
  .site-home {font-size:11px}
  .main {padding:16px 8px 30px}
  .reader-shell {border-radius:11px;padding:12px 6px 11px}
  .reader-topline {padding:0 8px}
  .reader-info {font-size:10px}
  .keyboard-hint {display:none}
  .heading {margin-bottom:15px}
  .intro {margin:7px 10px}
  .book-area {padding:14px 3px 10px}
  .reader-controls {gap:6px}
  .text-control {padding:8px 9px}
  .share {display:none}
  .below-reader {grid-template-columns:1fr;gap:12px}
  .download-panel {grid-template-columns:28px 1fr;gap:8px;padding:14px}
  .primary-link {grid-column:2;justify-self:start;margin-top:3px}
  .thumb-strip {gap:5px}
}
@media(max-width:390px){.site-home{display:none}.reader-info{display:none}.page-label{min-width:74px}.text-control{font-size:11px;padding:8px}.control-separator{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}