/* ========= isotope Analysis project (scoped) ========= */

.project-isotope .hero-card h1{ margin:0 0 6px }
.project-isotope .hero-card .pills{ margin-top:10px }

/* Two-column layout with good breathing room */
.isotope-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.9fr;  /* left wider */
  gap:22px;                             /* column gap */
  align-items:start;
  margin-top:18px;
}

/* Left side stacks cards/sections with gaps */
.stack{ display:grid; gap:18px }
.stack .grid2, .stack .grid3{ gap:20px }

/* Gentle outer separation so borders never touch visually */
.stack .card, .pdf-pane{ margin:1px }

/* 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 }

/* Lists with ticks */
.ticks{ margin:8px 0 0; padding-left:18px }
.ticks li{ margin:6px 0 }

/* Figures */
.fig{ margin-top:10px }
.fig img{ width:100%; height:auto; border-radius:10px; display:block }

/* Simple “bar” viz used by the slider */
.bars{ display:grid; gap:10px; margin-top:10px }
.bar{ display:flex; align-items:center; gap:10px }
.bar i{
  display:block; flex:1; height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}

/* Responsive: stack PDF below content for smaller screens */
@media (max-width: 780px){
  .isotope-grid{ grid-template-columns: 1fr }
  .pdf-pane{ position:static; height:70vh }
}
.project-isotope .card a {
  color: var(--brand-2);          /* your green accent */
  text-decoration: none;
  font-weight: 500;
}
.pdf-switch .btn.small.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 80%);
}