/* case-study pages */
.doc-head { padding: 56px 0 32px; max-width: 720px; }
.doc-head .eyebrow a { color: var(--accent); }
.doc-head h1 { margin-bottom: 18px; }
.hero-media { position: relative; border-radius: 8px; overflow: hidden; background: #000; }
.hero-media video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.feed { position: absolute; left: 14px; bottom: 12px; font: 11px var(--mono); letter-spacing: .08em; color: #fff;
  background: rgba(0,0,0,.55); padding: 5px 9px; border-radius: 3px; display: flex; gap: 8px; align-items: center; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 20px 0 8px; font: 12px var(--mono); }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

.doc-section { padding: 64px 0; }
.num { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.doc-section h2 { font: 400 clamp(32px, 5vw, 44px)/1.08 var(--serif); margin-bottom: 28px; letter-spacing: -.01em; }
.prose p { margin-bottom: 16px; font-size: 16.5px; line-height: 1.7; }
.prose.narrow { max-width: 680px; margin: 0 0 28px; }
.prose b { font-weight: 600; }
.aside { font: 500 20px var(--hand); color: var(--muted); }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.sticky { position: sticky; top: 80px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0 32px; }
.media { margin: 0 0 8px; }
.media video, .media img { width: 100%; border-radius: 6px; background: #000; }
.media.light img { background: var(--paper); border: 1px solid var(--line); }
.media.wide { margin: 8px 0 32px; }
.media figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
.media figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.cap, .media figcaption.cap { font: 11px var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--ink); margin: 16px 0 8px; }
.specs div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.specs dd { font-size: 15px; }
.specs.math dd { font: 400 26px var(--serif); font-style: italic; }

.diagram { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin: 0; }
.diagram figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.diagram svg { width: 100%; height: auto; }
.diagram svg text { font: 9px var(--mono); fill: var(--muted); }
.diagram svg text.acc { font: italic 18px var(--serif); fill: var(--accent); }
.diagram .axis, .diagram .ground { stroke: var(--faint); stroke-width: 1; }
.diagram .ray { stroke: var(--ink); stroke-width: 1.6; }
.diagram .dash { stroke: var(--faint); stroke-dasharray: 3 4; }
.diagram .arc { stroke: var(--accent); fill: none; stroke-width: 1.4; }
.diagram .src { fill: var(--ink); } .diagram .tgt { fill: var(--accent); }
.stack { display: grid; gap: 6px; margin-top: 12px; }
.tier { border: 1px solid var(--line); border-radius: 4px; padding: 12px; text-align: center; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.tier.payload { border-color: var(--accent); }
.tier-k { display: block; color: var(--accent); font-size: 10px; margin-bottom: 8px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.row3 span { border: 1px dashed var(--line); padding: 8px 2px; border-radius: 3px; font-size: 10px; }
.tier.batt { display: flex; justify-content: space-between; }
.credits { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.credits a { color: var(--accent); }
.credits .btn { color: var(--ink); }

@media (max-width: 760px) {
  .split, .pair { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .doc-section { padding: 44px 0; }
}
.wrap.doc { max-width: 980px; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); }