:root{
  --page-ratio:1.4142; --page-width:430px; --page-height:calc(var(--page-width)*var(--page-ratio));
  --bg:#e9e9ec; --toolbar:#fff; --ink:#3a3f48; --ink-soft:#8b909a; --line:#e7e8ee;
  --brand:#2c3da8; --brand2:#e8513a; --ring:rgba(44,61,168,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  background-image:linear-gradient(135deg,rgba(255,255,255,.45) 0%,transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  overflow:hidden;display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ============ TOP TOOLBAR (full-width, 3 zones) ============ */
.topbar{position:relative;z-index:40;display:flex;align-items:center;gap:6px;
  height:52px;padding:0 10px;background:var(--toolbar);border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(20,22,40,.06)}
.tb-group{display:flex;align-items:center;gap:1px}
.tb-left{flex:1 1 0;min-width:0;justify-content:flex-start}
.tb-center{flex:0 0 auto;justify-content:center;gap:2px}
.tb-right{flex:1 1 0;min-width:0;justify-content:flex-end}
.tb-sep{width:1px;height:24px;background:var(--line);margin:0 6px;flex:0 0 auto}
.tool{width:36px;height:36px;border:none;background:transparent;border-radius:9px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:.15s;position:relative;flex:0 0 auto}
.tool:hover{background:#eef0fb;color:var(--brand)}
.tool.active{background:#eef0fb;color:var(--brand)}
.tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.tool.seg{width:34px;height:32px;border-radius:8px}
.tool[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:44px;left:50%;transform:translateX(-50%);
  background:#2b2f38;color:#fff;font-size:.62rem;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:60}
/* counter pill */
.counter{font-size:.8rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:84px;text-align:center;padding:6px 10px;background:#f3f4f9;border-radius:8px;margin:0 2px}
/* zoom slider */
.zoom-slider{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:3px;background:#d8dae3;outline:none;cursor:pointer;margin:0 4px}
.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(44,61,168,.15)}
.zoom-slider::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--brand)}
.tb-logo{display:flex;align-items:center;margin-right:4px}
.tb-logo-img{height:30px;max-width:140px;object-fit:contain;display:block}

/* overflow menu */
.menu-pop{position:absolute;top:48px;right:6px;z-index:70;background:#fff;border-radius:12px;
  box-shadow:0 12px 34px rgba(20,22,40,.18);padding:6px;min-width:230px;display:none}
.menu-pop.show{display:block}
.menu-it{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;
  font:inherit;color:var(--ink);padding:10px 12px;border-radius:9px;text-align:left}
.menu-it:hover{background:#f3f5fd;color:var(--brand)}
.menu-it svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.menu-it span{flex:1}
.menu-it em{font-style:normal;font-size:.72rem;color:var(--ink-soft)}

/* ============ STAGE + FLIPBOOK ============ */
.stage{position:relative;z-index:5;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  perspective:2600px;overflow:hidden}
.stage-zoom{position:relative;display:flex;align-items:center;justify-content:center;
  transform-origin:center center;transition:transform .18s ease;will-change:transform}
.stage-zoom.grabbing{cursor:grabbing;transition:none}
.stage.zoomed .stage-zoom{cursor:grab}
.flipbook{position:relative;width:calc(var(--page-width)*2);height:var(--page-height);transform-style:preserve-3d}
.flipbook::before{content:'';position:absolute;left:50%;top:3%;transform:translateX(-50%);width:5px;height:94%;z-index:120;border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.04),rgba(0,0,0,.18))}
.page{position:absolute;width:var(--page-width);height:var(--page-height);left:50%;top:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.645,.045,.355,1)}
.page.flipped{transform:rotateY(-180deg)}
.page-front,.page-back{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border-radius:0 3px 3px 0;background:#fff;}
.page-back{transform:rotateY(180deg);border-radius:3px 0 0 3px;}
.page-front img,.page-back img,.left-page img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.page-front::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,transparent 86%,rgba(0,0,0,.07) 100%)}
.left-page{position:absolute;width:var(--page-width);height:var(--page-height);left:0;top:0;border-radius:3px 0 0 3px;overflow:hidden;background:#fff;}
.left-page::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 86%,rgba(0,0,0,.07) 100%)}
.page.flipped{z-index:0}.page:not(.flipped){z-index:1}.page.flipping{z-index:110!important}
/* ---- desktop single-page mode: center the lone page, hide the spine gutter ---- */
@media (min-width:769px){
  body.single-mode .page{left:0;width:var(--page-width)}
  body.single-mode .page-front,body.single-mode .page-back{border-radius:3px}
  body.single-mode .flipbook::before{display:none}
}
/* ---- page-curl shading: a soft shadow/sheen sweeps across the leaf as it turns ---- */
.page.flipping{filter:drop-shadow(0 10px 18px rgba(0,0,0,.20))}
.page-front::before,.page-back::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}
.page-front::before{background:linear-gradient(to left,rgba(0,0,0,.33),rgba(0,0,0,.06) 30%,transparent 58%)}
.page-back::before{background:linear-gradient(to right,rgba(0,0,0,.33),rgba(0,0,0,.06) 30%,transparent 58%)}
.page.flipping .page-front::before{animation:curlLift .8s cubic-bezier(.645,.045,.355,1)}
.page.flipping .page-back::before{animation:curlSettle .8s cubic-bezier(.645,.045,.355,1)}
@keyframes curlLift{0%{opacity:0}42%{opacity:.92}72%{opacity:.66}100%{opacity:0}}
@keyframes curlSettle{0%{opacity:.85}48%{opacity:.55}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.page.flipping .page-front::before,.page.flipping .page-back::before{animation:none}.page.flipping{filter:none}}

