:root{color-scheme:dark;font:16px/1.45 system-ui;background:#111410;color:#f4f6ed}
*{box-sizing:border-box}
body{width:min(100% - 32px,1088px);margin:auto;padding-block:24px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
a{color:#d0fa61}
h1{font-size:clamp(2rem,6vw,4rem);line-height:1.08;margin:32px 0 16px}
h2{margin-top:40px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:839px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:539px){.grid{grid-template-columns:1fr}}
figure{margin:0;border:1px solid #3b4635;border-radius:14px;overflow:hidden;background:#1a201a}
figure a{display:block;aspect-ratio:4/3;background:#0a0c09}
img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
figcaption{padding:12px 16px}
video{display:block;width:min(100%,440px,48vh);width:min(100%,440px,48svh);height:auto;aspect-ratio:9/16;object-fit:contain;background:#0a0c09;border-radius:14px}

.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: #080a08;
  color: #f4f6ed;
  overflow: hidden;
  overscroll-behavior: contain;
}
.viewer[open] {
  display: grid;
  grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr);
}
html:has(.viewer[open]) { overflow: hidden; }
.viewer-image {
  grid-area: 2 / 1;
  min-height: 0;
  aspect-ratio: auto;
  touch-action: pan-y pinch-zoom;
}
.viewer button {
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  color: inherit;
  background: #111410dd;
  font: 28px/1 system-ui;
  cursor: pointer;
}
.viewer-close { grid-area: 1 / 1; justify-self: end; margin: 8px 12px; }
.viewer-prev, .viewer-next { grid-area: 2 / 1; align-self: center; margin-inline: 8px; }
.viewer-prev { justify-self: start; }
.viewer-next { justify-self: end; }
.viewer-caption {
  grid-area: 3 / 1;
  margin: 0;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom));
  text-align: center;
}