.photo-surface{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#e8e1d4}
.photo-surface img{display:block;width:100%;height:100%;object-fit:cover;color:transparent}
.photo-unavailable{display:none}
.photo-context-label{position:absolute;left:4px;bottom:4px;padding:2px 4px;border-radius:2px;background:#f7f5efdf;color:#7d6543;font-size:6px}
.photo-surface.failed{display:grid;place-items:center;padding:12px}
.photo-surface.failed img{display:none}
.photo-surface.failed .photo-unavailable{display:block;text-align:center;font-size:10px;line-height:1.8;color:#927e60}
.event-card.has-image{padding-left:88px}
.event-card .photo-thumb{position:absolute;inset:0 auto 0 0;width:74px;pointer-events:none;border-right:1px solid #e1d8c6}
.event-card.has-image .event-kicker>small{display:none}
.event-card.has-image h2{-webkit-line-clamp:2;max-height:37px}
.compact .event-card.has-image{padding-left:65px}
.compact .event-card .photo-thumb{width:54px}
.compact .event-card.has-image h2{-webkit-line-clamp:1;max-height:17px}
.overview-photo{display:block;width:100%;padding:0;margin-bottom:14px;text-align:left;border:1px solid #dfd5c3;border-radius:5px;overflow:hidden}
.overview-photo .photo-surface{height:105px}
.overview-photo>span:last-child{display:block;padding:7px 9px;color:#9c7e54;font-size:8px}
.detail-content{container-type:size}
.media-gallery{height:100%;min-height:0;display:flex;flex-direction:column;gap:9px}
.gallery-image{position:relative;flex:1;min-height:18px;padding:0;border:1px solid #d7cbb5;border-radius:5px;overflow:hidden}
.gallery-image .photo-surface{position:absolute;inset:0}
.gallery-image img{object-fit:contain;background:#ebe5d9}
.expand-photo{position:absolute;right:7px;bottom:6px;background:#faf7edeb;color:#725c3d;border-radius:3px;padding:2px 7px;font-size:16px}
.media-caption{font-size:10px;line-height:1.8;color:#746750;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}
.media-credit{font-size:8px;line-height:1.7;color:#a08b6b;flex-shrink:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.media-credit small{display:block;font-size:7px}
.media-credit a{text-decoration:underline;text-underline-offset:3px}
.media-controls{display:flex;align-items:center;gap:5px;flex-shrink:0;height:31px;border-top:1px solid #dfd5c2;padding-top:5px}
.media-controls>button{border:1px solid #d6c5aa;border-radius:4px;padding:5px 8px;font-size:9px;white-space:nowrap;background:#f0e8d8}
.media-controls>button.remove-photo{margin-left:auto;background:none;border-color:transparent;color:#a35345;font-size:8px}
.media-pager{display:flex;align-items:center;gap:4px;margin-right:auto;white-space:nowrap;color:#9a825f}
.media-pager button{font:22px Georgia,serif;padding:0 5px;line-height:24px}
.media-pager span{font-size:8px}
.media-empty{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;border:1px dashed #d4c4a8;border-radius:5px;background:#eee6d63b}
.media-empty>span{font:42px Georgia,serif;color:#b19a77;margin-bottom:10px}
.media-empty strong{font:16px var(--serif);font-weight:400;color:#8c7351}
.media-empty p{font-size:10px;line-height:1.7;margin:10px 0!important}
.media-empty small{font-size:8px;line-height:1.8;color:#ae9b7d}
#photo-viewer{width:min(1080px,calc(100vw - 40px));height:min(860px,calc(100dvh - 40px));max-width:none;max-height:none;padding:0;border:1px solid #cbb898;border-radius:9px;background:#f7f5ef;color:var(--ink);overflow:hidden}
#photo-viewer[open]{display:flex;flex-direction:column}
#photo-viewer::backdrop{background:#29291edb;backdrop-filter:blur(5px)}
.viewer-top{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #e0d6c4;gap:12px}
.viewer-top>span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewer-surface{flex:1;min-height:0;background:#eae4d8;position:relative}
#viewer-surface .photo-surface{position:absolute;inset:0}
#viewer-surface img{object-fit:contain}
.viewer-bottom{display:flex;align-items:center;gap:14px;padding:12px 20px;flex-shrink:0}
.viewer-bottom>button{font:32px Georgia,serif;width:32px;flex-shrink:0}
.viewer-bottom>div{flex:1;min-width:0;text-align:center}
#viewer-caption{font-size:11px;line-height:1.7;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#viewer-credit{font-size:8px;color:#a28a66;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#viewer-count{display:block;font-size:8px;color:#aa9a7f;margin-top:5px}
@container (max-height:190px){.media-gallery{gap:5px}.media-caption{-webkit-line-clamp:2;font-size:8px}.media-credit{-webkit-line-clamp:1;font-size:7px}.media-credit small{display:none}.media-empty>span,.media-empty small{display:none}.media-empty strong{font-size:12px}.media-empty p{font-size:8px;margin:5px 0!important}}
@container (max-height:110px){.media-caption,.media-credit{display:none}.media-controls{height:25px;padding-top:2px}.media-controls>button{font-size:8px;padding:3px 6px}.media-empty{padding:2px}.media-empty p{display:none}}
@media(max-width:620px){#photo-viewer{width:calc(100vw - 16px);height:calc(100dvh - 24px)}.viewer-bottom{padding:10px;gap:4px}#viewer-caption{font-size:10px}.viewer-top{height:41px}.detail-tabs button{padding-left:3px;padding-right:3px;font-size:7px}}
@media(max-height:450px){.viewer-top{height:34px}.viewer-bottom{padding:5px 12px}#viewer-caption{font-size:9px;margin:0}#viewer-count{margin-top:1px}}