/* hotspots + tooltip */
.hs{position:absolute;border:2px solid transparent;border-radius:4px;cursor:pointer;z-index:5;transition:background .15s,border-color .15s}
.hs:hover{background:rgba(44,61,168,.16);border-color:var(--brand)}
.hs-tip{position:fixed;z-index:130;display:none;max-width:320px;background:#fff;color:#23252b;
  font-size:.78rem;line-height:1.35;padding:8px 12px;border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.22);
  pointer-events:none;transform:translate(-50%,-115%)}
.hs-tip.show{display:block}
.hs-tip::after{content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#fff}

/* side arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:rgba(44,61,168,.82);backdrop-filter:blur(3px);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(20,22,40,.28);transition:transform .18s,background .18s,opacity .18s}
.arrow:hover:not(:disabled){background:var(--brand2);transform:translateY(-50%) scale(1.1)}
.arrow:active:not(:disabled){transform:translateY(-50%) scale(.96)}
/* keep BOTH arrows visible at all times so readers see they can go either way; just dim the unavailable one */
.arrow:disabled{opacity:.3;cursor:default;pointer-events:none}
.arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev{left:16px}.arrow.next{right:16px}
/* one-time attention pulse so first-time readers notice the page controls */
.arrow.hint{animation:arrowHint 1.1s ease-in-out 3}
@keyframes arrowHint{0%,100%{box-shadow:0 6px 20px rgba(20,22,40,.28)}50%{box-shadow:0 0 0 12px var(--ring),0 6px 20px rgba(20,22,40,.28)}}
@media (prefers-reduced-motion:reduce){.arrow.hint{animation:none}}

/* ============ BOTTOM BAR (Pages tab + progress) ============ */
.bottombar{position:relative;z-index:40;height:46px;flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:var(--toolbar);border-top:1px solid var(--line)}
.pages-tab{display:flex;align-items:center;gap:7px;border:none;cursor:pointer;background:#f3f4f9;color:var(--ink);
  font:inherit;font-size:.76rem;font-weight:600;padding:7px 14px;border-radius:8px;transition:.15s}
.pages-tab:hover{background:#eef0fb;color:var(--brand)}
.pages-tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;background:#d2d4dd;outline:none;cursor:pointer;max-width:520px;margin:0 auto}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(44,61,168,.15)}
.slider::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--brand)}
.bottom-spacer{width:120px;flex:0 0 auto}

