/* MedBridge case-study — narrative scroll layout.
   The artifacts (cs-art-*.jsx) are authored as fixed 1760px design frames.
   Here each becomes a full-width <section> band: a crisp readable header
   (Fraunces/Inter, portfolio identity) above the artifact's native visual
   scaled to fit the column. No design canvas, pan/zoom, or frame chrome.
   Token vars (--cs-*) are declared in case-medbridge/index.html. */

.case-page {
  background: var(--cs-bg, #0D0D0D);
  color: var(--cs-ink, #EDE7DD);
  font-family: var(--cs-f-sans, 'Inter', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed section band; alternating tones for vertical rhythm. */
.cs-band {
  padding: 84px 32px;
  border-bottom: 1px solid var(--cs-line, rgba(237,231,221,0.12));
}
.cs-band:nth-child(even) { background: #121212; }

.csm-artifact {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Crisp narrative header (unscaled, full-size type) ── */
.csm-head {
  padding: 0 0 28px;
  border-bottom: 1px solid var(--cs-line, rgba(237,231,221,0.12));
  margin-bottom: 36px;
}
.csm-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--cs-f-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cs-accent, #D4A85A);
  margin-bottom: 12px;
}
.csm-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px;
  border: 1px solid var(--cs-line, rgba(237,231,221,0.12));
  font-family: var(--cs-f-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; font-weight: 600; color: var(--cs-accent-2, #E7C384);
}
.csm-title {
  margin: 0;
  font-family: var(--cs-f-serif, 'Fraunces', Georgia, serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--cs-ink, #EDE7DD);
}
.csm-desc {
  margin: 14px 0 0; max-width: 70ch;
  font-size: 16px; line-height: 1.6; color: var(--cs-ink-3, #B7B0A6);
}

/* ── Scaled artifact visual ── */
.csm-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--cs-line, rgba(237,231,221,0.12));
  border-radius: 16px;
  background: var(--cs-surface, #141414);
}
.csm-stage__inner {
  box-sizing: border-box;
}

/* Focus ring — gold, matches portfolio. */
.case-page a:focus-visible,
.case-page button:focus-visible {
  outline: 2px solid var(--cs-accent, #D4A85A);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Page-chrome buttons ──
   MedBridge ships its product button styles in components.css (.btn /
   .btn-primary = brand blue), which override the portfolio's shared button
   on this page. The artifacts don't use .btn, so re-assert the portfolio
   button — same geometry, radius, and gold accent used on every other page —
   scoped to the page chrome (intro hero + footer). One button system sitewide. */
.hero .btn,
.cs-foot .btn,
.next-case .btn {
  height: auto;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  line-height: normal;
  transition: transform .2s, background .2s;
}
.hero .btn-primary,
.cs-foot .btn-primary {
  background: var(--champ);
  color: #fff;
}
.hero .btn-primary:hover,
.cs-foot .btn-primary:hover {
  background: var(--champ-deep);
  transform: translateY(-1px);
}
/* components.css also recolours .eyebrow (slate); restore the portfolio gold
   for the intro/next-case eyebrows. */
.hero .eyebrow,
.next-case .eyebrow {
  color: var(--champ);
}

@media (max-width: 820px) {
  .cs-band { padding: 56px 18px; }
}