/* Paper Reviews — page-specific styles.
   Link AFTER your styles.css:  <link rel="stylesheet" href="reviews.css">
   Inherits from styles.css: .page .section .section-head .bio .foot .toggle
                             .pub-meta .venue .year .award .pub-title .pub-authors .pub-links
   Variables used (defined in your styles.css :root) with fallbacks, so this file works even
   if a token is named differently on your side. */

.link-pill.is-accent{
  border-color:rgba(140,73,26,.4);
  background:rgba(198,113,57,.1);
  color:var(--accent-ink,#8c491a);
}
.link-pill.is-accent:hover{background:rgba(198,113,57,.18); color:var(--accent-ink,#8c491a)}

.back{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; text-decoration:none}
.page-head{display:flex; flex-direction:column; gap:20px}
.page-title{font-weight:700; font-size:38px; line-height:1.1; letter-spacing:-.03em; margin:0}
.count{font:600 13px Figtree,sans-serif; color:#7a6f5d}

.reviews{display:flex; flex-direction:column; gap:18px}
.review{
  display:flex; flex-direction:column; gap:16px; padding:22px;
  background:var(--card,#faf5ec);
  border:1px solid var(--card-border,#e4d8c1);
  border-radius:20px;
  animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.review-head{display:flex; flex-direction:column; gap:8px}
.spacer{flex:1}
.pages{font:600 12px Figtree,sans-serif; color:#a3987f}

.keywords{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.keyword{
  display:inline-flex; padding:4px 10px; border-radius:999px;
  background:rgba(198,113,57,.12); color:var(--accent-ink,#8c491a);
  font:500 11.5px Figtree,sans-serif;
}

/* click-to-load PDF viewer — compact button first, expands on click */
.slides-wrap{display:flex; flex-direction:column; gap:10px}

/* Compact button before click */
.slides-cover{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 20px;
  border:1px solid var(--line,#ddd0b8); border-radius:14px; cursor:pointer;
  background:var(--bg,#f5ead8); font:inherit; color:var(--ink,#201e1d);
  transition:background .15s ease, border-color .15s ease;
}
.slides-cover:hover{background:#efe4cf; border-color:rgba(140,73,26,.4)}
.slides-cover span{font:600 13px Figtree,sans-serif}
.slides-cover small{font:600 11.5px Figtree,sans-serif; color:var(--muted-2,#8a8073)}

/* Expanded viewer after click */
.slides{
  position:relative; aspect-ratio:4/3; width:100%; border-radius:14px; overflow:hidden;
  border:1px solid var(--card-border,#e4d8c1); background:#efe4cf;
}
.slides iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#efe4cf}

.slides-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:-6px; font:600 12px Figtree,sans-serif; color:var(--muted-2,#8a8073);
}
.slides-bar a, .slides-bar .slides-hide{
  color:var(--ink-3,#3c3833); text-decoration:none; border-bottom:1px solid var(--line,#ddd0b8);
  background:none; border-top:0; border-left:0; border-right:0; padding:0; cursor:pointer;
  font:600 12px Figtree,sans-serif;
}
.slides-bar a:hover, .slides-bar .slides-hide:hover{color:var(--accent-ink,#8c491a); border-bottom-color:rgba(140,73,26,.4)}

.review-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:14px; border-top:1px solid #ece0ca}
.review-date{font:600 12px Figtree,sans-serif; color:var(--muted-2,#8a8073)}

@media (max-width:760px){
  .page-title{font-size:30px}
  .page-head + .section .section-head{flex-direction:column-reverse; align-items:center}
  .slides{aspect-ratio:3/4}
  .review-foot{flex-direction:column; align-items:flex-start}
  .review-foot .spacer{display:none}
}