/* ===== WORKS NUMBERS ===== */
.works-numbers { background: var(--color-bg); }

.wnumbers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
}

.wnumber-item { background: var(--color-white); padding: clamp(28px, 4vw, 48px); text-align: center; }
.wnumber-val { font-family: var(--font-serif-en); font-size: clamp(36px, 4.5vw, 56px); font-weight: 300; color: var(--color-primary); line-height: 1.1; }
.wnumber-val span { font-size: 18px; color: var(--color-accent); }
.wnumber-label { font-size: 12px; color: var(--color-text-light); letter-spacing: 0.08em; margin-top: 10px; }

/* ===== WORKS FILTER / LIST ===== */
.works-filter { background: var(--color-white); }

.works-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}

.works-card {
  background: var(--color-bg); overflow: hidden;
  transition: all 0.35s ease; text-decoration: none; color: var(--color-text); display: block;
}

.works-card:hover { box-shadow: 0 12px 40px rgba(27,79,114,0.1); transform: translateY(-4px); }

.works-thumb {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
}

.works-thumb-inner {
  position: absolute; top: 12%; left: 8%; width: 84%; height: 76%;
  background: var(--color-white); border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden;
}

.works-thumb-bar { height: 16px; background: #eef1f4; display: flex; align-items: center; padding: 0 8px; gap: 3px; }
.works-thumb-dot { width: 5px; height: 5px; border-radius: 50%; background: #ccc; }
.works-thumb-body { padding: 8px; background: var(--color-white); }
.works-thumb-hero { height: 40%; border-radius: 3px; margin-bottom: 6px; }
.works-thumb-line { height: 4px; border-radius: 2px; background: #e8ecf0; margin-bottom: 4px; }

.works-body { padding: 20px 24px 24px; }
.works-cat { font-family: var(--font-serif-en); font-size: 10px; letter-spacing: 0.12em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 6px; }
.works-title { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--color-primary); }
.works-desc { font-size: 12px; color: var(--color-text-light); line-height: 1.7; }

.works-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.works-tag { font-size: 10px; padding: 2px 8px; background: var(--color-cream); color: var(--color-accent); border-radius: 2px; letter-spacing: 0.04em; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .works-grid { grid-template-columns: 1fr 1fr; }
  .wnumbers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .works-grid { grid-template-columns: 1fr; }
  .wnumbers-grid { grid-template-columns: 1fr 1fr; }
}