:root{
  --bg:#ffffff; --bg-soft:#f5f5f5; --panel:#eaeaea; --panel-2:#e0e0e0;
  --border:#ccc; --text:#222; --text-dim:#555; --text-mute:#888;
  --accent:#0066cc; --accent-2:#004499; --ring:rgba(0,102,204,.4);
  --radius:8px; --radius-sm:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
}

/* ---------- Sidebar (#menu) — matches prod site layout ---------- */
#menu{
  position:fixed;top:0;left:0;width:200px;height:100%;overflow:hidden;
  background-color:#555;border-right:1px solid #000;z-index:50;
}
#menu .navcontainer{width:200px}
#menu .navcontainer ul{margin:0;padding:0;list-style-type:none}
#menu iframe{display:block;border:none;width:200px;max-width:100%}

/* ---------- Main content area ---------- */
#main{
  margin-left:200px;min-height:100vh;
}

/* ---------- Banner header (matches prod style_10_2025.css) ---------- */
header{
  display:grid;grid-gap:0;
  grid-template-columns:1fr;grid-template-rows:1fr;
}
header a{
  text-decoration:none;
  grid-column:1 / -1;grid-row:1 / 2;
  width:100%;height:100%;
}
header img{
  grid-column:1 / -1;grid-row:1 / 2;
  width:100%;height:100%;
  object-fit:cover;overflow:hidden;
}
header h1{
  grid-column:1 / -1;grid-row:1 / 2;
  align-self:center;justify-self:left;
  z-index:1;
  text-shadow:0 0 0.5em black,0 0 0.3em black,0 0 0.3em black,0 0 0.2em black,0 0 0.2em black;
  font-size:3rem;font-weight:300;
  padding:0 1rem;
  color:rgb(255,255,255);
  margin:0;
}

/* ---------- Page header (title + return link) ---------- */
.page-header{
  padding:20px 22px 0;
  text-align:center;
}
.page-header h1{
  margin:0;font-size:28px;font-weight:700;
  text-align:center;
}
.page-header h3{
  margin:0;font-size:16px;font-weight:700;
  text-align:center;
}
.page-header h3 a, .page-footer h3 a{
  color:var(--accent);text-decoration:underline;font-weight:700;
}
.page-header h3 a:hover, .page-footer h3 a:hover{
  color:var(--accent-2);
}
.page-header hr{
  border:none;border-top:1px solid var(--border);margin:12px 0 0;
}

/* ---------- Gallery meta (photo count) ---------- */
.gallery-meta{
  padding:8px 22px;
  text-align:center;
}
.pill{
  display:inline-block;
  background:var(--panel);border:1px solid var(--border);
  color:var(--text-dim);padding:4px 12px;border-radius:999px;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}

/* ---------- Page footer ---------- */
.page-footer{
  padding:0 22px 40px;
  text-align:center;
}
.page-footer hr{
  border:none;border-top:1px solid var(--border);margin:0 0 12px;
}
.page-footer h3{
  margin:0;font-size:14px;font-weight:700;
  text-align:center;
}
.page-footer p{margin:8px 0}

/* Grid */
.grid{
  margin:14px 0 30px;padding:0 22px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;
}
.thumb-card{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
  aspect-ratio:1;display:block;
}
.thumb-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 12px 28px -10px rgba(0,0,0,.25)}
.thumb-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d8d8d8);transition:transform .45s var(--ease),opacity .4s;opacity:0}
.thumb-card img.loaded{opacity:1}
.thumb-card:hover img{transform:scale(1.06)}
.card-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,#e0e0e0,#f0f0f0,#e0e0e0);background-size:200% 100%;animation:sh 1.4s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.thumb-card .card-label{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:11.5px;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s;
}
.thumb-card:hover .card-label{opacity:1}
.empty-state{grid-column:1/-1;text-align:center;color:var(--text-mute);padding:70px 20px}

/* Viewer */
.viewer{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.viewer[hidden]{display:none}
.viewer-topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent)}
.v-title{font-size:15px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.v-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.v-counter{color:rgba(255,255,255,.7);font-size:13px;font-variant-numeric:tabular-nums;margin-right:4px}
.v-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;cursor:pointer;background:rgba(40,40,40,.9);border:1px solid #444;color:#fff;transition:.15s}
.v-btn:hover{background:rgba(60,60,60,.95);border-color:#666;color:#fff}
.stage{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;padding:10px 70px}
.v-image{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;user-select:none;-webkit-user-drag:none;box-shadow:0 24px 70px rgba(0,0,0,.6);transition:opacity .18s;opacity:0;background:#111}
.v-image.show{opacity:1}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(30,30,30,.8);border:1px solid #444;color:#fff;transition:.18s;backdrop-filter:blur(6px)}
.nav-arrow:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) scale(1.06)}
.nav-prev{left:14px}.nav-next{right:14px}
.nav-arrow:disabled{opacity:0;pointer-events:none}
.spinner{position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Filmstrip */
.filmstrip{flex:0 0 auto;background:rgba(0,0,0,.75);border-top:1px solid #333;padding:10px 14px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.filmstrip::-webkit-scrollbar{height:8px}
.filmstrip::-webkit-scrollbar-thumb{background:#555;border-radius:8px}
.filmstrip-track{display:flex;gap:8px;align-items:center}
.thumb{flex:0 0 auto;width:78px;height:58px;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;border:2px solid transparent;background:#333;transition:.15s;opacity:.55}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{opacity:1;transform:translateY(-2px)}
.thumb.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px var(--ring)}

/* ---------- Responsive: sidebar hides at 900px (matches prod) ---------- */
@media (max-width:900px){
  #menu{display:none}
  #main{margin-left:0}
}

@media (max-width:760px){
  .page-header{padding:16px 16px 0}
  .gallery-meta{padding:8px 16px}
  .grid{padding:0 16px;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .stage{padding:6px 12px}
  .nav-arrow{width:44px;height:44px;left:8px}.nav-next{right:8px}
  .nav-arrow svg{width:26px;height:26px}
  .thumb{width:64px;height:48px}
  .viewer-topbar{padding:10px 12px}
  .page-footer{padding:0 16px 30px}
  header h1{font-size:2rem}
}
@media (max-width:420px){.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}