.photo-home { background: #f8f4ec; color: #1f1b16; }
.photo-page { max-width: 1128px; margin: 0 auto; padding: 56px 28px 88px; font-family: Lato, sans-serif; }
.photo-page h1, .photo-page h2, .photo-page h3 { font-family: 'Playfair Display', serif; font-weight: 400; }
.photo-intro { margin-bottom: 40px; }
.photo-intro h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1.12; font-style: italic; margin: 0 0 24px; }
.photo-intro p { max-width: 48ch; line-height: 1.7; font-size: 18px; }
.photo-page p { line-height: 1.65; }
.photo-sharing-note{max-width:76ch;margin-bottom:20px;font-size:15px;color:rgb(31 27 22 / .8)}
.photo-sharing-note p{margin:0}
.photo-sharing-note p+p{margin-top:8px;font-weight:400}
.photo-format-help{margin-top:8px}
.photo-format-help summary{display:list-item;min-height:44px;padding-block:11px;cursor:pointer;font-size:14px}
.photo-format-help .photo-guidance{margin:0 0 16px}
.photo-page [data-upload-success] a,.photo-page [data-gallery-refresh] a,.photo-viewer-tools a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.photo-page button, .photo-page input, .photo-page select { font: inherit; }
.photo-page button, .photo-picker label { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 9999px; background: #1f1b16; color: #f8f4ec; border: 1px solid #1f1b16; cursor: pointer; }
.photo-page button:hover, .photo-picker label:hover { background: #5a6b4a; border-color: #5a6b4a; }
.photo-page button:disabled { opacity: .5; cursor: default; }
.photo-page input:not([type=hidden]):not([type=file]), .photo-page select { min-height: 44px; min-width: 0; padding: 8px 12px; border: 1px solid rgb(31 27 22 / .55); border-radius: 8px; background: #f8f4ec; color: #1f1b16; caret-color: #5a6b4a; }
.photo-page a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.photo-page :focus-visible { outline: 2px solid #5a6b4a; outline-offset: 4px; }
.photo-page ::selection { background: rgb(90 107 74 / .25); color: #1f1b16; }
.photo-page [hidden] { display: none !important; }
.photo-skip { position: absolute; transform: translateY(-200px); padding: 12px; background: #f8f4ec; z-index: 50; }
.photo-skip:focus { transform: none; }
.photo-drop { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 30px; border: 1px dashed #5a6b4a; border-radius: 12px; }
.photo-drop.is-dragging { border-style: solid; background: rgb(90 107 74 / .10); }
.photo-drop h2 { font-size: 30px; margin: 0 0 12px; }
.photo-drop p { margin: 0; max-width: 44ch; }
.photo-picker { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 330px; }
.photo-picker label { display: none; }
.photo-picker input { max-width: 100%; }
.photo-upload.is-enhanced .photo-picker { flex: 0 0 auto; }
.photo-upload.is-enhanced .photo-picker label { display: inline-flex; }
.photo-upload.is-enhanced .photo-picker input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.photo-upload.is-enhanced .photo-picker:focus-within label { outline: 2px solid #5a6b4a; outline-offset: 4px; }
.photo-upload.is-enhanced [data-start-upload] { display: none; }
.photo-guidance { font-size: 13px; color: rgb(31 27 22 / .72); max-width: 88ch; margin: 12px 0 0; }
.photo-queue { border-top: 1px solid rgb(31 27 22 / .2); margin-top: 24px; padding-top: 16px; }
.photo-queue-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.photo-queue ul { list-style: none; padding: 0; max-height: 260px; overflow: auto; scrollbar-color: #5a6b4a #f8f4ec; }
.photo-queue li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid rgb(31 27 22 / .15); font-size: 14px; }
.photo-queue li span:first-child { overflow-wrap: anywhere; }
.photo-queue li.is-error { color: #7e4038; }
.photo-queue progress { display: block; width: 100%; height: 5px; margin-top: 7px; accent-color: #5a6b4a; }
#photo-gallery { margin-top: 64px; scroll-margin-top: 32px; }
.photo-gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.photo-gallery-heading h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.2; margin: 0 0 8px; overflow-wrap: anywhere; }
.photo-gallery-heading p { font-size: 14px; color: rgb(31 27 22 / .72); margin: 0; font-variant-numeric: tabular-nums; }
.photo-filter { display: flex; align-items: center; gap: 10px; max-width: 50%; }
.photo-filter select { max-width: 280px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-tile { min-width: 0; }
.photo-open { display: block; overflow: hidden; border-radius: 8px; background: rgb(31 27 22 / .06); }
.photo-open img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: filter 160ms ease-out; }
.photo-open:hover img { filter: brightness(.91); }
.photo-empty { border-block: 1px solid rgb(31 27 22 / .2); padding: 48px 0; }
.photo-empty h3 { font-size: 30px; margin: 0 0 12px; }
.photo-help { font-size: 14px; color: rgb(31 27 22 / .72); margin-top: 32px; }
.photo-continuation { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin: 36px 0; font-variant-numeric: tabular-nums; }
.photo-continuation a { display: inline-flex; align-items: center; min-height: 44px; }
.photo-owner { border-block: 1px solid rgb(31 27 22 / .2); padding: 16px 0; margin-bottom: 24px; }
.photo-owner summary, .photo-manage summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px 0; }
.photo-owner p { max-width: 65ch; }
.photo-owner form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0; }
.photo-owner input { flex: 1 1 200px; }
.photo-manage { font-size: 13px; }
.photo-manage form { display: grid; gap: 8px; margin-bottom: 12px; }
.photo-manage select { width: 100%; }
.photo-page .photo-remove { color: #7e4038; border-color: #7e4038; background: transparent; }
.photo-page .photo-remove:hover { background: rgb(217 167 156 / .2); }
.photo-access { max-width: 460px; display: grid; gap: 16px; }
.photo-viewer { width: min(1200px, calc(100% - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; padding: 16px 24px; background: #f8f4ec; color: #1f1b16; border: 0; border-radius: 12px; margin: auto; }
.photo-viewer[open] { display: flex; flex-direction: column; }
.photo-viewer::backdrop { background: rgb(31 27 22 / .85); }
.photo-viewer-tools { display: flex; align-items: center; justify-content: flex-end; gap: 24px; flex: 0 0 auto; }
.photo-viewer-tools h2 { font: 16px Lato, sans-serif; margin-right: auto; font-variant-numeric: tabular-nums; }
.photo-viewer-image { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 0; }
.photo-viewer-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.photo-viewer-nav { display: flex; justify-content: space-between; gap: 24px; }
.photo-viewer-nav button { min-width: 110px; }
@media (max-width: 900px) { .photo-page { padding-top: 40px; } .photo-drop { align-items: flex-start; flex-direction: column; } .photo-picker { flex-basis: auto; } .photo-filter { max-width: 55%; } .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .photo-page { padding: 32px 22px 64px; } .photo-intro { margin-bottom: 28px; } .photo-intro p { font-size: 16px; } .photo-drop { padding: 24px 20px; gap: 20px; } .photo-drop h2 { font-size: 28px; } .photo-guidance { font-size: 12px; } .photo-gallery-heading { align-items: stretch; flex-direction: column; gap: 20px; } .photo-filter { max-width: none; flex-wrap: wrap; } .photo-filter select { flex: 1; max-width: 100%; width: 100px; } .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .photo-viewer { width: calc(100% - 16px); height: calc(100dvh - 16px); padding: 12px; } .photo-viewer-tools { gap: 12px; } .photo-viewer-tools h2 { font-size: 14px; } .photo-viewer-tools a { font-size: 14px; } .photo-viewer-tools button { padding-inline: 12px; } .photo-queue li { grid-template-columns: 1fr; gap: 6px; } .photo-queue-heading { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .photo-open img { transition: none; } }