/* ==========================================================================
   Homepage prototype (home-proto.html only; not used by the live pages).
   Everything is scoped under .proto so it can't leak into the real site.

   1. One spacing scale: 8 / 16 / 32 / 64 / 128. Images sit tight (8-16),
      type gets room, and the big steps (64, 128) mark where one idea ends.
   2. Images keep their own proportions and are staggered vertically.
   3. Hairline rules and index numbers, as in the identity guidelines.
   4. A manifesto strip straight after the hero.
   ========================================================================== */
.proto {
  --s1: 8px;
  --s2: 16px;
  --s3: 32px;
  --s4: 64px;
  --s5: 128px;
}

/* ---- 3. Section heads: a black rule, an index number, the title ---- */
.proto .phead {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: var(--s2);
  border-top: var(--rule) solid var(--black);
  margin-top: var(--s5);
  padding-top: var(--s2);
  margin-bottom: var(--s4);
}
.proto .phead-no {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.proto .phead h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }

/* ---- 4. Manifesto ---- */
.proto .manifesto {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s4);
  align-items: end;
  padding-block: var(--s5) 0;
}
.proto .manifesto-list { border-top: var(--rule) solid var(--black); }
.proto .manifesto-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  border-bottom: var(--rule) solid var(--black);
  padding-block: var(--s2);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: 1;
}
.proto .manifesto-list .idx {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.proto .manifesto-copy { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; max-width: 40ch; }
.proto .manifesto-copy .text-link { margin-top: var(--s2); }

/* ---- 2. Staggered grid of native-proportion images ---- */
.proto .pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--s2);
  row-gap: var(--s4);
  align-items: start;
}
.proto .pgrid > :nth-child(3n + 2) { margin-top: var(--s4); }
.proto .pgrid > :nth-child(3n) { margin-top: var(--s3); }
.proto .pcard .card-media { aspect-ratio: var(--ar, 4 / 5); margin-bottom: var(--s1); }
.proto .pcard-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s1);
  border-top: var(--rule) solid var(--black);
  padding-top: var(--s1);
  margin-bottom: var(--s1);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.proto .pcard-no { color: var(--gray-mid); }
.proto .pcard-cat { color: var(--accent); }
.proto .pcard .card-title { font-size: 1.05rem; line-height: 1.15; margin-bottom: var(--s1); }
.proto .pcard .card-excerpt { font-size: 0.9rem; line-height: 1.45; }

/* The reused sections pick up the same scale. */
.proto .themes { padding-block: var(--s5); margin-top: var(--s5); }
.proto .split { padding-block: var(--s4); gap: var(--s4); }
.proto .archive { padding-bottom: 0; }

@media (max-width: 900px) {
  .proto .manifesto { grid-template-columns: 1fr; gap: var(--s3); padding-top: var(--s4); }
  .proto .phead { margin-top: var(--s4); margin-bottom: var(--s3); grid-template-columns: 3rem 1fr auto; }
  .proto .pgrid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s3); }
  .proto .pgrid > :nth-child(3n + 2),
  .proto .pgrid > :nth-child(3n) { margin-top: 0; }
  .proto .pgrid > :nth-child(2n) { margin-top: var(--s3); }
  .proto .pcard .card-excerpt { display: none; }
  .proto .themes { padding-block: var(--s4); margin-top: var(--s4); }
}

/* ---- Whole-site version (body.proto): every card grid follows the scale ---- */
.proto .article-grid {
  column-gap: var(--s2);
  row-gap: var(--s4);
  align-items: start;
  padding-bottom: var(--s5);
}
.proto .article-grid > .pcard:nth-child(3n + 2) { margin-top: var(--s4); }
.proto .article-grid > .pcard:nth-child(3n) { margin-top: var(--s3); }
.proto .article-grid.grid-tight > .pcard { margin-top: 0; }
.proto .section-head { padding-block: var(--s4) var(--s3); }
@media (max-width: 900px) {
  .proto .article-grid { row-gap: var(--s3); padding-bottom: var(--s4); }
  .proto .article-grid > .pcard:nth-child(3n + 2),
  .proto .article-grid > .pcard:nth-child(3n) { margin-top: 0; }
  .proto .article-grid > .pcard:nth-child(2n) { margin-top: var(--s3); }
}

/* ---- About page in the new styles: numbered sections, lettered values, ruled figure ---- */
.proto .about-no { display: inline; color: var(--accent); margin-right: 1em; letter-spacing: 0.14em; }
.proto .on-dark .about-no { color: var(--gray-mid-inverse); }
.proto .about-figure figcaption { border-top-color: var(--black); }
.proto .value-list { counter-reset: val; }
.proto .value-list li { counter-increment: val; }
.proto .value-list li strong::before { content: counter(val, lower-alpha) ".  "; color: var(--gray-mid-inverse); white-space: pre; }