/* ENWIT — /works/ 開発実績ショーケース。
   既存の tokens.css / style.css（.plate-fig / .specimen-cap / .wrap）を継承。
   二色厳守（burgundy + green）・博物画の図版言語で、写真を「観察の記録」として馴染ませる。
   カードは独立した完結ブロック（Pinegrow で個別調整しやすい構造）。 */

/* ===== レイアウト ===== */
.works-wrap {
    margin-top: clamp(40px, 6vw, 72px);
}

.work-group {
    margin-top: clamp(56px, 8vw, 104px);
}
.work-group:first-child {
    margin-top: 0;
}

/* --- 群ヘッダ（番号・英名・和名・ラテン） --- */
.wg-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: clamp(16px, 2.4vw, 30px);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: clamp(28px, 4vw, 44px);
}
.wg-no {
    grid-row: 1 / span 2;
    font-family: var(--latin);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: .08em;
    color: var(--accent);
    line-height: 1;
}
.wg-no.bio {
    color: var(--green);
}
.wg-title {
    font-family: var(--latin);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    letter-spacing: .04em;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 .9em;
}
.wg-ja {
    font-family: var(--mincho);
    font-size: .62em;
    letter-spacing: .14em;
    color: var(--ink-soft);
}
.wg-latin {
    grid-column: 2;
    font-family: var(--latin);
    font-style: italic;
    font-size: .9rem;
    letter-spacing: .08em;
    color: var(--ink-faint);
    margin: .35em 0 0;
}

/* --- カードグリッド --- */
.work-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(26px, 3vw, 40px);
}

/* ===== カード本体 ===== */
.work-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--hair-soft);
    padding: clamp(16px, 1.6vw, 22px);
    transition: border-color .35s ease, transform .35s ease;
}
.work-card:hover {
    border-color: var(--hair);
    transform: translateY(-2px);
}

/* 図版枠（.plate-fig 継承。aspect-ratio はカード用に微調整） */
.wc-fig {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0;
}
.wc-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 写真を「博物画の記録」として鎮める：軽いグレースケール＋セピア寄せ */
    filter: grayscale(.55) sepia(.12) contrast(.96) brightness(1.02);
    transition: filter .5s ease, transform .6s ease;
}
.work-card:hover .wc-fig img {
    filter: grayscale(.15) sepia(.04) contrast(1) brightness(1);
    transform: scale(1.03);
}
/* テキストのみカードの図版枠：斜線地のまま Latin 名を据える（.plate-fig 既存装飾を活用） */
.wc-fig.is-textonly {
    aspect-ratio: 4 / 3;
}

.wc-body {
    flex: 1 1 auto;
    padding-top: 16px;
}
.wc-kind {
    font-family: var(--mincho);
    font-size: .76rem;
    letter-spacing: .12em;
    color: var(--accent);
    margin: 0 0 .5em;
}
.wc-tech {
    font-family: var(--latin);
    font-style: italic;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
    margin-left: .5em;
}
.wc-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 .7em;
}
.wc-title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
    transition: border-color .3s ease, color .3s ease;
}
.wc-title a:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.wc-text {
    font-size: .92rem;
    line-height: 1.85;
    color: var(--ink-soft);
    margin: 0;
}

/* 標本キャプション（.specimen-cap 継承。Pl. 番号 + Latin 学名） */
.wc-cap {
    margin-top: 16px;
}

/* 詳細リンク（プロダクト等） */
.wc-more {
    align-self: flex-start;
    margin-top: 14px;
    font-family: var(--latin);
    font-style: italic;
    font-size: .86rem;
    letter-spacing: .04em;
    color: var(--green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    transition: gap .3s ease, color .3s ease;
}
.wc-more span {
    transition: transform .3s ease;
}
.wc-more:hover {
    color: var(--green-soft);
}
.wc-more:hover span {
    transform: translateX(4px);
}

/* Products 群の差し色は green 側 */
.is-products .work-card:hover {
    border-color: var(--green-tint);
}
.is-products .wc-kind {
    color: var(--green);
}
.is-products .wc-title a:hover {
    color: var(--green);
    border-color: var(--green);
}

.wg-foot {
    margin-top: clamp(24px, 3vw, 36px);
    font-size: .9rem;
    color: var(--ink-soft);
}
.wg-foot a {
    color: var(--green);
    border-bottom: 1px solid var(--hair);
    text-decoration: none;
    transition: border-color .3s ease;
}
.wg-foot a:hover {
    border-color: var(--green);
}

/* ===== レスポンシブ ===== */
@media (max-width: 640px) {
    .work-cards {
        grid-template-columns: 1fr;
    }
    .wg-head {
        column-gap: 14px;
    }
}


/* ===== サブカテゴリ・ナビ（Services/Profile の .sv-toc に倣う） ===== */
.wk-toc {
    position: sticky;
    top: 88px;
    z-index: 20;
    background: rgba(250,248,244,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    margin-top: clamp(28px, 4vw, 44px);
}
.wk-toc-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
.wk-toc-item {
    display: flex;
    flex-direction: column;
    gap: .2em;
    padding: 1em 1.1em;
    text-decoration: none;
    border-left: 1px solid var(--hair-soft);
    transition: background .2s;
}
.wk-toc-item:first-child {
    border-left: none;
}
.wk-toc-item:hover {
    background: var(--paper-deep);
}
.wk-toc-no {
    font-family: var(--latin);
    font-style: italic;
    font-size: .8rem;
    color: var(--accent-tint);
}
.wk-toc-name {
    font-family: var(--mincho);
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
    letter-spacing: .03em;
}
.wk-toc-field {
    font-size: .76rem;
    color: var(--ink-faint);
}

/* アンカー着地位置をスティッキー2段ぶん押し下げる */
.work-group {
    scroll-margin-top: 168px;
}

@media (max-width: 920px){
    .wk-toc-inner {
        grid-template-columns: repeat(3, 1fr);
    }
    .wk-toc-item:nth-child(4) {
        border-left: none;
    }
    .wk-toc-item:nth-child(n+4) {
        border-top: 1px solid var(--hair-soft);
    }
}
@media (max-width: 620px){
    .wk-toc-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .wk-toc-item:nth-child(odd) {
        border-left: none;
    }
    .wk-toc-item:nth-child(n+3) {
        border-top: 1px solid var(--hair-soft);
    }
    .wk-toc-field {
        display: none;
    }
}