/* Gallery Palette drop-in — dark simple layout inspired by your screenshot
   Replaces previous file content.
   Keep this as gallery.css (or paste after your current file) to get the boxed cream panels on a dark canvas.
*/

:root{
  --cream: #E6E4DC;
  --panel-edge: #CBD3C7;
  --dark: #26241B;
  --navy: #637C90;   /* ← THIS is the blue */
  --muted-text: #637C90;
}

a,
a:visited,
a:hover,
a:active {
  color: var(--muted-text);
}



html,body{height:100%;}
body {
  margin:0;
  font-family: "BPdotsDiamond", monospace;
  background: var(--dark);
  color: var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:700;
}

/* keep wrapper narrow and left-aligned like the screenshot */
#wrapper{
  width: 1100px; /* match screenshot width */
  margin: 24px 0 80px 32px; /* left offset and top spacing */
}

/* simple header/section spacing */
header, section, footer{margin-bottom:24px}

/* NAV buttons row — simple boxed buttons */
.nav-row{display:flex;gap:14px;align-items:center;margin-bottom:36px}
.nav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:140px;height:64px;border-radius:8px;
  background: var(--cream); color:var(--navy); text-decoration:none;
  border:6px solid var(--navy); box-shadow: 0 6px 0 rgba(0,0,0,0.25);font-size:1.15rem;
}
.nav-btn.large{min-width:180px}
.nav-btn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,0.22)}

/* thumbnail panels — pale interior with thick muted-green frame */
#photos{display:flex;flex-direction:column;gap:1}
#photos figure{
  width: auto;max-width:420px;background:var(--cream);
  border:10px solid var(--panel-edge);padding:14px;margin:0;display:inline-block;
  box-shadow: 0 12px 30px var(--shadow);
}

#photos img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
#photos figcaption{color:var(--navy);font-size:1em;padding-top:8px}

/* larger main image style (big panel) */
.figure-large{max-width:880px}

/* small index tile like the top-left in screenshot */
.thumb-small{max-width:220px}

/* page-links and lists kept simple */
.page-links{margin-top:12px}
.page-links ul{display:inline-block;padding:0;margin:0}
.page-links li{display:inline;list-style:none;margin-right:8px;color:var(--cream)}

/* viewer overlay (slightly tinted) */
#js-viewer{position:fixed;inset:0;background:rgba(31,28,23,0.85);display:flex;align-items:center;justify-content:center}
#js-viewer img{max-width:90%;max-height:90%;border:8px solid var(--panel-edge);background:var(--cream)}

/* responsive tweaks */
@media (max-width:1100px){
  #wrapper{width:calc(100% - 48px);margin-left:24px}
  .nav-btn{min-width:120px;height:56px}
  #photos figure{max-width:90%}
}

/* small helpers to keep visuals simple/basic */
button, a.button{cursor:pointer}

/* End of drop-in */