*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--base-3,#ffffff)}
body.spx-epaper-viewer{
  --spx-contrast:var(--contrast,#222430);
  --spx-contrast-2:var(--contrast-2,#5e627e);
  --spx-contrast-3:var(--contrast-3,#151720);
  --spx-base:var(--base,#f4f4f4);
  --spx-base-2:var(--base-2,#f1f1f1);
  --spx-base-3:var(--base-3,#ffffff);
  --spx-accent:var(--accent,#d91632);
  --spx-adminbar-offset:0px;
  background:var(--spx-base-3);
  color:var(--spx-contrast);
  overflow-x:hidden;
  overflow-anchor:none;
  min-height:100vh
}
body.spx-epaper-viewer #sticky-navigation{display:none!important}
body.spx-epaper-viewer.spx-overlay-open{overflow:hidden}
body.admin-bar.spx-epaper-viewer{--spx-adminbar-offset:32px}
@media (max-width:782px){
  body.admin-bar.spx-epaper-viewer{--spx-adminbar-offset:46px}
}
.single-spx_epaper.one-container .container {background-color: transparent!important;}
.spx-epaper-container{
  --spx-frame-width:946px;
  width:min(100%, var(--spx-frame-width));
  max-width:1200px;
  margin:0 auto;
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--spx-base-2);
  overflow-anchor:none;
  border-radius:14px
}

.spx-epaper-header{
  align-self:stretch;
  width:auto;
  margin:0 -12px 14px;
  text-align:left;
  background:var(--spx-base-3);
  border:1px solid color-mix(in srgb,var(--spx-contrast-2) 20%, transparent);
  border-radius:8px 8px 0 0;
  box-shadow:none;
  overflow:hidden
}
.spx-epaper-brand{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:0;
  min-height:42px;
  padding:8px 14px;
  background:var(--spx-base-2);
  border-bottom:1px solid color-mix(in srgb,var(--spx-contrast-2) 20%, transparent)
}
.spx-epaper-logo{height:26px;width:auto;opacity:.9}
.spx-epaper-header h1{
 font-weight: 700;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing:0;
  margin:0;
  padding:14px 16px 4px;
  color:var(--spx-contrast)
}


.spx-epaper-meta{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 16px 0 16px;
  background:transparent;
  border:none;
  border-radius:0;
  font-size:.86rem;
  font-weight:500;
  color:var(--spx-contrast-2);
  margin:0 0 4px
}
.spx-epaper-desc{
  max-width:980px;
  margin:0;
  padding:0 16px 14px;
  opacity:.95;
  line-height:1.45;
  font-size:.97rem;
  color:var(--spx-contrast)
}

/* Loader */
#spx-loader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(21,23,32,.88);padding:18px}
.spx-loader-inner{width:min(420px,92vw);background:var(--spx-base-2);border:1px solid var(--spx-base);border-radius:14px;padding:18px 16px;box-shadow:0 10px 40px rgba(21,23,32,.35);text-align:center}
.spx-loader-title{font-size:1.05rem;opacity:.92;margin-bottom:12px}
.spx-loader-bar{height:10px;border-radius:999px;background:var(--spx-base);overflow:hidden}
.spx-loader-fill{height:100%;width:0%;background:var(--spx-accent);border-radius:999px;transition:width .18s ease}
.spx-loader-text{margin-top:10px;font-size:.95rem;opacity:.85;color:var(--spx-contrast-2)}

#spx-flipbook{width:922px;height:600px;margin:0 auto;visibility:hidden;transform:translateZ(0);overflow:hidden;overflow-anchor:none}
#spx-flipbook .turn-page-wrapper{margin:0!important;padding:0!important;overflow:hidden;transform:translateZ(0)}
#spx-flipbook .page{
  position:relative;
  width:100%;
  height:100%;
  background:var(--spx-base-3);
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 4px 20px rgba(21,23,32,.2);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0)
}
#spx-flipbook .page img{
  width:100%;
  height:100%;
  object-fit:contain;
  cursor:zoom-in;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0)
}
#spx-flipbook.is-double .page img{
  /* Slightly overfill each half in double view to hide center seam artifacts. */
  width:calc(100% + 2px);
  max-width:none;
  margin-left:-1px;
}
#spx-flipbook.is-double .page.spx-page-left{
  margin-left:1px;
}

