/* Ink & Pixels — shared sub-page layout (Work/Play/About/Contact) */

.subpage .page-head,
.subpage .metrics,
.subpage .page-main,
.subpage .page-section {
  max-width: 1180px; margin: 0 auto;
  padding-left: clamp(var(--space-4), 5vw, var(--space-24));
  padding-right: clamp(var(--space-4), 5vw, var(--space-24));
}

/* page header */
.page-head { padding-top: var(--space-24); padding-bottom: var(--space-12); }
.page-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: var(--text-4xl); line-height: 1.02; max-width: 18ch; margin: var(--space-3) 0 var(--space-6);
}
.page-lede { font-size: var(--text-lg); max-width: 60ch; color: var(--text); }

/* ---- unique: impact metrics band ---- */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4);
  padding-bottom: var(--space-16);
}
.metric {
  background: var(--surface); border: var(--border-w) solid var(--stroke); box-shadow: var(--shadow);
  padding: var(--space-6);
}
.metric b {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl);
  letter-spacing: -.02em; color: var(--accent-text); display: block; font-variant-numeric: tabular-nums;
}
.metric span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); display: block; margin-top: var(--space-1); }

/* ---- unique: expandable case-study timeline ---- */
.page-main { padding-bottom: var(--space-24); }
.timeline { margin-top: var(--space-6); border-left: var(--border-w) solid var(--stroke); padding-left: var(--space-8); }
.role {
  position: relative; background: var(--surface); border: var(--border-w) solid var(--stroke);
  box-shadow: var(--shadow); margin-bottom: var(--space-8);
}
.role-dot {
  position: absolute; left: calc(-1 * var(--space-8) - var(--border-w) - 9px); top: 26px;
  width: 14px; height: 14px; background: var(--pixels); border: 2px solid var(--stroke);
}
.role summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6); transition: background var(--t-micro) var(--ease-out);
}
.role summary::-webkit-details-marker { display: none; }
.role summary:hover { background: var(--surface-hover); }
.role[open] summary { border-bottom: 2px solid var(--stroke); }
.role-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); letter-spacing: .06em; }
.role-co { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.role-tag { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--text-secondary); }
.role-title { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.chev { margin-left: auto; font-family: var(--font-mono); color: var(--accent-text); transition: transform var(--t-standard) var(--ease-out); }
.role[open] .chev { transform: rotate(90deg); }
.role-body { padding: var(--space-6); }
.role-body > p { max-width: 70ch; }
.role-body ul { margin: var(--space-4) 0 0 var(--space-6); display: grid; gap: var(--space-2); }
.role-body li { max-width: 68ch; }
.role-body b { font-weight: 700; }

.case { border-left: 3px solid var(--pixels); padding-left: var(--space-4); margin: var(--space-8) 0; }
.case:first-of-type { margin-top: var(--space-6); }
.case h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2);
}
.case-ret { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
.role-body .tag-row { margin-top: var(--space-6); }

.page-next { margin-top: var(--space-16); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.page-next a { text-decoration: none; }

@media (max-width: 720px) {
  .page-title { font-size: var(--text-2xl); }
  .timeline { padding-left: var(--space-6); }
  .role-dot { left: calc(-1 * var(--space-6) - var(--border-w) - 9px); }
  .role summary { flex-wrap: wrap; }
}