/* Original production gallery, scoped to the Explore gallery section.
   Source: hemu_ski_guide ee44c9fb28789a04a2103deec0b609f0a761ade2.
   Component rules and gallery.js are unchanged; these styles restore its inherited theme. */
#photo-page {
  --bg: oklch(98% 0.004 240);
  --ink: oklch(17% 0.018 240);
  --ink-soft: oklch(24% 0.018 240);
  --snow-muted: oklch(83% 0.007 240);
  --font-display: 'Times New Roman', 'Iowan Old Style', Georgia, serif;
  --font-body: ui-monospace, 'IBM Plex Mono', 'JetBrains Mono', Menlo, monospace;
  --font-reading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-gutter: clamp(22px, 5vw, 100px);
  padding: clamp(48px, 6vw, 94px) var(--page-gutter);
  scroll-margin-top: 0;
  border-bottom: 1px solid var(--ink-soft);
  background: var(--ink);
  color: var(--bg);
  font: 16px var(--font-reading);
  line-height: normal;
}
#photo-page .gallery-heading h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#photo-page p { text-wrap: pretty; }
#photo-page .kicker { font: 11px/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
#photo-page .mono { font-family: var(--font-body); }
#photo-page a { color: inherit; }
#photo-page a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
#photo-page a:hover { text-decoration-thickness: 2px; }
#photo-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Photo Page — a media contact sheet beside a quiet, cinematic stage. */
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 38px; }
.gallery-heading .kicker { color: #e4a598; margin-bottom: 18px; }
#photo-page .gallery-heading h2 { font-size: clamp(46px,6vw,82px); font-style: italic; }
.gallery-heading > p { font-size: 14px; line-height: 1.7; color: var(--snow-muted); }
.media-gallery { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 36px; align-items: start; }
.gallery-rail { display: flex; flex-direction: column; gap: 20px; max-height: var(--gallery-stage-height, 460px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #586571 #172129; padding: 4px 8px 4px 4px; }
.gallery-thumb { flex-shrink: 0; appearance: none; border: 1px solid #44515b; padding: 5px; text-align: left; background: transparent; color: var(--bg); cursor: pointer; min-width: 0; width: 100%; }
.gallery-thumb[aria-pressed="true"] { border-color: #e4a598; background: #23303a; }
.gallery-thumb:hover { border-color: #cbd3d8; }
.gallery-thumb:focus-visible, .gallery-controls button:focus-visible { outline: 2px solid #e4a598; outline-offset: 4px; }
.gallery-thumb > img, .gallery-thumb > .gallery-placeholder { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gallery-thumb-label { display: block; padding: 10px 7px 8px; font: 13px/1.5 var(--font-reading); }
.gallery-thumb-type { display: block; margin-bottom: 3px; font: 9px/1.5 var(--font-body); letter-spacing: .14em; color: #c2cbd2; }
.gallery-viewer { min-width: 0; }
.gallery-stage { aspect-ratio: 16/10; display: grid; place-items: center; background: #080e13; border: 1px solid #44515b; overflow: hidden; }
.gallery-stage > .gallery-placeholder, .gallery-media { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-placeholder { position: relative; overflow: hidden; isolation: isolate; background: #26343e; }
.gallery-tone-1 { background: #343a3d; }
.gallery-tone-2 { background: #394843; }
.gallery-placeholder::before { content: ''; position: absolute; inset: 12%; border: 1px solid #ffffff18; transform: rotate(-12deg); z-index: -1; }
.gallery-placeholder::after { content: ''; position: absolute; inset: 25% -20%; border-block: 1px solid #ffffff13; transform: rotate(-30deg); z-index: -1; }
.gallery-placeholder-index { position: absolute; top: 4%; right: 7%; color: #ffffff13; font: italic clamp(100px,18vw,260px)/1 var(--font-display); letter-spacing: -.07em; }
.gallery-thumb .gallery-placeholder-index { font-size: 66px; }
.gallery-placeholder-note { position: absolute; inset: auto 8% 10%; }
.gallery-placeholder-note .kicker { color: #c9d1d7; font-size: 10px; }
.gallery-placeholder-title { display: block; font: italic clamp(28px,4vw,55px)/1.13 var(--font-display); max-width: 16ch; margin-top: 15px; }
.gallery-placeholder-label { display: inline-block; margin-top: 24px; padding-top: 10px; border-top: 1px solid #ffffff40; font: 11px/1.5 var(--font-body); color: #c9d1d7; }
.gallery-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-top: 22px; }
.gallery-count { color: #e4a598; font-size: 11px; letter-spacing: .1em; }
.gallery-caption { margin-top: 10px; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-controls button { width: 44px; height: 44px; border: 1px solid #586571; background: transparent; color: white; font-size: 22px; cursor: pointer; }
.gallery-controls button:hover { background: #26343e; }
.gallery-controls button:disabled { opacity: .35; cursor: default; }
.gallery-source-links { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 28px; margin-top: 30px; border-top: 1px solid #44515b; font-size: 12px; color: var(--snow-muted); }
.gallery-source-links a { padding-block: 8px; }
.gallery-load-error { padding: 24px; font-size: 16px; line-height: 1.7; }
@media (max-width: 800px) {
 .media-gallery { grid-template-columns: 150px minmax(0,1fr); gap: 22px; }
 .gallery-stage { aspect-ratio: 4/3; }
}
@media (max-width: 600px) {
 .gallery-heading { display: block; }
 .gallery-heading > p { margin-top: 20px; }
 .media-gallery { display: flex; flex-direction: column; gap: 22px; }
 .gallery-rail { max-height: none; overflow-y: hidden; flex-direction: row; gap: 10px; width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #586571 #172129; padding: 5px 4px 8px; }
 .gallery-thumb { flex: 0 0 120px; }
 .gallery-thumb-label { font-size: 11px; padding-inline: 3px; }
 .gallery-thumb .gallery-placeholder-index { font-size: 46px; }
 .gallery-viewer { width: 100%; }
 .gallery-placeholder-title { font-size: 29px; }
 .gallery-placeholder-note .kicker { font-size: 8px; }
 .gallery-placeholder-label { margin-top: 16px; font-size: 10px; }
 .gallery-caption { font-size: 13px; }
 .gallery-bottom { gap: 12px; }
}


.gallery-stage > picture.gallery-media { display: block; }
.gallery-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb > img.gallery-thumb-contain { object-fit: contain; background: #080e13; }