/* Global link colors (pink) */
a, a:visited{ color: var(--link); text-decoration: none; }
a:hover, a:focus{ color: var(--link-hover); text-decoration: underline; }

:root{
  --bg: #2a2b2e;
  --bg-mid: #64707c;
  --gradient-depth: 1200px;
  --text: #f6f1e7;
  --muted: #c9c4b9;
  --link: #ff7ab6;
  --link-hover: #ffcce1;
  --border: #3a3c41;
}

*{ box-sizing: border-box; }
html{ min-height:100%; }
body{ min-height:100%; margin:0;
  background: linear-gradient(180deg, var(--bg-mid) 0, var(--bg) var(--gradient-depth)) no-repeat, var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  line-height:1.5;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

.container{ width:min(1100px, 92vw); margin-inline:auto; padding: clamp(.75rem, 2vw, 1.25rem) 0; }

.site-header{ position:relative; display:flex; flex-direction:column; gap:.35rem; padding-bottom:.25rem; }
.site-title{ margin:0; font-weight:700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing:.2px; }
.logo .brand{ display:inline-flex; align-items:center; text-decoration:none; color:var(--text); }
.brand-mark{ display:block; height:72px; width:auto; image-rendering:-webkit-optimize-contrast; }
@media (max-width:420px){ .brand-mark{ height:64px; } }

.site-slogan{
  position: absolute;
  right: 0;
  top: clamp(.5rem, 1.5vw, .9rem);
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.2;
  text-align: right;
  max-width: 40ch;
}
@media (max-width: 520px){
  .site-slogan{ font-size: .9rem; max-width: 22ch; }
}

/* List on homepage */
.list{ list-style:none; padding:0; margin:.2rem 0 0 0; display:grid; gap:.4rem; }
.list li{ margin:0; }
.list-link{ color: var(--text); text-decoration:none; font-weight:600; }
.list-link:hover{ text-decoration: underline; }

/* Grid for gallery */
.grid{ display:grid; gap: clamp(.4rem, .9vw, .6rem); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top:1rem; }
.photos-grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.photo{ display:block; position:relative; border-radius:8px; overflow:hidden; border:0; background: transparent; cursor: zoom-in; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius: inherit; background: #1c1d20; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:40; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width: min(96vw, 1600px); max-height: 86vh; border-radius: 12px; border:0; }
.lb-caption:empty{ display:none; }
.lb-caption{ position:absolute; left:50%; transform:translateX(-50%); bottom:1rem; background: rgba(17,18,20,.6); color: var(--text); padding:.65rem .9rem; border-radius:.75rem; font-size:1.05rem; line-height:1.35; max-width:min(92vw, 60ch); text-align:center; z-index:46; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); background: rgba(17,18,20,.65); color: var(--text); border: 1px solid var(--border); border-radius:12px; padding:.75rem 1rem; cursor:pointer; user-select:none; z-index:47; }
.lb-prev{ left:1rem; } .lb-next{ right:1rem; } .lb-close{ top:1rem; right:1rem; transform:none; font-size:1.5rem; padding:.25rem .6rem; }

/* Tap zones */
.lb-zone{ position: fixed; left: 0; right: 0;
  top: calc(64px + env(safe-area-inset-top, 0));
  bottom: calc(56px + env(safe-area-inset-bottom, 0));
  z-index: 45; pointer-events: auto; }
.lb-zone.left{ left:0; width:44%; right:auto; }
.lb-zone.right{ right:0; width:44%; left:auto; }
@media (min-width: 900px){ .lb-zone{ width:38%; } }
@media (pointer: fine) { .lb-zone { display:none; } }

:where(a, button, .list-link, .lb-btn):focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 600px){ .grid, .photos-grid{ grid-template-columns: 1fr !important; } }
@media (min-width: 601px) and (max-width: 840px){ .grid, .photos-grid{ grid-template-columns: repeat(2, 1fr) !important; } }

.site-footer{ border-top:0; margin-top:2rem; color: var(--muted); font-size:.95rem; }
.site-footer a{ color: var(--link); text-decoration:none; } .site-footer a:hover{ text-decoration: underline; }

/* Gallery header: tighter vertical rhythm */
.page-gallery .site-header { padding-bottom: .1rem; }
.page-gallery .breadcrumbs.under-title { margin: .25rem 0 0 0; font-size: .95rem; }
.page-gallery #gallery-sub { margin: .15rem 0 0 0; }

.home-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .home-layout { grid-template-columns: 1fr 360px; }
}

.random-image-card {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  background: #fff;
}
.random-image-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.random-caption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}
.random-btn {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f9f9f9;
  font: inherit;
  cursor: pointer;
  transition: transform .04s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.random-btn:hover { background: #f3f3f3; }
.random-btn:active { transform: translateY(1px); }