/* The poster pages and right menu share one transition clock. */
.site-shell {
  --qdp-page-duration: 460ms;
  --qdp-page-ease: cubic-bezier(.22, 1, .36, 1);
}
.archive-viewport,
.info-viewport {
  position: absolute;
  inset: 0;
  z-index: 5;
  clip-path: inset(6.8% 8.25% 6.75% 8.25%);
  pointer-events: none;
}
.archive-viewport[hidden], .info-viewport[hidden] { display: none; }
.archive-page {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform var(--qdp-page-duration) var(--qdp-page-ease);
  pointer-events: auto;
}
.archive-page.is-open { transform: translateY(0); }
.archive-header { cursor: default; }
.archive-header:hover, .archive-header:focus-visible { background: #fa2b5a; color: #ffeff2; }
.archive-back {
  display: none !important;
  position: absolute;
  z-index: 4;
  bottom: calc(var(--qdp-list-bottom) + 1cqw);
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3cqw;
  padding: 0;
  color: #fff1f4;
  font: 700 clamp(13px, 2.4cqw, 20px)/1.2 "QDP Fraunces", Georgia, serif;
  text-decoration: none !important;
  white-space: nowrap;
  transform: translateX(-50%);
}
.archive-back[hidden] { display: none; }
.archive-back:hover, .archive-back:focus-visible { color: #ffea86; }
.archive-stack { z-index: 2; }
.archive-page:has(.archive-back:not([hidden])) .archive-stack {
  bottom: var(--qdp-list-bottom);
}
.archive-mode #eventStack, .archive-mode #dateButton,
.archive-mode .date-scroll-label { visibility: hidden; }
.archive-mode .today-button { display: none; }
.poster:has(#eventDetail:not([hidden])) .archive-stack { visibility: hidden; }

/* The black interior covers the logo and key while leaving the frame border visible. */
.info-viewport { z-index: 25; }
.poster-info-page {
  position: absolute;
  inset: 6.8% 8.25% 6.75%;
  display: flex;
  flex-direction: column;
  width: auto;
  max-height: none;
  margin: 0;
  padding: 8cqw 6cqw 7cqw;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  color: #fff1f4;
  transform: translateY(115%);
  transition: transform var(--qdp-page-duration) var(--qdp-page-ease);
  pointer-events: auto;
  box-sizing: border-box;
}
.poster-info-page[hidden] { display: none; }
.poster-info-page.is-open { transform: translateY(0); }
.poster-info-page .about-dialog-content {
  max-height: none;
  min-height: 0;
  padding-right: 1.3cqw;
  overflow: auto;
}
#aboutDialog .about-dialog-content {
  padding-right: 0;
  scrollbar-gutter: stable both-edges;
}
.about-dialog-logo {
  display: block;
  width: min(32cqw, 200px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 4cqw;
}
.poster-info-page h2 { font-family: "QDP Fraunces", Georgia, serif; font-size: 5cqw; }
.poster-info-page p { font-size: clamp(13px, 2.25cqw, 18px); }
#aboutDialog p { font-size: clamp(16px, 2.8cqw, 22px); }
.poster-info-page .about-dialog-close { position: absolute; top: 2cqw; right: 2cqw; z-index: 2; }
.poster-info-page .melt-dialog-logo { width: min(46cqw, 280px); }
.poster-info-page .melt-dialog-content { max-height: none; }
.info-mode .poster-controls { visibility: hidden; }

/* Keep the frame lines above the menu, without hiding the tabs behind the
   solid black margin outside those lines in the source artwork. */
.poster-stage { z-index: auto; }
.poster-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  background: url("frame.png?v=20260926-01") center / 100% 100% no-repeat;
  clip-path: inset(0 4.25% 0 91.75%);
  pointer-events: none;
}
.archive-menu-track {
  position: absolute;
  top: 0;
  left: 91.836%;
  z-index: 11;
  width: min(46vw, 555px, var(--archive-menu-room, 555px));
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.archive-menu-track[hidden] { display: none; }
.archive-menu-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--archive-menu-inset, 34px) + var(--archive-nav-expanded-width, 228px));
  transform: translateX(-100%);
  transition: transform var(--qdp-page-duration, 460ms) var(--qdp-page-ease, ease-out);
  pointer-events: none;
}
.archive-menu-track.is-open .archive-menu-panel { transform: translateX(0); }
.archive-menu {
  --archive-nav-width: var(--archive-nav-compact-width, 164px);
  position: absolute;
  top: var(--archive-nav-top, 0px);
  left: 0;
  width: calc(var(--archive-menu-inset, 33px) + var(--archive-nav-width, 228px) + var(--archive-feed-extension, 0px));
  height: auto;
  max-height: calc(93.25% - var(--archive-nav-top, 0px));
  box-sizing: border-box;
  padding: 16px 12px 16px calc(var(--archive-overlap, 64px) + 12px);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  font: 700 var(--archive-nav-font-size, 18px)/1.2 "QDP Fraunces", Georgia, serif;
  pointer-events: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  transition: width var(--qdp-page-duration, 460ms) var(--qdp-page-ease, ease-out);
}
.archive-menu.has-profile { --archive-nav-width: var(--archive-nav-expanded-width, 228px); }
.archive-menu::before {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--archive-menu-inset, 33px);
  z-index: 0;
  border: 2.5px solid #ffea86;
  border-left: 0;
  border-radius: 0 24px 24px 0;
  background: #000;
  pointer-events: none;
}
.archive-menu > a { position: relative; z-index: 1; color: inherit; text-decoration: none !important; }
.archive-menu-heading {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% + var(--archive-overlap, 64px) - var(--archive-menu-inset, 33px) + 12px);
  margin: 0 0 12px calc(var(--archive-menu-inset, 33px) - var(--archive-overlap, 64px) - 12px);
  padding: 0 12px;
  color: #fff1f4;
  font: inherit;
  text-align: center;
  transition: width var(--qdp-page-duration, 460ms) var(--qdp-page-ease, ease-out);
}
.archive-menu > .archive-menu-badge {
  display: flex;
  align-items: center;
  align-self: flex-start;
  box-sizing: border-box;
  width: var(--archive-tab-length, 164px);
  min-height: 34.2px;
  margin-left: calc(0px - var(--archive-overlap, 64px) - 12px);
  padding: 4.75px 11.4px 4.75px var(--archive-badge-label-x, 12px);
  border-radius: 0 14px 14px 0;
  color: #fff1f4;
  font-size: calc(var(--archive-nav-font-size, 18px) * .95);
  justify-content: flex-start;
  white-space: normal;
  overflow: hidden;
  transition-property: width, min-height, padding, border-radius, border-width;
  transition-duration: var(--qdp-page-duration, 460ms);
  transition-timing-function: var(--qdp-page-ease, ease-out);
}
.archive-menu > .archive-menu-badge[aria-current="page"] {
  width: calc(100% + var(--archive-overlap, 64px) + 12px);
  min-height: 34.2px;
  border-radius: 0 14px 14px 0;
  justify-content: center;
  padding: 4.75px 11.4px 4.75px calc(var(--archive-menu-inset, 33px) + 11.4px);
}
.archive-menu-badge-label {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.archive-menu-badge[data-tab-color="red"] {
  background: #fa2b5a;
}
.archive-menu-badge[data-tab-color="orange"] {
  background: #ff7945;
  color: var(--qdp-plum-text) !important;
}
.archive-menu-badge[data-tab-color="purple"] {
  background: #922185;
}
.archive-menu-badge[data-tab-color="collective"] {
  border: 2px solid #fff1f4;
  background: #000;
  color: #fff1f4;
}
.archive-menu-badge[data-tab-color="collective"][aria-current="page"] { border-width: 2px; }
.archive-menu-badge[aria-current="page"]::after {
  content: "✦";
  position: absolute;
  right: 12px;
  color: inherit;
  font-size: .75em;
}
.archive-menu > .archive-menu-map {
  margin: 7px 0;
  padding-left: 0;
  font-size: .78em;
}
.archive-menu > .archive-menu-map[hidden] { display: none; }
.archive-menu > .archive-menu-past-events {
  margin-top: 8px;
  color: #ffea86;
}
.archive-menu > a:focus-visible, .side-nav a:focus-visible {
  outline: 2px solid #ffea86;
  outline-offset: 3px;
}
.side-nav a:hover, .side-nav a:focus-visible { text-decoration: none; }
.side-nav-socials {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.side-nav .side-nav-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}
.side-nav-socials svg { display: block; width: 26px; height: 26px; }
.side-nav-socials .side-nav-ra-icon { width: 46px; }
.archive-menu-profile {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font: 400 clamp(12px, .85em, 15px)/1.35 Verdana, Geneva, sans-serif;
  transition: max-height var(--qdp-page-duration) var(--qdp-page-ease),
    opacity var(--qdp-page-duration) ease;
}
.archive-menu-profile[hidden] { display: none; }
.archive-menu-profile:not([hidden]) { margin: 12px 0 28px; }
.archive-menu.has-profile .archive-menu-profile { max-height: min(65dvh, 800px); opacity: 1; overflow-y: auto; }
.archive-profile-info { overflow-wrap: anywhere; }
.archive-profile-heading {
  margin: 0 0 .55em;
  color: var(--archive-profile-accent, #fa2b5a);
  font: 700 1.2em/1.1 "QDP Fraunces", Georgia, serif;
}
.archive-profile-info p, .archive-profile-info address {
  margin: .65em 0 0;
  font-style: normal;
  white-space: pre-line;
}
.archive-profile-related {
  margin-top: 1.6em;
  padding: 14px 12px;
  border: 2px solid #ffea86;
  border-radius: 18px;
  background: #000;
  text-align: center;
}
.archive-profile-related h3 {
  margin: 0 0 8px;
  color: #fff1f4;
  font: 700 1.05em/1.1 "QDP Fraunces", Georgia, serif;
}
.archive-profile-related-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.archive-profile-related .event-detail-related-bubble {
  min-height: 0;
  max-width: 100%;
  padding: 5px 9px;
  font-size: clamp(12px, 1.3cqw, 15px);
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none !important;
}
.archive-profile-links { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: .35em .75em; margin-top: 1.6em; }
.archive-profile-links a { color: #ffea86; text-decoration: none !important; }
.archive-profile-identity { display: inline-block; margin: 0 0 .5em; padding: 5px 10px; border-radius: 12px; background: #922185; color: #fff1f4; font: 700 .85em/1.2 "QDP Fraunces", Georgia, serif; }

/* The alphabet rail attaches to the same frame edge, below the directory tabs. */
.archive-alphabet {
  position: absolute;
  top: var(--archive-alphabet-top, 320px);
  bottom: 6.75%;
  left: var(--archive-menu-inset, 30px);
  width: 50px;
  padding: 8px 4px;
  display: grid;
  grid-template-rows: repeat(27, minmax(16px, 1fr));
  border: 2.5px solid #ffea86;
  border-left: 0;
  border-radius: 0 20px 20px 0;
  background: #000;
  pointer-events: auto;
  overflow-y: auto;
  scrollbar-width: none;
}
.archive-alphabet[hidden] { display: none; }
.archive-alphabet-letter {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #fff1f4;
  font: 700 clamp(13px, 1.45dvh, 16px)/1 "QDP Fraunces", Georgia, serif;
  cursor: pointer;
}
.archive-alphabet-letter:disabled { opacity: .38; cursor: default; }
.archive-alphabet-letter:not(:disabled):hover,
.archive-alphabet-letter:not(:disabled):focus-visible {
  background: transparent;
  outline: 1px solid #ffea86;
}

.archive-stack { overscroll-behavior: contain; }
.archive-directory .archive-identity-card {
  --event-color: #922185;
  background: var(--event-color);
  color: #ffeff2;
}
.archive-section + .archive-section { margin-top: var(--qdp-cards-next-time-gap); }
.archive-group { margin-bottom: var(--qdp-cards-next-time-gap); }
.archive-group .event-time { font: var(--qdp-time-font-weight) var(--qdp-time-font-size)/var(--qdp-time-line-height) "QDP Fraunces", Georgia, serif; }
.archive-year .event-time { font-size: calc(var(--qdp-time-font-size) * .68); }
.archive-group .event-card { cursor: pointer; }
.archive-group .event-row:first-child .event-card { border-top-right-radius: var(--qdp-card-radius); }
.archive-group .event-row:last-child .event-card { border-bottom-right-radius: var(--qdp-card-radius); }
.archive-group .event-row.same-time:last-child .event-card {
  border-bottom-left-radius: var(--qdp-tail-radius, var(--qdp-card-radius));
}
a.event-card.archive-card { text-decoration: none; }
.archive-card .event-card-content { pointer-events: none; }
.archive-month .date-heading { margin-bottom: var(--qdp-cards-next-time-gap); }
.archive-month .date-section + .date-section { margin-top: var(--qdp-cards-next-time-gap); }
.archive-date-badge { font-size: calc(var(--qdp-time-font-size) * .78); }
.archive-date-badge .archive-date-number { font-size: .86em; }
.archive-year-heading {
  margin: 0 0 0 33.03cqw;
  color: #ffeff2;
  text-align: center;
  font: 700 var(--qdp-date-font-size)/1 "QDP Fraunces", Georgia, serif;
}
.archive-period-header {
  display: grid;
  grid-template-columns: 100%;
  margin-top: 2cqw;
}
.archive-period-header > :is(.archive-period-heading, .archive-year-heading) {
  grid-area: 1 / 1;
}
.archive-period-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--qdp-date-height);
  margin: 0 0 0 calc(10.9cqw + var(--qdp-time-card-gap));
  padding: 0 0 .45cqw;
  color: #fff1f4;
  font: 700 var(--qdp-date-font-size)/1 "QDP Fraunces", Georgia, serif;
  text-align: left;
}
.archive-period-divider {
  width: 36cqw;
  max-width: 50%;
  height: 1.2cqw;
  margin: 4cqw auto;
  border: .22cqw solid #ffea86;
  border-radius: 999px;
  background: #000;
  box-sizing: border-box;
}
.archive-profile-month .event-row {
  display: grid;
  grid-template-columns: 8.1cqw minmax(0, 1fr);
  gap: 0;
}
.archive-profile-month .event-card { min-width: 0; }
.archive-profile-month .event-row.same-time:last-child .event-card { border-bottom-left-radius: 0; }
.archive-profile-month .event-row.same-time:last-child .archive-day-chip {
  border-bottom-left-radius: var(--qdp-tail-radius, var(--qdp-card-radius));
}
.archive-day-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--qdp-card-height);
  background: #922185;
  color: #fff1f4;
  font: 700 2.4cqw/1 "QDP Fraunces", Georgia, serif;
  white-space: nowrap;
}
.archive-stack .event-feed-message { padding: 0 3cqw; text-align: center; }
.archive-retry,
.archive-refresh-error .archive-retry {
  display: block;
  margin: 1.5cqw auto;
  padding: .8cqw 2cqw;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: #fff1f4;
  font: 700 clamp(14px, 2.5cqw, 20px)/1.2 "QDP Fraunces", Georgia, serif;
  cursor: pointer;
}
.archive-refresh-error { padding: 1.5cqw; text-align: center; color: #fff1f4; }
.archive-retry:focus-visible { outline: 2px solid #ffea86; outline-offset: 3px; }

@media (max-width: 760px) {
  .poster-stage { z-index: auto; }
  .poster-stage::after { display: none; }
  .archive-back { min-height: 4.5cqw; font-size: clamp(12px, 2.5cqw, 16px); }
  html.archive-open, html.discover-open { height: auto; min-height: 100%; overflow-y: auto; }
  body.archive-mode, body.discover-open { height: auto; min-height: 100dvh; overflow: visible; }
  .archive-mode .site-shell, .discover-open .site-shell { max-height: none; }
  .side-nav-socials { justify-content: center; padding: 5px 0; }
  .side-nav .side-nav-socials a { min-width: 44px; min-height: 44px; }
  .archive-menu-track {
    position: relative;
    order: 2;
    top: auto;
    left: auto;
    width: min(94vw, 500px);
    height: auto;
    min-height: 170px;
    overflow: hidden;
  }
  .archive-menu-panel {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: translateY(-100%);
  }
  .archive-menu-track.is-open .archive-menu-panel { transform: translateY(0); }
  .archive-menu {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 16px;
    gap: 0;
    align-items: center;
    text-align: center;
    max-height: none;
    border: 2.5px solid #ffea86;
    border-radius: 24px;
    background: #000;
  }
  .archive-menu::before { display: none; }
  .archive-menu-heading { width: 100%; margin-left: 0; padding: 0; }
  .archive-menu > .archive-menu-badge {
    align-self: center;
    justify-content: flex-start;
    width: calc(var(--archive-tab-label-width, 130px) + 4px);
    margin-left: 0;
    padding-left: 12px;
    border-radius: 14px;
  }
  .archive-menu > .archive-menu-badge[aria-current="page"] { width: 100%; padding-left: 12px; border-radius: 14px; }
  .archive-menu-badge-label { left: 50%; }
  .archive-menu-badge[aria-current="page"] .archive-menu-badge-label { left: 50%; }
  .archive-menu > .archive-menu-past-events { margin-left: 0; }
  .archive-menu > .archive-menu-map {
    margin: 3px 0;
    padding: 3px;
  }
  .archive-menu-profile { text-align: left; }
  .archive-menu-profile:not([hidden]) { margin: 8px 0 28px; }
  .archive-alphabet {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 8px;
    padding: 8px;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(3, 30px);
    border-left: 2.5px solid #ffea86;
    border-radius: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .archive-page, .poster-info-page, .archive-menu-panel { transition-duration: .01ms; }
  .archive-menu > .archive-menu-badge, .archive-menu-badge-label { transition-duration: .01ms; }
  .archive-menu, .archive-menu-heading { transition-duration: .01ms; }
}

/* Desktop return text stays inside the poster; arrows clear the outer rails. */
@media (min-width: 761px) {
  .site-shell {
    --qdp-arrow-gap: 40px;
    --qdp-arrow-bottom: 6.75%;
    --qdp-arrow-height: 56px;
    --qdp-menu-arrow-gap: 16px;
  }
  .poster { --qdp-return-gap: 6.4cqw; }
  .poster-controls {
    inset: 0;
    z-index: 30;
    width: auto;
    height: auto;
    pointer-events: none;
    container-type: inline-size;
  }
  .poster-controls > button {
    position: absolute;
    bottom: var(--qdp-arrow-bottom);
    height: var(--qdp-arrow-height);
  }
  #previousPoster { right: calc(100% + var(--qdp-arrow-gap)); left: auto; }
  #nextPoster { left: calc(100% + var(--qdp-arrow-gap)); right: auto; }
  .archive-menu {
    max-height: calc(100% - var(--qdp-arrow-bottom) - var(--qdp-arrow-height) - var(--qdp-menu-arrow-gap) - var(--archive-nav-top, 0px));
    justify-content: flex-start;
  }
  .archive-menu > a, .archive-menu-heading { flex-shrink: 0; }
  .archive-menu > .archive-menu-badge {
    max-width: calc(100% + var(--archive-overlap, 64px) + 12px);
  }
  .archive-menu:not(.has-profile):has(> .archive-menu-badge[aria-current="page"]) {
    --archive-feed-extension: 15.2px;
  }
  .archive-menu-profile {
    width: calc(100% + var(--archive-overlap, 64px) - var(--archive-menu-inset, 33px));
    min-height: 0;
    /* Leave room for every tab; long profile content scrolls inside this slot. */
    flex-shrink: 1;
    scrollbar-width: none;
  }
  .archive-menu-profile:not([hidden]) {
    margin-left: calc(var(--archive-menu-inset, 33px) - var(--archive-overlap, 64px));
  }
  .poster-controls > .mobile-back:not([hidden]) {
    bottom: 6.85%;
    width: 76%;
    height: 6.4cqw;
    min-height: 0;
    font-size: clamp(12px, 1.8vw, 16px);
  }
  .archive-page:has(.archive-back:not([hidden])) .archive-stack {
    bottom: calc(var(--qdp-list-bottom) + var(--qdp-return-gap));
  }
  .event-detail { bottom: var(--qdp-list-bottom); }
  .event-detail-card {
    height: calc(100% - var(--qdp-return-gap) + var(--qdp-detail-padding) + var(--qdp-detail-border));
  }
  .event-detail-content-viewport {
    max-height: calc(100% - var(--qdp-return-gap) + var(--qdp-detail-padding) + var(--qdp-detail-border));
  }
}
