/* Events and Gallery only: independent photo decks with normal page scrolling. */
body.showcase-body {
  overflow-x: hidden !important;
  background: #03131f;
}

body.showcase-body .gallery-page,
body.showcase-body .event-page {
  --sc-canvas: #edf5f8;
  --sc-surface: #f8fbfc;
  --sc-navy-950: #03131f;
  --sc-navy-900: #061b2a;
  --sc-ink: #092235;
  --sc-text: #1c3b4d;
  --sc-muted: #557281;
  --sc-line: #bfd3dc;
  --sc-line-strong: #91b7c7;
  --sc-cyan: #36c4e7;
  --sc-cyan-dark: #087ca3;
  --sc-cyan-pale: #d9f4fb;
  --sc-gold: #e9aa4b;
  --sc-white: #f7fcff;
  --sc-display: Bahnschrift, "Arial Narrow", "Noto Sans SC", sans-serif;
  --sc-body: Aptos, "Segoe UI Variable", "Segoe UI", "Microsoft YaHei", sans-serif;
  --sc-data: "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  --sc-content: 1152px;
  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  margin: 0;
  color: var(--sc-text);
  font-family: var(--sc-body);
  font-size: 16px;
  line-height: 1.68;
}

body.showcase-body .gallery-page *,
body.showcase-body .event-page * {
  box-sizing: border-box;
}

body.showcase-body .gallery-page img,
body.showcase-body .event-page img {
  display: block;
  max-width: 100%;
}

body.showcase-body .gallery-page h1,
body.showcase-body .gallery-page h2,
body.showcase-body .event-page h1,
body.showcase-body .event-page h2 {
  font-family: var(--sc-display);
  font-weight: 650;
  text-wrap: balance;
}

body.showcase-body .gallery-page a,
body.showcase-body .event-page a {
  color: var(--sc-cyan);
}

body.showcase-body .gallery-page button:focus-visible,
body.showcase-body .event-page button:focus-visible {
  outline: 3px solid var(--sc-gold);
  outline-offset: 3px;
}

.gallery-page {
  background: var(--sc-navy-950);
}

.gallery-intro,
.event-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: clamp(32px, 8vw, 112px);
  align-items: end;
  width: min(calc(100% - 32px), var(--sc-content));
  min-height: clamp(430px, 64vh, 640px);
  margin: 0 auto;
  padding: clamp(52px, 8vw, 112px) 0;
  color: #c9e0e9;
}

.gallery-intro h1,
.event-intro h1 {
  max-width: 13ch;
  margin: 13px 0 0;
  color: var(--sc-white) !important;
  font-size: clamp(48px, 7vw, 96px) !important;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.gallery-intro-copy,
.event-intro-copy {
  max-width: 42ch;
  margin: 0;
  color: #b8d0db !important;
  font-size: 16px !important;
  text-align: left !important;
}

.gallery-kicker,
.event-kicker {
  margin: 0;
  color: var(--sc-cyan) !important;
  font-family: var(--sc-data);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Gallery ring */
.gallery-scroll-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(88, 183, 214, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 183, 214, 0.045) 1px, transparent 1px),
    var(--sc-navy-900);
  background-size: 42px 42px;
}

.gallery-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  width: min(calc(100% - 32px), 1376px);
  min-height: clamp(570px, 72vh, 760px);
  margin: 0 auto;
  padding: 48px 0;
  perspective: 1200px;
  perspective-origin: 69% 50%;
  transform-style: preserve-3d;
}

.gallery-stage-copy {
  position: relative;
  z-index: 5;
  color: #bad0da;
}

.gallery-stage-copy h2 {
  margin: 0 0 13px;
  color: var(--sc-white) !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.04;
}

.gallery-stage-copy p {
  max-width: 32ch;
  margin: 0;
  color: #bad0da !important;
  font-size: 15px !important;
  text-align: left !important;
}

