.magazine-reader-page{
  padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,6rem);
}
.magazine-label{
  display:block;
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.magazine-current{
  display:grid;
  grid-template-columns:minmax(260px,420px) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}

.magazine-current-cover{
  min-width:0;
  height:auto;
  align-self:start;
}

.magazine-current-cover img,
.magazine-current-cover canvas{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

.magazine-current-copy{
  min-width:0;
}

.magazine-current-copy h2{
  max-width:14ch;
  margin:.55rem 0 1rem;
  font:700 clamp(2.2rem,4vw,3.8rem)/1.02 var(--serif);
  letter-spacing:-.025em;
}

.magazine-current-copy>p{
  max-width:62ch;
  color:var(--muted);
  font:1rem/1.65 var(--serif);
}

.magazine-meta,
.magazine-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.magazine-meta{
  gap:.4rem 1rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}

.magazine-meta span{
  position:relative;
}

.magazine-meta span::before{
  content:"·";
  position:absolute;
  left:-.62rem;
}

.magazine-actions{
  gap:.8rem;
  margin-top:1.5rem;
}

.magazine-download{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  padding:.6rem .9rem;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:.75rem;
  font-weight:800;
}

.magazine-download:hover,
.magazine-download:focus-visible{
  border-color:var(--gold);
  color:var(--gold);
}

.magazine-inside{
  display:grid;
  gap:.55rem;
  margin-top:2rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}

.magazine-inside>span{
  color:var(--muted);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.magazine-inside a{
  max-width:54ch;
  font:700 1rem/1.25 var(--serif);
}

.magazine-inside a:hover,
.magazine-inside a:focus-visible,
.magazine-card-copy h3 a:hover,
.magazine-card-copy h3 a:focus-visible{
  color:var(--gold);
}

.magazine-archive{
  margin-top:clamp(3rem,7vw,5rem);
}

.magazine-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);
}

.magazine-card{
  min-width:0;
}

.magazine-card-cover{
  display:flex;
  aspect-ratio:3/4;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:.4rem;
  border:1px solid var(--line);
  background:#111827;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.magazine-card-cover img,
.magazine-card-cover canvas{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.magazine-card-copy{
  padding-top:.9rem;
}

.magazine-card-copy>span,
.magazine-card-copy small{
  color:var(--muted);
  font-size:.66rem;
}

.magazine-card-copy h3{
  margin:.25rem 0;
  font:700 1.2rem/1.15 var(--serif);
}

.magazine-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
  margin-top:2.5rem;
  font-size:.75rem;
}

.magazine-pagination a{
  color:var(--gold);
  font-weight:800;
}

.magazine-empty{
  padding:4rem 0;
  border-block:1px solid var(--line);
}

.magazine-reader-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:1.5rem;
}

.magazine-reader-header h1{
  max-width:none;
  margin:.5rem 0 .4rem;
  font:700 clamp(2rem,4vw,3.4rem)/1.05 var(--serif);
  white-space:nowrap;
}

.magazine-reader-header p{
  margin:0;
  color:var(--muted);
  font-size:.75rem;
}

.magazine-back{
  display:block;
  width:max-content;
  margin-bottom:.75rem;
  color:var(--muted);
  font-size:.7rem;
  font-weight:800;
}

.magazine-issue-kicker{
  display:block;
  width:max-content;
}

.magazine-back:hover,
.magazine-back:focus-visible{
  color:var(--gold);
}

.pdf-reader{
  max-width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:5px;
  background:#252a31;
  box-shadow:0 18px 55px rgba(5,14,22,.16);
}

.pdf-toolbar{
  position:relative;
  z-index:10;
  min-height:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.45rem;
  padding:.5rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.11);
  background:#12171d;
  color:#fff;
}

.pdf-toolbar button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:#eef1f3;
  cursor:pointer;
  font:700 .7rem/1 var(--sans);
}

.pdf-toolbar button:hover,
.pdf-toolbar button:focus-visible{
  border-color:rgba(217,184,108,.72);
  color:#e6c777;
  outline:none;
}

.pdf-toolbar button:disabled{
  color:#727981;
  cursor:not-allowed;
}

