/* ==========================================================================
   作品集ページ（art-work.html）
   @sandragon965 のサイトカラー（#675a43）と明朝体を踏襲した
   作品グリッド（PC・スマホとも3列）。
   ========================================================================== */

.art-page {
   --art-accent: #675a43;
   --art-ink: #333;
   --art-paper: #faf8f4;
   --art-line: #e6e0d4;
   --art-mincho: "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

/* ---------- 見出し ---------- */
.art-head {
   margin: 0 0 2.2em;
   text-align: center;
}

.art-head h2 {
   letter-spacing: 0.25em;
}

.art-head p {
   margin: 0.9em 0 0;
   color: #777;
   font-size: 0.9em;
   letter-spacing: 0.08em;
}

/* ---------- 作品グリッド ---------- */
.art-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.art-item {
   margin: 0;
   padding: 0;
}

.art-item a {
   display: block;
   color: var(--art-ink);
   text-decoration: none;
}

.art-item a:focus-visible {
   outline: 2px solid var(--art-accent);
   outline-offset: 4px;
   border-radius: 4px;
}

.art-thumb {
   position: relative;
   display: block;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   border: 1px solid var(--art-line);
   border-radius: 4px;
   background: var(--art-paper);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.art-thumb img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   margin: 0;
   object-fit: cover;
   transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.art-item a:hover .art-thumb,
.art-item a:focus-visible .art-thumb {
   box-shadow: 0 10px 28px rgba(103, 90, 67, 0.22);
   transform: translateY(-3px);
}

.art-item a:hover .art-thumb img,
.art-item a:focus-visible .art-thumb img {
   transform: scale(1.04);
}

.art-cap {
   display: block;
   margin-top: 0.7em;
   font-family: var(--art-mincho);
   font-size: 0.92em;
   letter-spacing: 0.1em;
   text-align: center;
}

/* ---------- 関連リンク ---------- */
.art-links {
   margin-top: 3em;
   padding-top: 1.2em;
   border-top: 1px solid var(--art-line);
   text-align: right;
}

.art-links a {
   color: var(--art-accent);
}

/* ========= モバイル最適化 ========= */
@media screen and (max-width: 600px) {
   .art-grid {
      gap: 8px;
   }

   .art-thumb {
      border-radius: 2px;
   }

   .art-cap {
      margin-top: 0.4em;
      font-size: 0.8em;
      letter-spacing: 0.05em;
   }
}

@media (prefers-reduced-motion: reduce) {
   .art-thumb,
   .art-thumb img {
      transition: none;
   }
}