/* ==================================
   Illustration Page
================================== */

.illust-page{
  width:min(1280px, 100%);
  margin:0 auto;
  padding:70px 6vw 120px;
}


/* ---------- タイトル ---------- */

.illust-heading{
  position:relative;
  text-align:center;
  margin-bottom:55px;
}

.illust-heading::before{
  content:"✦ ✦ ✦";
  display:block;

  margin-bottom:14px;

  color:var(--magenta);

  font-size:10px;
  letter-spacing:.55em;

  opacity:.8;
}

.illust-eyebrow{
  display:block;

  margin-bottom:7px;

  font-family:"Cormorant Garamond", serif;
  font-style:italic;

  font-size:12px;
  letter-spacing:.3em;

  color:var(--ink-soft);

  text-transform:uppercase;
}

.decorated-title{
  margin:0;

  font-family:"Zen Old Mincho", serif;

  font-size:clamp(34px, 5vw, 58px);

  line-height:1.2;

  letter-spacing:.08em;

  color:var(--ink);
}

.illust-heading p{
  margin:13px 0 0;

  color:var(--ink-soft);

  font-family:"Cormorant Garamond", serif;
  font-style:italic;

  font-size:13px;

  letter-spacing:.1em;
}


/* ==================================
   Gallery
================================== */

.gallery{
  display:grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  grid-auto-rows:85px;

  gap:13px;

  grid-auto-flow:dense;
}


/* ---------- 作品カード ---------- */

.specimen{
  
  position:relative;

  margin:0;

  min-width:0;

  padding:6px;

  overflow:hidden;

  cursor:zoom-in;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* ---------- 画像 ---------- */

.specimen img{
  width:100%;

  height:100%;

  display:box;

  object-fit:contain;

  border-radius:2px;

  filter:
    saturate(.88)
    contrast(1.04);

  transition:
    transform .45s ease,
    filter .45s ease;
}


/* ---------- キャプション ---------- */

.specimen figcaption{
  position:absolute;

  left:20px;

  bottom:19px;

  padding:4px 10px;

  color:var(--ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-style:italic;

  font-size:12px;

  letter-spacing:.08em;

  opacity:0;

  transform:
    translateY(5px);

  transition:
    opacity .25s ease,
    transform .25s ease;

  pointer-events:none;
}


/* ---------- ホバー ---------- */

.specimen:hover{
  z-index:5;

  transform:
    translateY(-5px);

  border-color:
    var(--magenta);

  cast-shadow:
    0 15px 35px
    rgba(0,0,0,.35);
}

.specimen:hover img{
  transform:
    scale(1.035);

  filter:
    saturate(1)
    contrast(1.05);
}

.specimen:hover figcaption{
  opacity:1;

  transform:
    translateY(0);
}





/* ==================================
   Image Modal
================================== */

.modal{
  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:30px;

  background:
    rgba(5,3,4,.9);

  backdrop-filter:
    blur(7px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index:9999;

  cursor:zoom-out;
}

.modal.active{
  opacity:1;

  visibility:visible;

  pointer-events:auto;
}

.modal img{
  display:block;

  max-width:
    min(92vw, 1300px);

  max-height:
    90vh;

  width:auto;

  height:auto;

  object-fit:contain;

  border:
    1px solid
    var(--stitch);

  border-radius:4px;

  background:
    var(--cream-deep);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.7);

  animation:
    image-popup
    .28s
    ease;
}

@keyframes image-popup{

  from{
    opacity:0;

    transform:
      scale(.94);
  }

  to{
    opacity:1;

    transform:
      scale(1);
  }

}


/* モーダル表示中はページを固定 */

body.modal-open{
  overflow:hidden;
}


/* ==================================
   Tablet
================================== */

@media (max-width:900px){

  .gallery{

    grid-template-columns:
      repeat(3, 1fr);

    grid-auto-rows:
      85px;

    gap:10px;
  }

}


/* ==================================
   Smartphone
================================== */

@media (max-width:600px){

  .illust-page{
    padding:
      50px
      5vw
      90px;
  }

  .illust-heading{
    margin-bottom:
      35px;
  }

  .gallery{

    grid-template-columns:
      repeat(2, 1fr);

    grid-auto-rows:
      145px;

    gap:14px;
  }

  /* スマホでは複雑なモザイクを少し整理 */

  .specimen{
    padding:7px;
  }

  .specimen figcaption{
    opacity:1;

    transform:none;

    left:11px;

    bottom:11px;

    font-size:10px;

    padding:
      2px
      7px;
  }

  .modal{
    padding:12px;
  }

}