/* Projects. Loaded only on /projects/.

   An index, not a grid of cards. Each system gets the composition its own output asks for:
   the corridor loop is 2.25:1 and takes the full measure, the perception triplet is three
   small frames beside its text, the exploration run is nearly square. The rule that holds
   them together is the hairline between entries, not a shared box. */

.page-open { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.page-open-title {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 660;
  line-height: 0.92;
  letter-spacing: var(--track-display);
}
.page-open-lede { margin: 1.3rem 0 0; max-width: 54ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.55; }
.page-open-jumps { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.8rem; }
.page-open-jumps a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.page-open-jumps a:hover { color: var(--accent); }

.project-group { margin-block: var(--chapter); }
.project-group:first-of-type { margin-top: 0; }

.entries { display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3.5rem); }
.entry { padding-block: clamp(2.2rem, 5vw, 4rem); border-top: 1px solid var(--rule); display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.entry:last-child { border-bottom: 1px solid var(--rule); }

.entry-index { color: var(--accent); }
.entry-title {
  margin: 0.5rem 0 0.45rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.entry-status { margin-bottom: 1rem; color: var(--ink-2); }
.entry-text { margin: 0 0 1.2rem; max-width: 56ch; color: var(--ink-2); line-height: 1.65; }

.entry-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 1.2rem; padding: 0; }
.entry-tags li {
  max-width: none;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font: 500 var(--t-micro)/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.entry-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.03em; }

.entry-media figure, .entry-media .wipe { margin: 0; }
.entry-media video, .entry-media img { display: block; width: 100%; height: auto; }

@media (min-width: 62em) {
  /* wide output takes the whole measure and the text runs beneath it in two columns */
  .entry-feature { grid-template-columns: minmax(0, 1fr); }
  .entry-feature .entry-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .entry-feature .entry-index { grid-column: 1; }
  .entry-feature .entry-title { grid-column: 1; grid-row: 2; }
  .entry-feature .entry-status { grid-column: 1; grid-row: 3; margin: 0; }
  .entry-feature .entry-text { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .entry-feature .entry-tags { grid-column: 2; grid-row: 4; margin: 1.2rem 0 0.9rem; }
  .entry-feature .entry-links { grid-column: 2; grid-row: 5; }

  .entry-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .entry-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .entry-flip .entry-media { order: 2; }
  .entry-flip .entry-copy { order: 1; }
}

.group-note { margin-top: clamp(1.5rem, 3vw, 2.2rem); max-width: 70ch; color: var(--ink-2); }

/* The platform the thesis work runs on, as a band rather than a card in the flow. */
.platform-band { margin-top: clamp(3rem, 7vw, 5rem); padding-block: clamp(3rem, 7vw, 5rem); }
.platform-band-inner { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.platform-band-media img { display: block; width: 100%; height: auto; }
.platform-band-copy h3 {
  margin: 0.7rem 0 0.8rem;
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.platform-band-copy p { max-width: 52ch; color: var(--ink-2); line-height: 1.65; }
.platform-band-copy .readout { margin: 1.6rem 0; padding-top: 1.1rem; border-top: 1px solid var(--rule-strong); }
.platform-band-copy .readout dl { margin: 0; }
@media (min-width: 58em) {
  .platform-band-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(2.5rem, 6vw, 5rem); }
}

.group-aside { margin-top: clamp(2rem, 5vw, 3.2rem); display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: end; }
.group-aside .v-figure { margin: 0; }
.group-press-links { display: grid; gap: 0.5rem; margin-top: 0.8rem; font-family: var(--mono); font-size: var(--t-mono); }
@media (min-width: 58em) {
  .group-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}