:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b0f14; color: #f5f4f0; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
a { color: #f59e0b; }
a:focus-visible { outline: 2px solid #f59e0b; outline-offset: 4px; }
.skip { position: absolute; top: -100px; left: 16px; z-index: 2; padding: 12px; background: #f59e0b; color: #111; }
.skip:focus { top: 10px; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px max(24px, calc((100vw - 1024px) / 2)); border-bottom: 1px solid #313743; }
.brand { color: #f5f4f0; font-size: 22px; font-weight: 900; letter-spacing: -.05em; text-decoration: none; }
.brand span { color: #f59e0b; }
.site-header nav { display: flex; gap: 5px; }
.site-header nav a { display: grid; place-items: center; min-width: 48px; min-height: 44px; border: 1px solid #313743; border-radius: 7px; color: #abb3c0; font-size: 13px; font-weight: 700; text-decoration: none; }
.site-header nav a[aria-current] { border-color: #f59e0b; background: #f59e0b; color: #141414; }
main { max-width: 1024px; margin: 0 auto; padding: 34px 24px 90px; }
article { max-width: 900px; margin: 0 auto; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 36px; font-size: 14px; font-weight: 650; text-decoration: none; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #f59e0b; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.meta time { color: #a9b0ba; font-weight: 500; letter-spacing: 0; text-transform: none; }
h1 { max-width: 16ch; margin: 22px 0; font-size: clamp(36px, 6.5vw, 72px); line-height: 1.04; letter-spacing: -.05em; overflow-wrap: anywhere; }
.lead { max-width: 60ch; margin: 0 0 38px; color: #c8cdd5; font-size: clamp(18px, 2.5vw, 24px); line-height: 1.5; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 48px; }
.gallery figure { min-width: 0; margin: 0; background: #171d25; }
.gallery figure:first-child { grid-column: 1 / -1; }
.gallery img { display: block; width: 100%; max-height: 580px; aspect-ratio: 4 / 3; object-fit: contain; }
.gallery figure:first-child img { aspect-ratio: 16 / 10; }
.gallery figcaption { padding: 9px 12px 12px; color: #a9b0ba; font-size: 12px; }
.prose { max-width: 72ch; color: #e5e7eb; font-size: 17px; line-height: 1.78; }
.prose p { margin: 0 0 24px; overflow-wrap: anywhere; }
.kits, .sources { margin-top: 52px; padding-top: 24px; border-top: 1px solid #313743; }
h2 { margin: 0 0 20px; font-size: 23px; letter-spacing: -.03em; }
.kit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; padding: 15px 0; border-bottom: 1px solid #262e39; }
.kit strong { font-size: 16px; }
.kit span { color: #a9b0ba; font-size: 14px; }
.sign-in { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 9px 14px; border: 1px solid #f59e0b; border-radius: 7px; font-size: 14px; font-weight: 700; text-decoration: none; }
.sign-in:hover { background: #f59e0b; color: #141414; }
.sources ul { margin: 0; padding-left: 20px; }
.sources li { padding: 7px 0; overflow-wrap: anywhere; }
.sources a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
footer { max-width: 1024px; margin: 0 auto; padding: 30px 24px 45px; border-top: 1px solid #313743; color: #a9b0ba; font-size: 12px; }
@media (max-width: 640px) {
  .site-header { min-height: 64px; padding-inline: 18px; }
  main { padding: 24px 18px 65px; }
  .back { margin-bottom: 25px; }
  h1 { max-width: none; margin: 17px 0; }
  .lead { margin-bottom: 28px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 35px; }
  .gallery figure:first-child { grid-column: auto; }
  .gallery img, .gallery figure:first-child img { aspect-ratio: 4 / 3; }
  .prose { font-size: 16px; }
}