/* 12b-project-reading.css — codeclub's opt-in reading layout.
   The existing type roles are reassigned only inside its information bands.
   Work details live in their own iframe in split view: that iframe's viewport
   triggers these same media queries, without a .page-shell container mirror. */

.codeclub-reading .site-header { background: var(--bg); }

.codeclub-reading .project-detail {
  display: block;
  padding: 0;
}

.codeclub-reading .project-info-row {
  --text-body: 1rem;
  --text-body-large: 1.125rem;
  --text-title: 2rem;
  display: grid;
  row-gap: var(--block-space);
  padding-block: calc(var(--section-space) * 2);
}

.codeclub-reading .project-meta,
.codeclub-reading .project-specs,
.codeclub-reading .project-descriptions {
  min-width: 0;
  margin-bottom: 0;
}

.codeclub-reading .project-title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.codeclub-reading .codeclub-introduction .project-descriptions {
  grid-column: 2;
  grid-row: 1;
}

.codeclub-reading .project-descriptions {
  font-size: var(--text-body);
  max-width: 60ch;
}

.codeclub-reading .project-descriptions p {
  max-width: none;
  font-size: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--block-space);
  overflow-wrap: anywhere;
}

.codeclub-reading .project-descriptions p:last-child {
  margin-bottom: 0;
}

.codeclub-reading .codeclub-summary p {
  font-size: var(--text-body-large);
  line-height: 1.65;
  color: var(--ink);
}

.codeclub-reading .project-media {
  display: block;
}

.codeclub-reading .codeclub-context {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.codeclub-reading .codeclub-context .project-descriptions {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.codeclub-reading .codeclub-context .project-specs {
  grid-column: 2;
  grid-row: 1;
  line-height: 1.6;
}

.codeclub-reading .codeclub-context .project-credits {
  grid-row: 2;
}

.codeclub-reading .project-detail > :is(.project-next, .project-related) {
  margin-inline: 0;
}

@media (max-width: 900px) {
  .codeclub-reading .project-info-row {
    --text-title: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--block-space);
    padding-block: var(--section-space);
  }

  .codeclub-reading .codeclub-introduction .project-descriptions,
  .codeclub-reading .codeclub-context .project-descriptions,
  .codeclub-reading .codeclub-context .project-specs,
  .codeclub-reading .codeclub-context .project-credits {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .codeclub-reading .project-info-row {
    --text-body: .875rem;
    --text-body-large: 1rem;
    --text-title: 1.375rem;
  }
  .codeclub-reading .codeclub-context {
    row-gap: var(--section-space);
  }
}