.screens-main { max-width: var(--max); margin: auto; padding: 54px 4% 70px; }
.screens-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; font: .75rem var(--font-note); }
.screens-intro h1 { margin: 30px 0 24px; font-size: clamp(3.3rem, 7.5vw, 7rem); font-weight: 600; line-height: .95; }
.screens-intro h1 em { color: var(--blue); font-weight: 400; }
.screens-intro > p { max-width: 720px; font-size: 1.4rem; line-height: 1.45; }
.capture-context { display: flex; align-items: flex-start; gap: 24px; border-top: 1px solid var(--line); margin: 32px 0; padding-top: 20px; }
.capture-context p { max-width: 820px; font-size: 1rem; line-height: 1.5; }
.capture-stamp { background: var(--acid); padding: 8px 12px; flex-shrink: 0; font: .75rem var(--font-note); }
.screens-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--ink); }
.screens-toolbar[hidden], .screenshot-card[hidden] { display: none; }
.screens-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.screens-filters button { border: 1px solid var(--ink); background: transparent; padding: 9px 16px; border-radius: 0; }
.screens-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#screens-count { font: .75rem var(--font-note); }
.screens-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
.screenshot-card { min-width: 0; border-top: 1px solid var(--ink); padding-top: 12px; scroll-margin-top: 22px; }
.screenshot-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font: .75rem var(--font-note); }
.screenshot-link { display: block; position: relative; background: #11161c; border: 1px solid var(--line); overflow: hidden; }
.screenshot-link img { aspect-ratio: 16/10; object-fit: contain; height: auto; transition: transform .3s ease; }
.screenshot-link:hover img { transform: scale(1.025); }
.screenshot-zoom { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; background: var(--acid); color: var(--ink); font: .75rem var(--font-note); }
.screenshot-card h2 { margin: 16px 0 8px; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 550; }
.screenshot-card figcaption > p { font-size: 1.05rem; line-height: 1.5; max-width: 58ch; }
.screens-next { margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--ink); display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.screens-next p { flex: 1 1 100%; font-family: var(--font-display); font-size: 1.8rem; }
.screens-next a { border-bottom: 1px solid var(--ink); }
body:has(.screenshot-viewer[open]) { overflow: hidden; }
.screenshot-viewer { width: min(1440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.screenshot-viewer::backdrop { background: rgb(12 15 20 / .9); }
.viewer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; font: .75rem var(--font-note); }
.viewer-top button, .viewer-controls button { background: transparent; border: 1px solid var(--ink); width: 44px; height: 44px; }
.viewer-image { background: #11161c; }
.viewer-image img { width: 100%; height: auto; max-height: 62dvh; object-fit: contain; }
.viewer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; }
.viewer-bottom h2 { font-size: 1.65rem; font-weight: 550; }
.viewer-bottom p { max-width: 80ch; margin: 8px 0; line-height: 1.4; }
.viewer-bottom a { display: inline-block; border-bottom: 1px solid var(--ink); font-size: .9rem; }
.viewer-controls { flex-shrink: 0; text-align: right; }
.viewer-controls > div { display: flex; gap: 8px; margin-top: 12px; }
.screenshot-teaser { margin-top: 36px; border-top: 1px solid var(--ink); padding-top: 24px; }
.screenshot-teaser header { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 20px; }
.screenshot-teaser h3 { font-size: 1.5rem; font-weight: 550; }
.screenshot-teaser header a { border-bottom: 1px solid; }
.screenshot-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.screenshot-teaser-grid img { height: auto; aspect-ratio: 16/10; object-fit: contain; background: #11161c; border: 1px solid var(--line); }
.screenshot-teaser figcaption { padding-top: 10px; font-size: 1rem; }
@media (max-width: 700px) {
  .screens-main { padding-top: 30px; }
  .capture-context, .viewer-bottom, .screens-toolbar, .screenshot-teaser header { flex-direction: column; }
  .capture-context { gap: 12px; }
  .screens-toolbar { align-items: flex-start; }
  .screens-grid, .screenshot-teaser-grid { grid-template-columns: 1fr; }
  .screenshot-viewer { padding: 12px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .viewer-image img { max-height: 46dvh; }
  .viewer-controls { display: flex; width: 100%; align-items: center; justify-content: space-between; }
  .viewer-controls > div { margin: 0; }
  .screens-next p { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .screenshot-link img { transition: none; } }