/* ============ SUBSCRIBE RIBBON ============ */
.cta-ribbon{position:fixed;top:14px;left:-46px;z-index:120;transform:rotate(-45deg);transform-origin:center;
  background:var(--cta,#1f9d55);color:#fff;text-decoration:none;text-align:center;width:180px;padding:6px 0;
  box-shadow:0 4px 14px rgba(0,0,0,.25);font-weight:700;letter-spacing:.3px;line-height:1.05}
.cta-ribbon .cta-main{display:block;font-size:.62rem}
.cta-ribbon .cta-sub{display:block;font-size:.52rem;font-weight:600;opacity:.95}
.cta-ribbon:hover{filter:brightness(1.06)}

/* ============ OVERLAYS ============ */
.overlay{position:fixed;inset:0;z-index:200;display:none;background:rgba(20,22,30,.5);backdrop-filter:blur(5px)}
.overlay.show{display:block}
/* Pages panel: left slide-in */
.pages-panel{position:absolute;top:0;left:0;height:100%;width:min(330px,88vw);background:#1c1f27;
  display:flex;flex-direction:column;box-shadow:8px 0 36px rgba(0,0,0,.4);
  transform:translateX(-100%);transition:transform .26s ease}
.pages-overlay.show .pages-panel{transform:translateX(0)}
.pages-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.pages-head h3{font-size:.95rem;font-weight:600}
.close-x{width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:1.1rem}
.close-x:hover{background:rgba(255,255,255,.22)}
.close-x.dark{background:#f0f1f5;color:#3a3f48}
.thumbs-grid{flex:1;overflow-y:auto;padding:14px 18px 30px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:start}
.thumb{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.thumb .frame{width:100%;aspect-ratio:1/var(--page-ratio);background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35);border:2px solid transparent;transition:.15s}
.thumb:hover .frame{border-color:rgba(255,255,255,.4)}
.thumb.current .frame{border-color:var(--brand2)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb span{font-size:.66rem;color:rgba(255,255,255,.65)}

/* fullscreen zoom view (page image) */
.zoom-view{position:fixed;inset:0;display:none;background:rgba(20,22,30,.92);z-index:210;flex-direction:column;align-items:center;justify-content:center}
.zoom-view.show{display:flex}
.zoom-canvas{flex:1;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab}
.zoom-canvas.grabbing{cursor:grabbing}
.zoom-canvas img{transform-origin:center;transition:transform .12s;max-width:none;max-height:90%}
.zoom-bar{display:flex;align-items:center;gap:10px;padding:14px;background:rgba(0,0,0,.3)}
.zoom-bar button{width:42px;height:42px;border:none;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:1.2rem}
.zoom-level{color:#fff;font-size:.78rem;min-width:54px;text-align:center}

/* go-to-page popover */
.search-pop{position:absolute;top:56px;right:48px;z-index:60;background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:14px 16px;display:none}
.search-pop.show{display:block}
.search-pop label{display:block;font-size:.7rem;color:var(--ink-soft);margin-bottom:6px}
.search-pop .row{display:flex;gap:8px}
.search-pop input{width:120px;border:1px solid #d6d8e0;border-radius:8px;padding:8px 10px;font:inherit;outline:none}
.search-pop button{border:none;background:var(--brand);color:#fff;border-radius:8px;padding:0 16px;cursor:pointer}

/* About / info modal */
.info-modal{position:fixed;inset:0;z-index:240;display:none;align-items:center;justify-content:center;background:rgba(20,22,30,.6);backdrop-filter:blur(4px);padding:20px}
.info-modal.show{display:flex}
.info-box{position:relative;background:#fff;border-radius:18px;padding:32px;width:min(460px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.info-box .close-x{position:absolute;top:14px;right:14px}
.info-box h2{font-size:1.25rem;margin-bottom:10px;color:var(--ink);padding-right:30px}
.info-box p{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin-bottom:14px}
.info-meta{display:flex;gap:18px;font-size:.82rem;color:var(--ink-soft);margin-bottom:18px}
.info-meta strong{color:var(--ink)}
.info-copy{border:none;background:var(--brand);color:#fff;border-radius:10px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer}
.info-copy:hover{background:#243488}

.toast{position:fixed;bottom:64px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;background:#2b2f38;color:#fff;padding:10px 18px;border-radius:30px;font-size:.78rem;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.print-area{display:none}
@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{display:block;position:absolute;inset:0}.print-area img{width:100%;page-break-after:always;display:block}}

/* TOC drawer */
.toc-overlay .toc-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;box-shadow:-6px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column}
.toc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #eee}
.toc-head h3{font-size:1rem}.toc-head .close-x{background:#f0f1f5;color:#3a3f48}
.toc-list{list-style:none;margin:0;padding:8px 0;overflow-y:auto}
.toc-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;padding:12px 20px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;border-bottom:1px solid #f3f3f5}
.toc-list button:hover{background:#f3f5fd;color:var(--brand)}
.toc-list em{font-style:normal;color:var(--ink-soft);font-size:.8rem;font-variant-numeric:tabular-nums}

/* lead modal */
.lead-modal{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;background:rgba(20,22,30,.6);backdrop-filter:blur(4px);padding:20px}
.lead-modal.show{display:flex}
.lead-box{background:#fff;border-radius:18px;padding:30px;width:min(420px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.lead-box h2{font-size:1.25rem;margin-bottom:6px;color:var(--ink)}
.lead-box .muted{color:var(--ink-soft);font-size:.88rem;margin-bottom:16px}
.lead-box input{width:100%;border:1px solid #d6d8e0;border-radius:10px;padding:12px 14px;font:inherit;margin-bottom:10px;outline:none}
.lead-box input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.lead-err{color:#d9453c;font-size:.8rem;min-height:16px;margin-bottom:6px}
.lead-submit{width:100%;border:none;background:var(--brand);color:#fff;border-radius:10px;padding:12px;font:inherit;font-weight:600;cursor:pointer}
.lead-submit:hover{background:#243488}
.lead-skip{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:.82rem;margin-top:10px;cursor:pointer}
.lead-skip:hover{text-decoration:underline}

/* password gate */
.pw-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.pw-card{background:#fff;border-radius:18px;padding:34px;width:min(380px,100%);text-align:center;box-shadow:0 16px 50px rgba(20,22,40,.12)}
.pw-lock{font-size:2rem;margin-bottom:10px}
.pw-card h1{font-size:1.15rem;margin-bottom:4px;color:var(--ink)}
.pw-card .muted{color:var(--ink-soft);font-size:.85rem;margin-bottom:16px}
.pw-card input{width:100%;border:1px solid #d6d8e0;border-radius:10px;padding:12px 14px;font:inherit;margin-bottom:12px;outline:none}
.pw-card input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.pw-card button{width:100%;border:none;background:var(--brand);color:#fff;border-radius:10px;padding:12px;font:inherit;font-weight:600;cursor:pointer}
.pw-err{color:#d9453c;font-size:.82rem;margin-bottom:10px}
.unavailable{margin:auto;text-align:center;color:var(--ink-soft)}
.unavailable h1{color:var(--ink);font-size:1.3rem;margin-bottom:8px}

/* dark theme */
.theme-dark{--toolbar:#2a2d35;--ink:#e3e5ea;--ink-soft:#9aa0ac;--line:#3a3e48}
.theme-dark .counter{background:#3a3e48;color:#e3e5ea}
.theme-dark .pages-tab{background:#3a3e48;color:#e3e5ea}
.theme-dark .menu-pop,.theme-dark .search-pop{background:#2a2d35;color:#e3e5ea}
.theme-dark .menu-it{color:#e3e5ea}.theme-dark .menu-it:hover{background:#3a3e48}

/* responsive */
@media (max-width:1100px){:root{--page-width:38vw}.arrow.prev{left:10px}.arrow.next{right:10px}}
@media (max-width:860px){
  .tb-left .tb-sep,.zoom-slider,.tool[data-tip="Zoom out"],.tool[data-tip="Zoom in"]{display:none}
  .tb-logo{display:none}
}
@media (max-width:768px){
  .stage{perspective:1500px}.flipbook::before{display:none}
  .left-page{display:none!important}.page{width:100%;left:0}.page-front,.page-back{border-radius:3px}
  .tb-center{gap:0}.counter{min-width:70px;font-size:.72rem;padding:5px 6px}
  #singleBtn,#doubleBtn,#firstBtn,#lastBtn{display:none}
  .arrow.prev{left:8px}.arrow.next{right:8px}.arrow{width:46px;height:46px}.arrow svg{width:22px;height:22px}
  .thumbs-grid{grid-template-columns:repeat(2,1fr)}
  .bottom-spacer{display:none}
}
@media (max-width:520px){
  .tb-right .tool[data-tip="Print"],.tb-right .tool[data-tip="Copy link to this page"]{display:none}
  .cta-ribbon{width:150px;font-size:.55rem;top:10px;left:-50px}
}

/* ============ CLICKABLE ARTICLE REGIONS ============ */
.art-hs{position:absolute;z-index:6;cursor:pointer;border-radius:3px;
  background:transparent;border:1px solid transparent;transition:background .15s,border-color .15s}
.art-hs:hover{background:rgba(44,61,168,.12);border-color:rgba(44,61,168,.55);box-shadow:0 0 0 2px rgba(44,61,168,.12)}

/* ============ ARTICLE POPUP ============ */
.article-modal{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;
  background:rgba(15,17,24,.62);backdrop-filter:blur(5px);padding:18px}
.article-modal.show{display:flex}
.article-box{background:#fff;border-radius:6px;width:min(940px,100%);max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden}
.article-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid #ececf1;flex:0 0 auto}
.article-share{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.ash{width:38px;height:38px;border:none;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#3a3f48;transition:.15s;position:relative}
.ash:hover{background:#eef0fb;color:var(--brand)}
.ash svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ash .afz{font-weight:700;font-size:.82rem}
.ash[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:42px;left:50%;transform:translateX(-50%);
  background:#2b2f38;color:#fff;font-size:.6rem;padding:3px 7px;border-radius:5px;white-space:nowrap;pointer-events:none;z-index:5}
.article-close{display:flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;
  color:var(--brand);font:inherit;font-weight:600;font-size:.92rem;padding:6px 8px;border-radius:8px}
.article-close span{font-size:1.3rem;line-height:1}
.article-close:hover{background:#eef0fb}
.article-scroll{flex:1;overflow-y:auto;padding:0 0 8px}
.article-gallery{background:#111;display:flex;flex-direction:column}
.art-stage{display:flex;align-items:center;justify-content:center;padding:14px;min-height:200px;max-height:52vh}
.art-stage img{max-width:100%;max-height:48vh;object-fit:contain;display:block}
.art-cap{display:flex;align-items:center;gap:12px;background:#1c1f27;color:#fff;padding:10px 16px}
.art-capt{flex:1;font-size:.88rem;font-weight:600}
.art-count{font-size:.74rem;color:rgba(255,255,255,.7)}
.art-nextimg{display:flex;align-items:center;gap:5px;border:none;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.5px}
.art-nextimg svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-nextimg:hover{color:#9db0ff}
.article-headline{font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;line-height:1.25;color:#1a1c22;padding:22px 30px 6px}
.article-body{padding:6px 30px 24px;font-family:Georgia,'Times New Roman',serif;color:#2a2d34;line-height:1.65;font-size:1rem}
.article-body p{margin:0 0 14px}
.article-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid #ececf1;background:#fafafb;flex:0 0 auto}
.art-prev,.art-next{display:flex;align-items:center;gap:7px;border:none;background:transparent;cursor:pointer;color:var(--brand);font:inherit;font-weight:600;font-size:.9rem;padding:6px 8px;border-radius:8px}
.art-prev svg,.art-next svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-prev:hover:not(:disabled),.art-next:hover:not(:disabled){background:#eef0fb}
.art-prev:disabled,.art-next:disabled{opacity:.35;cursor:default}
.art-pos{font-size:.82rem;color:var(--ink-soft);font-weight:600}
@media (max-width:600px){
  .article-headline{font-size:1.25rem;padding:16px 18px 4px}.article-body{padding:4px 18px 20px}
  .ash{width:32px;height:32px}.art-stage img{max-height:40vh}
}