.spx-controls{
  --spx-control-size:48px;
  position:relative;
  background:linear-gradient(135deg,var(--spx-base-3) 0%,var(--spx-base-2) 100%);
  padding:14px;
  display:grid;
  grid-template-columns:repeat(5,var(--spx-control-size)) minmax(170px,1fr);
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  margin:14px 0 6px;
  width:100%;
  border:1px solid color-mix(in srgb,var(--spx-contrast-2) 24%, transparent);
  box-shadow:0 12px 28px rgba(21,23,32,.12);
  isolation:isolate
}
.spx-controls::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--spx-accent) 45%, transparent),color-mix(in srgb,var(--spx-contrast-2) 25%, transparent));
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-origin:content-box,border-box;
  mask-clip:content-box,border-box;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.55
}
.spx-controls button{
  appearance:none;
  border:1px solid color-mix(in srgb,var(--spx-contrast-2) 26%, transparent);
  background:var(--spx-base-3);
  width:var(--spx-control-size);
  height:var(--spx-control-size);
  min-height:var(--spx-control-size);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  font-size:0;
  line-height:0;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--spx-contrast);
  cursor:pointer;
  justify-self:center;
  border-radius:12px;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease
}
.spx-controls button .spx-btn-label{display:none!important}
#spx-btn-prev,#spx-btn-next{background:var(--spx-accent);border-color:var(--spx-accent);color:#fff}
#spx-btn-overview{
  background:var(--spx-base-3);
  border-color:color-mix(in srgb,var(--spx-contrast-2) 26%, transparent);
  color:var(--spx-contrast);
}
.spx-controls #spx-btn-first,
.spx-controls #spx-btn-last{
  color:var(--spx-contrast);
}
.spx-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:0 0 22px
}
.spx-btn-icon svg{width:100%;height:100%}
.spx-controls button:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--spx-contrast-2) 34%, transparent);
  box-shadow:0 8px 18px rgba(21,23,32,.16)
}
.spx-controls button:disabled,
.spx-controls button.is-disabled{
  cursor:not-allowed;
  opacity:.52;
  transform:none;
  box-shadow:none;
  filter:saturate(.45);
}
.spx-controls button:disabled:hover,
.spx-controls button.is-disabled:hover{
  transform:none;
  box-shadow:none;
  border-color:color-mix(in srgb,var(--spx-contrast-2) 26%, transparent);
}
#spx-btn-prev:hover,#spx-btn-next:hover{
  background:color-mix(in srgb,var(--spx-accent) 92%, #000);
  border-color:color-mix(in srgb,var(--spx-accent) 85%, #000);
}
#spx-btn-prev:disabled,#spx-btn-next:disabled,
#spx-btn-prev.is-disabled,#spx-btn-next.is-disabled{
  background:color-mix(in srgb,var(--spx-accent) 58%, var(--spx-base-3));
  border-color:color-mix(in srgb,var(--spx-accent) 48%, var(--spx-base-3));
  color:color-mix(in srgb,var(--spx-base-3) 88%, var(--spx-base));
}
#spx-btn-first:hover,#spx-btn-last:hover{
  background:color-mix(in srgb,var(--spx-base) 80%, var(--spx-base-3));
  border-color:color-mix(in srgb,var(--spx-contrast-2) 42%, transparent);
  color:var(--spx-contrast);
}
#spx-btn-overview:hover{
  background:color-mix(in srgb,var(--spx-base) 80%, var(--spx-base-3));
  border-color:color-mix(in srgb,var(--spx-contrast-2) 42%, transparent);
  color:var(--spx-contrast);
}
.spx-controls button:active{transform:translateY(0) scale(.985)}
.spx-controls button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--spx-accent) 65%, #fff);
  outline-offset:2px
}
.spx-controls #spx-btn-first:focus-visible,
.spx-controls #spx-btn-last:focus-visible{
  color:var(--spx-contrast);
}

