/* Factory composition. Type, captions, actions and page endings are shared. */
.progress-bar { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--signal); z-index: 100; }
.cover .inner { max-width: var(--content-wide); margin: auto; padding: 120px var(--gutter) 80px; position: relative; z-index: 2; }
.cover h1 { --cover-title-size: clamp(44px, 5.5vw, 80px); --cover-title-leading: 1.03; --cover-title-tracking: -.025em; max-width: 24ch; }
.cover .lede { max-width: 70ch; margin-top: var(--s-32); }
.cover .hero-bg { background-image: url("/work/assets/factory-production-dashboard/hero-bus-factory.png"); opacity: .12; filter: saturate(.8); }
.cover .metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-48); max-width: 760px; margin-top: var(--s-64); }
.cover .metric .num { font: 900 clamp(36px,3.7vw,52px)/1.05 var(--f-display); color: var(--on-dark); letter-spacing: -.025em; }
.cover .metric .metric-unit { font: 500 19px/1.3 var(--f-body); letter-spacing: 0; margin-left: 8px; white-space: nowrap; }
.cover .metric .lbl { font: 500 14px/1.5 var(--f-body); color: var(--on-dark-soft); max-width: 29ch; margin-top: var(--s-12); }
.metrics-note { font: 400 13px/1.5 var(--f-body); color: var(--on-dark-soft); margin-top: var(--s-24); }
.context { background: var(--bg); }
.discovery { background: var(--sage); }
.board-band { background: var(--bg); }
.design { background: var(--frost); }
.handoff { background: var(--bg); }
.section-frame > .eyebrow { margin-bottom: var(--s-16); }
.section-frame > h2 { margin-bottom: var(--s-32); }
.prose { font: 400 var(--body-size)/1.65 var(--f-body); color: var(--text-primary); }
.prose p + p { margin-top: var(--s-20); }
.prose-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-64); align-items: start; }
.prose-columns p + p { margin-top: 0; }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: start; }
figure { margin: 0; }
.image-link { display: block; cursor: zoom-in; border-radius: var(--r-md); }
.image-link img { display: block; width: 100%; height: auto; border-radius: inherit; }
.image-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }
.context .image-link, .board-evidence .image-link { box-shadow: var(--shadow-media); }
.card-evidence { margin-top: var(--s-64); }
.card-gallery { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: start; gap: var(--s-24); }
.card-gallery .image-link { box-shadow: var(--shadow-media); }
.board-evidence { margin-top: 0; }
.design-artifacts { display: grid; gap: var(--s-64); margin-top: var(--s-64); }
.design-artifacts .image-link { box-shadow: var(--shadow-media); }
.design .figure-caption__label { --caption-accent: var(--indigo); }
.image-hint { margin-top: var(--s-32); font: 400 13px/1.5 var(--f-body); color: var(--text-secondary); }
@media (max-width: 1024px) {
  .cover .inner { padding-top: 112px; }
  .context-grid { gap: var(--s-32); }
  .prose-columns { gap: var(--s-32); }
  .card-gallery { gap: var(--s-16); }
}
@media (max-width: 700px) {
  .context-grid { grid-template-columns: 1fr; }
  .prose-columns { grid-template-columns: 1fr; gap: var(--s-20); }
  .card-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-24); }
  .card-gallery .image-link:last-child { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}
@media (max-width: 640px) {
  .desktop-break { display: none; }
  .cover .inner { padding-bottom: var(--s-64); }
  .cover h1 { --cover-title-size: clamp(36px,9.5vw,48px); max-width: none; text-wrap: balance; }
  .cover .metrics { grid-template-columns: 1fr; gap: var(--s-32); margin-top: var(--s-48); }
  .cover .metric .num { font-size: 40px; }
  .h-section { text-wrap: balance; }
  .prose { font-size: var(--body-size); }
  .card-evidence, .design-artifacts { margin-top: var(--s-48); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
