/* Photography layer for the existing BKPS walking-tour site. */
:root { --photo-ink: #111410; --photo-paper: #f4f0e8; --photo-brass: #d6c4a5; }
/* Every walk remains in the page flow on phones as well as desktop. */
#cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
#cards .card { min-width: 0; }
/* Core content must not depend on an animation or an observer making it visible. */
.reveal, .reveal.in { opacity: 1; transform: none; animation: none; transition: none; }
.topbar { background: rgba(17,20,16,.97); border-color: rgba(244,240,232,.14); }
.brand, .nav a { color: var(--photo-paper); }
.brand:hover, .nav a:hover { color: var(--photo-paper); }
.brand svg { background: var(--photo-paper); padding: 2px; }
.nav a:hover { border-color: var(--photo-brass); }
.topbar .chip { background: transparent; color: var(--photo-paper); border-color: rgba(244,240,232,.42); }
.topbar .chip:hover { background: #30332c; }
.topbar .chip[aria-pressed="true"] { background: var(--photo-brass); color: var(--photo-ink); }

.hero.photo-led { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); align-items: stretch; min-height: min(820px,100svh); background: var(--photo-ink); color: var(--photo-paper); isolation: isolate; }
.hero.photo-led .hero-inner { grid-column: 1; grid-row: 1; width: 100%; max-width: 700px; margin: 0 0 0 auto; padding: clamp(110px,12vh,160px) clamp(24px,5vw,76px) 64px; align-self: center; }
.hero.photo-led h1 { font-size: clamp(3.3rem,5.8vw,6.2rem); line-height: 1.02; letter-spacing: -.025em; }
.hero.photo-led h1 em { color: var(--photo-brass); background: none; padding: 0; }
.hero.photo-led .eyebrow { color: #d6c4a5; font-size: .67rem; letter-spacing: .13em; }
.hero.photo-led .eyebrow::before { background: var(--photo-brass); }
.hero.photo-led .lede { color: #d7d9d1; max-width: 30em; font-size: clamp(1.08rem,1.5vw,1.24rem); line-height: 1.55; margin-top: 24px; }
.hero.photo-led .lede strong { background: none; color: var(--photo-paper); padding: 0; }
.hero.photo-led .facts { color: #c5c8bd; font-size: .66rem; line-height: 1.5; gap: 8px 16px; margin: 24px 0 28px; }
.hero.photo-led .facts strong { color: var(--photo-paper); }
.hero.photo-led .hero-new { background: transparent; color: var(--photo-brass); box-shadow: none; border: 1px solid #7b7e6f; border-radius: 3px; padding: 8px 10px; font-size: .62rem; letter-spacing: .08em; margin-bottom: 26px; }
.hero.photo-led .hero-new:hover { background: #282c24; color: var(--photo-paper); }
.hero.photo-led .btn { border-radius: 3px; box-shadow: none; padding: 15px 17px; font-size: .72rem; line-height: 1.35; }
.hero.photo-led .btn-primary { background: var(--photo-paper); color: var(--photo-ink); border-color: var(--photo-paper); }
.hero.photo-led .btn-primary:hover { background: #d6c4a5; border-color: #d6c4a5; box-shadow: none; }
.hero.photo-led .btn-ghost { color: var(--photo-paper); background: transparent; border-color: #85897b; }
.hero.photo-led .btn-ghost:hover { background: #30332c; box-shadow: none; }
.hero.photo-led .near { background: #23271f; border-color: #777d6b; border-radius: 3px; box-shadow: none; color: var(--photo-paper); }
.hero.photo-led .near b { color: var(--photo-brass); }
.hero-photo { grid-column: 2; grid-row: 1; position: relative; min-width: 0; min-height: 690px; margin: 0; overflow: hidden; background: #25291f; }
.hero-photo img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.hero-photo figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 22px; background: rgba(17,20,16,.92); color: #e0e3d8; font: 400 .64rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero.photo-led.has-photo-error { grid-template-columns: 1fr; }
.hero.photo-led.has-photo-error .hero-photo { display: none; }
.hero.photo-led.has-photo-error .hero-inner { max-width: 900px; margin-inline: auto; }

.photo-collection { background: #171b15; color: var(--photo-paper); padding: clamp(38px,5vw,72px) 0; }
.photo-collection-inner { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px,5vw,64px); }
.photo-collection-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 28px; }
.photo-collection .eyebrow { color: var(--photo-brass); font-size: .65rem; }
.photo-collection .eyebrow::before { background: var(--photo-brass); }
.photo-collection h2 { margin: 0; font-size: clamp(2rem,4.2vw,3.2rem); max-width: 18em; }
.photo-count { margin: 0 0 2px; color: #d1d5c8; font: 400 .65rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.photo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.photo-tile { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid #5b6151; border-radius: 2px; background: #2a3023; color: var(--photo-paper); text-decoration: none; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.photo-tile:hover img { transform: scale(1.035); }
.photo-tile:hover { color: var(--photo-paper); border-color: var(--photo-brass); }
.photo-tile-label { position: absolute; inset: auto 10px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 9px; background: rgba(17,20,16,.92); font: 400 .58rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.photo-collection-note { margin: 16px 0 0; color: #c9cdbe; font-size: .96rem; }
.tour-photo-frame.photo-unavailable::after { content: "Photograph unavailable"; position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #e0e3d8; font: 400 .7rem/1.5 var(--mono); text-align: center; }
.tour-photo-frame.photo-unavailable img { visibility: hidden; }
.photo-tile.photo-unavailable .photo-tile-label { z-index: 1; }

.card-visual { aspect-ratio: 16/10; width: calc(100% + 40px); margin: -20px -20px 6px; border-radius: 16px 16px 0 0; overflow: hidden; background: #23271f; position: relative; }
.card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .card-visual + .you { z-index: 2; }
.walk-visual { width: 100%; aspect-ratio: 16/8; max-height: 340px; margin: 0 0 28px; overflow: hidden; border-radius: 3px; background: #23271f; position: relative; }
.walk-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

.photo-dialog { max-width: min(1240px,calc(100vw - 32px)); width: 100%; max-height: calc(100svh - 32px); padding: 0; border: 1px solid #747c65; border-radius: 3px; background: #10130e; color: var(--photo-paper); }
.photo-dialog::backdrop { background: rgba(0,0,0,.9); }
.photo-dialog-shell { padding: 18px; }
.photo-dialog-head, .photo-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.photo-dialog-head { margin-bottom: 14px; }
.photo-dialog-title, .photo-dialog-count { margin: 0; font: 400 .7rem/1.5 var(--mono); letter-spacing: .08em; }
.photo-dialog button, .photo-dialog a { min-height: 44px; padding: 10px 13px; border: 1px solid #747c65; border-radius: 2px; background: transparent; color: var(--photo-paper); font: 400 .7rem/1.4 var(--mono); text-decoration: none; cursor: pointer; }
.photo-dialog button:hover, .photo-dialog a:hover { background: #303728; color: #fff; }
.photo-dialog-stage { position: relative; min-height: 45svh; display: grid; place-items: center; background: #0a0c09; }
.photo-dialog-stage img { display: block; max-width: 100%; width: auto; max-height: 72svh; height: auto; object-fit: contain; }
.photo-dialog-stage[aria-busy="true"] img { opacity: .2; }
.photo-dialog-message { padding: 24px; margin: 0; font-size: 1rem; }
.photo-dialog-stage img[hidden], .photo-dialog-message[hidden] { display: none; }
.photo-dialog-foot { margin-top: 14px; flex-wrap: wrap; }
.photo-dialog-nav { display: flex; gap: 8px; }
.photo-led :focus-visible, .photo-collection :focus-visible, .photo-dialog :focus-visible { outline-color: var(--photo-paper); box-shadow: 0 0 0 5px #606a50; }
html.photo-viewer-open, html.photo-viewer-open body { overflow: hidden; }

@media (max-width: 1000px) and (min-width: 761px) {
  .hero.photo-led { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
  .hero.photo-led .hero-inner { padding-inline: 28px; }
  .hero.photo-led h1 { font-size: clamp(3.25rem,6.2vw,4.7rem); }
}
@media (max-width: 760px) {
  .hero.photo-led { display: flex; flex-direction: column; min-height: 0; padding-top: 58px; }
  .hero-photo { min-height: 0; height: clamp(220px,34svh,320px); width: 100%; order: 0; }
  .hero-photo figcaption { padding: 9px 20px; font-size: .55rem; }
  .hero.photo-led .hero-inner { max-width: 620px; margin: 0 auto; padding: 28px 24px 38px; order: 1; }
  .hero.photo-led .hero-new { margin-bottom: 20px; }
  .hero.photo-led h1 { font-size: clamp(3.15rem,11vw,4.6rem); }
  .hero.photo-led .lede { font-size: 1.05rem; margin-top: 18px; }
  .hero.photo-led .facts { margin: 20px 0 24px; }
  .hero.photo-led .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero.photo-led #start-btn { grid-column: 1 / -1; }
  .hero.photo-led .btn { font-size: .68rem; padding-inline: 12px; }
  .photo-collection-head { gap: 16px; align-items: flex-start; }
  .photo-collection h2 { font-size: 2.1rem; }
  .photo-count { font-size: .6rem; margin-top: 4px; }
  .photo-grid { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 3px 3px 16px; scrollbar-width: thin; scrollbar-color: #8a957b #22281d; }
  .photo-tile { aspect-ratio: 4/5; scroll-snap-align: start; }
  .photo-dialog { max-width: calc(100vw - 16px); max-height: calc(100svh - 16px); }
  .photo-dialog-shell { padding: 12px; }
  .photo-dialog-stage img { max-height: 66svh; }
  .photo-dialog-title { max-width: 15em; font-size: .62rem; }
  .photo-dialog-foot > a { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-tile img { transition: none; }
  .photo-tile:hover img { transform: none; }
}