.spx-page-info{
  display:flex;
  align-items:center;
  justify-content:center;
  grid-column:6;
  margin:0;
  min-height:var(--spx-control-size);
  padding:12px 14px;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--contrast);
  background:color-mix(in srgb,var(--spx-base-3) 82%, transparent);
  border:1px solid color-mix(in srgb,var(--spx-contrast-2) 26%, transparent);
  border-radius:12px;
  white-space:nowrap;
  transform:translateY(0);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease
}
.spx-page-info.is-updating{
  animation:spxPageInfoSwap .24s ease;
  border-color:color-mix(in srgb,var(--spx-accent) 40%, transparent);
  box-shadow:0 6px 16px rgba(21,23,32,.12)
}
@keyframes spxPageInfoSwap{
  0%{opacity:.55;transform:translateY(2px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Overview modal */
#spx-overview-overlay{display:none;position:fixed;inset:0;background:rgba(21,23,32,.85);z-index:11000;align-items:center;justify-content:center;padding:18px}
#spx-overview{background:var(--spx-base-2);border-radius:14px;max-width:1100px;width:100%;max-height:80vh;overflow:auto;overflow-anchor:none;padding:16px;color:var(--spx-contrast)}
#spx-overview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#spx-overview-header h2{font-size:1.1rem}
#spx-overview-close{
  appearance:none;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:0;
  line-height:0;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--spx-contrast-2) 26%, transparent);
  background:var(--spx-base-3);
  color:var(--spx-contrast);
  cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease
}
#spx-overview-close:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb,var(--spx-base) 80%, var(--spx-base-3));
  border-color:color-mix(in srgb,var(--spx-contrast-2) 42%, transparent);
  box-shadow:0 8px 18px rgba(21,23,32,.16);
}
#spx-overview-close:active{transform:translateY(0) scale(.98)}
#spx-overview-close:focus-visible{
  outline:2px solid color-mix(in srgb,var(--spx-accent) 70%, #fff);
  outline-offset:2px
}
#spx-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.spx-thumb{border:1px solid var(--spx-base);border-radius:10px;overflow:hidden;background:var(--spx-base-3);cursor:pointer}
.spx-thumb img{width:100%;height:180px;object-fit:cover;display:block}
.spx-thumb span{display:block;padding:8px 10px;font-size:.9rem;opacity:.9;color:var(--spx-contrast)}

/* Zoom overlay */
#spx-zoom-overlay{display:none;position:fixed;inset:0;background:rgba(21,23,32,.92);z-index:11010;overscroll-behavior:contain}
#spx-zoom-unzoom{
  appearance:none;
  position:absolute;
  left:50%;
  bottom:86px;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(21,23,32,.44);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  backdrop-filter:blur(4px);
  z-index:2;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#spx-zoom-unzoom[hidden]{display:none!important}
#spx-zoom-unzoom:hover{
  transform:translateX(-50%) translateY(-1px);
  background:rgba(21,23,32,.58);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
