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

:root {
  --tile: 220px;
  /* Accent: the blue-violet band of the logo (rgb 93 101 173). Bulma derives every link colour from these three. */
  --bulma-link-h: 234deg; --bulma-link-s: 36%; --bulma-link-l: 46%;
  --bulma-link-on-scheme-l: 40%;  /* Bulma colours link text with this, not link-l; keep it as dark as the accent */
  --accent: hsl(234deg, 36%, 46%);
  --accent-soft: hsl(234deg, 40%, 84%);
  /* The six logo colours, used only as a thin stripe under the hero */
  --rainbow: linear-gradient(to right, #ee9958 0 16.7%, #fdf003 16.7% 33.3%, #d7e10a 33.3% 50%, #5aa36b 50% 66.7%, #5d65ad 66.7% 83.3%, #f4c9cd 83.3% 100%);
}

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; border-bottom: 5px solid transparent; border-image: var(--rainbow) 1; }
/* 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: 70%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.6) 45%, 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: a full-width tinted strip at the top holds the secondary row (会について pages, labelled); below it the
   brand on the left and the main row on the right. Sticky: after 80px of scroll (.is-scrolled, set in site.js) the
   strip folds away. Below 1024px the strip is hidden and the burger menu lists the main row, then the secondary one. */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: 0 0 6px 6px; }
