:root { color-scheme: light; font-family: system-ui, sans-serif; color: #25382e; background: #f8f7f2; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1120px; margin: auto; padding: 64px 24px 32px; }
header { padding-bottom: 28px; border-bottom: 1px solid #d8ded6; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(36px, 7vw, 64px); letter-spacing: -.04em; margin: 18px 0; }
header > p:last-child, #status, footer { color: #5c6b61; line-height: 1.6; }
#status { margin: 28px 0; }
#gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
figure { margin: 0; }
figure a { display: block; background: #e7eae2; border-radius: 8px; overflow: hidden; }
img { display: block; width: 100%; height: 280px; object-fit: contain; }
a:focus-visible { outline: 3px solid #25382e; outline-offset: 5px; }
figcaption { font-size: 13px; margin-top: 10px; overflow-wrap: anywhere; }
footer { border-top: 1px solid #d8ded6; margin-top: 56px; padding-top: 20px; font-size: 13px; }

[hidden] { display: none !important; }
dialog { border: 1px solid #d8ded6; border-radius: 12px; padding: 32px; width: min(420px, calc(100% - 32px)); color: #25382e; background: #f8f7f2; }
dialog::backdrop { background: #25382e99; }
h2 { font-family: Georgia, serif; font-weight: 400; font-size: 36px; margin: 12px 0; }
dialog p { line-height: 1.5; }
label { display: block; margin: 24px 0 8px; }
input { width: 100%; padding: 12px; border: 1px solid #89958b; border-radius: 6px; font: inherit; }
button { padding: 12px 20px; border: 0; border-radius: 6px; background: #25382e; color: white; font: inherit; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid #627c69; outline-offset: 3px; }
#login-error { color: #9b2c2c; min-height: 24px; margin: 8px 0; }
#login-form button { width: 100%; }
#logout { margin-top: 32px; }

/* Native horizontal swiping with one complete photo per screen. */
body { overflow: hidden; }
#content { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; background: #080808; color: white; }
#gallery { display: flex; width: 100%; height: 100vh; height: 100dvh; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
#gallery::-webkit-scrollbar { display: none; }
#gallery figure { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
#gallery img { width: 100%; height: 100%; object-fit: contain; }
#controls { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: linear-gradient(#000a, transparent); }
#controls button { background: #0007; border: 1px solid #ffffff30; min-width: 44px; min-height: 44px; padding: 8px 14px; }
#controls button:disabled { opacity: .3; cursor: default; }
#controls #status { margin: 0; color: white; font-size: 13px; }
#controls #logout { margin: 0 0 0 auto; font-size: 12px; }