#spx-zoom-unzoom:focus-visible{
  outline:2px solid color-mix(in srgb,var(--spx-accent) 70%, #fff);
  outline-offset:2px;
}
#spx-zoom-unzoom .spx-btn-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
}
#spx-zoom-ui{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px
}
#spx-zoom-label{color:var(--spx-base-3);opacity:.9;text-align:center;margin-bottom:-5px;font-size:.85em}
#spx-zoom-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  width:min(860px,100%)
}
#spx-zoom-actions button{
  appearance:none;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease
}
#spx-zoom-actions .spx-btn-icon{
  width:18px;
  height:18px;
  flex:0 0 18px
}
#spx-zoom-prev,#spx-zoom-next{
  background:color-mix(in srgb,var(--spx-accent) 34%, transparent);
  border-color:color-mix(in srgb,var(--spx-accent) 60%, transparent);
}
#spx-zoom-first,#spx-zoom-last{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
}
#spx-zoom-close{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.35);
}
#spx-zoom-actions button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}
#spx-zoom-prev:hover,#spx-zoom-next:hover{
  background:color-mix(in srgb,var(--spx-accent) 50%, transparent);
  border-color:color-mix(in srgb,var(--spx-accent) 72%, transparent);
}
#spx-zoom-first:hover,#spx-zoom-last:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.44);
}
#spx-zoom-close:hover{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.5);
}
#spx-zoom-actions button:active{transform:translateY(0) scale(.98)}
#spx-zoom-actions button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--spx-accent) 70%, #fff);
  outline-offset:2px
}
#spx-zoom-inner{position:absolute;inset:10px 10px 84px;display:flex;align-items:center;justify-content:center;gap:0;overflow:hidden}
#spx-zoom-inner.single{justify-content:center}
#spx-zoom-inner .spx-zoom-page{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  height:100%;
}
#spx-zoom-inner:not(.single) .spx-zoom-page{
  flex:0 0 50%;
  width:50%;
  justify-content:center;
  overflow:hidden;
}
#spx-zoom-inner:not(.single) .spx-zoom-page.is-left{
  justify-content:flex-end;
}
#spx-zoom-inner:not(.single) .spx-zoom-page.is-right{
  justify-content:flex-start;
}
#spx-zoom-inner.single .spx-zoom-page{
  justify-content:center;
}
#spx-zoom-inner:not(.single) .spx-zoom-page img{
  width:auto;
  height:100%;
  max-width:none;
  max-height:100%;
  object-fit:contain;
  display:block;
}
#spx-zoom-inner.single .spx-zoom-page img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
#spx-zoom-inner .spx-zoom-page .spx-zoom-page-zoom-trigger{
  appearance:none;
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(21,23,32,.38);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  backdrop-filter:blur(4px);
  z-index:3;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#spx-zoom-inner .spx-zoom-page .spx-zoom-page-zoom-trigger:hover{
  transform:translateX(-50%) translateY(-1px);
  background:rgba(21,23,32,.54);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
#spx-zoom-inner .spx-zoom-page .spx-zoom-page-zoom-trigger:focus-visible{
  outline:2px solid color-mix(in srgb,var(--spx-accent) 70%, #fff);
  outline-offset:2px;
}
#spx-zoom-inner .spx-zoom-page .spx-zoom-page-zoom-trigger .spx-btn-icon{
  width:15px;
  height:15px;
  flex:0 0 15px;
}
#spx-zoom-overlay.is-actual-size #spx-zoom-inner .spx-zoom-page .spx-zoom-page-zoom-trigger{
  display:none;
}
#spx-zoom-overlay.is-actual-size #spx-zoom-inner{
  overflow:auto;
  display:block;
  text-align:center;
  white-space:nowrap;
}
#spx-zoom-overlay.is-actual-size #spx-zoom-inner .spx-zoom-page{
  display:inline-flex;
  vertical-align:top;
  height:auto;
}
#spx-zoom-overlay.is-actual-size #spx-zoom-inner img{
  max-width:100%;
  max-height:none;
  width:auto;
  height:auto;
  object-fit:initial;
  margin:0;
  display:inline-block;
  vertical-align:top;
}
body.admin-bar.spx-epaper-viewer #spx-loader,
body.admin-bar.spx-epaper-viewer #spx-overview-overlay,
body.admin-bar.spx-epaper-viewer #spx-zoom-overlay{
  inset:var(--spx-adminbar-offset) 0 0 0;
}

