/**
 * Development projects: the index and the prospectus.
 * Reads only from tokens.css.
 *
 * There are no project photographs yet — 0 of 26 — so every image position
 * degrades to a typographic panel rather than a grey box. That way the pages
 * read as finished today and improve the moment a cover is uploaded.
 */

.v2-proj-grid-wrap { padding-block: var(--s-6) var(--s-16); }
.v2-proj-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.v2-proj {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.v2-proj:hover { border-color: var(--rule-strong); box-shadow: var(--lift-2); }
.v2-proj-face {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: var(--surface-deep); overflow: hidden;
}
.v2-proj-face img { width: 100%; height: 100%; object-fit: cover; }
/* The stand-in when no cover exists: the project code, set large. It reads as a
   deliberate mark rather than as a missing image. */
.v2-proj-mark {
  font-family: var(--font-display); font-size: var(--t-2xl);
  color: var(--brand-gold); letter-spacing: .06em;
  direction: ltr; unicode-bidi: isolate;
}
.v2-proj-body { padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.v2-proj-body h3 { font-size: var(--t-base); font-weight: 600; line-height: 1.4; }
.v2-proj-body h3 a { color: var(--ink); }
.v2-proj-body h3 a:hover { color: var(--accent); text-decoration: none; }
.v2-proj-when { font-size: var(--t-sm); color: var(--ink-dim); }
.v2-proj-terms { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-dim); }
.v2-proj-terms b { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); }
.v2-proj-terms.is-none { color: var(--ink-faint); }

/* ── Prospectus ── */
.v2-pj { padding-block-end: var(--s-16); }
.v2-pj-head { padding-block: var(--s-6) var(--s-4); }
.v2-pj-head h1 { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; }
.v2-pj-meta { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-block-start: var(--s-3); font-size: var(--t-sm); color: var(--ink-dim); }
.v2-pj-when { color: var(--accent); font-weight: 600; }

.v2-pj-gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding-block-end: var(--s-6); }
.v2-pj-shot { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); background: var(--surface-deep); }
.v2-pj-shot img { width: 100%; height: 100%; object-fit: cover; }

.v2-pj-units { padding-block: var(--s-6) 0; }
.v2-pj-units h2 { font-family: var(--font-display); font-size: var(--t-2xl); margin-block-end: var(--s-4); }

/* Wide content scrolls inside its own container; the page body never does. */
.v2-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.v2-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
.v2-table th, .v2-table td { text-align: start; padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--rule); }
.v2-table th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 500;
  background: var(--surface-warm); white-space: nowrap;
}
.v2-table tbody tr:last-child td { border-block-end: 0; }
.v2-table td:first-child { color: var(--ink); font-weight: 600; }
/**
 * A comparable figure is set as a figure; a note is not. That difference in
 * type is the whole reason a percentage advance can never be mistaken for a
 * price on this page.
 */
.v2-table .is-figure { font-family: var(--font-display); font-size: var(--t-base); color: var(--ink); }
.v2-table .is-note { color: var(--ink-dim); font-size: var(--t-sm); }
.v2-table tr.is-sold { opacity: .55; }
.v2-sold {
  font-size: 9.5px; font-weight: 700; padding: 2px var(--s-2);
  border-radius: var(--radius-pill); background: var(--rule-strong); color: var(--surface-card);
  margin-inline-start: var(--s-2);
}
.v2-pj-note { margin-block-start: var(--s-3); font-size: var(--t-xs); color: var(--ink-dim); max-width: 74ch; line-height: 1.6; }
.v2-pj-cta { padding-block: var(--s-10) 0; }

/* Page wrappers. */
.v2-projects { display: block; }

/**
 * ── Until handover ────────────────────────────────────────────────────────
 *
 * The one figure on a project page that changes on its own. Numerals large and
 * their units small beside them, because the units are three different words in
 * three languages and none of them should be doing the shouting.
 *
 * No bar under it: progress_percent is NULL on every project still being built,
 * on purpose — the two values the sync used to invent were retired rather than
 * replaced, and nothing measures the work.
 */
.v2-handover {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-block-start: var(--s-3); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-card);
}
.v2-handover-lead {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-dim);
}
.v2-handover-fig { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.v2-handover-fig b { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--accent); line-height: 1; }
.v2-handover-fig small { font-size: var(--t-sm); color: var(--ink-body); margin-inline-start: 2px; }
.v2-handover-when { font-size: var(--t-sm); color: var(--ink-dim); }
/* The provenance sits under the figure on its own line, always. */
.v2-handover-note { flex: 1 1 100%; font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.5; }