:root{--black:#050505;--ink:#f3f3f3;--muted:#9ca3aa;--line:#2b2d30;--red:#ca2b2b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0a0a0a;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
body.reader{overflow:hidden}
.top{height:68px;padding:0 20px;display:flex;align-items:center;gap:18px;background:#050505;border-bottom:1px solid var(--line)}
.top img{height:45px;width:auto}
.top .title{font-weight:800;letter-spacing:.11em}
.top .sub{font-size:.72rem;color:var(--muted);font-weight:400;margin-top:3px;letter-spacing:.08em}
.top .back{margin-left:auto;text-decoration:none;color:#bbb;font-size:.86rem}
.controls{display:flex;gap:7px;align-items:center}
.controls button{background:#171717;color:#eee;border:1px solid #333;border-radius:7px;padding:8px 11px;cursor:pointer}
.controls button:disabled{opacity:.35}
#counter{min-width:95px;text-align:center;color:#bbb;font-size:.82rem}
.reader-main{height:calc(100vh - 68px);display:grid;grid-template-rows:1fr 94px}
.stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px}
.spread{height:min(78vh,calc(100vh - 190px));display:flex;align-items:center;filter:drop-shadow(0 18px 28px #000)}
.page{height:100%;background:white;overflow:hidden}
.page img{height:100%;width:auto;display:block}
.gutter{width:3px;height:100%;background:linear-gradient(90deg,#111,#888,#111)}
.zone{position:absolute;top:0;bottom:0;width:18%;z-index:5;cursor:pointer}
.zone.left{left:0}.zone.right{right:0}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;background:#060606;border-top:1px solid #262626}
.thumb{height:70px;flex:none;background:#111;border:2px solid transparent;padding:3px;cursor:pointer;position:relative}
.thumb img{height:100%;display:block}
.thumb span{position:absolute;right:4px;bottom:3px;background:rgba(0,0,0,.7);padding:2px 4px;font-size:.65rem}
.thumb.active{border-color:#fff}

/* archive */
body.archive{
  background:
   radial-gradient(circle at 20% 10%,rgba(255,255,255,.08),transparent 22%),
   radial-gradient(circle at 80% 0%,rgba(158,0,0,.12),transparent 25%),
   linear-gradient(160deg,#050505,#111 60%,#070707);
}
.archive-head{max-width:1250px;margin:auto;padding:52px 28px 22px;display:flex;align-items:center;gap:28px}
.archive-logo{width:115px;height:115px;object-fit:contain}
.archive-head h1{font-size:clamp(2.8rem,7vw,6.5rem);line-height:.86;margin:0;letter-spacing:-.04em}
.archive-head p{color:#aaa;max-width:600px;margin:14px 0 0}
.archive-grid{max-width:1250px;margin:auto;padding:20px 28px 70px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.issue{text-decoration:none;display:block}
.cover{aspect-ratio:0.71;background:#191919;overflow:hidden;box-shadow:0 16px 26px rgba(0,0,0,.45);transition:.2s transform,.2s box-shadow}
.cover img{width:100%;height:100%;object-fit:cover}
.issue:hover .cover{transform:translateY(-5px);box-shadow:0 22px 32px rgba(0,0,0,.65)}
.meta{padding-top:10px;display:flex;justify-content:space-between;gap:10px}
.meta b{font-size:.92rem;letter-spacing:.04em}
.meta span{font-size:.78rem;color:#888}
.issue.pending .cover{outline:1px dashed #777}
.pending-label{color:#e0b36a!important}
.archive-foot{padding:24px;text-align:center;color:#666;border-top:1px solid #222;font-size:.75rem;letter-spacing:.08em}
@media(max-width:980px){.archive-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
 .archive-head{align-items:flex-start}.archive-logo{width:80px;height:80px}
 .archive-grid{grid-template-columns:repeat(2,1fr);gap:17px;padding:15px 16px 50px}
 .top .title{display:none}.top{padding:0 8px}.top img{height:40px}
 .reader-main{grid-template-rows:1fr 80px}.spread{height:min(74vh,calc(100vh - 170px))}
 .gutter{display:none}.thumb{height:56px}.controls button{padding:7px 9px}.back{display:none}
}


/* --- 2026 archive layout refinements --- */
.archive-head{
  max-width:1250px;
  margin:auto;
  padding:42px 28px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  text-align:left;
}
.archive-head h1{
  font-size:clamp(2.6rem,6vw,5.4rem);
  line-height:.88;
  margin:0;
  letter-spacing:-.04em;
}
.archive-logo{width:100px;height:100px;object-fit:contain}

.archive-grid{
  max-width:1320px;
  margin:auto;
  padding:12px 24px 70px;
  display:block;
}
.archive-row{
  display:grid;
  gap:22px;
  justify-content:center;
  margin:0 auto 28px;
}
.archive-row.row-six{grid-template-columns:repeat(6, 150px)}
.archive-row.row-seven{grid-template-columns:repeat(7, 150px)}

.issue{width:150px}
.cover{
  width:150px;
  aspect-ratio:.71;
  background:white;
  border:6px solid white;
  overflow:hidden;
  box-shadow:0 12px 22px rgba(0,0,0,.5);
}
.cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:white;
}
.meta{
  padding-top:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  text-align:center;
}
.meta b{font-size:.88rem;letter-spacing:.04em}
.meta span{font-size:.72rem;color:#888}

/* Larger, centered reader controls */
.top{
  height:78px;
  padding:0 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
}
.top > img{justify-self:start;height:52px}
.top .title{
  justify-self:start;
  font-size:1.05rem;
}
.controls{
  grid-column:2;
  justify-self:center;
  display:flex;
  gap:10px;
  align-items:center;
}
.controls button{
  background:#171717;
  color:#eee;
  border:1px solid #3d3d3d;
  border-radius:8px;
  padding:11px 15px;
  font-size:1.15rem;
  min-width:48px;
}
#counter{
  min-width:128px;
  text-align:center;
  color:#eee;
  font-size:1rem;
  font-weight:700;
}
.top .back{
  grid-column:3;
  justify-self:end;
  margin-left:0;
  font-size:.95rem;
}
.reader-main{height:calc(100vh - 78px)}

@media(max-width:1100px){
  .archive-row.row-six{grid-template-columns:repeat(3,150px)}
  .archive-row.row-seven{grid-template-columns:repeat(4,150px)}
}
@media(max-width:700px){
  .archive-head{justify-content:flex-start;padding:28px 16px 14px}
  .archive-logo{width:72px;height:72px}
  .archive-grid{padding:12px 12px 50px}
  .archive-row.row-six,.archive-row.row-seven{grid-template-columns:repeat(2,140px);gap:16px}
  .issue,.cover{width:140px}
  .top{
    height:74px;
    grid-template-columns:auto 1fr;
    padding:0 8px;
  }
  .top > img{height:42px}
  .top .title{display:none}
  .controls{
    grid-column:2;
    justify-self:center;
    gap:6px;
  }
  .controls button{padding:9px 11px;font-size:1.05rem;min-width:42px}
  #counter{min-width:94px;font-size:.9rem}
  .top .back{display:none}
  .reader-main{height:calc(100vh - 74px)}
}

/* --- robust reader v3 --- */
.top{position:relative;z-index:50}
.controls{position:relative;z-index:60}
.controls button{cursor:pointer;pointer-events:auto}
.stage{position:relative;z-index:1}
.zone{z-index:4}
.page{position:relative;z-index:2}
.thumbs{position:relative;z-index:20}