/* Site styles on top of Bulma 1.0.4 (public/css/bulma.min.css). Keep this short. */

:root { --tile: 220px; }

html { line-break: strict; }
body {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* Hero: header photo with the site title and tagline overlaid bottom-left */
.hero-header { position: relative; background: #111; }
/* Inner pages: a narrow band. Home: the full viewport below the nav, like the live theme. */
.hero-header img { display: block; width: 100%; height: 13rem; object-fit: cover; }
.page-home .hero-header img { height: calc(100vh - 3.25rem); min-height: 420px; }
.page-inner .site-title { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.page-inner .site-description { font-size: 0.85rem; }
.page-inner .hero-branding { bottom: 1.25rem; }
.hero-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.hero-branding { position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 1; padding: 0 1.5rem; }
.site-title {
  margin: 0; line-height: 1.1;
  font-size: clamp(1.9rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.site-title a { color: #fff; }
.site-title a:hover { color: #e6e6e6; }
.site-description { margin: 0.35rem 0 0; color: #e8e8e8; font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

/* Nav */
.navbar { --bulma-navbar-dropdown-arrow: #4a4a4a; }
.navbar-item[aria-current="page"],
.has-dropdown.is-current > .navbar-link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; }
.navbar-dropdown .navbar-item[aria-current="page"] { background: none; }

/* Prose pages */
.content { line-height: 1.9; max-width: 42rem; }
.content figure { margin: 2rem 0; }
.content figcaption { font-size: 0.85rem; color: #666; line-height: 1.6; }
.content figcaption small { display: block; color: #888; }

/* Gallery grids */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 0.75rem;
}
.gallery.is-small { --tile: 140px; }
.gallery.is-captioned { --tile: 400px; gap: 2rem 1.5rem; align-items: start; }
.gallery li { margin: 0; }
.gallery .tile { display: block; }
.gallery .tile img { display: block; width: 100%; height: auto; transition: opacity 0.2s; }
.gallery:not(.is-captioned) .tile img { aspect-ratio: 1 / 1; object-fit: cover; }
.gallery .tile:hover img, .gallery .tile:focus-visible img { opacity: 0.85; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: #555; line-height: 1.5; }

/* Lightbox: Bulma .modal with custom sizing and prev/next */
#lightbox .modal-content { width: auto; max-width: 95vw; max-height: 92vh; margin: 0 3.5rem; overflow: visible; }
#lightbox .lightbox-figure { margin: 0; }
#lightbox img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto; }
#lightbox figcaption { margin-top: 0.75rem; font-size: 0.9rem; }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 4rem; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 2.5rem; line-height: 1;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(0, 0, 0, 0.7); }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-nav[hidden] { display: none; }

@media (max-width: 600px) {
  #lightbox .modal-content { margin: 0 0.5rem; }
  .lightbox-nav { width: 2.25rem; height: 3rem; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery .tile img { transition: none; }
}

.footer { padding: 2rem 1.5rem; }