/* Shared across index.html, login.html, galleries.html */
:root{
  --bg-light:#FAF9F6; --bg-dark:#0A0A0B;
  --surface-light:#FFFFFF; --surface-dark:#141417;
  --ink-light:#17181A; --ink-dark:#FAF9F6; --ink-dim:#7A7A74;
  --accent:#2E5C8A; --line-light:#E7E4DC; --line-dark:#26262B;
  --bg: var(--bg-light); --ink: var(--ink-light); --line: var(--line-light); --surface: var(--surface-light);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Raises the bar against casual right-click-save / long-press-save on photos.
   Does not and cannot stop screenshots — no website can block those. */
img{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
html{scroll-behavior:smooth; scroll-padding-top: 90px;}
body{ background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; line-height:1.6; }
a{color:inherit; text-decoration:none;}
.label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); }
.display{ font-family:'Fraunces', serif; font-weight:500; line-height:1.1; }

/* ---- Nav ---- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:130;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 40px; background:transparent; transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled, nav.solid{ background:rgba(250,249,246,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-light); }
body.dark-nav nav.scrolled{ background:rgba(10,10,11,0.88); border-bottom:1px solid var(--line-dark); }
body.dark-nav.light-zone nav.scrolled{ background:rgba(250,249,246,0.92); border-bottom:1px solid var(--line-light); }

.logo-svg, .logo-link svg { height: 38px; width: auto; fill: currentColor; display: block; }
.nav-links{display:flex; gap:30px; align-items:center; font-size:13px;}
.nav-links a:not(.nav-cta-btn){opacity:0.85;}
.nav-links a:not(.nav-cta-btn):hover{opacity:1;}

.nav-cta-btn {
  background: #17181A; color: #FFFFFF !important; padding: 10px 20px;
  border-radius: 4px; font-weight: 600; letter-spacing: 0.02em;
  transition: all 0.3s ease; display: inline-block;
}
.nav-cta-btn:hover { background: var(--accent) !important; transform: translateY(-1px); }
body.dark-nav .nav-cta-btn { background:#FFFFFF; color:#17181A !important; }
body.dark-nav.light-zone .nav-cta-btn { background:#17181A; color:#FFFFFF !important; }
body.dark-nav .nav-cta-btn:hover, body.dark-nav.light-zone .nav-cta-btn:hover { background: var(--accent) !important; color:#fff !important; }

.user-menu-wrapper { position: relative; display: inline-block; }
.user-dropdown { display: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid var(--line-light); padding: 8px 16px; border-radius: 4px; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); margin-top:6px; }
.user-dropdown.open { display: block; }
.user-dropdown button { width: 100%; background: none; border: none; text-align: right; font-family: inherit; font-size: 13px; font-weight: 400; color: #c0392b; cursor: pointer; padding: 6px 0; }

.nav-burger{ display:none; background:none; border:none; cursor:pointer; padding:6px; z-index:131; color:var(--ink); }
.nav-burger span{ display:block; width:22px; height:2.5px; background:currentColor; margin:5px 0; border-radius:1px; transition:transform .2s ease, opacity .2s ease; }

.admin-bar {
  background: #2E5C8A; color: white; padding: 10px 40px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; display: none; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 140;
}
body.admin-mode .admin-bar { display: flex; }
body.admin-mode nav { top: 38px; }
body.admin-mode .mobile-menu-panel { top: 38px; }
.admin-bar-short{ display:none; }

@media(max-width:860px){
  .admin-bar{ padding:8px 16px; font-size:10px; }
  .admin-bar-full{ display:none; }
  .admin-bar-short{ display:inline; }
  body.admin-mode nav{ top:32px; }
}

@media(max-width:860px){
  nav{ padding:10px 20px; }
  .logo-svg, .logo-link svg { height: 30px; }
  .nav-burger{ display:flex; flex-direction:column; justify-content:center; }
  .nav-links{
    display:flex; position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--surface-light); flex-direction:column; align-items:flex-end; justify-content:center; gap:28px;
    padding:88px 28px 28px; box-shadow:-8px 0 30px rgba(0,0,0,0.15);
    transform:translateX(100%); transition:transform .3s ease; z-index:125;
  }
  body.dark-nav .nav-links{ background:var(--surface-dark); color:var(--ink-dark); }
  .nav-links.mobile-open{ transform:translateX(0); }
  .nav-links a, .nav-links .user-menu-wrapper{ font-size:15px; width:100%; text-align:right; }
  .user-dropdown{ position:static; box-shadow:none; border:none; padding:4px 0 0; margin-top:10px; }
  .user-dropdown button{ font-size:15px; }
  .nav-links .nav-cta-btn,
  body.dark-nav .nav-links .nav-cta-btn,
  body.dark-nav.light-zone .nav-links .nav-cta-btn{
    background:none !important; color:inherit !important; padding:0; border-radius:0;
    width:auto; text-align:right; font-weight:400; opacity:0.85;
  }
  .nav-links .nav-cta-btn:hover{ opacity:1; transform:none; }
  .mobile-menu-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:120; }
  .mobile-menu-scrim.open{ display:block; }
}

/* ---- Footer ---- */
footer#contact { max-width: 1100px; margin: 100px auto 0 auto; padding: 60px 40px; border-top:1px solid var(--line); display:flex; justify-content:flex-start; align-items:center; gap:80px; flex-wrap:wrap; }
footer#contact h2{ font-size: 32px; }
.foot-links a { display: block; margin-top: 4px; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

@media(max-width:600px){
  footer#contact{ flex-direction:column; align-items:flex-start; gap:16px; padding:48px 20px; }
}