/* Photo presentation: full artwork, stable frames, native scrolling and pinch zoom. */
.show-cover {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: #20271f;
}
.show-cover img { width: 100%; height: 100%; object-fit: cover; }
.show-cover.cover-art img { object-fit: contain; }
.show-cover.cover-2024 img { object-position: 50% 0%; }
.show-cover.cover-2025 img { object-position: 50% 30%; }
.show-card:hover .show-cover img { filter: brightness(1.04); }
.show-detail-cover { margin: 0 8%; background: #ebe7dc; border-radius: 8px; overflow: hidden; }
.show-detail-cover img { width: 100%; height: min(58vw, 540px); object-fit: contain; }
.photo-page { max-width: 1480px; margin: auto; padding-top: 28px; padding-bottom: 50px; }
.photo-page h1 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 24px; }
.photo-viewer { touch-action: pan-y pinch-zoom; border-radius: 8px; overflow: hidden; }
.photo-viewer:focus-visible { outline: 3px solid #b48336; outline-offset: 5px; }
.photo-frame { position: relative; height: min(70svh, 780px); background: #e7e4db; overflow: hidden; }
.photo-page .photo-frame img {
  width: 100%; height: 100%; max-height: none; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.photo-frame.is-ready .photo-layer { position: absolute; inset: 0; transition: opacity 320ms ease; }
.photo-page figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 18px; font-size: 12px; }
[data-photo-counter] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.photo-status:not(.has-error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.photo-status.has-error { font-size: 13px; color: #943d2b; margin-top: 12px; }
.photo-page .photo-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; margin-top: 18px; }
.photo-nav .underlined { font-size: 14px; min-height: 44px; display: flex; align-items: center; width: fit-content; }
.photo-nav .photo-prev { grid-column: 1; grid-row: 1; justify-self: start; }
.photo-nav .photo-back { grid-column: 2; grid-row: 1; justify-self: center; }
.photo-nav .photo-next { grid-column: 3; grid-row: 1; justify-self: end; }
.hero-controls { position: absolute; left: 8%; right: 5%; bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 4; }
.hero-controls .slide-select, .hero-controls .hero-caption { position: static; }
.hero-controls .hero-caption { margin: 0; }
@media (max-width: 800px) {
  .show-detail-cover { margin: 0 6%; }
  .photo-page { padding-top: 22px; padding-bottom: 35px; }
  .photo-page h1 { font-size: 27px; margin-bottom: 18px; }
  .photo-frame { height: min(62svh, 580px); }
  .photo-page figcaption { padding: 12px; font-size: 11px; }
  .photo-page .photo-nav { gap: 10px; }
  .photo-page .photo-nav .underlined { font-size: 13px; }
  /* The photograph gets its own region: no title, button or flag covers a face. */
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-height: none; background: #30392d; margin: 0 10px; border-radius: 14px; }
  .home-hero > .garland { position: relative; inset: auto; grid-row: 1; height: 36px; overflow: hidden; opacity: .85; }
  .home-hero > .garland svg { width: 100%; min-width: 0; height: 36px; display: block; }
  .home-hero > .hero-visual { position: relative; inset: auto; grid-row: 2; aspect-ratio: 4 / 3; width: 100%; background: #273024; }
  .home-hero .hero-visual::after { display: none; }
  .home-hero .hero-visual .hero-img,
  .home-hero .hero-visual .hero-layer { object-fit: contain; object-position: center; width: 100%; height: 100%; }
  .home-hero > .hero-controls { position: relative; inset: auto; grid-row: 3; gap: 12px; padding: 2px 22px 0; min-width: 0; }
  .hero-controls .slide-select { flex: 0 0 auto; gap: 2px; }
  .hero-controls .slide-select button { width: 44px; min-width: 44px; min-height: 44px; padding: 16px 4px; }
  .hero-controls .hero-caption { font-size: 11px; line-height: 1.4; text-align: right; max-width: 19ch; color: #e4e5d9; }
  .home-hero > .hero-copy { position: relative; inset: auto; grid-row: 4; width: auto; padding: 10px 22px 26px; }
  .home-hero .hero-copy h1 { font-size: clamp(40px, 9vw, 58px); line-height: 1.02; }
  .home-hero .hero-copy p { margin: 14px 0 20px; font-size: 15px; line-height: 1.5; max-width: none; }
  .home-hero .hero-copy .button { font-size: 14px; padding: 12px 22px; min-height: 46px; }
}
@media (max-width: 520px) {
  .photo-page .photo-nav a:nth-child(2) { order: initial; width: fit-content; margin-top: 0; text-align: center; }
  .photo-frame { height: min(60svh, 480px); }
  .photo-page h1 { font-size: 25px; }
  .photo-page figcaption { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-frame.is-ready .photo-layer { transition: none; }
}

/* Keep the full strand inside its viewport, including the central flags. */
.home-hero > .garland svg{min-width:0;display:block;width:100%;height:100%}
@media(min-width:801px){
 .home .home-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr) auto;gap:0 36px;width:calc(100% - 36px);max-width:1500px;margin:0 auto;height:auto;min-height:0;max-height:none;padding:0 42px 24px;background:#30392d}
 .home-hero > .garland{position:relative;inset:auto;grid-column:1 / -1;grid-row:1;height:auto;aspect-ratio:1440 / 130;overflow:visible;opacity:.85}
 .home .home-hero > .hero-copy{position:relative;inset:auto;grid-column:1;grid-row:2;align-self:center;width:auto;padding:24px 0 40px}
 .home .home-hero .hero-copy h1{font-size:clamp(48px,4.7vw,76px)}
 .home .home-hero .hero-copy p{font-size:18px;margin:24px 0 30px;max-width:28ch}
 .home-hero > .hero-visual{position:relative;inset:auto;grid-column:2;grid-row:2;aspect-ratio:800 / 646;max-height:600px;width:100%;align-self:center;overflow:hidden;border-radius:8px;background:#273024}
 .home-hero .hero-visual::after{display:none}
 .home-hero .hero-visual .hero-img,.home-hero .hero-visual .hero-layer{width:100%;height:100%;object-fit:contain;object-position:center;animation:none;transform:none}
 .home-hero > .hero-controls{position:relative;inset:auto;grid-column:2;grid-row:3;padding-top:18px;min-height:44px}
 .home-hero .hero-caption{font-size:12px}
}