/* Light layer over your base.css, matching the style of project pages */
.project-page .hero {
  padding: 2.5rem 0 1rem;
}
.project-page .hero h1 {
  margin: 0 0 .5rem;
}
.project-page .hero .sub {
  color: var(--muted);
  max-width: 70ch;
}
.hero-meta {
  margin-top: .75rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.pill {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .85rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  margin: 1rem 0;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px){
  .grid2 { grid-template-columns: 1fr; }
}

.bullets { margin: .5rem 0 0; }
.bullets li { margin: .3rem 0; }
.bullets.two-col {
  columns: 2; column-gap: 2rem; list-style: disc inside;
}
@media (max-width: 900px){ .bullets.two-col { columns: 1; } }

.checked { list-style: none; padding: 0; margin: .25rem 0 1rem; }
.checked li { padding-left: 1.35rem; position: relative; margin: .4rem 0; }
.checked li::before {
  content: "✓";
  position: absolute; left: 0; top: 0; color: var(--brand);
  font-weight: 700;
}

.note {
  margin-top: .75rem;
  padding: .75rem;
  background: linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02));
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .75rem;
}
.gallery .img {
  overflow: hidden; border-radius: 10px; border: 1px solid var(--line);
  background: #111;
}
.gallery img {
  width: 100%; height: 220px; object-fit: cover; display: block;
}
@media (max-width: 900px){
  .gallery { grid-template-columns: 1fr; }
  .gallery img { height: 200px; }
}

.papers { margin: 1.25rem 0; }
.paper-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: .75rem;
  overflow-x: auto; padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
}
.paper {
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem;
}
.paper .venue { font-size: .85rem; color: var(--muted); }
.paper h3 { margin: .25rem 0 .25rem; }
.paper .authors { color: var(--muted); font-size: .95rem; }
.paper .actions { margin-top: .5rem; }
.paper .btn {
  display: inline-block;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.hint { color: var(--muted); font-size: .9rem; margin-top: .4rem; }
/* PDF pane: sticky on desktop, scrollable inside */
.pdf-pane{
  position:sticky;
  top:84px; /* sits below your sticky nav */
  height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.pdf-pane header{
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  margin:8px 12px 8px;
  color:var(--muted);
}
.pdf-pane .pdf-frame{
  flex:1;
  margin:0 8px 8px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0b132a;
}
.pdf-pane iframe{ width:100%; height:100%; border:0 }
/* Two-column layout: content + sticky PDF (same as isotope project) */
.env-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr; /* left wider, right narrower */
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

.stack { display: grid; gap: 18px; }
.stack .card { margin: 1px; }

/* responsive: stack on small screens */
@media (max-width: 1100px){
  .env-grid { grid-template-columns: 1fr; }
  .pdf-pane { position: static; height: 70vh; }
}
.pdf-switch .btn.small.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 80%);
}