/* All place details share user photography and the home page's header behavior. */
body.venue-photo-page {
  isolation: isolate;
  background: #101e2a;
}

body.venue-photo-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #07131fc4 0%, #07131f78 36%, #07131f9e 100%),
    url('venue-landscape/seoknam-street.jpg') center 52% / cover no-repeat;
}

body.venue-photo-page .site-header {
  --photo-header-ink: #fff;
  --photo-header-surface: transparent;
  --photo-header-logo: 1;
  --photo-header-shadow: 0 1px 10px #0006;
  --photo-header-scheme: dark;
  color: var(--photo-header-ink);
  background: var(--photo-header-surface);
  border: 0;
  box-shadow: none;
  transition: background-color .28s ease, color .28s ease;
}

body.venue-photo-page .site-header .header-inner {
  max-width: 1480px;
  padding-inline: clamp(20px, 4vw, 64px);
  gap: 12px 32px;
}

body.venue-photo-page .brand-mark { position: relative; }
body.venue-photo-page .brand-mark img { position: absolute; inset: 0; }
body.venue-photo-page .brand-logo__on-photo {
  filter: url(#seoknam-logo-light-ink);
  opacity: var(--photo-header-logo);
  transition: opacity .28s ease;
}

body.venue-photo-page .main-nav { text-shadow: var(--photo-header-shadow); }
body.venue-photo-page .main-nav a {
  color: var(--photo-header-ink);
  transition: color .28s ease;
}
body.venue-photo-page .main-nav .nav-cta {
  border: 0;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
}
body.venue-photo-page .main-nav .lang-select {
  color: var(--photo-header-ink);
  background: transparent;
  border-color: #ffffff70;
  color-scheme: var(--photo-header-scheme);
  transition: color .28s ease, border-color .28s ease;
}
body.venue-photo-page .main-nav .lang-select option { color: #17181b; background: #fff; }

body.venue-photo-page .site-header:has(:focus-visible) {
  --photo-header-ink: #17181b;
  --photo-header-surface: #fff;
  --photo-header-logo: 0;
  --photo-header-shadow: none;
  --photo-header-scheme: light;
}
body.venue-photo-page .site-header:has(:focus-visible) .lang-select { border-color: #c9cdd6; }
body.venue-photo-page .site-header :is(a, select):focus-visible {
  outline: 2px solid var(--taegeuk-blue);
  outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  body.venue-photo-page .site-header:hover {
    --photo-header-ink: #17181b;
    --photo-header-surface: #fff;
    --photo-header-logo: 0;
    --photo-header-shadow: none;
    --photo-header-scheme: light;
  }
  body.venue-photo-page .site-header:hover .lang-select { border-color: #c9cdd6; }
  body.venue-photo-page .main-nav a:hover { color: var(--taegeuk-blue); }
}

body.venue-photo-page .breadcrumbs { color: #ffffffe0; text-shadow: 0 1px 8px #0008; }
body.venue-photo-page .breadcrumbs a:hover { color: #fff; text-decoration: underline; }
body.venue-photo-page .detail-head { padding-top: 30px; padding-bottom: 36px; }
body.venue-photo-page .detail-head__copy { margin-bottom: 36px; text-shadow: 0 2px 18px #0008; }
body.venue-photo-page .detail-head h1 { color: #fff; }
body.venue-photo-page .detail-head :is(.english-name, .detail-dek) { color: #ffffffe6; }
body.venue-photo-page .detail-head .eyebrow { color: #fff; }

body.venue-photo-page .venue-carousel {
  padding: 16px;
  background: #09131c94;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
body.venue-photo-page .venue-carousel__viewport,
body.venue-photo-page .venue-carousel__slide > .photo-frame,
body.venue-photo-page .venue-carousel__slide > .venue-exterior { background: #07111b55; }
body.venue-photo-page .venue-carousel__slide .photo-frame--empty { color: #ffffffe0; }
body.venue-photo-page .venue-carousel__slide .empty-mark { color: #ffffff33; }
body.venue-photo-page .detail-head :is(.venue-carousel__hint, .venue-carousel__status) { color: #ffffffe0; }
body.venue-photo-page .venue-carousel__categories button { color: #fff; background: transparent; border-color: #ffffff70; }
body.venue-photo-page .venue-carousel__categories button[aria-pressed="true"] { color: #fff; background: var(--taegeuk-blue); border-color: #b6c9f1; }
body.venue-photo-page .venue-carousel__thumbs { scrollbar-color: #ffffff80 transparent; }
body.venue-photo-page .venue-carousel__thumbs button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 1px var(--taegeuk-red); }
body.venue-photo-page .venue-tabs { border: 0; margin-top: 0; }
body.venue-photo-page .venue-tabs button { color: #fff; text-shadow: 0 1px 8px #0006; }
body.venue-photo-page .venue-tabs button:hover { color: #17181b; background: #fff; text-shadow: none; }
body.venue-photo-page .venue-tabs button[aria-selected="true"] { color: #fff; background: var(--taegeuk-blue); }
body.venue-photo-page .venue-tab-panel { border: 0; box-shadow: 0 14px 44px #0002; }

@media (max-width: 760px) {
  body.venue-photo-page::before { background-position: center, 52% center; }
  body.venue-photo-page .detail-head { padding-top: 26px; padding-bottom: 28px; }
  body.venue-photo-page .detail-head__copy { margin-bottom: 26px; }
  body.venue-photo-page .venue-carousel { padding: 10px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.venue-photo-page .site-header,
  body.venue-photo-page .brand-logo__on-photo,
  body.venue-photo-page .main-nav :is(a, select) { transition: none; }
}