/* Photo journal: introduction */
.photo-page { background: #faf8f0; }
.photo-page .about-label { color: #897039; font-size: 12px; letter-spacing: .15em; margin-bottom: 16px; }
.photo-hero { padding: 48px 0 60px; background: radial-gradient(ellipse at top right, #e8dbad70, transparent 65%), #f5f0df; border-bottom: 1px solid #ded4b6; }
.photo-hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 65px; }
.photo-hero nav { display: flex; flex-wrap: wrap; gap: 13px; font-size: 13px; color: #6e775f; margin-bottom: 40px; }
.photo-hero nav a { color: #234b37; }
.photo-hero h1 { font-size: clamp(38px, 4.5vw, 66px); color: #173f2e; line-height: 1.12; letter-spacing: -.045em; margin: 0 0 22px; }
.photo-hero h1 em { font-family: Georgia, serif; font-weight: 400; color: #7e713c; }
.photo-page .photo-hero p { font-size: 17px; line-height: 1.85; max-width: 460px; color: #627064; }
.photo-explore { display: inline-flex; gap: 30px; align-items: center; color: #234b37; border-bottom: 1px solid #bca66a; padding: 8px 0; margin-top: 8px; font-size: 15px; font-weight: 600; }
.photo-hero-frame { margin: 0; padding: 12px; border: 1px solid #d4c49c; background: #fffdf5; border-radius: 70px 12px 12px 12px; box-shadow: 0 20px 50px #1d392512; }
.photo-hero-frame img { display: block; width: 100%; height: auto; border-radius: 60px 6px 6px 6px; }
.photo-hero-frame figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 18px 6px 7px; color: #7b714f; font-size: 11px; letter-spacing: .04em; }
/* Album navigation */
.photo-collection-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 28px 0; border-bottom: 1px solid #ddd6c1; }
.photo-collection-nav > span { margin-right: auto; color: #8a794e; font-size: 11px; letter-spacing: .12em; }
.photo-collection-nav a { padding: 10px 18px; border: 1px solid #d9cfb0; border-radius: 30px; background: #fffcf1; font-size: 14px; color: #31513d; }
.photo-collection-nav a:hover { background: #194832; border-color: #194832; color: #fff2c2; }
/* Four-column photo collections */
.photo-section { padding: 55px 0 12px; }
.photo-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 26px; }
.photo-page .photo-heading h2 { font-size: clamp(28px, 3vw, 40px); margin: 0; letter-spacing: -.035em; }
.photo-page .photo-guide { font-size: 13px; color: #7c806c; line-height: 1.7; margin: 0; border-left: 1px solid #cbbb90; padding-left: 20px; flex-shrink: 0; }
.photo-collection { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.photo-tile { display: block; width: 100%; padding: 8px; border: 1px solid #dfd7c0; border-radius: 12px; background: #fffdf7; text-align: left; cursor: zoom-in; box-shadow: 0 6px 20px #203c2707; transition: transform .25s, box-shadow .25s, border-color .25s; }
.photo-image { display: block; position: relative; overflow: hidden; border-radius: 7px; background: #efeada; }
.photo-image img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s; }
.photo-zoom { display: grid; place-items: center; position: absolute; bottom: 10px; right: 10px; width: 33px; height: 33px; border: 1px solid #fff7; border-radius: 50%; background: #143e30db; color: #fff2c5; font-size: 19px; }
.photo-tile-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 5px 6px; color: #64715b; font-size: 10px; letter-spacing: .08em; }
.photo-number { color: #a08b59; font-family: Georgia, serif; font-size: 15px; }
.photo-tile:hover { transform: translateY(-4px); border-color: #bea669; box-shadow: 0 16px 32px #203c2712; }
.photo-tile:hover img { transform: scale(1.035); }
.photo-tile:focus-visible { outline: 3px solid #a68b43; outline-offset: 4px; }
/* Closing invitation and full-size image viewer */
.photo-end { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 55px 0 65px; padding: 35px; background: linear-gradient(115deg, #103e2c, #2e5940); border: 1px solid #bca66b; border-radius: 12px; }
.photo-end .about-label { color: #e6d298; }
.photo-page .photo-end h2 { color: #fff9e6; font-size: clamp(25px, 2.6vw, 35px); margin: 0; }
.photo-page .photo-end h2 em { color: #ead6a0; }
.photo-end a { color: #ffedb6; font-size: 15px; border-bottom: 1px solid #ddc485; padding-bottom: 7px; white-space: nowrap; }
body:has(.photo-page) .sps-lightbox { background: #fffaf0; border: 1px solid #c9ae6a; border-radius: 13px; padding: 16px; box-shadow: 0 30px 90px #0006; }
body:has(.photo-page) .sps-lightbox::backdrop { background: #061e19e8; backdrop-filter: blur(9px); }
body:has(.photo-page) .sps-lightbox img { border-radius: 6px; object-fit: contain; }
body:has(.photo-page) .sps-lightbox p { color: #355341; font-size: 14px; margin: 14px 6px 3px; }
body:has(.photo-page) .close-gallery { background: #164431; color: #fff0b9; border: 1px solid #d1b974; border-radius: 50%; width: 42px; height: 42px; }
/* Tablet and mobile */
@media (max-width: 991px) {
  .photo-hero-inner { gap: 30px; }
  .photo-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .photo-end { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767px) {
  .photo-hero { padding: 30px 0 35px; }
  .photo-hero-inner { grid-template-columns: 1fr; }
  .photo-hero nav { margin-bottom: 28px; }
  .photo-hero-frame { max-width: 560px; }
  .photo-collection-nav { gap: 8px; padding: 22px 0; }
  .photo-collection-nav > span { width: 100%; margin-bottom: 5px; }
  .photo-collection-nav a { font-size: 12px; padding: 9px 12px; }
  .photo-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .photo-guide br { display: none; }
  .photo-section { padding-top: 38px; }
  .photo-collection { gap: 12px; }
  .photo-tile { padding: 5px; }
  .photo-tile-caption { font-size: 8px; letter-spacing: .025em; padding: 11px 3px 5px; }
  .photo-zoom { width: 27px; height: 27px; right: 7px; bottom: 7px; }
  .photo-end { padding: 26px; margin: 38px 0 40px; }
}
@media (max-width: 359px) { .photo-collection { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .photo-tile, .photo-image img { transition: none; } .photo-tile:hover, .photo-tile:hover img { transform: none; } }