/* Iren Kuzmi — Atlas. One photograph at a time, eleven photographs in sequence.
   Inline: event directory + edge-to-edge image. Caption dock: fullscreen only.
   Styles are intentionally scoped; the rest of the site's design is untouched. */
.sp-gallery, .sp-lightbox {
  --sp-paper: #f4f3e9;
  --sp-ink: #111c17;
  --sp-muted: #bdc9c0;
  --sp-rule: #e9eee033;
  --sp-gold: #ded1a9;
  --sp-fraction: .090909;
  color: var(--sp-paper);
}
.sp-gallery { position: relative; isolation: isolate; min-width: 0; }
.sp-gallery button, .sp-close { touch-action: manipulation; }
.sp-gallery button[hidden] { display: none !important; }
.sp-gallery button:focus-visible, .sp-close:focus-visible {
  outline: 3px solid var(--sp-gold); outline-offset: 3px;
}
.sp-visual:focus-visible { outline: 3px solid var(--sp-gold); outline-offset: -5px; }
.sp-gallery:not(.is-ready) :is(.sp-image-arrow, .sp-expand, .sp-mobile-toggle, .sp-directory-item) { visibility: hidden; }

/* Desktop directory and photograph are the SAME height: no caption underneath. */
.sp-gallery--atlas {
  display: grid;
  grid-template-columns: minmax(255px, 28.4%) minmax(0, 1fr);
  align-items: stretch;
  background: var(--sp-ink);
  scroll-margin-top: 106px;
}
.sp-menu { position: relative; display: flex; flex-direction: column; min-height: 0; z-index: 8; }
.sp-directory {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: clamp(18px, 1.85vw, 32px);
  background: #131e18; border-right: 1px solid var(--sp-rule);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #637466 #131e18;
}
.sp-directory-heading {
  flex: none; margin-bottom: 14px;
  color: var(--sp-muted); font-size: 12px; line-height: 1.5;
  letter-spacing: .055em; text-transform: uppercase;
}
.sp-directory-item {
  display: flex; align-items: center; gap: clamp(12px, 1.2vw, 22px);
  flex: 1; min-height: 61px; width: 100%; padding: 12px 0;
  text-align: left; border: 0; border-top: 1px solid var(--sp-rule);
  background: transparent; color: #bec9bf;
  transition: color 220ms, background 220ms;
}
.sp-directory-item:hover, .sp-directory-item[aria-pressed="true"] { color: #fffdf2; }
.sp-directory-item:focus-visible { outline-offset: -3px !important; }
.sp-directory-number { flex: 0 0 23px; color: #c9bc93; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-directory-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sp-directory-text strong { font: 500 clamp(20px, 1.6vw, 28px)/1.18 var(--sans); letter-spacing: -.035em; }
.sp-directory-text > span { color: #b8c6bd; font-size: clamp(13px, .84vw, 15px); line-height: 1.45; max-width: 29ch; }
.sp-directory-item[aria-pressed="true"] .sp-directory-text > span { color: #e4e9df; }
.sp-directory-arrow { flex: none; font-size: 24px; color: var(--sp-gold); opacity: 0; transform: translate(-4px, 4px); transition: opacity 220ms, transform 350ms var(--ease); }
.sp-directory-item[aria-pressed="true"] .sp-directory-arrow { opacity: 1; transform: none; }
.sp-mobile-toggle { display: none; }

.sp-visual {
  position: relative; width: 100%; min-width: 0; min-height: 0;
  overflow: hidden; background: #0a120e; isolation: isolate;
  cursor: grab; touch-action: pan-y pinch-zoom;
}
.sp-gallery--atlas > .sp-visual {
  aspect-ratio: 3 / 2;
  max-height: calc(100svh - 116px);
  min-height: 380px;
}
.sp-stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.sp-picture { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: block; }
.sp-picture img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--sp-object, 50% 50%);
  filter: none; user-select: none; -webkit-user-drag: none;
}
.sp-gallery.is-dragging .sp-visual { cursor: grabbing; }
/* Side controls stay visible, on the image, for touch AND mouse. */
.sp-image-arrow, .sp-expand, .sp-close {
  display: grid; place-items: center; flex: none; padding: 0;
  color: #fffef5; border: 1px solid #f0f3e773;
  background: #10221bde;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.sp-image-arrow {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: clamp(48px, 4vw, 66px); height: clamp(48px, 4vw, 66px);
  border-radius: 50%; box-shadow: 0 3px 12px #07170d30;
}
.sp-image-arrow--prev { left: clamp(14px, 1.7vw, 28px); }
.sp-image-arrow--next { right: clamp(14px, 1.7vw, 28px); }
.sp-image-arrow--prev svg, .sp-arrow--prev svg { transform: rotate(180deg); }
.sp-image-arrow:hover, .sp-expand:hover, .sp-close:hover { background: #f4f3e9; color: #11231a; border-color: #f4f3e9; }
.sp-expand { position: absolute; z-index: 5; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 0; }
.sp-message {
  position: absolute; z-index: 6; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 10px 15px; max-width: min(88%, 440px); background: #12261eeb;
  color: #f4f3e9; font-size: 13px; line-height: 1.45; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.sp-gallery.is-loading .sp-message { transition: opacity 180ms 180ms; opacity: 1; visibility: visible; }
.sp-gallery.is-image-error .sp-message { opacity: 1; visibility: visible; pointer-events: auto; }
.sp-message button { display: block; margin: 8px auto 0; padding: 6px 14px; min-height: 36px; border: 1px solid var(--sp-rule); background: transparent; color: inherit; }

/* Fullscreen modal, with a reserved (not overlaid) caption / control dock. */
.sp-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #090f0c; overflow: hidden; overscroll-behavior: contain;
}
.sp-lightbox:not([open]) { display: none; }
.sp-lightbox[open] { display: flex; flex-direction: column; }
.sp-lightbox::backdrop { background: #090f0c; }
.sp-lightbox-top {
  flex: none; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: max(8px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 8px max(28px, env(safe-area-inset-left));
  background: #111c16; color: #c9d3c8; border-bottom: 1px solid #edf2e320;
  font-size: 13px; line-height: 1.4; letter-spacing: .03em;
}
.sp-lightbox-top i { color: var(--sp-gold); font-style: normal; padding: 0 12px; }
.sp-close { width: 46px; height: 46px; border-color: #f3f2e846; background: transparent; }
.sp-gallery--lightbox { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.sp-gallery--lightbox .sp-picture img { object-fit: contain; object-position: center; }
.sp-lightbox-footer {
  display: grid; grid-template-columns: minmax(0, 1fr) 234px; align-items: center; gap: 40px;
  padding: 22px max(32px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  border-top: 1px solid #edf2e320; background: #131e18;
}
.sp-caption { min-width: 0; }
.sp-caption h3 { color: var(--sp-paper); font: 500 clamp(24px, 2.3vw, 39px)/1.13 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.sp-caption p { color: var(--sp-muted); margin-top: 9px; font-size: 15px; line-height: 1.4; }
.sp-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px 16px; }
.sp-count { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; font-size: 14px; color: #bdc9bd; }
.sp-count b { font-weight: 500; font-size: 25px; color: #f6f4e9; }
.sp-count > span:nth-child(2) { opacity: .6; }
.sp-arrows { display: flex; gap: 8px; }
.sp-arrow { display: grid; place-items: center; padding: 0; width: 52px; height: 52px; border: 1px solid #edf2e375; border-radius: 50%; background: transparent; color: #f4f3e9; transition: background 200ms, color 200ms; }
.sp-arrow:not(.sp-arrow--prev), .sp-arrow:hover { background: #f4f3e9; color: #15291e; }
.sp-arrow:not(.sp-arrow--prev):hover { background: #d8d6c8; }
.sp-progress { grid-column: 1 / -1; overflow: hidden; height: 2px; background: var(--sp-rule); }
.sp-progress > span { display: block; width: 100%; height: 100%; background: var(--sp-gold); transform: scaleX(var(--sp-fraction)); transform-origin: left; transition: transform 450ms var(--ease); }
.sp-nojs { padding-top: 28px; font-size: 15px; }
.sp-nojs p { margin-bottom: 18px; }

@media (max-width: 1150px) and (min-width: 901px) {
  .sp-directory { padding: 18px; }
  .sp-directory-item { padding-block: 8px; gap: 12px; }
  .sp-directory-text strong { font-size: 19px; }
  .sp-directory-text > span { font-size: 13px; line-height: 1.35; }
  .sp-directory-arrow { font-size: 20px; }
  .sp-directory-number { flex-basis: 20px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  .sp-directory { padding: 14px 20px; }
  .sp-directory-heading { margin-bottom: 8px; font-size: 11px; }
  .sp-directory-item { padding-block: 7px; }
  .sp-directory-text strong { font-size: 19px; }
  .sp-directory-text > span { font-size: 13px; line-height: 1.3; }
  .sp-gallery--atlas > .sp-visual { min-height: 300px; }
}

/* Mobile: readable current event above the image; all events in a disclosure.
   The disclosure reuses the desktop navigation, not a second set of data. */
@media (max-width: 900px) {
  .sp-gallery--atlas { display: block; scroll-margin-top: 94px; }
  .sp-gallery--atlas > .sp-visual { aspect-ratio: 3 / 2; min-height: 0; max-height: none; }
  .sp-menu { display: block; }
  .sp-mobile-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; min-height: 128px; padding: 18px 22px; background: #131e18; border: 0; border-bottom: 1px solid var(--sp-rule); text-align: left; color: var(--sp-paper); }
  .sp-mobile-text { min-width: 0; display: flex; flex-direction: column; }
  .sp-mobile-label { color: #adbcaf; text-transform: uppercase; font-size: 11px; line-height: 1.5; letter-spacing: .06em; margin-bottom: 7px; }
  .sp-mobile-text strong { font-size: 23px; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
  .sp-mobile-text > span:last-child { font-size: 14px; line-height: 1.4; color: #c6d0c6; margin-top: 4px; }
  .sp-mobile-toggle > svg { flex: none; color: var(--sp-gold); transition: transform 250ms var(--ease); }
  .sp-gallery.is-menu-open .sp-mobile-toggle > svg { transform: rotate(180deg); }
  .sp-directory { position: absolute; inset: 100% 0 auto; display: none; z-index: 9; max-height: min(510px, 64svh); padding: 6px 22px 16px; border: 1px solid var(--sp-rule); border-top: 0; box-shadow: 0 22px 35px #030e0966; }
  .sp-gallery.is-menu-open .sp-directory { display: flex; }
  .sp-directory-heading { display: none; }
  .sp-directory-item { flex: none; min-height: 66px; padding-block: 13px; }
  .sp-directory-item:first-of-type { border-top: 0; }
  .sp-directory-text strong { font-size: 20px; }
  .sp-directory-text > span { font-size: 13px; }
  .sp-image-arrow { width: 48px; height: 48px; }
  .sp-image-arrow--prev { left: 14px; }
  .sp-image-arrow--next { right: 14px; }
  .sp-expand { width: 44px; height: 44px; top: 12px; right: 14px; }
  .sp-lightbox-footer { grid-template-columns: minmax(0, 1fr) 198px; gap: 24px; padding-inline: 24px; }
  .sp-caption h3 { font-size: 24px; }
}
@media (max-width: 600px) {
  /* Let the photograph use the full phone width, not a small inset card. */
  .sp-gallery--atlas { width: calc(100% + var(--gutter)*2); margin-left: calc(-1 * var(--gutter)); }
  .sp-image-arrow { width: 46px; height: 46px; }
  .sp-image-arrow--prev { left: 10px; }
  .sp-image-arrow--next { right: 10px; }
  .sp-expand { width: 44px; height: 44px; top: 10px; right: 10px; }
  .sp-mobile-toggle { padding: 16px 22px; }
  .sp-lightbox-top { min-height: 60px; padding: max(7px, env(safe-area-inset-top)) 14px 7px 18px; font-size: 11px; gap: 12px; }
  .sp-lightbox-top > span { max-width: 240px; }
  .sp-lightbox-top i { padding: 0 6px; }
  .sp-close { width: 44px; height: 44px; }
  .sp-lightbox-footer { display: flex; flex-direction: column; align-items: stretch; gap: 17px; padding: 18px 20px max(18px, env(safe-area-inset-bottom)); }
  .sp-caption h3 { font-size: 21px; line-height: 1.18; }
  .sp-caption p { font-size: 14px; margin-top: 6px; }
  .sp-controls { gap: 12px 16px; }
  .sp-count b { font-size: 23px; }
  .sp-arrow { width: 46px; height: 46px; }
  .sp-message { width: max-content; }
}
/* Short, landscape screens use the split layout to keep photo + controls visible. */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 540px) {
  .sp-gallery--atlas { display: grid; grid-template-columns: 33% minmax(0, 1fr); height: calc(100svh - 100px); }
  .sp-menu { display: flex; }
  .sp-mobile-toggle { display: none; }
  .sp-directory, .sp-gallery.is-menu-open .sp-directory { position: absolute; inset: 0; display: flex; flex: 1; max-height: 100%; box-shadow: none; border: 0; border-right: 1px solid var(--sp-rule); padding: 10px 15px; }
  .sp-directory-heading { display: block; font-size: 10px; margin-bottom: 6px; }
  .sp-directory-item { padding: 8px 0; min-height: 61px; gap: 8px; }
  .sp-directory-text strong { font-size: 18px; }
  .sp-directory-text > span { font-size: 12px; }
  .sp-directory-arrow { display: none; }
  .sp-gallery--atlas > .sp-visual { min-height: 0; height: calc(100svh - 100px); max-height: none; aspect-ratio: auto; }
}
@media (max-height: 540px) and (min-width: 600px) {
  .sp-lightbox-top { min-height: 50px; padding-block: 4px; font-size: 11px; }
  .sp-close { width: 42px; height: 42px; }
  .sp-lightbox-footer { padding: 12px 24px; gap: 24px; grid-template-columns: minmax(0, 1fr) 188px; }
  .sp-caption h3 { font-size: 21px; }
  .sp-caption p { font-size: 13px; margin-top: 5px; }
  .sp-controls { row-gap: 8px; }
  .sp-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-gallery *, .sp-lightbox * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}