.skip-link:focus { top: 0; color: #fff; }
.navbar { --bulma-navbar-dropdown-arrow: #4a4a4a; position: sticky; top: 0; z-index: 30; transition: box-shadow 0.2s; }
.navbar.is-scrolled { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.navbar-item[aria-current="page"],
.has-dropdown.is-current > .navbar-link {
  background: hsl(234deg, 40%, 93%);
  color: hsl(234deg, 40%, 36%);
}
.nav-strip { background: #f3f3f6; border-bottom: 1px solid #e3e3e8; }
.nav-strip > .container { display: flex; justify-content: flex-end; align-items: center; min-height: 2.2rem; }
.nav-strip .navbar-item { font-size: 0.875rem; color: #4a4a4a; padding: 0.3rem 0.8rem; border-radius: 4px; white-space: nowrap; }
.nav-strip .navbar-item[aria-current="page"] { background: hsl(234deg, 40%, 90%); color: hsl(234deg, 40%, 34%); }
.navbar-row-label { color: #666; font-size: 0.8rem; letter-spacing: 0.04em; }
.nav-strip .navbar-row-label { padding: 0.3rem 0.9rem 0.3rem 0; margin-right: 0.2rem; border-right: 1px solid #d5d5dc; }
.navbar-item.is-cta {
  border: 1.5px solid var(--accent); color: var(--accent); border-radius: 6px; font-weight: 600;
}
.navbar-item.is-cta:hover, .navbar-item.is-cta:focus-visible, .navbar-item.is-cta[aria-current="page"] { background: var(--accent); color: #fff; }
@media (min-width: 1024px) {
  .navbar { display: block; }  /* Bulma makes .navbar a flex row here; the strip must sit above the bar, not beside it */
  .nav-strip { width: 100%; }
  .navbar > .container { min-height: 4rem; }
  /* Bulma shifts the brand 0.75rem left and the menu 0.75rem right of the container; keep both on the page column */
  .navbar > .container .navbar-brand { margin-left: 0; }
  .navbar > .container .navbar-menu:last-child { margin-right: 0; }
  .nav-strip .navbar-item:last-child { margin-right: -0.8rem; }  /* the last label's text, not its padding, meets the column edge */
  .navbar-row.is-primary .navbar-item.is-cta:last-child { margin-right: 0; }
  .navbar.is-scrolled > .container { min-height: 3.6rem; }
  .navbar.is-scrolled .nav-strip { display: none; }
  .navbar-menu { flex-grow: 1; align-items: stretch; }
  .navbar-menu .navbar-row.is-secondary { display: none; }  /* the strip carries these on wide screens */
  .nav-tiers { display: flex; align-items: center; margin-left: auto; }
  .navbar-row { display: flex; align-items: center; }
  .navbar-row .navbar-item { white-space: nowrap; border-radius: 4px; }
  .navbar-row.is-primary .navbar-item { font-size: 0.95rem; padding: 0.4rem 0.9rem; }
  .navbar-row.is-primary .navbar-item.is-cta { margin-left: 0.5rem; padding: 0.4rem 1.1rem; }
  .navbar-item.brand { padding-left: 0; font-size: 1.05rem; }
}
/* Between 1024 and 1215 px the labels plus the brand need tighter spacing */
@media (min-width: 1024px) and (max-width: 1215px) {
  .navbar > .container, .nav-strip > .container { padding-left: 1.5rem; padding-right: 1.5rem; }  /* the 64rem column equals the viewport here; match the hero text gutter */
  .navbar-row.is-primary .navbar-item { padding: 0.4rem 0.55rem; font-size: 0.9rem; }
  .navbar-row.is-primary .navbar-item.is-cta { padding: 0.35rem 0.8rem; margin-left: 0.3rem; }
  .nav-strip .navbar-item { padding: 0.3rem 0.55rem; font-size: 0.83rem; }
  .navbar-item.brand { font-size: 0.95rem; }
  .navbar-item.brand img { height: 1.9rem; margin-right: 0.4rem; }
}
@media (max-width: 1023px) {
  .nav-strip { display: none; }
  .navbar-menu.is-active { max-height: calc(100vh - 3.25rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-tiers { display: flex; flex-direction: column; }
  .navbar-row.is-secondary { border-top: 1px solid #ececec; padding-top: 0.5rem; background: #f7f7f9; padding-bottom: 0.5rem; }
  .navbar-row.is-secondary .navbar-item { font-size: 0.9rem; color: #4a4a4a; }
  .navbar-row-label { display: block; padding: 0.4rem 0.75rem 0.1rem; }
  .navbar-menu .navbar-item { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .navbar-row.is-secondary .navbar-item { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .navbar-item.is-cta { display: inline-block; margin: 0.5rem 0.75rem 0.75rem; padding: 0.5rem 1.1rem; }
}

/* Back to top: appears after 500px of scroll (site.js) */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.25rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.to-top:hover, .to-top:focus-visible { background: hsl(234deg, 40%, 36%); }
.to-top[hidden] { display: none; }

/* Focus rings that stay visible: on white for button-styled links, on the dark lightbox backdrop for its controls */
.content .button:focus-visible, .navbar-item.is-cta:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; box-shadow: none; }
#lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Dead external links (checked 2026-10-26) stay in the text with a note until the owner replaces them */
.content a.is-dead { text-decoration: line-through; color: #666; }
.content .dead-note { font-size: 0.8em; color: #a33; white-space: nowrap; }
.content .button.is-dead { opacity: 0.55; text-decoration: line-through; }

/* Home: calls to action under the three tiles */
.home-cta { justify-content: center; margin: 0 0 1rem; gap: 0.75rem; }
.home-cta .button { font-weight: 600; }

/* Nav brand: the round logo beside the name */
.navbar-item.brand img { width: auto; height: 2.1rem; max-height: none; margin-right: 0.6rem; border-radius: 50%; }

/* Headings: one scale for the whole site. h2 = section with an accent left bar, h3 = sub-section with a soft 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, .nav-strip > .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; }
.content > ul.cards { max-width: none; }  /* card grids (events index, home tiles) use the full column like the news index */
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: #666; font-size: 0.85rem; margin: 0 0 1.5rem; }
.content .post-meta.is-past { display: inline-block; margin: 0 0 1rem; padding: 0.15rem 0.6rem; border: 1px solid #c9c9d2; border-radius: 4px; color: #555; background: #f7f7f9; }
.content .post-meta.is-past + .post-meta { margin-top: 0; }
.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.75rem; letter-spacing: 0.04em; color: var(--accent); }
.cards .card-title { display: block; margin: 0.55rem 0 0.25rem; font-size: 0.95rem; font-weight: 600; line-height: 1.5; text-wrap: balance; 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;
}
/* Events: three flyer cards per row, the whole flyer on a pale 3:2 tile (generated by build.py with fit: contain) */
.cards.is-flyers { grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2.5rem; }
.cards.is-flyers .card-pic { aspect-ratio: 3 / 2; background: #f3f3f6; border: 1px solid #ebebf0; }
.cards.is-flyers img { object-fit: contain; }
.cards.is-flyers .card-title { font-size: 1rem; }
@media (max-width: 800px) { .cards.is-flyers { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; } }
@media (max-width: 500px) { .cards.is-flyers { grid-template-columns: 1fr; } }

/* News: a dated list, one line per item (collection index and home) */
.news-list { list-style: none !important; margin: 0 0 2rem !important; padding: 0; max-width: 56rem; }
.news-list li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.5rem; align-items: baseline; margin: 0 !important; padding: 0.85rem 0; border-bottom: 1px solid #e8e8ec; }
.news-list li:first-child { border-top: 1px solid #e8e8ec; }
.news-list time { font-size: 0.85rem; color: var(--accent); letter-spacing: 0.03em; white-space: nowrap; }
.news-list a { color: #1f1f1f; line-height: 1.6; text-wrap: balance; }
.news-list a:hover, .news-list a:focus-visible { color: var(--accent); }
@media (max-width: 500px) {
  .news-list li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* 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: #666; }

/* Statements: date and signature lines */
.content p.is-right { text-align: right; }
.content p.is-center { text-align: center; }
/* Small inline image without lightbox (the LINE QR code) */
.content figure.is-photo.is-small { margin: 0.5rem 0 1.5rem; }
.content figure.is-photo.is-small img { max-width: 180px; }
/* Municipalities with a partnership system (Documents): two columns on wide screens */
/* The whole block (year headings + lists) flows in two page columns; each list is a single column */
.content .municipalities-wrap { columns: 2 20rem; column-gap: 3rem; margin: 1rem 0 1.5rem; }
.content ol.municipalities { margin: 0.5rem 0 1.25rem 1.5rem; }
.content ol.municipalities li { break-inside: avoid; }
.content h3.year { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; color: #333; break-after: avoid; }
.content .municipalities-wrap > h3.year:first-child { margin-top: 0; }
.content ol.municipalities li { break-inside: avoid; }
/* Home: the three section tiles (photo 3:2, full excerpt) */
.cards.is-tiles { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin: 2rem 0 2.5rem !important; }
.cards.is-tiles .card-pic { aspect-ratio: 3 / 2; }
.cards.is-tiles .card-title { font-size: 1.15rem; }
.cards.is-tiles .card-excerpt { -webkit-line-clamp: unset; font-size: 0.875rem; }
@media (max-width: 700px) { .cards.is-tiles { grid-template-columns: 1fr; } }

/* Document links (PDFs in /files/) */
.content p.file a { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--accent-soft); border-radius: 6px; }
.content p.file a::before { content: "\1F4C4\00a0"; }
.content p.file a:hover { border-color: var(--accent); }
.content .buttons.cta-links { margin: 0.25rem 0 1.75rem; max-width: 44rem; }
.content .buttons.cta-links .button { font-weight: 600; }
.content .buttons.cta-links .button::after { content: "\00a0↗"; font-size: 0.8em; opacity: 0.8; }
.content .button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
/* Consultation: one h3 per service, dl.info rows, the QR code inline next to the LINE row */
.content h3 + dl.info, .content h3 + p + dl.info { margin-top: 0.75rem; }
.content dl.info + .buttons.cta-links { margin-top: -0.5rem; }
.content .buttons.cta-links + h3 { margin-top: 3rem; }   /* a solid button reads closer than text; give the next heading air */
.content .buttons.cta-links + h2 { margin-top: 3.5rem; }
.content figure.is-photo.is-small.is-inline { display: inline-block; vertical-align: top; margin: 0.25rem 0 0.25rem 1rem; }
.content figure.is-photo.is-small.is-inline img { max-width: 120px; }
/* Key/value blocks (About: 法人名, 所在地 …) */
.content dl.info { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: 0.4rem; margin-bottom: 1.5rem; }
.content dl.info dt { font-weight: 600; color: #444; white-space: nowrap; }
.content dl.info dd { margin: 0; }
@media (max-width: 480px) {
  .content dl.info { grid-template-columns: 1fr; row-gap: 0; }
  .content dl.info dd { margin-bottom: 0.6rem; }
}

/* 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; }
/* Covers (Work page): uncropped portrait images, bottom-aligned, with a thin frame */
.content ul.gallery.is-covers { --tile: 160px; gap: 1.25rem 1rem; align-items: end; list-style: none; margin: 1.5rem 0 2.5rem; }
.content ul.gallery.is-covers li { margin: 0; }
.gallery.is-covers .tile img { aspect-ratio: auto; object-fit: contain; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.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 4.75rem; }  /* bottom room for the back-to-top button */
.footer-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 2.5rem; margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid #e3e3e8; }
.footer-heading { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; color: #666; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.footer-nav li { margin: 0; }
.footer-nav a:not(.button) { color: #222; padding: 0.3rem 0; display: inline-block; line-height: 1.4; }
.footer-nav a:not(.button):hover, .footer-nav a:not(.button):focus-visible { color: var(--accent); }
.footer-nav .footer-cta { margin: 1rem 0 0; gap: 0.5rem; }
.footer-nav .footer-cta .button { font-weight: 600; }
.footer-nav .footer-cta .button:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; box-shadow: none; }
@media (max-width: 700px) { .footer-nav { grid-template-columns: 1fr 1fr; } .footer-nav .footer-group:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-nav { grid-template-columns: 1fr; } }
.footer .social a { display: inline-block; padding: 0.35rem 0.15rem; }
.footer .columns { align-items: center; }  /* the © line sits level with the middle of the address block */
.footer .social { margin-bottom: 0.25rem; }