/* The detail page shares the portfolio's typography, palette and controls.
   A compact project introduction leads into the engineering narrative; all
   evidence remains native HTML, with the existing optional diagram/player. */
.case-page .site-header { gap: 24px; flex-wrap: wrap; }
.case-page .site-header nav { flex-wrap: wrap; justify-content: flex-start; }
.case-hero { padding-block: 38px 56px; }
.case-back { display: inline-block; color: var(--cyan); font-size: .875rem; padding-block: 10px; margin-bottom: 26px; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.case-hero .eyebrow { font-size: .8125rem; line-height: 1.8; margin-bottom: 20px; }
.case-hero h1 { font-size: clamp(2.5rem, 5.3vw, 4.4rem); line-height: 1.08; letter-spacing: -.055em; margin: 0 0 24px; }
.case-hero h1 span { color: var(--purple); }
.case-lead { max-width: 660px; font-size: 1.125rem; line-height: 1.8; margin-bottom: 26px; }
.case-hero .actions { flex-wrap: wrap; }
.case-context { margin: 0; padding: 6px 0 6px 28px; border-left: 2px solid #835b9b; }
.case-context > div + div { margin-top: 22px; }
.case-context dt { color: var(--cyan); font-size: .875rem; font-weight: 600; margin-bottom: 7px; }
.case-context dd { color: var(--muted); font-size: 1rem; line-height: 1.75; margin: 0; }
.case-context dd strong { color: var(--ink); font-weight: 550; }
.case-section { padding-block: 68px; border-bottom: 1px solid var(--line); }
.case-section .section-heading { margin-bottom: 30px; }
.case-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; }
.case-problem h3 { font-size: 1.3rem; line-height: 1.5; margin-bottom: 14px; }
.case-problem p, .case-problem li { font-size: 1rem; line-height: 1.8; }
.case-problem ul { margin: 0; padding-left: 22px; color: var(--muted); }
.case-problem li + li { margin-top: 13px; }
.case-section code, .case-context code, .ai-case-teaser code { color: #e4c9f8; font-size: .875rem; overflow-wrap: anywhere; }
.case-page .architecture-section, .case-page .demo-section { border-top: 0; border-bottom: 1px solid var(--line); padding-block: 68px; }

/* Two observed failures are separate articles, not a simulated interaction or
   an implied exhaustive evaluation. Long diagnostics wrap at enlarged text. */
.case-failures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.case-failure { min-width: 0; padding: 28px; background: #111622; border: 1px solid #454057; border-top: 2px solid #ba81d7; }
.case-failure > .eyebrow { font-size: .8125rem; margin-bottom: 15px; }
.case-failure h3 { font-size: 1.4rem; line-height: 1.45; margin-bottom: 22px; }
.case-failure dl { margin: 0; }
.case-failure dt { color: #d9bde9; font-size: .875rem; font-weight: 600; line-height: 1.6; margin-bottom: 8px; }
.case-failure dd { color: var(--muted); margin: 0 0 22px; font-size: 1rem; line-height: 1.8; }
.case-failure dd:last-child { margin-bottom: 0; }
.case-lesson { margin: 28px 0 0; padding-left: 22px; border-left: 2px solid var(--cyan); font-size: 1rem; line-height: 1.8; max-width: 920px; }

/* Each result carries its own method, scope and source. The four-resource
   capture is not pooled with the twelve-case model evaluation or validator
   probes. Use fluid columns rather than fixed-height metric containers. */
.case-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.case-result { min-width: 0; padding-top: 22px; border-top: 2px solid #746086; display: flex; flex-direction: column; }
.case-result-number { font-size: clamp(2.5rem, 4vw, 3.2rem); line-height: 1.25; letter-spacing: -.04em; color: var(--purple); margin: 0 0 18px; font-weight: 600; }
.case-result:nth-child(3) .case-result-number { color: var(--cyan); }
.case-result h3 { font-size: 1.15rem; line-height: 1.5; margin-bottom: 13px; }
.case-result > p:not(.case-result-number) { font-size: 1rem; line-height: 1.8; margin-bottom: 20px; }
.case-result .text-link { font-size: .875rem; line-height: 1.8; margin-top: auto; text-decoration: underline; text-underline-offset: 4px; }
.case-results-note { font-size: 1rem; line-height: 1.8; max-width: 900px; margin: 30px 0 0; }
.case-limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; }
.case-limits h3 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 16px; }
.case-limits ul { margin: 0; padding-left: 22px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.case-limits li + li { margin-top: 13px; }
.case-sources { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.case-sources > p { font-size: 1rem; margin-bottom: 14px; }
.case-sources .project-links { gap: 12px 26px; font-size: .875rem; line-height: 1.8; }
.case-page .contact-section h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.case-page .contact-section .email-link { overflow-wrap: anywhere; }

/* Homepage entry points replace the expanded AI narrative and recording.
   Their original section IDs remain valid for existing portfolio links. */
.ai-case-entry { grid-column: 1 / -1; margin: 0 38px; padding-block: 22px; border-top: 1px solid var(--line); }
.ai-case-entry a { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--cyan); font-size: 1rem; line-height: 1.7; min-height: 44px; }
.ai-case-entry small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.7; margin-top: 4px; }
.ai-case-teaser { padding-block: 54px; border-top: 1px solid var(--line); }
.ai-case-teaser > p { font-size: 1rem; line-height: 1.8; max-width: 800px; margin-bottom: 24px; }
.ai-case-teaser .project-links { gap: 14px 28px; line-height: 1.8; }
.ai-case-teaser .section-heading { margin-bottom: 22px; }

@media (max-width: 62.5rem) {
  .case-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .case-context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .case-context > div + div { margin-top: 0; }
  .case-results { gap: 22px; }
}
@media (max-width: 48rem) {
  .case-hero { padding-block: 22px 40px; }
  .case-back { margin-bottom: 20px; }
  .case-hero h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .case-context, .case-problem, .case-failures, .case-results, .case-limits { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case-section, .case-page .architecture-section, .case-page .demo-section { padding-block: 46px; }
  .case-failure { padding: 23px; }
  .case-lead { font-size: 1rem; }
  .ai-case-entry { margin-inline: 25px; }
  .ai-case-teaser { padding-block: 44px; }
}
@media print {
  .case-page .site-header, .case-back, .case-page .player-controls { display: none; }
  .case-failure, .case-result { break-inside: avoid; }
}