/* Case study page, styled to match the portfolio */
.case { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; display: flex; flex-direction: column; gap: 56px; }
.case__back { font-weight: 600; color: var(--text-muted); }
.case__back:hover { color: var(--text-primary); }
.case__hero { display: flex; flex-direction: column; gap: 16px; }
.case__hero h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; font-weight: 700; }
.case__lede { font-size: 20px; line-height: 30px; color: var(--text-secondary); max-width: 720px; }
.case__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 8px 0 0; padding: 20px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.case__meta dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.case__meta dd { margin: 0; font-weight: 600; }
.case__meta a { color: var(--accent-blue); }
.case__image { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); }
.case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case__stats > div { padding: 24px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.case__num { font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--text-primary); }
.case__stats p:last-child { color: var(--text-secondary); margin-top: 6px; }
.case__section { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.case__section h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 700; }
.case__section p { font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.case__section--list ul { display: flex; flex-direction: column; gap: 10px; }
.case__section--list li { font-size: 18px; line-height: 28px; padding-left: 20px; position: relative; color: var(--text-primary); }
.case__section--list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-orange); }
.case__footer { display: flex; }
@media (max-width: 720px) {
  .case__hero h1 { font-size: 34px; line-height: 40px; }
  .case__meta, .case__stats { grid-template-columns: 1fr; }
  .case__section h2 { font-size: 26px; line-height: 32px; }
}
.case__list { display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin: 0; list-style: none; }
.case__list li { position: relative; padding-left: 20px; font-size: 17px; line-height: 26px; color: var(--text-secondary); }
.case__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-orange); }
.case__list strong { color: var(--text-primary); }

.case__section--wide { max-width: none; }
.artifact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.artifact { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.artifact img { width: 100%; height: auto; max-height: 520px; object-fit: contain; object-position: top; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.artifact figcaption { font-size: 14px; line-height: 20px; color: var(--text-muted); }
@media (max-width: 720px) { .artifact-grid { grid-template-columns: 1fr; } }
.case__sub { font-size: 16px; line-height: 26px; color: var(--text-muted); }
.artifact-grid--compare { align-items: start; }
.artifact--tall img { max-height: none; object-fit: cover; object-position: top; }
.case__link { color: var(--accent-blue); font-weight: 600; }
.case__link:hover { text-decoration: underline; text-underline-offset: 3px; }