.pdf-page-status{
  min-width:86px;
  color:#c5cbd0;
  text-align:center;
  font-size:.69rem;
  font-variant-numeric:tabular-nums;
}

.pdf-toolbar-divider{
  width:1px;
  height:20px;
  margin-inline:.2rem;
  background:rgba(255,255,255,.14);
}

.pdf-stage{
  position:relative;
  width:100%;
  height:clamp(480px,72svh,880px);
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:clamp(.75rem,2vw,1.5rem);
  background:radial-gradient(circle at 50% 45%,#444b54 0,#30363e 62%,#252a31 100%);
  touch-action:pan-y;
}

.magazine-flipbook{
  flex:none;
  max-width:100%;
  max-height:100%;
  margin:auto;
  transition:transform 720ms ease;
  will-change:transform;
}

.magazine-flipbook[data-layout="spread"].is-centered-front-cover{
  transform:translateX(calc(var(--magazine-page-width) / -2));
}

.magazine-flipbook[data-layout="spread"].is-centered-back-cover{
  transform:translateX(calc(var(--magazine-page-width) / 2));
}

.magazine-flipbook:empty{
  visibility:hidden;
}

.magazine-sheet{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}

.magazine-page-canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}

.magazine-sheet:not(.is-rendered)::after{
  content:"Loading page…";
  position:absolute;
  color:#7b838c;
  font:600 .7rem/1 var(--sans);
}

.magazine-sheet.has-render-error::after{
  content:"Page unavailable";
  color:#8b3028;
}

.pdf-loading{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  color:#eef1f3;
  font-size:.78rem;
  letter-spacing:.02em;
}

.pdf-loading[hidden]{
  display:none;
}

.pdf-loading-spinner{
  width:30px;
  height:30px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#e2bf6e;
  border-radius:50%;
  animation:magazine-spin .8s linear infinite;
}

@keyframes magazine-spin{
  to{transform:rotate(360deg)}
}

.pdf-error{
  padding:1rem;
  background:#fff2f0;
  color:#7f241c;
  font-size:.82rem;
}

.pdf-error a{
  text-decoration:underline;
}

.pdf-reader:fullscreen{
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:0;
  border-radius:0;
  background:#20252c;
}

.pdf-reader:fullscreen .pdf-stage{
  height:auto;
  min-height:0;
}

.magazine-description{
  max-width:760px;
  margin:2.5rem auto 0;
}

.magazine-description h2{
  font:700 1.6rem/1.2 var(--serif);
}

.magazine-description p{
  color:var(--muted);
  font:1rem/1.65 var(--serif);
}

.magazine-related{
  margin-top:3.5rem;
}

.magazine-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.magazine-related-grid article{
  padding-top:1rem;
  border-top:2px solid var(--ink);
}

.magazine-related-grid h3{
  margin:.45rem 0;
  font:700 1.25rem/1.18 var(--serif);
}

.magazine-related-grid p{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}

@media(max-width:1099px){
  .magazine-current{
    grid-template-columns:minmax(230px,340px) minmax(0,1fr);
  }

  .magazine-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:767px){
  .magazine-page,
  .magazine-reader-page{
    padding-top:1.75rem;
  }

  .magazine-current{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .magazine-current-copy h2{
    max-width:none;
    font-size:2.25rem;
  }

  .magazine-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.25rem .9rem;
  }

  .magazine-reader-header{
    display:block;
  }

  .magazine-reader-header h1{
    white-space:normal;
  }

  .magazine-reader-header>.gold-button{
    margin-top:1rem;
  }

  .pdf-stage{
    height:min(68svh,680px);
    min-height:360px;
    padding:.55rem;
  }

  .magazine-related-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .magazine-card-copy h3{
    font-size:1rem;
  }

  .pdf-toolbar{
    gap:.15rem;
    padding:.42rem .3rem;
  }

  .pdf-toolbar button{
    min-height:30px;
    padding:.3rem .42rem;
    font-size:.62rem;
  }

  .pdf-page-status{
    min-width:72px;
    font-size:.62rem;
  }

  .pdf-toolbar-divider{
    margin-inline:.05rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .pdf-loading-spinner{
    animation-duration:1.8s;
  }
}
