:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0c0c; color: #dce5dd; font: 16px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
main { width: min(680px, calc(100% - 3rem)); margin: 0 auto; padding: 12vh 0 4rem; }
h1, h2 { font-size: 1rem; font-weight: 500; margin: 0 0 1rem; }
h1 { color: #8af0c5; }
.bio { max-width: 38rem; margin: 0 0 4rem; color: #aeb8b0; }
section { border-top: 1px solid #303633; padding-top: 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
li { border-bottom: 1px solid #303633; }
a { display: inline-block; color: inherit; text-decoration: none; }
li a { width: 100%; padding: .85rem 0; }
a:hover, a:focus-visible { color: #8af0c5; outline: none; }
footer { margin-top: 4rem; color: #aeb8b0; }
footer a { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 540px) { main { padding-top: 4rem; } .bio { margin-bottom: 3rem; } }

.case { max-width: 680px; }
.back { margin-bottom: 3rem; color: #8af0c5; }
.case h1 { margin-bottom: .75rem; color: #dce5dd; font-size: clamp(1.65rem, 5vw, 2.4rem); line-height: 1.15; }
.case .meta { margin: 0 0 4rem; color: #aeb8b0; }
.case section { display: grid; grid-template-columns: 9rem 1fr; gap: 2rem; padding: 1.35rem 0; }
.case h2 { color: #8af0c5; }
.case p, .case ul { margin: 0; color: #c6cec8; }
.case ul { padding-left: 0; list-style-position: inside; }.case li { border: 0; margin-bottom: .65rem; }
.case .result { color: #8af0c5; }
.case figure { margin: 1.25rem 0 0; }
.case figure.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.case figure.grid figcaption { grid-column: 1 / -1; }
.case img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #131716; border: 1px solid #303633; }
.case video { display: block; width: 100%; max-height: 420px; background: #131716; border: 1px solid #303633; }
.case figcaption { margin-top: .45rem; color: #aeb8b0; font-size: .8rem; }
@media (max-width: 540px) { .case section { grid-template-columns: 1fr; gap: .25rem; } }
@media (max-width: 540px) { .case figure.grid { grid-template-columns: 1fr; } }