/* visualutopia.ai v2: the content pages. Draft 1 skeleton, 2026-10-01.
   Layout only. Every color, weight and size comes from tokens.css through
   styles.css, which this file sits after. */

/* ---- Draft banner. Comes out before anything goes live. ---- */
.draft-banner {
  background: var(--vu-page);
  border-bottom: var(--vu-border) solid var(--vu-line);
  color: var(--vu-muted);
  font-size: var(--vu-size-small);
  letter-spacing: var(--vu-track-body);
  padding: calc(var(--step) * 1) var(--gutter);
}

/* ---- Page frame ---- */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--step) * 10) var(--gutter) calc(var(--step) * 12);
}

.page-title {
  font-size: var(--vu-size-title);
  font-weight: var(--vu-weight-light);
  letter-spacing: var(--vu-track-caps);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 calc(var(--step) * 4);
}

.part-label {
  display: block;
  font-size: var(--vu-size-small);
  font-weight: var(--vu-weight-medium);
  letter-spacing: var(--vu-track-caps);
  text-transform: uppercase;
  color: var(--vu-muted);
  margin: calc(var(--step) * 12) 0 calc(var(--step) * 1.5);
}

.part-title {
  font-size: var(--vu-size-title);
  font-weight: var(--vu-weight-light);
  letter-spacing: var(--vu-track-caps);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 calc(var(--step) * 4);
  padding-top: calc(var(--step) * 2);
}

.part-title.flo-word { color: var(--vu-accent); font-weight: var(--vu-weight-medium); letter-spacing: var(--vu-track-flo); }

/* ---- Prose ---- */
.lede,
.prose p.lede {
  font-size: calc(var(--vu-size-body) * 1.35);
  line-height: 1.5;
  max-width: 38em;
  margin: 0 0 calc(var(--step) * 3);
}

.prose p {
  font-size: var(--vu-size-body);
  line-height: 1.65;
  letter-spacing: var(--vu-track-body);
  max-width: 36em;
  margin: 0 0 calc(var(--step) * 2);
}

.prose strong { font-weight: var(--vu-weight-medium); }

a.text-link { color: var(--vu-accent); text-decoration: none; font-weight: var(--vu-weight-medium); }
a.text-link:hover { text-decoration: underline; }

.links-row { display: flex; gap: calc(var(--step) * 4); margin-top: calc(var(--step) * 4); flex-wrap: wrap; }

/* ---- A block: one claim, the detail, the frame. One shape everywhere. ---- */
.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: calc(var(--step) * 6);
  align-items: start;
  padding: calc(var(--step) * 6) 0;
}

.block + .block { border-top: var(--vu-border) solid var(--vu-line); }

.claim,
.prose p.claim {
  font-size: var(--vu-size-head);
  font-weight: var(--vu-weight-medium);
  line-height: 1.35;
  margin: 0 0 calc(var(--step) * 2);
}

/* ---- Frame placeholders. Concepción picks what goes in each. ---- */
.frame {
  background: var(--vu-surface);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--step) * 3);
  color: var(--vu-muted);
  font-size: var(--vu-size-small);
  letter-spacing: var(--vu-track-body);
  line-height: 1.5;
}

.frame.wide { aspect-ratio: 16 / 9; }
.frame.tall { aspect-ratio: 4 / 5; }
.frame.shot { aspect-ratio: 16 / 10; border: var(--vu-border) solid var(--vu-line-strong); background: var(--vu-page); }

.frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 4);
}

.ab { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 1.5); }

/* ---- Marks for Andrea. Muted, outlined, never a color of their own. ---- */
.mark {
  display: inline-block;
  font-size: var(--vu-size-small);
  font-weight: var(--vu-weight-medium);
  color: var(--vu-muted);
  border: var(--vu-border) solid var(--vu-line-strong);
  padding: 0 calc(var(--step) * 0.75);
  margin-left: calc(var(--step) * 0.5);
  letter-spacing: var(--vu-track-body);
  white-space: nowrap;
  vertical-align: 1px;
}

/* ---- Selected work grid on the home page ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 2);
}

.work-grid figure { margin: 0; }

.work-grid figcaption,
.frames figcaption {
  font-size: var(--vu-size-small);
  color: var(--vu-muted);
  letter-spacing: var(--vu-track-body);
  margin-top: calc(var(--step) * 1);
}

.work-grid a { color: inherit; text-decoration: none; }
.work-grid a:hover .frame { outline: var(--vu-border) solid var(--vu-accent); }

/* ---- Case studies ---- */
.case { padding: calc(var(--step) * 8) 0; }
.case + .case { border-top: var(--vu-border) solid var(--vu-line); }

.case-name {
  font-size: var(--vu-size-small);
  font-weight: var(--vu-weight-medium);
  letter-spacing: var(--vu-track-caps);
  text-transform: uppercase;
  color: var(--vu-muted);
  margin: 0 0 calc(var(--step) * 1.5);
}

.case .claim,
.way-in .prose p.claim { font-size: var(--vu-size-title); font-weight: var(--vu-weight-light); }

.details {
  list-style: none;
  padding: 0;
  margin: calc(var(--step) * 3) 0 0;
  max-width: 40em;
}

.details li {
  font-size: var(--vu-size-body);
  line-height: 1.6;
  padding: calc(var(--step) * 1.25) 0;
  border-top: var(--vu-border) solid var(--vu-line);
}

/* ---- Four-up lists in the wrap ---- */
.four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--step) * 4) calc(var(--step) * 6);
  margin-top: calc(var(--step) * 3);
}

.four h3 {
  font-size: var(--vu-size-body);
  font-weight: var(--vu-weight-medium);
  margin: 0 0 calc(var(--step) * 0.75);
}

.four p { font-size: var(--vu-size-body); line-height: 1.6; margin: 0; color: var(--vu-ink); }

.way-in {
  margin-top: calc(var(--step) * 10);
  padding: calc(var(--step) * 6) 0;
  border-top: var(--vu-border) solid var(--vu-line-strong);
}

.way-in .claim { font-size: var(--vu-size-title); font-weight: var(--vu-weight-light); }

.way-in .email {
  display: inline-block;
  margin-top: calc(var(--step) * 2);
  font-size: var(--vu-size-head);
  color: var(--vu-accent);
  text-decoration: none;
  font-weight: var(--vu-weight-medium);
}

.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: calc(var(--step) * 6);
  align-items: start;
}

/* ---- Narrow screens ---- */
@media (max-width: 860px) {
  .block, .bio { grid-template-columns: 1fr; gap: calc(var(--step) * 3); }
  .frames, .work-grid { grid-template-columns: 1fr; }
  .four { grid-template-columns: 1fr; }
  .page { padding-top: calc(var(--step) * 6); }
}

/* ---- 2026-10-13: real pictures in the page slots (shared by the four pages) ---- */
.frames img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.m-img { width: 100%; height: auto; display: block; }
.m-img.wide { aspect-ratio: 16 / 9; object-fit: cover; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 1.5); align-items: start; }
.pair img, .pair .frame { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.trio { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: calc(var(--step) * 1.5); align-items: end; }
.trio img { width: 100%; height: auto; display: block; }
.draft-banner a { color: inherit; }
/* The bio portrait, Andrea's self-portrait (2026-10-18). */
.bio-portrait { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .bio-portrait { max-width: 420px; } }