:root{
  --bg:#060606;
  --text:#dcd6c9;
  --muted:#9b9588;
  --accent:#7a746e;
  --max-width:1100px;
  --panel-height:60vh;
  font-family: "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.site-head{padding:28px 18px;text-align:center}
.title{margin:0;font-size:20px;letter-spacing:1px}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:12px}

.home-panels{display:grid;grid-template-columns:1fr 1fr;gap:0;height:calc(100vh - 120px);max-width:var(--max-width);margin:20px auto}
.panel{display:flex;align-items:flex-end;text-decoration:none;color:var(--text);padding:18px;background-size:cover;background-position:center;position:relative}
.panel::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent, rgba(0,0,0,0.5))}
.panel-label{position:relative;font-size:28px;padding:6px 10px;background:rgba(0,0,0,0.25);backdrop-filter:blur(0)}
@media(max-width:760px){.home-panels{grid-template-columns:1fr;height:auto}.panel{height:40vh}}

.crumbs{padding:12px 18px;color:var(--muted);font-size:13px}
.section-title{padding:6px 18px;margin:0 0 10px;font-size:22px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 80px;max-width:var(--max-width);margin:0 auto}
.thumb{display:block;text-decoration:none;color:inherit}
.thumb img{width:100%;height:160px;object-fit:cover;display:block;opacity:0.95}
.caption{display:block;padding:6px 0;color:var(--muted);font-size:13px;text-align:left}

/* responsive */
@media(max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}.thumb img{height:220px}}

/* Photo page */
.photo-page{max-width:900px;margin:10px auto;padding:0 18px}
.photo-wrap img{width:100%;height:auto;display:block;margin:10px 0}
.photo-title{font-size:20px;margin:12px 0 6px}
.photo-desc{color:var(--muted);line-height:1.5}

/* footer */
.site-foot{padding:18px;text-align:center;color:var(--muted);font-size:13px}

/* subtle grain overlay — optional: replace url with your small noise PNG */
body::after{
  content:"";
  pointer-events:none;
  position:fixed;inset:0;opacity:0.06;
  background-image: url('../css/grain.png');
  background-repeat:repeat;
  mix-blend-mode:screen;
}