/* Expandable photos (loads after style.css) */
button.ptile-img{ display:block; width:100%; padding:0; font:inherit; cursor:zoom-in; border:1px solid #dcdad2; transition:box-shadow .15s, transform .15s; }
button.ptile-img:hover{ box-shadow:0 8px 22px rgba(27,80,91,.16); transform:translateY(-2px); }
button.ptile-img:focus-visible{ outline:3px solid #00AEEF; outline-offset:3px; }
/* small "expand" badge in the corner of each photo */
button.ptile-img::after{
  content:""; position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(22,29,31,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/18px no-repeat;
}

.xp{ position:fixed; inset:0; z-index:200; display:none; flex-direction:column; background:rgba(12,20,22,.985); color:#fff; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.xp.open{ display:flex; }
.xp-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; }
.xp-title{ font-weight:700; font-size:16px; letter-spacing:.02em; }
.xp-x{ flex:none; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.xp-x:hover{ background:rgba(255,255,255,.3); }
.xp-x:focus-visible, .xp-nav:focus-visible{ outline:3px solid #9fd6c3; outline-offset:2px; }
.xp-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 14px 22px; }
.xp-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; background:#fff; user-select:none; min-width:0; }
.xp-nav{ flex:none; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:34px; line-height:1; cursor:pointer; display:grid; place-items:center; padding-bottom:4px; }
.xp-nav:hover{ background:rgba(255,255,255,.3); }
@media (max-width:700px){
  .xp-stage{ position:relative; padding:0 8px 18px; }
  .xp-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; background:rgba(12,20,22,.55); }
  .xp-prev{ left:12px; } .xp-next{ right:12px; }
}