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

:root {
  --tile: 220px;
  /* Accent: warm cedar. Bulma derives every link colour from these three. */
  --bulma-link-h: 22deg; --bulma-link-s: 52%; --bulma-link-l: 40%;
  --accent: hsl(22deg, 52%, 40%);
  --accent-soft: hsl(22deg, 45%, 82%);
}

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: 55vh; min-height: 320px; max-height: 560px; }
.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; }
.page-inner .site-title.page-name { color: #fff; text-transform: none; letter-spacing: 0.04em; font-weight: 700; }
.hero-kicker { margin: 0 0 0.15rem; color: #e8e8e8; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.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: each item is a stacked label, English over small grey Japanese */
.navbar { --bulma-navbar-dropdown-arrow: #4a4a4a; }
.navbar-item .en { display: block; line-height: 1.2; }
.navbar-item .sub { display: block; line-height: 1.2; font-size: 0.7rem; color: #6b6b6b; letter-spacing: 0.02em; }
/* Current page: keep Bulma's hover background permanently and darken the text. No weight change, so
   neighbouring items never shift between pages. */
.navbar-item[aria-current="page"],
.has-dropdown.is-current > .navbar-link {
  --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
  --bulma-navbar-item-background-a: 1;
  color: var(--accent);
}
.navbar-item[aria-current="page"] .sub { color: #444; }
@media (min-width: 1024px) {
  .navbar-item { padding-left: 1.5rem; padding-right: 1.5rem; font-size: 0.9rem; white-space: nowrap; text-align: center; }
  .navbar-start > .navbar-item { flex-direction: column; justify-content: center; }
  .navbar-item.brand { padding-left: 0; font-size: 1rem; }
}
@media (max-width: 1023px) {
  .navbar-menu .navbar-item { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .navbar-menu .navbar-item .sub { margin-top: 0.1rem; }
}

/* Headings: one scale for the whole site. h2 = section with a cedar left bar, h3 = sub-section with a grey bar. */
.content h2, .content h3, .section-heading h2, .content h1.title { font-feature-settings: "palt"; }
.content h2:not(.page-lead), .section-heading h2 {
  font-size: 1.6rem; font-weight: 700; color: #1f1f1f; line-height: 1.3;
  margin: 2.75rem 0 1.1rem; padding-left: 0.8rem; border-left: 5px solid var(--accent);
}
.content h2:not(.page-lead):first-child { margin-top: 0; }
.content h3 {
  font-size: 1.25rem; font-weight: 700; color: #1f1f1f; line-height: 1.4;
  margin: 2.25rem 0 0.75rem; padding-left: 0.7rem; border-left: 3px solid var(--accent-soft);
}
.content h2.page-lead { font-size: 1.45rem; font-weight: 600; color: #1f1f1f; margin: 0 0 1.25rem; padding: 0; border: 0; }
.content .post-meta + h3, .content h2 + h3 { margin-top: 1.25rem; }
.content .media + h2 { margin-top: 3.25rem; }
.content .media + h3 { margin-top: 2.75rem; }

/* Page column: one centred 64rem column for everything below the hero. Running text inside it is capped
   at 44rem (about 44 Japanese characters a line); photos, media rows, card grids and lists use the full column. */
main.container, .navbar > .container, .hero-branding .container, .footer .container {
  max-width: 64rem !important;  /* !important: Bulma's :not() container rules outrank these selectors */
}
.content { line-height: 1.9; }
.content > p, .content > h1, .content > h2, .content > h3, .content > ul, .content > ol, .content > address,
.content > .post-nav { max-width: 44rem; }
address { font-style: normal; }
.content address { margin-bottom: 1.5rem; }
.content ul.plain { list-style: none; margin-left: 0; }
.content ul.plain li + li { margin-top: 0.35rem; }
.content dl.timeline { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: 0.35rem; margin-bottom: 1.5rem; }
.content dl.timeline dt { font-weight: 500; color: #555; white-space: nowrap; }
.content dl.timeline dd { margin: 0; }
@media (max-width: 480px) {
  .content dl.timeline { grid-template-columns: 1fr; row-gap: 0; }
  .content dl.timeline dd { margin-bottom: 0.6rem; }
}
.content h1.title { margin-bottom: 1.5rem; }
.content .tile img { display: block; max-width: 100%; height: auto; }
.content figure.is-photo { margin: 2rem 0; }
.content figure.is-photo:not(.is-left) img { max-height: 75vh; width: auto; max-width: 100%; }
/* Photo + text side by side (Works items, Business); stacked on phones */
.content .media { display: flex; gap: 1.5rem; align-items: flex-start; margin: 1rem 0 2rem; }
.content .media figure.is-photo { flex: 0 0 min(440px, 45%); margin: 0; }
.content .media figure.is-photo img { max-height: none; width: 100%; }
.content .media-text { flex: 1 1 auto; min-width: 0; }
.content .media-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .content .media { flex-direction: column; gap: 1rem; }
  .content .media figure.is-photo { flex-basis: auto; width: 100%; }
}
.content figure.is-photo .tile { display: inline-block; max-width: 100%; }
.content figure.is-photo figcaption { text-align: left; margin-top: 0.6rem; font-size: 0.9rem; color: #444; }
.content figure.is-photo figcaption strong { display: block; color: #222; font-size: 1rem; margin-bottom: 0.2rem; }
.content figure.is-banner { margin: 1.5rem 0; }
.content figure.is-banner img { display: inline-block; height: auto; }
.content .map { position: relative; width: 100%; max-width: 44rem; aspect-ratio: 4 / 3; margin: 1.5rem 0; }
.content .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.content .lead { font-size: 1.1rem; }
.content .post-meta { color: #777; font-size: 0.85rem; margin: 0 0 1.5rem; }
.content .post-nav { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; font-size: 0.9rem; }
.content .post-nav .siblings { display: flex; gap: 1.5rem; }
.content .post-nav .siblings span:empty { display: none; }

/* Collection cards (Works index, Blog index, home page): open layout, photo + date + title + 2-line excerpt */
.cards {
  list-style: none !important; margin: 0 0 2rem !important; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.75rem 1.25rem;
}
.cards li { margin: 0 !important; }
.cards a { display: block; color: inherit; }
.cards .card-pic { display: block; overflow: hidden; border-radius: 6px; background: #eee; aspect-ratio: 1 / 1; }
.cards img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.cards a:hover img, .cards a:focus-visible img { transform: scale(1.03); }
.cards a:hover .card-title, .cards a:focus-visible .card-title { color: var(--accent); }
.cards time { display: block; margin: 0.65rem 0 0.1rem; font-size: 0.72rem; letter-spacing: 0.04em; color: #8a8a8a; }
.cards .card-title { display: block; margin: 0.55rem 0 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.4; transition: color 0.2s; }
.cards time + .card-title { margin-top: 0; }
.cards .card-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 0.8rem; color: #666; line-height: 1.55;
}
/* Works: a two-column portfolio grid with 3:2 photos and larger titles */
.cards.is-wide { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; }
.cards.is-wide .card-pic { aspect-ratio: 3 / 2; border-radius: 6px; }
.cards.is-wide .card-title { font-size: 1.2rem; margin-top: 0.75rem; }
.cards.is-wide .card-excerpt { font-size: 0.875rem; }
@media (max-width: 600px) { .cards.is-wide { grid-template-columns: 1fr; } }
.cards li.is-text a { border-top: 3px solid var(--accent-soft); padding-top: 0.6rem; }
.cards li.is-text .card-excerpt { -webkit-line-clamp: 5; }
@media (prefers-reduced-motion: reduce) { .cards img { transition: none; } .cards a:hover img { transform: none; } }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.section-heading h2 { margin: 0; }
.section-heading .more { font-size: 0.85rem; white-space: nowrap; }
.section-heading + .cards { margin-top: 0.5rem !important; }

.content .lead { font-size: 1.1rem; max-width: 44rem; }
.content .home-links { margin-top: 1.5rem; justify-content: center; }
.content .home-links .button { border-color: #cfcfcf; color: #333; }
.content .home-links .button:hover { border-color: var(--accent); color: var(--accent); }
.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; }