/* Reference-led media walls. Deliberately scoped to Gallery and Connect. */
.media-wall-shell {position:relative;margin-inline:calc(-1 * var(--page-gutter));width:calc(100% + var(--page-gutter) * 2)}
.wall-tools {display:flex;align-items:center;gap:14px;padding:16px var(--page-gutter);position:relative;z-index:6;background:#061420;color:#d7e0e5}
.wall-tools p {margin-right:auto;font-size:.8rem;line-height:1.5}
.wall-tools button {min-height:44px;border:1px solid #c9af8080;border-radius:99px;padding:8px 18px;color:#efdab3;font-size:.8rem;white-space:nowrap}
.wall-tools button:hover {background:#c9af801a}
#connect {overflow:visible}
.infinite-wall {width:100%;min-height:0;background:#061420;overflow:visible;position:relative}
.infinite-wall canvas {display:block;position:sticky;top:0;width:100%;height:100svh;touch-action:auto;outline-offset:-5px}
.infinite-wall canvas:focus-visible {outline:3px solid #d9b879}
#gallery .media-wall[hidden],#connect .media-wall[hidden],.infinite-wall[hidden] {display:none!important}
#gallery .media-wall-shell>.media-wall,#connect .media-wall-shell>.media-wall {width:calc(100% - var(--page-gutter) * 2);margin-inline:auto}
#gallery .gallery-grid,
#gallery .gallery-grid.filtered {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:auto;
  gap:clamp(16px,2.3vw,38px);
  padding-block:28px;
  perspective:1600px;
}
#gallery .gallery-grid .gallery-card:nth-child(n),
#connect .channel-gallery .social-photo {
  grid-column:auto;
  grid-row:auto;
  width:100%;
  height:auto;
  min-height:0;
  min-width:0;
  margin:0;
  padding:0;
  aspect-ratio:3/4;
  border:0;
  border-radius:12px;
  box-shadow:none;
  background:transparent;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:left;
  color:#fff;
  transform:perspective(1100px) translate3d(0,var(--wall-lag,0px),0) rotateX(var(--wall-rx,0deg)) rotateY(var(--wall-ry,0deg)) skewY(var(--wall-skew,0deg));
  transform-origin:50% 50%;
  transition:none;
}
#gallery .gallery-card img,
#connect .social-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(0,var(--wall-pan,0px),0) scale(1.10);
  transition:filter .25s;
}
#gallery .gallery-card::after,
#connect .social-photo::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(2,10,18,.95),rgba(2,10,18,.5) 25%,transparent 60%);
}
#gallery .gallery-card .card-caption,
#connect .social-photo>span:not(.social-play) {
  position:absolute;
  z-index:2;
  inset:auto 16px 18px;
  transform:none;
  opacity:1;
  color:#fff;
  pointer-events:none;
}
#gallery .gallery-card .card-caption strong {
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.6vw,1.9rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
  margin-top:7px;
}
#gallery .gallery-card .card-caption small {
  display:block;
  font-size:.65rem;
  line-height:1.5;
  letter-spacing:.07em;
  color:#f2d5a6;
}
#gallery .media-badge {
  position:absolute;
  z-index:3;
  inset:14px 14px auto auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  background:#061420c9;
  border:1px solid #e2cfab80;
  font-size:.8rem;
}
#gallery .wall-tile:focus-visible,
#connect .wall-tile:focus-visible {
  outline:3px solid #e6c78f;
  outline-offset:5px;
  z-index:5;
}
#gallery .wall-tile:hover img,
#connect .wall-tile:hover img {filter:brightness(1.08)}
#connect .channel-section {margin-top:clamp(56px,7vw,100px);overflow:visible}
#connect .channel-section:first-child {margin-top:0}
#connect .channel-gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.3vw,38px);
  padding-block:24px;
  perspective:1600px;
}
#connect .youtube-gallery {grid-template-columns:repeat(2,minmax(0,1fr))}
#connect .youtube-gallery .social-photo {aspect-ratio:4/3}
#connect .social-photo>span:not(.social-play) {font-size:clamp(.85rem,1.1vw,1.1rem);line-height:1.4}
#connect .channel-heading {margin-bottom:8px}
#connect .channel-caption {color:#bccbd4}
.wall-motion-control {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:20px;
  padding:9px 17px;
  border:1px solid #bba47780;
  border-radius:999px;
  color:#ead5b3;
  font-size:.78rem;
  line-height:1.4;
}
.wall-motion-control:hover {background:#cfac7712}
#gallery .gallery-toolbar {flex-wrap:wrap;gap:20px}
@media(min-width:1500px) {
  #gallery .gallery-card .card-caption,
  #connect .social-photo>span:not(.social-play) {inset:auto 22px 24px}
}
@media(max-width:1100px) {
  #gallery .gallery-grid,#gallery .gallery-grid.filtered {grid-template-columns:repeat(3,minmax(0,1fr))}
  #connect .channel-gallery {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px) {
  .wall-tools {flex-wrap:wrap;gap:8px;padding-block:10px}
  .wall-tools p {flex-basis:100%;font-size:.75rem}
  .wall-tools button {font-size:.75rem;padding:7px 13px}
  #gallery,#connect {padding-block:80px}
  #gallery .gallery-grid,#gallery .gallery-grid.filtered,
  #connect .channel-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-block:18px}
  #gallery .gallery-grid .gallery-card:nth-child(n),
  #connect .channel-gallery .social-photo {aspect-ratio:3/4;border-radius:10px}
  #connect .youtube-gallery {grid-template-columns:1fr}
  #connect .youtube-gallery .social-photo {aspect-ratio:4/3}
  #gallery .gallery-card .card-caption,
  #connect .social-photo>span:not(.social-play) {inset:auto 11px 13px}
  #gallery .gallery-card .card-caption strong {font-size:1.15rem;line-height:1.2}
  #gallery .gallery-card .card-caption small {font-size:.58rem;letter-spacing:.025em}
  #gallery .media-badge {inset:10px 10px auto auto;width:28px;height:28px}
  #connect .social-play {width:38px;height:38px;top:35%}
  #connect .channel-section {margin-top:64px}
}
@media(prefers-reduced-motion:reduce) {
  #gallery .gallery-grid .gallery-card:nth-child(n),#connect .channel-gallery .social-photo {transform:none!important}
  #gallery .gallery-card img,#connect .social-photo img {transform:none!important}
  .wall-motion-control {display:none}
}
@media(forced-colors:active) {
  #gallery .gallery-card .card-caption,#connect .social-photo>span:not(.social-play) {color:CanvasText;background:Canvas}
  #gallery .gallery-grid .gallery-card:nth-child(n),#connect .channel-gallery .social-photo {border:1px solid CanvasText}
}