.photo { margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; }
        .photo:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border-color: #cbd5e1; }
        .photo button { display: block; width: 100%; border: 0; padding: 0; background: #f8fafc; cursor: zoom-in; }
        .photo img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: top; }
        .photo.landscape img { height: auto; max-height: 220px; object-fit: contain; background: #f1f5f9; padding: 1rem; }
        .photo figcaption { padding: 1rem; font-size: 0.875rem; line-height: 1.5; color: #475569; }
        .photo figcaption strong { display: block; color: #0f172a; margin-bottom: 2px; }
        .photo figcaption small { color: #64748b; font-size: 0.75rem; }
        
        [role="tab"] { background: #fff; border: 1px solid #e2e8f0; color: #475569; padding: 0.6rem 1.2rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; transition: all 0.2s; }
        [role="tab"]:hover { border-color: #94a3b8; }
        [role="tab"][aria-selected="true"] { background: #155e75; border-color: #155e75; color: #fff; }
        .tab-panel[hidden] { display: none !important; }

        .viewer[hidden] { display: none !important; }
        .viewer { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, 0.95); color: #fff; display: flex; flex-direction: column; padding: 1.5rem; backdrop-filter: blur(8px); }
        .viewer-bar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin-bottom: 1rem; }
        .viewer-title { font-size: 1.1rem; font-family: 'Playfair Display', serif; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .viewer button { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.5rem; padding: 0.5rem 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s; }
        .viewer button:hover { background: rgba(255,255,255,0.2); }
        .viewer-stage { flex-grow: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; gap: 1rem; }
        .viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0.5rem; }
        .viewer-note { font-size: 0.875rem; color: #cbd5e1; text-align: center; padding: 1rem 0; min-height: 3rem; }
        .nav { align-self: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 3rem; height: 3rem; border-radius: 9999px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; font-size: 1.5rem; }
        .nav.prev { left: 1rem; }
        .nav.next { right: 1rem; }
        
        @media(max-width:760px) {
            .viewer { padding: 0.5rem; }
            .nav { width: 2.5rem; height: 2.5rem; top: auto; bottom: 0; transform: none; }
            .nav.prev { left: 2rem; }
            .nav.next { right: 2rem; }
            .viewer-stage img { max-height: calc(100% - 3rem); }
        }
    
        body.modal-open { overflow: hidden; }
        .miles-photo img { object-fit: contain; background: #f1f5f9; }
        .miles-photo.landscape img { padding: 0; width: 100%; height: 260px; max-height: none; object-fit: cover; }
        .miles-photo[hidden] { display: none !important; }
        #viewer .viewer-title { min-width: 0; }
        #viewer .viewer-bar { gap: 12px; }
        #viewer-close { flex-shrink: 0; }
        #viewer .viewer-stage img { max-width: calc(100% - 7rem); }
        @media(max-width:760px) { #viewer .viewer-stage img { max-width: 100%; } }

/* Native full-screen image dialog. */
dialog.viewer { margin: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; box-sizing: border-box; }