.june11-section-block {
  margin-top: 33px;
}

.june11-menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: clamp(34px, 9vw, 120px);
  align-items: center;
  margin-top: 42px;
}

.june11-menu {
  margin-top: 0;
  margin-left: 20px;
}

.june11-menu a {
  color: #045233;
  font-size: 18px;
  text-decoration: none;
}

.june11-menu a:hover {
  text-decoration: underline;
}

.june11-menu .day-post-link {
  color: #c94c2f;
  font-weight: 800;
}

.june11-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stained-glass-thumb-hero {
  --pane-size: clamp(220px, 38vw, 360px);
  --lead-color: #11100f;
  --glass-cyan: rgba(76, 213, 218, 0.34);
  --glass-yellow: rgba(246, 213, 92, 0.32);
  --glass-green: rgba(72, 184, 121, 0.26);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(100%, var(--pane-size));
  margin: 0;
  isolation: isolate;
  justify-self: end;
}

.stained-glass-stage {
  position: relative;
  width: min(100%, var(--pane-size));
  min-height: calc(var(--pane-size) * 1.333);
  display: grid;
  place-items: center;
}

.stained-glass-pane {
  --glass-grid-image: url("../../../designassets/images/blog/JUNE11/stainedglassarch.png");
  --glass-arch-clip: polygon(
    50% 2%,
    59% 7%,
    68% 15%,
    76% 27%,
    83% 43%,
    88% 61%,
    91% 80%,
    91% 97%,
    9% 97%,
    9% 80%,
    12% 61%,
    17% 43%,
    24% 27%,
    32% 15%,
    41% 7%
  );
  position: relative;
  width: var(--pane-size);
  aspect-ratio: 543 / 724;
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  clip-path: var(--glass-arch-clip);
  filter:
    drop-shadow(0 20px 34px rgba(29, 51, 48, 0.28))
    drop-shadow(0 0 24px rgba(76, 213, 218, 0.3));
  isolation: isolate;
  transition: transform 260ms ease, filter 260ms ease;
}

.stained-glass-pane:hover,
.stained-glass-pane:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter:
    drop-shadow(0 24px 38px rgba(29, 51, 48, 0.32))
    drop-shadow(0 0 34px rgba(76, 213, 218, 0.42));
}

.stained-glass-pane:focus-visible,
.stained-glass-dot:focus-visible {
  outline: 3px solid #f4cf4f;
  outline-offset: 4px;
}

.stained-glass-pane::before,
.stained-glass-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.stained-glass-pane::before {
  z-index: 2;
  background: var(--glass-grid-image) center / contain no-repeat;
  clip-path: var(--glass-arch-clip);
  mix-blend-mode: multiply;
  opacity: 1;
}

.stained-glass-pane::after {
  z-index: 3;
  clip-path: var(--glass-arch-clip);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.34), transparent 24%, transparent 69%, rgba(255, 255, 255, 0.16)),
    repeating-linear-gradient(48deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.2),
    inset 0 0 42px rgba(17, 16, 15, 0.34);
  opacity: 0.78;
}

.stained-glass-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.08) brightness(1.08);
  transform: scale(1.01);
  transition: opacity 220ms ease, transform 420ms ease;
  clip-path: var(--glass-arch-clip);
}

.stained-glass-pane.is-changing .stained-glass-image {
  opacity: 0.38;
  transform: scale(1.07);
}

.stained-glass-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.stained-glass-dots {
  width: min(100%, 156px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  gap: 9px 10px;
}

.stained-glass-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--lead-color);
  border-radius: 50%;
  background: #b24a4d;
  cursor: pointer;
  opacity: 0.68;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.stained-glass-dot[aria-current="true"] {
  background: #d40000;
  opacity: 1;
  transform: scale(1.24);
  box-shadow: 0 0 0 3px rgba(246, 213, 92, 0.45);
}

.june11-placeholder {
  color: #4d4a45;
  font-family: 'Source Code Pro', 'IBM Plex Mono', monospace;
  font-size: 13px;
}

.june11-caption {
  margin-top: 8px;
  color: #4d4a45;
  font-family: 'Source Code Pro', 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.2;
}

.june11-panorama figure {
  margin: 0;
}

.june11-panorama-description {
  margin-top: 16px;
  margin-bottom: 0;
  max-width: 72ch;
}

.june11-map-shell {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #141414;
}

.june11-map-shell {
  border: 1px solid rgba(77, 74, 69, 0.32);
}

#june11-map-placeholder,
.june11-panorama-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  color: #efe8da;
  font-family: 'Source Code Pro', 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-align: center;
}

.june11-panorama img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.june11-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.june11-gallery-grid a {
  display: block;
  overflow: hidden;
  scroll-margin-top: 24px;
  border-radius: 6px;
  background: #141414;
}

.june11-gallery-grid a:target {
  outline: 3px solid #f4cf4f;
  outline-offset: 4px;
}

.june11-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .stained-glass-pane,
  .stained-glass-image {
    transition: none;
  }
}

@media (max-width: 560px) {
  .june11-menu-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 32px;
  }

  .stained-glass-thumb-hero {
    --pane-size: min(82vw, 320px);
    justify-self: center;
  }

  .stained-glass-stage {
    min-height: calc(var(--pane-size) * 1.333);
  }

  .stained-glass-dots {
    width: min(100%, 164px);
    grid-template-columns: repeat(6, 1fr);
  }

  .june11-menu {
    margin-left: 0;
  }

  .june11-gallery-grid {
    grid-template-columns: 1fr;
  }
}