@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:wght@500&display=swap');
:root{--black:#111;--gray:#777}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--black);font-family:"DM Sans",Arial,sans-serif}
header{position:fixed;right:28px;top:24px;z-index:20} header nav{display:flex} header a{color:#111;text-decoration:none;font-size:10px;letter-spacing:.16em} header a:hover{text-decoration:underline;text-underline-offset:5px}
.hero{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 24px 70px}
h1{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(88px,13vw,205px);line-height:.88;letter-spacing:-.065em;margin:0}
.categories{display:flex;gap:clamp(110px,18vw,300px);margin-top:52px}
.categories button{border:0;background:none;padding:0;color:#111;cursor:pointer;font:500 11px "DM Sans",Arial,sans-serif;letter-spacing:.18em}
.categories button:hover,.categories button.active{text-decoration:underline;text-underline-offset:7px}
.gallery{width:min(1220px,90vw);margin:0 auto 15vw;columns:3 260px;column-gap:clamp(18px,3vw,44px)}
.photo{break-inside:avoid;margin:0 0 clamp(18px,3vw,44px);cursor:zoom-in}
.photo img{display:block;width:100%;height:auto}
.empty{min-height:20vh;text-align:center;color:#999;font-size:10px;letter-spacing:.15em}

.info h2{font-size:10px;font-weight:500;letter-spacing:.18em;margin:0 0 20px}
.info a{color:#111}
.viewer{position:fixed;inset:0;background:rgba(255,255,255,.97);z-index:100;display:none;align-items:center;justify-content:center}
.viewer.open{display:flex}
.viewer img{max-width:90vw;max-height:90vh;object-fit:contain}
.viewer button{position:absolute;border:0;background:none;color:#111;cursor:pointer;font-size:28px}
.viewer-close{right:28px;top:18px}
.viewer-prev{left:24px;top:50%;transform:translateY(-50%)}
.viewer-next{right:24px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){
 header{right:18px;top:18px}
 header nav{gap:15px}
 .hero{min-height:52vh}
 h1{font-size:20vw}
 .categories{gap:65px;margin-top:35px}
 .gallery{width:92vw;columns:2;column-gap:14px}
 .photo{margin-bottom:14px}
}
header {
  position: absolute;
  top: 24px;
  right: 28px;
}

header nav a {
  color: #111;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
}

header nav a:hover {
  opacity: 0.5;
}
/* About：右上に配置・スクロールで一緒に流れる */
header {
  position: absolute !important;
  top: 24px;
  left: 0;
  width: 100%;
  z-index: 100;
}

header nav {
  position: absolute;
  top: 0;
  right: 28px;
}

header nav a {
  color: #111;
  text-decoration: none;
}