@charset "UTF-8";
:root { color-scheme: light; font-family: "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; }
button, a { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
[data-protected-image] { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .65rem 1rem; color: #fff; background: #111; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.gallery-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: min(100% - 2rem, 92rem); padding: 1rem 0; margin: 0 auto; }
.gallery-header__brand { font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; }
.gallery-header nav { display: flex; gap: .35rem; }
.gallery-header nav a { display: grid; width: 2rem; height: 2rem; place-items: center; font-size: .75rem; font-weight: 900; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; opacity: .45; }
.gallery-header nav a:hover, .gallery-header nav a[aria-current="page"] { opacity: 1; }
.concept-hero, .gallery-shell, .gallery-footer { width: min(100% - 2rem, 92rem); margin-inline: auto; }
.concept-hero { padding: clamp(3rem, 9vw, 8rem) 0 clamp(4rem, 10vw, 9rem); }
.concept-hero__eyebrow, .section-heading p { margin: 0 0 1rem; font-size: .72rem; font-weight: 900; letter-spacing: .2em; }
.concept-hero h1 { margin: 0; line-height: .92; }
.concept-hero__lead { max-width: 38rem; margin: 2rem 0; line-height: 1.9; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2 { margin: 0; }
.shuffle-button { padding: .85rem 1.2rem; font-weight: 900; cursor: pointer; border: 0; }
.visit-note { display: inline-block; margin-left: 1rem; font-size: .72rem; opacity: .65; }
.gallery-grid { position: relative; }
.gallery-load-sentinel { width: 100%; height: 1px; }
.gallery-load-sentinel[hidden] { display: none; }
.gallery-empty { grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; }
.work-card__trigger { display: block; width: 100%; padding: 0; text-align: left; cursor: zoom-in; background: transparent; border: 0; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .28s ease, filter .28s ease; }
.work-card figure { margin: 0; }
.work-card__media { display: block; overflow: hidden; }
.work-card__media img { width: 100%; height: auto; }
.work-card figcaption { position: relative; }
.work-card__category, .work-card__detail, .work-card__number { display: block; }
.work-card__title { display: block; }
.reveal-item { opacity: 0; transform: translateY(1.5rem); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc((var(--card-index, 0) % 4) * 45ms); }
.reveal-item.is-visible { opacity: 1; transform: none; }
.gallery-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 4rem 0 2rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.gallery-modal { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 0; color: #fff; background: transparent; border: 0; }
.gallery-modal::backdrop { background: rgba(10, 8, 10, .94); backdrop-filter: blur(12px); }
.gallery-modal[open] { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; gap: 1rem; align-items: center; padding: 2rem; }
.gallery-modal figure { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .5rem; justify-items: center; height: calc(100vh - 4rem); margin: 0; }
.gallery-modal img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 8rem); margin: auto; object-fit: contain; }
.gallery-modal figcaption { text-align: center; }
.gallery-modal p { margin: 0; font-size: .75rem; }
.gallery-modal__close, .gallery-modal__move { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: #fff; cursor: pointer; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
.gallery-modal__close { position: fixed; top: 1rem; right: 1rem; z-index: 2; font-size: 1.8rem; }
@media (max-width: 700px) {
  .concept-hero { padding-top: 3rem; }
  .section-heading { display: block; }
  .visit-note { display: block; margin: .9rem 0 0; }
  .gallery-modal[open] { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: .2rem; padding: 4rem .4rem 1rem; }
  .gallery-modal__move { width: 2.75rem; height: 2.75rem; }
  .gallery-modal figure { height: calc(100vh - 5rem); }
  .gallery-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-item { opacity: 1; transform: none; }
}