@layer components {

.casehead { padding-block: var(--s10) var(--s7); }
.casehead h1 { font-size: var(--t-page); letter-spacing: -0.03em; }
.case-tagline { 
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.012em; margin-top: var(--s3); max-width: 24ch; color: var(--ink); }
.case-meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.case-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s11);
  align-items: start; padding-bottom: var(--s10); }
.case-toc { position: sticky; top: calc(var(--nav-h) + var(--s6)); }
.case-toc .label { font-size: var(--t-caption); color: var(--graphite); margin-bottom: var(--s4); }
@media (max-width: 980px) {
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .case-toc { position: static; border-bottom: 1px solid var(--rule-soft); padding-bottom: var(--s5); }
  .case-toc .toc { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
}

.rung { padding-block: var(--s10); border-top: 1px solid var(--rule-soft); position: relative; }
.rung:first-child { border-top: 0; padding-top: 0; }
.rung-n { position: absolute; top: var(--s10); left: -56px; font-size: var(--t-machine); color: var(--graphite); }
.rung:first-child .rung-n { top: 0; }
@media (max-width: 1180px) { .rung-n { display: none; } }
.rung > h2 { font-size: var(--t-section); letter-spacing: -0.02em; }
.rung-intro { margin-top: var(--s4); color: var(--ink-2); max-width: 50ch;
  font-size: var(--t-prose); line-height: var(--lh-prose); }
.rung-lead {  font-size: 1.375rem;
  line-height: 1.35; color: var(--ink); margin-top: var(--s4); max-width: 44ch; }
.rung-boundary { margin-top: var(--s5); padding-left: var(--s5);
  border-left: 2px solid var(--rule); color: var(--ink-2); max-width: 62ch; font-size: var(--t-small); }
.label-inline { display: block; font-size: var(--t-caption); color: var(--graphite); margin-bottom: var(--s1); }
.related-h { font-size: var(--t-heading); }

/* rung 1 */
.plain { margin-top: var(--s6); display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.plain > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s6);
  padding-block: var(--s5); border-bottom: 1px solid var(--rule-soft); }
.plain dt { font-size: var(--t-caption); color: var(--graphite); }
.plain dd { margin: 0; color: var(--ink); max-width: 62ch; }
@media (max-width: 640px) { .plain > div { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

/* rung 3 */
.benefits { display: grid; gap: var(--s5); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.benefits li { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.benefits strong { display: block; font-size: var(--t-small); font-weight: 500; }
.benefits span { display: block; margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-small); }

/* rung 4 — the mechanism study */
.mech { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s7); margin-top: var(--s7);
  align-items: start; }
@media (max-width: 900px) { .mech { grid-template-columns: minmax(0, 1fr); } }

.mech-frame { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--film-ground-deep); }
.mech-frame .pv-stage { height: 380px; min-height: 0; border-radius: 0; }
@media (max-width: 640px) { .mech-frame .pv-stage { height: 300px; } }

.mech-bar { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.mech-play { display: inline-flex; align-items: center; min-height: 32px; padding-inline: var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-md); font-size: var(--t-caption);
  color: var(--ink); touch-action: manipulation;
  transition: transform var(--d-press) var(--ease-out), border-color var(--d-hover) ease; }
.mech-play:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mech-play:hover { border-color: var(--rule-strong); } }
.mech-seek-label { flex: 1; display: block; }
.mech-seek { width: 100%; accent-color: var(--ink); }
.mech-time { font-size: var(--t-machine); color: var(--graphite); min-width: 5ch; text-align: right; }

.mech-spec { display: grid; gap: var(--s5); }
.curve { margin: 0; display: grid; gap: var(--s3); justify-items: start; }
.curve svg { width: 112px; height: 112px; color: var(--ink-2); }
.curve figcaption { font-size: var(--t-machine); color: var(--ink-2); line-height: 1.6; }
.spec-list { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.spec-list > div { display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft); }
.spec-list dt { font-size: var(--t-caption); color: var(--ink-2); }
.spec-list dd { margin: 0; font-size: var(--t-caption); color: var(--ink); }
.mech-prose { margin-top: var(--s7); }
.mech-prose code { font-family: var(--mono); font-size: 0.92em; color: var(--ink);
  background: var(--paper-2); padding: 1px 4px; border-radius: var(--r-sm); }
[data-reduced="true"] .mech-bar { display: none; }

/* rung 7 */
.study { display: grid; gap: var(--s7); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.study-item h3 { font-size: var(--t-caption); color: var(--graphite); font-weight: 400; }
.study-item p { margin-top: var(--s3); color: var(--ink-2); max-width: 54ch;
  font-size: var(--t-prose); line-height: var(--lh-prose); }
.study-h3 { margin-top: var(--s9); font-size: var(--t-heading); font-weight: 600;
  letter-spacing: -0.018em; }
.arch-list { margin-top: var(--s5); border-top: 1px solid var(--rule-soft); }
.arch-list > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s6);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule-soft); }
.arch-list dt { font-size: var(--t-small); }
.arch-list dd { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
@media (max-width: 640px) { .arch-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }
.study-h3 + .prose { margin-top: var(--s4); }

.failures { margin-top: var(--s5); border-top: 1px solid var(--rule-soft); }
.failures details { border-bottom: 1px solid var(--rule-soft); }
.failures summary { cursor: pointer; padding-block: var(--s4); font-size: var(--t-small);
  display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.failures summary::marker { color: var(--graphite); }
.failures p { padding-bottom: var(--s5); color: var(--ink-2); max-width: 62ch; font-size: var(--t-small); }

.evidence { margin-top: var(--s8); padding: var(--s5); border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg); color: var(--ink-2); font-size: var(--t-small); max-width: 68ch; }
}