/* Gallery page: extends style.css */
.g-nav { display: flex; }
.g-main { max-width: 1240px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(16px, 5vw, 48px) 0; }
.g-head { max-width: 780px; margin-bottom: 32px; }
.g-title { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: .3em 0 .3em; }
.g-head .lead { max-width: 56ch; }

.carousel { border: 1px solid var(--line); border-radius: 22px; padding: 10px; background: linear-gradient(135deg, rgba(0,243,255,.12), rgba(189,0,255,.12)); }
.stage { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.stage-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; aspect-ratio: 1400 / 781; }
.stage-btn img { width: 100%; height: 100%; object-fit: cover; }
.stage-btn:focus-visible { outline-offset: -4px; }
.state-chip { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  background: rgba(7,9,15,.78); border: 1px solid var(--line); color: var(--ink); font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.carousel.paused .state-dot { background: var(--orange); border-radius: 1px; }
.carousel.paused .state-chip { border-color: rgba(255,157,0,.6); }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,243,255,.12); }
.progress span { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
.carousel.paused .progress span { background: var(--orange); }

.g-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 8px 6px; flex-wrap: wrap; }
.g-caption { display: flex; align-items: baseline; gap: 16px; min-width: 0; flex: 1 1 320px; }
.g-count { color: var(--orange); flex: none; }
.g-caption p { margin: 0; color: var(--ink); font-size: 1rem; }
.g-controls { display: flex; gap: 8px; }
.ctl { min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font: 700 .75rem var(--display); letter-spacing: .08em; padding: 0 14px; transition: border-color .2s, background .2s; }
.ctl:hover { border-color: var(--cyan); }
.ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ctl-main { min-width: 104px; background: var(--cyan); color: #04121a; border-color: var(--cyan); }
.ctl-main[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }

.g-dots { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 6px; margin: 0; }
.g-dots button { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.g-dots button::before { content: ''; width: 18px; height: 4px; border-radius: 2px; background: rgba(0,243,255,.25); transition: background .2s; }
.g-dots button[aria-current="true"]::before { background: var(--cyan); width: 26px; }
.g-note { margin-top: 24px; }

@media (max-width: 960px) {
  .g-nav { position: static; flex-direction: row; background: none; border: 0; padding: 0; }
  .g-nav a { padding: 8px 10px !important; font-size: .85rem !important; }
}
@media (max-width: 600px) {
  .gallery-page .topbar { flex-wrap: wrap; gap: 10px; }
  .g-nav a:not(.nav-cta):not(.active) { display: none; }
  .g-controls { width: 100%; justify-content: space-between; }
  .ctl-main { flex: 1; }
}