@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Poiret+One&display=swap');

:root {
  --red-0: #240309;
  --red-1: #3c0710;
  --red-2: #5a101b;
  --gold: #c9a65c;
  --gold-strong: #dfbf78;
  --ivory: #f2e8d7;
  --ivory-soft: #dfd0bb;
  --shadow: rgba(0,0,0,.38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background:
    radial-gradient(circle at 14% 10%, rgba(217,154,103,.12), transparent 26%),
    radial-gradient(circle at 86% 46%, rgba(216,178,103,.08), transparent 22%),
    linear-gradient(145deg, var(--red-0), var(--red-2) 48%, var(--red-1));
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  line-height: 1.9;
  letter-spacing: .035em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 12px);
  mix-blend-mode: soft-light;
}

main {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.page-header {
  padding: 7rem 0 5rem;
  text-align: center;
}

.sigil {
  margin: 0 0 1.5rem;
  color: var(--gold-strong);
  font-family: "Poiret One", "Century Gothic", sans-serif;
  font-size: .72rem;
  letter-spacing: .32em;
}

h1 {
  margin: 0;
  font-family: "Cinzel Decorative", "Noto Serif JP", serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: .05em;
}

.divider {
  width: min(420px, 68vw);
  height: 40px;
  margin: 1.8rem auto 1.4rem;
  position: relative;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 41%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-strong));
}

.divider::before { left: 0; }
.divider::after { right: 0; transform: scaleX(-1); }

.divider span {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold-strong);
  transform: translateX(-50%) rotate(45deg);
}

.intro {
  margin: 0 auto 1.8rem;
  max-width: 680px;
  color: var(--ivory-soft);
}

.manifesto-link {
  color: var(--gold-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(223,191,120,.45);
  padding-bottom: .18rem;
  font-size: .92rem;
}

.gallery { padding: 1rem 0 8rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.work {
  background: rgba(28,3,8,.24);
  border: 1px solid rgba(223,191,120,.24);
  box-shadow: 0 20px 55px var(--shadow);
}

.work-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #190408;
  cursor: zoom-in;
  overflow: hidden;
}

.work-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  transition: transform .4s ease, filter .4s ease;
}

.work-wide .work-button img {
  aspect-ratio: auto;
}

.work-overlay {
  position: absolute;
  inset: auto 1rem 1rem auto;
  padding: .45rem .7rem;
  color: var(--ivory);
  background: rgba(20,2,6,.72);
  border: 1px solid rgba(223,191,120,.36);
  font-size: .78rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.work-button:hover img,
.work-button:focus-visible img {
  transform: scale(1.025);
  filter: saturate(.88) contrast(1.04);
}

.work-button:hover .work-overlay,
.work-button:focus-visible .work-overlay {
  opacity: 1;
  transform: translateY(0);
}

.work-meta { padding: 1.15rem 1.2rem 1.35rem; }

.work-meta h2 {
  margin: 0 0 .25rem;
  color: var(--gold-strong);
  font-family: "Cinzel Decorative", "Noto Serif JP", serif;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: .06em;
}

.work-meta p {
  margin: 0;
  color: var(--ivory-soft);
  font-size: .92rem;
}

.lightbox {
  width: min(94vw, 1280px);
  max-width: none;
  padding: 0;
  border: 1px solid rgba(223,191,120,.38);
  background: rgba(24,2,7,.98);
  color: var(--ivory);
  box-shadow: 0 30px 100px rgba(0,0,0,.68);
}

.lightbox::backdrop {
  background: rgba(8,0,2,.88);
  backdrop-filter: blur(6px);
}

.lightbox-stage {
  display: grid;
  place-items: center;
  min-height: 50vh;
  max-height: 78vh;
  padding: 1.2rem;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  background:
    radial-gradient(circle at center, rgba(115,25,38,.26), transparent 60%),
    #120206;
}

.lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  transform-origin: center center;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  will-change: transform;
}

.lightbox-caption {
  padding: 1.1rem 1.5rem 1.4rem;
  border-top: 1px solid rgba(223,191,120,.2);
}

.lightbox-caption h2 {
  margin: 0 0 .2rem;
  color: var(--gold-strong);
  font-family: "Cinzel Decorative", "Noto Serif JP", serif;
  font-size: 1.15rem;
}

.lightbox-caption p {
  margin: 0;
  color: var(--ivory-soft);
  font-size: .92rem;
}

.lightbox-close {
  position: absolute;
  top: .65rem;
  right: .75rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(223,191,120,.45);
  background: rgba(18,2,6,.78);
  color: var(--gold-strong);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.arabesque {
  position: fixed;
  z-index: 0;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(223,191,120,.38);
  transform: rotate(45deg);
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(223,191,120,.08));
}

.arabesque::before,
.arabesque::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(223,191,120,.32);
  transform: rotate(45deg);
}

.arabesque::after {
  inset: 31%;
  background:
    linear-gradient(45deg, transparent 46%, rgba(223,191,120,.18) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(223,191,120,.14) 47% 53%, transparent 54%);
  border-color: rgba(223,191,120,.26);
}

.arabesque-1 { top: -120px; left: -100px; }
.arabesque-2 { top: 20%; right: -135px; }
.arabesque-3 { bottom: 18%; left: -125px; }
.arabesque-4 { bottom: -105px; right: -80px; }

@media (max-width: 760px) {
  main { width: min(100% - 1.2rem, 1120px); }
  .page-header { padding: 5rem 0 3.5rem; }
  .gallery-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .gallery { padding-bottom: 5rem; }
  .work-wide .work-button img { aspect-ratio: 4 / 3; }
  .lightbox { width: 96vw; }
  .lightbox-stage { min-height: 38vh; padding: .7rem; }
  .arabesque { width: 240px; height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-button img,
  .work-overlay { transition: none; }
}

/* Lightbox zoom */
.lightbox-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.lightbox-stage:active {
  cursor: grabbing;
}

.lightbox-stage img {
  transform-origin: center center;
  will-change: transform;
  transition: transform .12s ease-out;
  -webkit-user-drag: none;
  user-select: none;
}

.lightbox-stage img.is-zoomed {
  cursor: grab;
}

.lightbox-stage img.is-zoomed:active {
  cursor: grabbing;
}

.lightbox-zoom-controls {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem;
  border: 1px solid rgba(223,191,120,.38);
  background: rgba(18,2,6,.82);
  backdrop-filter: blur(5px);
  transform: translateX(-50%);
}

.lightbox-zoom-controls button {
  min-width: 2.5rem;
  height: 2.35rem;
  padding: 0 .7rem;
  border: 1px solid rgba(223,191,120,.34);
  background: rgba(70,9,19,.88);
  color: var(--gold-strong);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.lightbox-zoom-controls button[data-zoom="reset"] {
  min-width: 4.8rem;
  font-size: .78rem;
}

.lightbox-zoom-controls button:hover,
.lightbox-zoom-controls button:focus-visible {
  background: rgba(105,18,31,.95);
  outline: 1px solid var(--gold-strong);
}

@media (max-width: 760px) {
  .lightbox-zoom-controls {
    bottom: .65rem;
  }
}
/* Firefoxのスクロールちらつき対策 */
@-moz-document url-prefix() {
  body::before {
    position: absolute;
    mix-blend-mode: normal;
    opacity: .08;
  }

  .arabesque {
    position: absolute;
    filter: none;
  }

  .work {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  }

  .lightbox::backdrop,
  .lightbox-zoom-controls {
    backdrop-filter: none;
  }
}