* { box-sizing: border-box; }
:root { font-family: Avenir, "Avenir Next", "Helvetica Neue", sans-serif; color: #0d0c22; background: #fff; color-scheme: light; }
body { margin: 0; font-size: 16px; line-height: 24px; }
footer { width: min(100% - 64px, 800px); margin: auto; padding: 36px 0 48px; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
main { width: min(100% - 64px, 800px); padding: 24px 0 80px; margin: 96px auto 0; }
main > h1 { max-width: 800px; margin: 0 auto 40px; font-size: 32px; font-weight: 700; line-height: 40px; }
.shot-content { display: flex; flex-direction: column; gap: 0; max-width: 800px; margin: auto; }
.shot-content > * + * { margin-top: 40px; }
.shot-content > .prose:has(> h2):not(:first-child) { margin-top: 64px; }
.shot-content > .prose:has(> h2:only-child) + * { margin-top: 24px; }
.prose { overflow-wrap: break-word; }
p { margin: 0; }
.prose > p + p, .prose > p + ul, .prose > ul + p, .prose > h2 + p, .prose > h2 + ul { margin-top: 24px; }
h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
ul { margin: 0; padding-left: 24px; }
figure { margin: 0; aspect-ratio: var(--media-ratio, auto); overflow: hidden; border-radius: 8px; }
img, video { display: block; width: 100%; height: 100%; object-fit: var(--media-fit, contain); }
.carousel { min-width: 0; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 16px; }
.carousel-dots { display: flex; gap: 8px; }
button { cursor: pointer; color: inherit; border: 0; font: inherit; }
.carousel-controls > button { background: #f5f5f5; border-radius: 50%; width: 32px; height: 32px; }
.carousel-dots button { background: #d6d6d6; border-radius: 50%; width: 8px; height: 8px; padding: 0; }
.carousel-dots button[aria-pressed="true"] { background: #0d0c22; }
@media (max-width: 600px) { footer, main { width: calc(100% - 48px); } main > h1 { margin-bottom: 32px; }
.shot-content > * + * { margin-top: 32px; }
.shot-content > .prose:has(> h2):not(:first-child) { margin-top: 48px; }
.shot-content > .prose:has(> h2:only-child) + * { margin-top: 20px; } }