@media (max-width:1024px){
  #spx-flipbook{width:760px;height:494px}
  .spx-controls{
    grid-template-columns:repeat(5,var(--spx-control-size));
    grid-template-areas:"prev next first last overview" "info info info info info";
  }
  .spx-page-info{grid-area:info}
}

@media (max-width:768px){
  .spx-epaper-container{
    width:100%;
    max-width:none;
    --spx-frame-width:100%;
    padding:20px
  }
  .spx-epaper-header{
    width:100%;
    margin:0 0 10px;
    border-radius:8px 8px 0 0
  }
  .spx-epaper-brand{min-height:38px;padding:7px 12px}
  .spx-epaper-logo{height:22px}
  .spx-epaper-header h1{font-size:1.05rem;padding:12px 12px 4px}
  .spx-epaper-meta{font-size:.8rem;padding:0 12px}
  .spx-epaper-desc{font-size:.9rem;line-height:1.42;padding:0 12px 12px}

  .spx-controls{
    --spx-control-size:46px;
    padding:12px 10px 14px;
    display:grid;
    grid-template-columns:repeat(5,var(--spx-control-size));
    grid-template-areas:"prev next first last overview" "info info info info info";
    justify-content:center;
    gap:10px;
    border-radius:0;
    border-left:none;
    border-right:none;
    margin:10px 0 0
  }
  #spx-btn-prev{grid-area:prev}
  #spx-btn-next{grid-area:next}
  #spx-btn-first{grid-area:first}
  #spx-btn-last{grid-area:last}
  #spx-btn-overview{grid-area:overview}
  .spx-page-info{grid-area:info;font-size:.95rem}
  .spx-controls button{width:var(--spx-control-size);height:var(--spx-control-size);min-height:var(--spx-control-size);padding:0;font-size:.9rem;border-radius:12px}
  .spx-btn-icon{width:18px;height:18px;flex-basis:18px}
  #spx-zoom-ui{left:10px;right:10px;bottom:10px}
  #spx-zoom-unzoom{bottom:106px}
  #spx-zoom-actions{gap:6px}
  #spx-zoom-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  #spx-zoom-first{grid-column:1}
  #spx-zoom-prev{grid-column:2}
  #spx-zoom-next{grid-column:3}
  #spx-zoom-last{grid-column:1}
  #spx-zoom-close{grid-column:2}
  #spx-zoom-actions button{min-width:42px;min-height:42px;padding:9px 12px;border-radius:11px}

  /* Never distort/crop page proportions on mobile. */
  #spx-flipbook .page img{object-fit:contain}
}

.spx-epaper-listing{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
}
.spx-epaper-listing-header{
  margin-bottom:20px;
}
.spx-epaper-listing-header h1{
  margin:0 0 8px;
}
.spx-epaper-listing-desc{
  margin:0;
}
.spx-epaper-list-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.spx-epaper-card{
  border:1px solid var(--base);
  border-radius:10px;
  overflow:hidden;
  background: var(--base);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.spx-epaper-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.spx-epaper-card-media{
  aspect-ratio:3/4;
  background: var(--base-3);
  overflow:hidden;
}
.spx-epaper-card-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .34s ease, filter .34s ease;
}
.spx-epaper-card-body{
  padding:12px;
}
.spx-epaper-card-title{
  margin:0;
  font-size:1.05rem;
  line-height:1.3;
  transition:color .2s ease;
}
.spx-epaper-pagination{
  margin-top:24px;
}
.spx-epaper-empty{
  margin:0;
}

@media (hover: hover) and (pointer: fine){
  .spx-epaper-card:hover{
    transform:translateY(-6px);
    border-color: var(--base-3);
    box-shadow:0 14px 32px rgba(0,0,0,.14);
  }
  .spx-epaper-card:hover .spx-epaper-card-image{
    transform:scale(1.04);
    filter:saturate(1.06);
  }
  .spx-epaper-card:hover .spx-epaper-card-title{
    color: var(--contrast-3);
  }
}
