/* 制作・対応実例 (/works). Light editorial layout in the sourcing palette: paper, ink green, sage accent. */
.works-page { --works-ink:#172721; --works-muted:#4f5d56; --works-line:#d1d7ce; --works-accent:#b5d7c3; background:#f4f3ec; color:var(--works-ink); }

.works-hero, .works-group, .works-final { width:min(calc(100% - 32px), var(--max)); margin:0 auto; }
.works-hero { padding:88px 0 40px; border-bottom:1px solid var(--works-line); }
.works-hero h1 { margin:18px 0 0; font-size:clamp(34px, 5vw, 64px); line-height:1.3; letter-spacing:-.02em; }
.works-lead { max-width:640px; margin:26px 0 0; color:var(--works-muted); font-size:16px; line-height:2; }
.works-notes { margin:24px 0 0; padding:0; list-style:none; color:var(--works-muted); font-size:12px; line-height:1.9; }
.works-notes li::before { content:"— "; }
.works-photo-note { display:block; }
.works-index { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.works-index a { padding:8px 14px; border:1px solid var(--works-line); border-radius:999px; background:#fff; font-size:13px; font-weight:700; transition:border-color 180ms ease, background 180ms ease; }
.works-index a:hover { border-color:var(--works-ink); background:var(--works-accent); }

.works-group { padding:64px 0 8px; scroll-margin-top:96px; }
.works-group-head { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--works-ink); }
.works-group-head span { font:700 13px ui-monospace, monospace; color:var(--works-muted); }
.works-group-head h2 { margin:0; font-size:clamp(22px, 2.6vw, 30px); }
.works-group-head p { margin:0; font:11px ui-monospace, monospace; letter-spacing:.14em; color:var(--works-muted); }
.works-group-note { margin:16px 0 0; color:var(--works-muted); font-size:13px; }

.works-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; margin-top:26px; }
.work-card { display:flex; flex-direction:column; padding:22px; border:1px solid var(--works-line); border-radius:6px; background:#fff; transition:transform 260ms var(--ease), box-shadow 260ms ease; }
.work-card:hover { transform:translateY(-3px); box-shadow:0 18px 50px rgba(23,39,33,.08); }
.work-photo { display:none; margin:-22px -22px 18px; overflow:hidden; border-radius:6px 6px 0 0; background:#e7ece4; }
.work-card.has-photo .work-photo { display:block; }
.work-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.work-photo .work-thumbs { display:flex; gap:4px; padding:4px; background:#fff; }
.work-photo .work-thumbs button { flex:1; padding:0; border:2px solid transparent; border-radius:3px; background:none; cursor:pointer; }
.work-photo .work-thumbs button[aria-pressed="true"] { border-color:var(--works-ink); }
.work-photo .work-thumbs img { aspect-ratio:1; }
.work-type { margin:0; font:11px ui-monospace, monospace; letter-spacing:.1em; color:var(--works-muted); }
.work-card h3 { margin:8px 0 0; font-size:19px; line-height:1.45; }
.work-card > p:last-child { margin:12px 0 0; color:var(--works-muted); font-size:14px; line-height:1.85; }
/* Text-only cards get a quiet sage rule so the grid stays balanced before photos arrive. */
.work-card:not(.has-photo)::before { content:""; display:block; width:36px; height:3px; margin-bottom:18px; background:var(--works-accent); }

.works-final { margin-top:72px; padding:64px 0 96px; border-top:1px solid var(--works-line); text-align:center; }
.works-final h2 { margin:14px 0 0; font-size:clamp(28px, 3.6vw, 44px); line-height:1.45; }
.works-final > p:not(.eyebrow) { margin:18px 0 0; color:var(--works-muted); }
.works-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:30px; }

@media (max-width: 900px) { .works-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .works-hero { padding-top:56px; }
  .works-grid { grid-template-columns:1fr; gap:14px; }
  .works-group { padding-top:48px; }
  .works-group-head { grid-template-columns:auto 1fr; }
  .works-group-head p { grid-column:1 / -1; }
  .works-final { text-align:left; }
  .works-actions { justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce) { .work-card { transition:none; } .work-card:hover { transform:none; } }
.work-photo { position:relative; }
.work-badge { position:absolute; top:10px; left:10px; padding:4px 9px; border-radius:3px; background:rgba(23,39,33,.82); color:#fff; font:700 11px/1.4 ui-monospace, monospace; letter-spacing:.06em; pointer-events:none; }