.gallery-meter {
  width: 100%;
  height: 2px;
  margin-top: 24px;
  overflow: hidden;
  background: rgba(137, 203, 219, 0.2);
}

.gallery-meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sc-cyan);
  transform: scaleX(var(--gallery-progress, 0.1));
  transform-origin: left;
  transition: transform 700ms var(--sc-ease);
}

.gallery-orbit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  min-width: 0;
}

.gallery-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--sc-white);
  background: #071722;
  border: 1px solid rgba(129, 203, 221, 0.3);
  border-radius: 6px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35);
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-card figcaption {
  padding: 12px 13px 14px;
}

.gallery-card strong,
.gallery-card span {
  display: block;
}

.gallery-card strong {
  color: var(--sc-white);
  font-size: 15px;
}

.gallery-card span {
  margin-top: 3px;
  color: #93b2c0;
  font-family: var(--sc-data);
  font-size: 10px;
  letter-spacing: 0.035em;
}

.gallery-orbit.is-carousel-ready {
  --orbit-radius: clamp(285px, 31vw, 500px);
  position: relative;
  display: block;
  width: 100%;
  height: clamp(440px, 56vh, 590px);
  transform: rotateX(-4deg) rotateY(var(--orbit-angle, 0deg));
  transform-style: preserve-3d;
  transition: transform 760ms var(--sc-ease);
  will-change: transform;
}

.gallery-orbit.is-carousel-ready .gallery-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(240px, 26vw, 380px);
  opacity: 0.22;
  backface-visibility: hidden;
  filter: saturate(0.72) brightness(0.68);
  transform: translate(-50%, -50%) rotateY(var(--slot-angle)) translateZ(var(--orbit-radius));
  transition:
    opacity 500ms ease,
    filter 500ms ease,
    border-color 500ms ease;
  will-change: transform, opacity;
}

.gallery-orbit.is-carousel-ready .gallery-card.is-active {
  opacity: 1;
  filter: none;
  border-color: rgba(104, 224, 245, 0.9);
}

.gallery-orbit.is-carousel-ready .gallery-card img {
  height: clamp(210px, 34vh, 340px);
  object-fit: cover;
}

.gallery-outro {
  width: min(calc(100% - 32px), var(--sc-content));
  margin: 0 auto;
  padding: clamp(64px, 10vw, 128px) 0;
  color: #bad0da;
  text-align: center;
}

.gallery-outro p {
  max-width: 46ch;
  margin: 0 auto;
  color: #bad0da !important;
  font-size: 16px !important;
}

/* Event decks */
.event-page {
  background: var(--sc-navy-950);
}

.event-intro {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  min-height: clamp(420px, 60vh, 610px);
}

.event-list {
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 16%, rgba(54, 196, 231, 0.08), transparent 370px),
    var(--sc-canvas);
}

.event-record {
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  width: min(calc(100% - 32px), 1248px);
  min-height: clamp(520px, 76vh, 720px);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: 1px solid var(--sc-line-strong);
}

.event-record:first-child {
  border-top: 0;
}

.event-meta {
  max-width: 500px;
}

.event-index,
.event-location {
  color: var(--sc-cyan-dark);
  font-family: var(--sc-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.event-meta h2 {
  margin: 10px 0 14px;
  color: var(--sc-ink) !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: left !important;
}

.event-meta p {
  margin: 0;
  color: var(--sc-muted) !important;
  font-size: 16px !important;
  text-align: left !important;
}

.event-location {
  display: inline-block;
  margin-top: 13px;
}

.event-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 13px;
  min-width: 0;
}

.event-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--sc-navy-900);
  border: 1px solid rgba(129, 203, 221, 0.24);
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(5, 26, 42, 0.2);
}

.event-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.event-frame figcaption {
  padding: 11px 13px;
  color: #c7dde6;
  font-size: 12px;
  line-height: 1.45;
}

