/* ==========================================================================
   Page shell for every route other than the homepage: the masthead, the lede,
   the shared prose column and the closing band. Above the fold on inner pages,
   so it is listed in css-blocking there.
   ========================================================================== */

.masthead {
  padding-top: var(--space-3xl);
  padding-bottom: var(--section-gap-tight);
}

.masthead__inner {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.masthead__crumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-data);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.masthead__crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.masthead__crumb li + li::before {
  content: "/";
  margin-right: var(--space-xs);
  color: var(--accent);
}

.masthead__crumb a { text-decoration: none; }
.masthead__crumb a:hover { color: var(--text-accent); }
.masthead__crumb [aria-current="page"] { color: var(--text-primary); }

.masthead__title { max-width: 18ch; }

.masthead__lead {
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
}

.masthead__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-datum);
}

.masthead__fact {
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-data);
  font-size: var(--text-data);
}

.masthead__fact b {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: var(--lh-numeral);
  letter-spacing: var(--track-numeral);
  color: var(--text-accent);
}

.masthead__fact span { color: var(--text-muted); }

/* ---- prose column, used by every text-led inner page --------------------- */

.prose { padding-block: var(--section-gap-tight); }

.prose__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prose__aside {
  grid-column: 1 / -1;
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-muted);
}

.prose__body { grid-column: 1 / -1; color: var(--text-secondary); }

.prose__body h2 { margin-bottom: var(--space-md); color: var(--text-primary); }
.prose__body h3 { margin: var(--space-xl) 0 var(--space-sm); color: var(--text-primary); }
.prose__body p + p { margin-top: var(--stack-gap); }

.prose__body ul {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.prose__body ul li {
  padding-left: var(--space-md);
  border-left: var(--border-hairline);
}

/* ---- a run of numbered records: scope lists, inclusions, deliverables ---- */

.records { display: grid; }

.records__row {
  display: grid;
  grid-template-columns: 3rem 1.5rem minmax(0, 1fr);
  gap: var(--space-md);
  /* the wash and the datum have to touch the content, so the row carries the inset */
  padding: var(--space-lg) var(--space-md);
  border-top: var(--border-hairline);
}

.records__row:last-child { border-bottom: var(--border-hairline); }

.records__idx {
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: var(--weight-data-strong);
  color: var(--text-accent);
}

.records__title {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
}

.records__body { margin-top: var(--space-xs); color: var(--text-secondary); }

.records__figs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: var(--weight-data-strong);
  color: var(--text-accent);
}

/* The inner-page shell had exactly one hover rule. Rows and plates now answer the pointer
   the way the homepage ledger does: wash, and a datum that grows from the top. */
.records__row {
  position: relative;
  transition: background var(--dur-fast) var(--ease-exit);
}

.records__row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--border-width-rule);
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-fast) var(--ease-exit);
}

.records__row:hover { background: var(--accent-wash); }

.records__row:hover::before {
  transform: scaleY(1);
  transition: transform var(--dur-tick) var(--ease-slide);
}

/* ---- closing band, shared by every inner page --------------------------- */

.closer {
  padding-block: var(--section-gap);
  background: var(--surface-ink);
  color: var(--text-on-ink);
}

.closer__inner {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.closer__title { max-width: var(--measure-h2); }

.closer__lead {
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  color: var(--text-on-ink-secondary);
}

.closer__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (min-width: 900px) {
  .masthead__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prose__inner { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
  .prose__aside { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + var(--space-xl)); align-self: start; }
  .prose__body { grid-column: 5 / 12; }
  .records__row { grid-template-columns: 4rem 1.5rem minmax(0, 7fr) minmax(0, 4fr); }
  .closer__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* ---- a client line inside the prose column ------------------------------
   Project pages carry one quote each, from the owners of that building. It is
   the datum rule again, not a card: the prose column should not turn into a
   testimonial widget halfway down. */
.prose__quote {
  margin: var(--space-2xl) 0 0;
  padding-left: var(--space-lg);
  border-left: var(--border-datum);
}

.prose__quote p {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--text-primary);
  text-wrap: balance;
}

.prose__quote footer {
  margin-top: var(--space-md);
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}