@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#17161a;color:#e8e4da;font-family:"Manrope",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}a{color:inherit;text-decoration:none}

/* topbar: home-page bars hang off the very top edge, with the title row on paper just below */
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;background:transparent;padding-bottom:10px;font-family:"Bebas Neue",sans-serif;font-size:13px;letter-spacing:.1em;color:#185fa5;pointer-events:none;transition:opacity .3s ease,transform .35s ease}
/* the bars live only at the browse (zoomed-out) view — the moment you zoom into a stack or photo they slide up and off */
body.gutterdark .topbar{opacity:0;transform:translateY(-100%)}
.topbars{position:relative;width:100%;line-height:0;pointer-events:none}
.topbars .tb-svg{display:block;width:100%;height:auto}
.topbar .ttl{display:flex;align-items:center;gap:14px;padding:9px 22px 11px}
.gal-home{pointer-events:auto;display:inline-flex}
.gal-home img{height:22px;width:auto;display:block}
/* the blue/black rail now lives at the very bottom of the viewport */
.botrail{position:fixed;left:0;right:0;bottom:0;z-index:30;height:8px;pointer-events:none;background:repeating-linear-gradient(115deg,#50b4ff 0 16px,#141414 16px 22px,#005487 22px 46px,#50b4ff 46px 58px,#141414 58px 63px,#005487 63px 77px,#50b4ff 77px 109px,#141414 109px 121px,#005487 121px 135px)}

/* fixed camera viewport. Browse (whole wall) fits; zoomed levels overflow and are PANNED by
   the wheel/arrow gesture in gallery-grid.js (no native scrollbar — that proved unreliable
   behind a CSS-transformed wall). */
.vp{position:fixed;inset:0;overflow:hidden;touch-action:none}
.wall{position:absolute;left:0;top:0;transform-origin:0 0}

/* dark-blue field behind each stack — bleeds off the outside/top/bottom edges; its gutter-side
   edge is a gently slanted clip-path (set inline per panel) to match the diagonal theme. Starts
   dark blue, lightens on hover; clickable to zoom into that stack. */
.panel{position:absolute;z-index:0;background:#28272d;transition:background .25s ease;cursor:pointer}   /* charcoal stack — matches the panel behind the photos on the landing page */
.panel.hot{background:#302f36}
/* once zoomed into a stack or a photo, that stack's background stays at the light shade — it no
   longer reacts to the pointer (only the gutter does) */
body.gutterdark .panel{background:#302f36}

/* the slanted gutter strip: paper in the zoomed-out view; takes the same dark-blue shade only
   when zoomed into a stack or a photo, and lightens on hover just like the panels. */
.gutterfill{position:absolute;z-index:0;background:#e6e3dc;pointer-events:none;transition:background .25s ease}
body.gutterdark .gutterfill{background:#e6e3dc;pointer-events:auto}
body.gutterdark .gutterfill:hover{background:#efece5}

.ph{position:absolute;margin:0;cursor:pointer;z-index:1}
.ph img{position:relative;z-index:1;width:100%;height:auto;border:12px solid #f4f2ec;box-shadow:3px 5px 9px rgba(0,0,0,.24), 18px 26px 52px rgba(0,0,0,.34)}

.ph figcaption{display:none}

/* clickable cue: the photo itself is unchanged; on hover a couple of the site's leaning bars
   (the exact shape used for the home-page floating cue bars, in the two blues) slide out from
   beneath the bottom edge. They sit behind the image (z-index 0), revealed only where they emerge. */
.ph::before,.ph::after{content:"";position:absolute;z-index:0;left:34px;bottom:0;width:140px;aspect-ratio:177/211;background:center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20177%20211'%3E%3Cpolygon%20points%3D'54.87%20210.72%200.04%20210.72%20122.17%200%20177.01%200%2054.87%20210.72'%20fill%3D'%2350b4ff'%2F%3E%3C%2Fsvg%3E");opacity:0;transform:translate(0,0);transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .22s ease;pointer-events:none}
.ph::after{left:78px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20177%20211'%3E%3Cpolygon%20points%3D'54.87%20210.72%200.04%20210.72%20122.17%200%20177.01%200%2054.87%20210.72'%20fill%3D'%23005487'%2F%3E%3C%2Fsvg%3E")}
/* photo bars only appear once you're zoomed into a stack/photo (gutterdark) — not at wall level */
body.gutterdark .ph:hover::before{opacity:1;transform:translate(-22px,39px)}
body.gutterdark .ph:hover::after{opacity:1;transform:translate(-11px,19px)}
/* the photo you've zoomed into: its bars retreat and stay hidden (other photos still show them) */
body.gutterdark .ph.focused::before,body.gutterdark .ph.focused::after{opacity:0;transform:none}

/* narrow screens: simple native-scrolling vertical stack (no camera) */
body.simple{overflow:auto}
body.simple .vp{position:static;height:auto;overflow:visible}
body.simple .panel{display:none}
body.simple .wall{position:static;width:auto!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:40px;padding:80px 16px}
body.simple .ph{position:static!important;left:auto!important;top:auto!important;width:min(92%,560px)!important;cursor:default}
body.simple .ph figcaption{display:block}
@media(prefers-reduced-motion:reduce){.ph::before,.ph::after{transition:opacity .2s ease}}

/* per-photo private feedback — shown only in the zoomed (detail) view */
.fb-open{position:fixed;z-index:40;right:22px;bottom:22px;font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#185fa5;background:#F4F1E9;border:1.5px solid #185fa5;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s}
.fb-open:hover{background:#185fa5;color:#F4F1E9}
.fb-panel{position:fixed;z-index:41;right:22px;bottom:22px;width:min(92vw,340px);background:#F4F1E9;border:1.5px solid #141414;box-shadow:0 18px 50px rgba(0,0,0,.24);padding:16px}
.fb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-head{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#141414;margin-bottom:10px}
.fb-photoname{color:#185fa5}
.fb-form textarea,.fb-form .fb-name{display:block;width:100%;font-family:"Manrope",system-ui,sans-serif;font-size:14px;color:#141414;background:#fff;border:1px solid #cbc7bd;padding:8px 10px;margin-bottom:8px;resize:vertical}
.fb-form textarea:focus,.fb-form .fb-name:focus{outline:none;border-color:#185fa5}
.fb-err{font-family:"Bebas Neue",sans-serif;font-size:11px;color:#a12;margin-bottom:8px}
.fb-actions{display:flex;justify-content:flex-end;gap:8px}
.fb-actions button{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;cursor:pointer;border:1.5px solid #185fa5}
.fb-cancel{background:#F4F1E9;color:#185fa5}
.fb-cancel:hover{background:#e9e5da}
.fb-send{background:#185fa5;color:#F4F1E9}
.fb-thanks{font-family:"Bebas Neue",sans-serif;font-size:13px;letter-spacing:.04em;color:#141414;padding:4px 2px}

/* bottom footer — duplicated from the home page: diagonal stripe, dark bar (wordmark + gallery name + copyright),
   then the cream nav bar (wordmark + the six links with the striped underline). Fixed; the camera reserves its height. */
.galfoot{position:fixed;left:0;right:0;bottom:0;z-index:36;font-family:"Bebas Neue",sans-serif}
.galfoot a{text-decoration:none}
.galfoot .diag{height:4px;background:repeating-linear-gradient(115deg,#50b4ff 0 16px,#141414 16px 22px,#005487 22px 46px,#50b4ff 46px 58px,#141414 58px 63px,#005487 63px 77px,#50b4ff 77px 109px,#141414 109px 121px,#005487 121px 135px)}
.galfoot .foot{background:#0b0b0b;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:18px clamp(20px,5vw,72px) 18px}
.galfoot .foot-l{display:flex;flex-direction:row-reverse;align-items:center;align-self:stretch;gap:24px}
.galfoot .foot-back{font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#8f8f8a;padding-bottom:5px;transition:color .2s ease}
.galfoot .foot-slash{flex:0 0 auto;width:3px;align-self:stretch;background:#50b4ff;transform:skewX(-5.14deg)}
.galfoot .foot-back:hover{color:#50b4ff}
.galfoot .foot-title{color:#f0ece3;font-size:40px;font-weight:700;letter-spacing:.01em;line-height:1}
.galfoot .foot-top{display:flex;align-items:center;gap:18px}
.galfoot .foot-top>a{flex:0 0 auto}
.galfoot .foot-top .logo{height:38px;width:auto;display:block;flex-shrink:0}
.galfoot .foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:11px;text-align:right}
.galfoot .nav{display:flex;gap:15px}
.galfoot .nav a{font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:#8f8f8a;cursor:pointer}
.galfoot .nav a:hover{color:#f0ece3}
.galfoot .nav a.on{color:#50b4ff}
.galfoot .foot-copy{color:#5c5c58;font-size:10px;letter-spacing:.05em}
/* keep the feedback affordance clear of the footer */
.fb-open,.fb-panel{bottom:calc(var(--footh,16px) + 18px)}
body.simple .galfoot{position:static}