/* Studies — the public record of graded repositories.
   House grammar: Geist Mono Light, #fff/#000 + #2222ff accent, hairlines,
   corner brackets, dim-label/blue-value readouts. Built at runtime by
   studies.js from studies.json. */

.studies-main {
  padding: 140px var(--pad) 0;
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- header zone ---------- */

.studies-title {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 16px;
}

/* home .globe-readout grammar: dim labels, blue values */
.studies-readout {
  font-size: 12px;
  color: var(--ink-dim);
}

.studies-readout .val {
  color: #2222ff;
}

.studies-intro {
  margin-top: 16px;
  max-width: 560px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* ---------- the list ---------- */

.studies-list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* one row per study: seed card left, details right */
.study {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ---------- seed card (left) ---------- */

.study-seed {
  flex: 0 0 auto;
  width: 200px;
}

.study-media {
  position: relative;
  width: 200px;
  height: 150px;
  overflow: hidden;
}

/* generative cover (studies.js) — canvas fills the box */
.study-media canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* instrument brackets (home .corner grammar), drawn on hover.
   Reserved via opacity only — no layout shift. */
.study-media .corner {
  opacity: 0;
  transition: opacity 120ms linear;
}

.study:hover .study-media .corner {
  opacity: 1;
}

/* dim seed line under the card */
.study-seedline {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-dim);
}

.study-seedline .val {
  color: #2222ff;
}

/* ---------- details (right) ---------- */

.study-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-repo {
  font-size: 16px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  align-self: flex-start;
}

/* whole row hover pushes the repo name to accent blue */
.study:hover .study-repo {
  color: #2222ff;
}

/* ↗ affordance, dim, only present when the study links out to github */
.study-repo .study-out {
  font-size: 12px;
  color: var(--ink-dim);
}

.study-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* language · roles · commit · generated — dim labels, blue values */
.study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--ink-dim);
}

.study-meta .val {
  color: #2222ff;
}

.study-specimen {
  font-size: 12px;
  color: var(--ink-dim);
}

/* [view study] — bracketed affordance, house grammar */
.study-view {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 12px;
  color: var(--ink);
}

.study-view:hover {
  color: #2222ff;
}

/* ---------- mobile: cards stack, seed above details ---------- */

@media (max-width: 900px) {
  .studies-main {
    padding-top: 120px;
  }

  .studies-list {
    margin-top: 48px;
    gap: 56px;
  }

  .study {
    flex-direction: column;
    gap: 16px;
  }

  /* seed card grows to full width, keeping its aspect */
  .study-seed {
    width: 100%;
    max-width: 320px;
  }

  .study-media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}