/* 作品区（/works/）· 复用全站 tokens.css / components.css，本文件只放作品页专属样式 */

.work-hero { padding: calc(var(--s7) + 40px) 0 var(--s7); position: relative; overflow: hidden; }
.work-hero-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.work-kicker { font-size: 11px; letter-spacing: var(--ls-kicker); color: var(--faint); text-transform: uppercase; }
.work-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h1); line-height: 1.15; margin: var(--s3) 0 var(--s4); }
.work-sub { color: var(--dim); max-width: 640px; line-height: 1.8; font-size: var(--t-body); }
.work-band { display: flex; height: 22px; border-radius: var(--r-organic-a); overflow: hidden; margin: var(--s6) 0 0; }
.work-band i { display: block; }

.wk-sec { max-width: var(--container); margin: 0 auto; padding: var(--s7) var(--gutter); border-top: 1px solid var(--line); }
.wk-quote { font-family: var(--font-serif); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.6; font-weight: 600; max-width: 820px; }
.wk-quote::before { content: '「'; color: var(--brand); }
.wk-quote::after { content: '」'; color: var(--brand); }
.wk-cite { display: block; margin-top: var(--s4); font-size: var(--t-small); color: var(--faint); font-family: var(--font-sans); font-weight: 400; }

.wk-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.metric { border-left: 2px solid var(--brand); padding-left: var(--s4); }
.metric b { display: block; font-family: var(--font-serif); font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.1; }
.metric span { font-size: var(--t-small); color: var(--dim); }

.wk-step { display: grid; grid-template-columns: 88px 1fr; gap: var(--s5); margin-bottom: var(--s7); align-items: start; }
.wk-step:last-child { margin-bottom: 0; }
.wk-step-no { font-family: var(--font-serif); font-size: 30px; color: var(--faint); line-height: 1; padding-top: 4px; }
.wk-step h3 { font-size: 19px; font-weight: 700; margin: 0 0 var(--s3); }
.wk-step p { color: var(--dim); line-height: 1.8; font-size: 14.5px; margin: 0 0 var(--s4); max-width: 680px; }
.wk-fig { border-radius: var(--r-organic-a); overflow: hidden; background: var(--paper-card); border: 1px solid var(--line); }
.wk-fig img { display: block; width: 100%; height: auto; }
.wk-fig figcaption { font-size: 12px; color: var(--faint); padding: 10px 14px; border-top: 1px solid var(--line); }

.wk-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.wk-swatch { border: 1px solid var(--line); border-radius: var(--r-organic-b); overflow: hidden; background: var(--paper-card); text-align: left; cursor: pointer; font: inherit; padding: 0; }
.wk-swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.wk-swatch-chip { display: block; height: 108px; }
.wk-swatch-meta { padding: var(--s3) var(--s4) var(--s4); }
.wk-swatch-meta b { display: block; font-size: 14.5px; }
.wk-swatch-meta span { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }

.wk-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.wk-pager a { display: block; border: 1px solid var(--line-dark); border-radius: var(--r-organic-b); padding: var(--s5); text-decoration: none; color: var(--ink); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.wk-pager a:hover { background: var(--paper-subtle); transform: translateY(-2px); }
.wk-pager small { display: block; font-size: 11px; letter-spacing: var(--ls-kicker); color: var(--faint); text-transform: uppercase; }
.wk-pager b { font-size: 17px; font-weight: 700; }
.wk-pager .next { text-align: right; }

/* 作品索引页 */
.works-index { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.works-item { border: 1px solid var(--line); border-radius: var(--r-organic-a); overflow: hidden; background: var(--paper-card); text-decoration: none; color: var(--ink); display: block; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.works-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.works-item img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.works-item-body { padding: var(--s5); }
.works-item-body small { font-size: 11px; letter-spacing: var(--ls-kicker); color: var(--brand); text-transform: uppercase; }
.works-item-body h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 700; margin: var(--s2) 0 var(--s3); }
.works-item-body p { font-size: 13.5px; color: var(--dim); line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
  .wk-metrics { grid-template-columns: repeat(2, 1fr); }
  .wk-palette { grid-template-columns: repeat(2, 1fr); }
  .works-index { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .wk-step { grid-template-columns: 1fr; }
  .wk-pager { grid-template-columns: 1fr; }
  .wk-pager .next { text-align: left; }
  .work-band { height: 16px; }
}