.anniversary { position: relative; color: #18302d; }
.anniversary-eyebrow { color: #99732e; font-weight: 700; letter-spacing: .25em; }
.anniversary h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 650; margin: .4rem 0 .7rem; line-height: 1.15; }
.anniversary > p { max-width: 850px; margin-bottom: 1rem; }
.photo-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 .5rem; }
.photo-toolbar button, .photo-editor button { border: 1px solid #9baaa6; border-radius: .5rem; padding: .45rem .8rem; background: white; cursor: pointer; }
.photo-toolbar button:hover, .photo-editor button:hover { background: #e3eeea; }
.photo-toolbar output { min-width: 4rem; text-align: center; }
.photo-toolbar span { margin-left: auto; font-size: .9rem; }
.photo-hint { font-size: .85rem; color: #53635f; }
.photo-viewport { width: 100%; max-height: 75vh; overflow: auto; border-radius: .8rem; background: #18302d; border: 1px solid #bbc8c4; }
.photo-stage { width: 100%; position: relative; cursor: crosshair; }
.photo-stage img { display: block; width: 100%; max-width: none; height: auto; user-select: none; }
.photo-marker { position: absolute; width: 2.2%; min-width: 18px; aspect-ratio: 1; border: 1px solid #fff8cf; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px #18302d99; transform: translate(-50%, -50%); cursor: pointer; padding: 0; }
.photo-marker:hover, .photo-marker:focus-visible { background: #fff7ba44; outline: 2px solid #fff8cf; outline-offset: 2px; }
.photo-editor { position: absolute; z-index: 10; width: min(290px, 100%); padding: 1rem; background: #fff; border: 1px solid #a8b7af; border-radius: .7rem; box-shadow: 0 8px 30px #0004; }
.photo-editor[hidden] { display: none; }
.photo-editor label { display: block; font-weight: 600; margin-bottom: .4rem; }
.photo-editor input { width: 100%; border: 1px solid #82958e; border-radius: .3rem; padding: .5rem; font-size: 16px; }
.photo-editor-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.photo-editor button[type=submit] { background: #214c40; color: white; }
.photo-editor button:disabled { opacity: .5; cursor: wait; }
.photo-editor [role=alert] { color: #a32222; margin-top: .5rem; font-size: .9rem; }
.photo-directory-link { color: #214c40; text-decoration: underline; text-underline-offset: .2em; }
.photo-directory-link:hover { color: #805c20; }
.photo-directory { margin: auto; width: min(36rem, calc(100% - 2rem)); max-height: 80dvh; overflow-y: auto; padding: 1.5rem; border: 1px solid #bbc8c4; border-radius: .8rem; background: #fff; color: #18302d; box-shadow: 0 16px 60px #0004; }
.photo-directory::backdrop { background: #10251fcc; }
.photo-directory-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.photo-directory h2 { font-size: 1.3rem; font-weight: 650; }
.photo-directory button { border: 1px solid #9baaa6; border-radius: .5rem; padding: .45rem .8rem; background: white; cursor: pointer; }
.photo-directory button:hover { background: #e3eeea; }
.photo-directory p { margin: 1rem 0; color: #53635f; }
.photo-directory ul { list-style: none; margin: 0; padding: 0; }
.photo-directory li + li { border-top: 1px solid #e3eeea; }
.photo-directory li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; overflow-wrap: anywhere; }
.photo-directory li.is-identified { color: #214c40; font-weight: 600; }
.photo-directory-identified { flex-shrink: 0; }