/* cameraobscura — dark theme after the SmugMug site (palette from reference/smugmug-color.css) */
:root {
  --bg: #1f1f21; --panel: #242629; --panel2: #2b2e30; --border: #3b3d42;
  --text: #8f919c; --muted: #6e707a; --bright: #fff; --accent: #cf0;
  --font: 'Titillium Web', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 80px; --gutter: 15px; --row: 230px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bright); }
h1 { font-weight: 300; color: var(--bright); margin: 0; }
img, video { display: block; }

/* nav */
.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; }
.nav nav { display: flex; gap: 26px; }
.nav a { color: var(--bright); text-transform: uppercase; font-weight: 400; font-size: 19px; letter-spacing: .01em; }
.nav a:hover { color: var(--accent); }
html.home .nav { position: absolute; top: 0; left: 0; right: 0; background: rgba(0,0,0,.2); }

/* home hero */
.hero { position: fixed; inset: 0; background: #000; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* generic page */
.page { padding: 30px var(--gutter) 60px; max-width: 1900px; margin: 0 auto; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 28px; }
.crumbs .sep { color: var(--muted); }
.crumbs a { color: var(--bright); display: inline-flex; align-items: center; }
.page h1 { font-size: 28px; margin-bottom: 10px; }

/* browse tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
.tile { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tile:hover img { transform: scale(1.03); }
.tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; display: flex; align-items: center; gap: 8px;
  color: var(--bright); font-size: 16px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.tile-label svg { opacity: .8; }

/* album */
.album { padding-bottom: 60px; }
.banner { position: relative; margin: 0 var(--gutter); aspect-ratio: 3.8 / 1; min-height: 240px; max-height: 500px; overflow: hidden; background: var(--panel); }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner h1 { position: absolute; left: 24px; bottom: 14px; font-size: 64px; line-height: 1; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.banner-home { position: absolute; top: 24px; left: 30px; color: var(--bright); filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.album-desc { margin: 20px var(--gutter) 0; max-width: 900px; color: var(--text); }
.toolbar { display: flex; gap: 10px; margin: 24px var(--gutter) 24px; }
.tb { width: 52px; height: 52px; display: grid; place-items: center; background: var(--panel2); color: var(--bright); border: 1px solid var(--border); }
.tb:hover { background: var(--border); }

/* justified grid: flex-grow by aspect ratio, filler stretches the last row */
.grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 var(--gutter); }
.cell { position: relative; height: var(--row); flex-grow: calc(var(--w) / var(--h) * 100); width: calc(var(--row) * var(--w) / var(--h)); overflow: hidden; background: var(--panel); }
.cell img, .cell video { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.cell:hover img { opacity: .85; }
.cell.filler { flex-grow: 1e5; height: 0; width: 0; }
.cell .play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); }
.cell .play::after { content: ''; position: absolute; left: 21px; top: 16px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
@media (max-width: 700px) { :root { --row: 140px; --gutter: 8px; } .banner h1 { font-size: 40px; } .tiles { grid-template-columns: 1fr; } }

/* lightbox */
html.lightbox, html.lightbox body { background: #000; height: 100%; overflow: hidden; }
.lb { position: fixed; inset: 0; }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-chrome { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.lb:hover .lb-chrome, .lb.show-chrome .lb-chrome { opacity: 1; }
.lb-chrome a { pointer-events: auto; }
.lb-close { position: absolute; top: 12px; right: 20px; color: #fff; font-size: 40px; line-height: 1; opacity: .8; }
.lb-arrow { position: absolute; top: 0; bottom: 0; width: 18%; display: flex; align-items: center; color: #fff; font-size: 80px; font-weight: 300; opacity: .6; }
.lb-prev { left: 0; padding-left: 24px; }
.lb-next { right: 0; justify-content: flex-end; padding-right: 24px; }
.lb-arrow:hover { opacity: 1; color: #fff; }
.lb-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 24px; display: flex; gap: 18px; align-items: baseline;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 15px; }
.lb-count { color: #bbb; }
.lb-caption { color: #ddd; }
.lb-dl { margin-left: auto; font-size: 20px; }

/* search */
.search input { width: 100%; max-width: 600px; padding: 10px 14px; margin: 10px 0 30px; font: inherit; color: var(--bright); background: var(--panel2); border: 1px solid var(--border); }

/* password */
.pw { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.pw form { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); padding: 36px; text-align: center; }
.pw h1 { font-size: 30px; margin-bottom: 8px; }
.pw input { width: 100%; padding: 10px 14px; margin: 18px 0 12px; font: inherit; color: var(--bright); background: var(--panel2); border: 1px solid var(--border); }
.pw button { padding: 10px 28px; font: inherit; text-transform: uppercase; background: var(--border); color: var(--bright); border: 0; cursor: pointer; }
.pw button:hover { background: var(--accent); color: #333; }
.pw-error { color: #cc1e1e; }