.dc-space { max-width: 1200px; padding: 88px 60px 64px; margin: 0 auto; color: #080808; }
.dc-space .dc-space-intro { display: grid; grid-template-columns: 34% 1fr; align-items: start; gap: 28px; margin-bottom: 58px; }
.dc-space h1 { margin: 0; padding: 0; font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.dc-space-intro p { margin: 0; padding: 0; font-size: 19px; line-height: 1.45; letter-spacing: .4px; }
.dc-space-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.dc-space-card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #222; color: #fff; }
.dc-space-card::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 65%)); pointer-events: none; }
.dc-space-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dc-space-card span { position: absolute; z-index: 1; inset: auto 12px 25px; text-align: center; color: #fff; font-size: 24px; font-weight: 500; line-height: 1.3; text-transform: uppercase; }
.dc-space-card:hover img { transform: scale(1.035); }
.dc-space-card:focus-visible { outline: 3px solid #fbc123; outline-offset: 5px; }
.dc-space-viewer { width: min(900px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 28px 48px 0; border: 0; margin: auto; background: transparent; color: #fff; overflow: auto; overscroll-behavior: contain; }
.dc-space-viewer:not([open]) { display: none; }
.dc-space-viewer::backdrop { background: rgb(0 0 0 / 76%); }
html.dc-space-viewer-open { overflow: hidden; scrollbar-gutter: stable; }
.dc-space-stage { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.dc-space-photo { position: relative; z-index: 1; margin: 0; min-height: 100px; }
.dc-space-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 160px); margin-inline: auto; object-fit: contain; background: transparent; }
.dc-space-photo figcaption { position: absolute; inset: auto 0 0; padding: 40px 16px 24px; background: linear-gradient(transparent, rgb(0 0 0 / 60%)); color: #fff; text-align: center; /* text-transform: uppercase; */ font-size: 18px; line-height: 1.35; pointer-events: none; }
.dc-space-viewer .dc-space-close { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; margin: 0; padding: 0; background: #292929; color: #fbc123; font: 30px/1 Arial,sans-serif; cursor: pointer; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.dc-space-viewer .dc-space-close:hover,
.dc-space-viewer .dc-space-close:focus-visible {
  background: #fbc123 !important;
  color: #000000 !important;
  border-color: #fbc123 !important;
  transform: rotate(90deg) scale(1.12);
  box-shadow: 0 4px 12px rgba(251, 193, 35, 0.35);
}
.dc-space-viewer .dc-space-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; min-height: 52px; border: 0; border-radius: 0; padding: 8px; margin: 0; color: #fbc123; background: transparent; cursor: pointer; }
.dc-space-prev { left: -48px; }
.dc-space-next { right: -48px; }
.dc-space-arrow svg { width: 16px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dc-space-viewer .dc-space-arrow:is(:hover, :focus, :focus-visible, :active) { background: transparent; }
.dc-space-viewer, .dc-space-viewer:focus, .dc-space-viewer:focus-visible { outline: none !important; }
.dc-space-viewer button, .dc-space-viewer .dc-space-arrow, .dc-space-viewer .dc-space-close { -webkit-tap-highlight-color: transparent !important; outline: none !important; }
.dc-space-viewer button:focus, .dc-space-viewer button:focus-visible, .dc-space-viewer button:active,
.dc-space-viewer .dc-space-arrow:focus, .dc-space-viewer .dc-space-arrow:focus-visible, .dc-space-viewer .dc-space-arrow:active,
.dc-space-viewer .dc-space-close:focus, .dc-space-viewer .dc-space-close:focus-visible, .dc-space-viewer .dc-space-close:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: #fff;
}
.dc-space-viewer .dc-space-arrow { outline: none !important; border: 0 !important; }
.dc-space-viewer .dc-space-arrow:focus, .dc-space-viewer .dc-space-arrow:focus-visible { border: 0 !important; outline: 0 !important; }
.dc-space-viewer .dc-space-count { color: #fbc123; font-size: 20px; line-height: 1.3; text-align: center; margin: 20px 0 0; padding: 0; }
@media (max-width: 900px) {
 .dc-space-viewer { padding-left: 48px; padding-right: 48px; }
 .dc-space { padding: 64px 30px 48px; }
 .dc-space .dc-space-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
 .dc-space-intro p { max-width: 680px; font-size: 17px; }
 .dc-space-card span { font-size: 20px; bottom: 20px; }
}
@media (max-width: 600px) {
 .dc-space { padding: 38px 24px 40px; }
 .dc-space h1 { font-size: 26px; }
 .dc-space .dc-space-intro { gap: 14px; margin-bottom: 28px; }
 .dc-space-intro p { font-size: 16px; line-height: 1.55; letter-spacing: 0; }
 .dc-space-cards { grid-template-columns: 1fr; gap: 22px; }
 .dc-space-viewer { width: calc(100% - 20px); padding: 28px 20px 0; }
 .dc-space-photo img { max-height: calc(100dvh - 170px); }
 .dc-space-photo figcaption { padding: 24px 36px 16px; font-size: 14px; }
 .dc-space-viewer .dc-space-close { top: 12px; right: 12px; width: 30px; height: 30px; font-size: 24px; }
 .dc-space-viewer .dc-space-arrow { width: 36px; min-height: 44px; background: transparent; }
 .dc-space-prev { left: 0; }
 .dc-space-next { right: 0; }
 .dc-space-viewer .dc-space-count { font-size: 18px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .dc-space-card img { transition: none; } }