.event-deck.is-carousel-ready {
  position: relative;
  display: block;
  height: clamp(410px, 51vw, 540px);
  min-height: 410px;
  overflow: hidden;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.event-deck.is-carousel-ready .event-frame {
  position: absolute;
  top: calc(50% - 28px);
  left: 50%;
  width: min(76%, 540px);
  opacity: var(--frame-opacity, 1);
  filter: saturate(var(--frame-saturation, 1)) brightness(var(--frame-brightness, 1));
  transform:
    translate3d(calc(-50% + var(--frame-x, 0%)), -50%, var(--frame-z, 0px))
    rotateY(var(--frame-ry, 0deg))
    rotateZ(var(--frame-rz, 0deg))
    scale(var(--frame-scale, 1));
  transition:
    transform 720ms var(--sc-ease),
    opacity 520ms ease,
    filter 520ms ease,
    border-color 520ms ease;
  will-change: transform, opacity;
}

.event-deck.is-carousel-ready .event-frame.is-active {
  border-color: rgba(8, 124, 163, 0.64);
}

.event-deck.is-carousel-ready .event-frame img {
  height: clamp(250px, 34vw, 390px);
  object-fit: cover;
}

/* Shared controls are generated by showcase.js. */
.showcase-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
}

.showcase-controls button {
  min-width: 42px;
  min-height: 38px;
  padding: 7px 12px;
  color: #d8f5fc;
  background: rgba(7, 37, 54, 0.88);
  border: 1px solid rgba(113, 204, 226, 0.42);
  border-radius: 4px;
  font-family: var(--sc-data);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.showcase-controls button:hover {
  color: #03131f;
  background: var(--sc-cyan);
  border-color: var(--sc-cyan);
}

.showcase-status {
  min-width: 52px;
  margin-left: 4px;
  color: #91b7c7;
  font-family: var(--sc-data);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.event-deck > .showcase-controls {
  position: absolute;
  z-index: 200;
  right: 12%;
  bottom: 0;
  left: 12%;
  justify-content: center;
  margin: 0;
}

.event-deck > .showcase-controls button {
  color: #0b4660;
  background: rgba(244, 251, 253, 0.94);
  border-color: rgba(8, 124, 163, 0.35);
}

.event-deck > .showcase-controls button:hover {
  color: #f7fcff;
  background: var(--sc-cyan-dark);
}

.event-deck > .showcase-controls .showcase-status {
  color: #416979;
}

@media (max-width: 860px) {
  .gallery-intro,
  .event-intro,
  .gallery-stage,
  .event-record {
    grid-template-columns: 1fr;
  }

  .gallery-intro,
  .event-intro {
    min-height: 0;
    padding: 72px 0;
  }

  .gallery-stage {
    gap: 24px;
    min-height: 650px;
    padding: 56px 0 38px;
    perspective-origin: 50% 68%;
  }

  .gallery-stage-copy {
    width: min(100%, 620px);
  }

  .gallery-orbit.is-carousel-ready {
    --orbit-radius: clamp(250px, 42vw, 340px);
    height: 430px;
  }

  .event-record {
    min-height: 0;
    padding: 72px 0;
  }

  .event-meta {
    max-width: 650px;
  }

  .event-deck.is-carousel-ready {
    height: 500px;
  }

  .event-deck.is-carousel-ready .event-frame img {
    height: clamp(260px, 50vw, 360px);
  }
}

@media (max-width: 560px) {
  .gallery-intro,
  .event-intro,
  .gallery-stage,
  .event-record,
  .gallery-outro {
    width: min(calc(100% - 24px), var(--sc-content));
  }

  .gallery-intro,
  .event-intro {
    padding: 56px 0;
  }

  .gallery-intro h1,
  .event-intro h1 {
    font-size: clamp(44px, 14vw, 64px) !important;
  }

  .gallery-stage {
    min-height: 570px;
    padding: 48px 0 28px;
  }

  .gallery-orbit.is-carousel-ready {
    --orbit-radius: clamp(190px, 58vw, 240px);
    height: 350px;
  }

  .gallery-orbit.is-carousel-ready .gallery-card {
    width: min(74vw, 278px);
  }

  .gallery-orbit.is-carousel-ready .gallery-card img {
    height: 180px;
  }

  .event-record {
    gap: 28px;
    padding: 56px 0;
  }

  .event-meta h2 {
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  .event-deck.is-carousel-ready {
    height: 385px;
    min-height: 385px;
  }

  .event-deck.is-carousel-ready .event-frame {
    top: calc(50% - 24px);
    width: min(84%, 360px);
  }

  .event-deck.is-carousel-ready .event-frame img {
    height: 235px;
  }

  .event-frame figcaption {
    font-size: 11px;
  }

  .event-deck > .showcase-controls {
    right: 4%;
    left: 4%;
  }

  .showcase-controls button {
    min-height: 42px;
  }
}

/* Activity archive: dates stay fixed while each album advances independently. */
.gallery-timeline {
  width: min(calc(100% - 64px), 1248px);
  margin: 0 auto;
}

.gallery-album {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(44px, 6vw, 80px) 0;
  border-bottom: 1px solid #284351;
}

.gallery-album:last-child { border-bottom: 0; }

.gallery-album-meta time {
  display: block;
  margin-bottom: 12px;
  color: var(--sc-cyan);
  font-size: 15px;
}

.gallery-album-meta h2 {
  margin: 0 0 16px;
  color: var(--sc-white) !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.gallery-album-meta p {
  max-width: 32ch;
  margin: 0;
  color: #bad0da !important;
  font-size: 16px !important;
  text-align: left !important;
}

.gallery-album-photos .event-frame {
  border: 0;
  box-shadow: none;
}

.gallery-album-photos .event-frame img,
.gallery-album-photos.is-carousel-ready .event-frame img {
  object-fit: contain;
  background: var(--sc-navy-900);
}

.gallery-album-photos.is-carousel-ready {
  height: clamp(360px, 38vw, 500px);
  min-height: 360px;
}

.gallery-album-photos.is-carousel-ready .event-frame {
  width: 88%;
}

.gallery-album-photos.is-carousel-ready .event-frame img {
  height: clamp(270px, 30vw, 390px);
}

.gallery-single-photo {
  padding: 0 6%;
}

.gallery-single-photo .event-frame img {
  height: auto;
  aspect-ratio: auto;
  max-height: 460px;
}

.gallery-album-photos > .showcase-controls button {
  color: #d8f5fc;
  background: #072536;
  border-color: #508899;
  min-height: 44px;
  min-width: 44px;
}

.gallery-album-photos > .showcase-controls button:hover {
  color: #03131f;
  background: var(--sc-cyan);
}

.gallery-album-photos > .showcase-controls .showcase-status {
  color: #bad0da;
}

@media (max-width: 860px) {
  .gallery-timeline { width: calc(100% - 40px); }
  .gallery-album { grid-template-columns: 1fr; gap: 22px; }
  .gallery-album-meta p { max-width: 55ch; }
  .gallery-album-photos.is-carousel-ready { height: clamp(330px, 65vw, 500px); min-height: 330px; }
  .gallery-album-photos.is-carousel-ready .event-frame img { height: clamp(240px, 51vw, 390px); }
}

@media (max-width: 560px) {
  .gallery-timeline { width: calc(100% - 24px); }
  .gallery-album { padding: 36px 0; gap: 12px; }
  .gallery-album-meta h2 { margin-bottom: 10px; }
  .gallery-single-photo { padding: 12px 0 0; }
  .gallery-album-photos.is-carousel-ready .event-frame { width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-meter span,
  .gallery-orbit.is-carousel-ready,
  .gallery-orbit.is-carousel-ready .gallery-card,
  .event-deck.is-carousel-ready .event-frame,
  .showcase-controls button {
    transition: none !important;
  }
}