@charset "UTF-8";
/* =============================================================
   作品一覧ページ 固有スタイル (works.css)
   ※ 共通のものは base.css。ここには重複させない。
   スクエアの作品を、シリーズごとにカタログ表示。
   ============================================================= */

.catalog { background: var(--paper); }

/* オンラインショップ(BASE)への導線 */
.works-shop { text-align: center; margin-top: clamp(28px, 4.5vw, 48px); }
.works-shop .shop-plat {
  font-family: var(--font-en); font-size: 0.72em; letter-spacing: 0.24em;
  opacity: 0.7;
}

/* ---- シリーズ ---- */
.cat-series { margin-top: clamp(56px, 9vw, 104px); }
.cat-series:first-of-type { margin-top: 0; }

.cat-series-head { margin-bottom: clamp(28px, 4.5vw, 48px); }
.cat-series-head .cat-series-en {
  font-family: var(--font-en); font-weight: 500;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem); letter-spacing: 0.1em; color: var(--navy);
  line-height: 1.2;
}
.cat-series-head .cat-series-jp {
  display: inline-block; margin-left: 0.9em;
  font-size: 0.8rem; letter-spacing: 0.26em; color: var(--gold-deep);
}
.cat-series-head .cat-series-desc {
  margin-top: 1em; max-width: 40em;
  font-size: 0.9rem; line-height: 2; color: var(--ink-soft);
}
.cat-series-head .cat-series-line {
  height: 1px; background: var(--grad-gold-hair); opacity: 0.6; margin-top: 1.4em;
}

/* ---- 作品グリッド(スクエア) ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: clamp(18px, 2.6vw, 32px);
}
.cat-item { display: flex; flex-direction: column; }

.cat-figure {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-dim);
}
.cat-figure img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.cat-item:hover .cat-figure img { transform: scale(1.045); }
/* ホバーで浮かぶ枠線(木枠=四角の世界観) */
.cat-figure::after {
  content: ""; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(255,255,255,0.55);
  opacity: 0; transition: opacity 0.5s var(--ease), inset 0.5s var(--ease);
  pointer-events: none;
}
.cat-item:hover .cat-figure::after { opacity: 1; inset: 14px; }
/* 箔シリーズにさりげない金の指標 */
.cat-figure .cat-leaf {
  position: absolute; top: 0; left: 0; z-index: 3;
  font-family: var(--font-en); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--navy-deep);
  background: var(--gold-light); padding: 0.3em 0.8em;
}
.cat-figure .cat-leaf.silver { background: #d8dee4; }

.cat-cap { padding-top: 1em; }
.cat-cap .cat-no {
  font-family: var(--font-en); font-size: 1.05rem; letter-spacing: 0.08em;
  color: var(--navy); margin-bottom: 0.5em;
}
.cat-cap .cat-material { font-size: 0.8rem; line-height: 1.75; color: var(--ink-soft); }
.cat-cap .cat-size {
  display: inline-block; margin-top: 0.5em;
  font-family: var(--font-en); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--ink);
}
.cat-cap .cat-size::before {
  content: ""; display: inline-block; width: 14px; height: 1px;
  background: var(--gold); vertical-align: middle; margin-right: 0.6em; transform: translateY(-2px);
}
.cat-cap .cat-year {
  font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--gold-deep); margin-left: 0.9em;
}

/* シリーズ上位ラベル(Clover) */
.cat-umbrella {
  text-align: center; margin-bottom: clamp(20px, 4vw, 40px);
  font-size: 0.86rem; letter-spacing: 0.22em; color: var(--ink-soft);
}
.cat-umbrella .cat-umbrella-en {
  font-family: var(--font-en); font-size: 1.2rem; letter-spacing: 0.2em;
  color: var(--gold-deep); margin-right: 0.5em;
}

/* クリックで拡大できることを示す */
.cat-item { cursor: zoom-in; }

/* ---- 末尾: SNS/戻る ---- */
.works-outro { background: var(--grad-konjo); color: var(--paper); text-align: center; position: relative; overflow: hidden; }
.works-outro::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px);
  background-size: 6px 6px; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none;
}
.works-outro .outro-inner { max-width: 600px; margin-inline: auto; position: relative; }
.works-outro .eyebrow {
  font-family: var(--font-en); letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-light); font-size: clamp(0.8rem,1.6vw,0.95rem); display:inline-block; margin-bottom: 1.4em;
}
.works-outro h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); letter-spacing: 0.1em; color: var(--paper); line-height: 1.6; }
.works-outro p { margin-top: 1.4em; color: var(--blue-mist); line-height: 2.1; }
.works-outro .outro-actions { margin-top: 2.4em; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }