/* Scoped to the photo page; shared site styles and live data stay untouched. */
.photo-drawer { --drawer-rim: #65705b; --drawer-bed: #e1dfc8; --drawer-glow: #fbf7e4; --print: #faf3e2; --print-edge: #d2c5a7; }
.drawer-intro { margin: 2rem 0 1.5rem; }
.drawer-intro h2 { font-size: clamp(1.65rem, 4vw, 2.3rem); margin-bottom: .6rem; }
.drawer-intro .eyebrow { color: var(--rust); }
.drawer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: .85rem 0; }
.drawer-toolbar p { margin: 0; font-size: .82rem; }
.drawer-button { color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); border-radius: 3px; padding: .55rem .8rem; font: inherit; font-size: .8rem; min-height: 44px; cursor: pointer; }
.drawer-button:hover:not(:disabled) { background: var(--paper-deep); }
.drawer-button:disabled { opacity: .5; cursor: default; }
.drawer-button:focus-visible, .drawer-print:focus-visible { outline: 3px solid var(--rust); outline-offset: 5px; }
.drawer-hint { font-size: .78rem; color: var(--ink-soft); margin: 0 0 1.3rem; }
.drawer-board { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 30px; padding: 36px 30px; border: 12px solid var(--drawer-rim); border-bottom-width: 22px; border-radius: 7px; background: radial-gradient(ellipse at center, var(--drawer-glow), var(--drawer-bed)); box-shadow: inset 0 0 25px #504c2520, 0 5px 0 #262a2114; }
.drawer-print { position: relative; min-width: 0; align-self: start; display: block; width: 100%; text-align: left; padding: 10px 10px 15px; background: var(--print); color: var(--ink); border: 1px solid var(--print-edge); border-radius: 2px; box-shadow: 2px 5px 8px #292b2433; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--turn, 0deg)); font: inherit; cursor: grab; user-select: none; touch-action: pan-y; }
@media (hover:hover) and (pointer:fine) and (min-width:641px) { .drawer-print { touch-action: none; } }
.drawer-print.is-dragging { cursor: grabbing; box-shadow: 4px 9px 14px #292b2440; }
.drawer-print-header { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 9px; color: var(--ink-soft); font-size: 11px; letter-spacing: .07em; }
.drawer-print-image { display: block; position: relative; background: var(--print); }
.drawer-print img { display: block; width: 100%; height: auto; }
.drawer-print .image-failed { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: #f5eddc; font-size: .78rem; text-align: center; }
.drawer-print-title { display: block; font-family: Georgia, serif; font-style: italic; padding-top: 11px; overflow-wrap: anywhere; }
.drawer-print-location { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 4px; overflow-wrap: anywhere; }
.drawer-board.is-tidy .drawer-print { transform: none; cursor: pointer; }
.drawer-pages, .viewer-navigation { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 1.3rem; font-size: .78rem; }
.drawer-note { font-size: .76rem; color: var(--ink-soft); margin: 1.6rem 0 0; }
.photo-drawer [hidden], .drawer-viewer [hidden] { display: none !important; }
.drawer-viewer { width: min(900px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 18px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper-light); overflow-y: auto; overscroll-behavior: contain; }
.drawer-viewer::backdrop { background: #171c17dc; }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .8rem; }
.viewer-image-wrap { background: #22271f; text-align: center; color: #f5eddc; }
.viewer-image-wrap img { display: block; width: 100%; height: min(55dvh, 620px); object-fit: contain; }
.viewer-image-wrap p { padding: 30px 12px; margin: auto; }
.viewer-caption { padding-top: 16px; overflow-wrap: anywhere; }
.viewer-caption h2 { font-size: 1.3rem; }
.viewer-caption p { margin: .5rem 0 0; }
#viewer-meta { font-size: .76rem; color: var(--ink-soft); }
html.drawer-viewer-open { overflow: hidden; }
html[data-theme="dark"] .photo-drawer { --drawer-rim: #505b46; --drawer-bed: #343c30; --drawer-glow: #535a46; --print: #302f27; --print-edge: #615e4a; }
html[data-theme="dark"] .drawer-button, html[data-theme="dark"] .drawer-viewer { background: #302f27; }
@media(max-width:860px) { .drawer-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:640px), (pointer:coarse) { .drawer-drag-hint { display: none; } .drawer-print { cursor: pointer; } }
@media(max-width:520px) { .drawer-board { grid-template-columns: 1fr; padding: 30px 24px; gap: 34px; border-width: 8px; border-bottom-width: 16px; } .drawer-toolbar { align-items: start; gap: 8px; } .drawer-toolbar p { max-width: 50%; } .drawer-viewer { padding: 12px; } .viewer-navigation a { order: 3; flex-basis: 100%; text-align: center; } .drawer-pages { justify-content: center; } .drawer-pages span { flex-basis: 100%; order: -1; text-align: center; } }
@media(prefers-reduced-motion:reduce) { .photo-drawer *, .drawer-viewer * { scroll-behavior: auto; transition: none; } }