/* Shared portfolio-card presentation for the AI indexes. */
.work-list-page,
.work-grid-wrap.ai-index-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.work-list-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.work-list-kicker {
  margin-bottom: 12px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-list-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.work-list-intro {
  max-width: 760px;
  margin: 0 0 34px;
  color: var(--ink-mid);
  font-size: 16px;
  line-height: 1.72;
}

.work-list-header .page-count {
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.work-card {
  position: relative;
  display: grid;
  grid-template-rows: 260px auto auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface, #fff);
  outline: none;
  transition: transform 240ms cubic-bezier(0.22, 0.84, 0.22, 1), box-shadow 240ms ease;
}

.work-card[data-href] { cursor: pointer; }
.work-card[data-href]:hover { transform: translateY(-2px); box-shadow: var(--shadow, 0 18px 42px rgba(18,18,18,0.04)); }
.work-card:focus-visible { box-shadow: 0 0 0 2px rgba(18,18,18,0.28) inset; }

.card-image {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #ece8e2;
}

.card-image::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, rgba(99, 187, 236, 0.72), rgba(156, 124, 233, 0.7), rgba(242, 169, 193, 0.65));
  transition: opacity 260ms ease;
}

.work-card[data-href]:hover .card-image::after { opacity: 0.72; }

.card-art,
.card-img-bg {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background-position: center;
  background-size: cover;
  transition: transform 640ms cubic-bezier(0.22, 0.84, 0.22, 1);
}

.work-card[data-href]:hover .card-art,
.work-card[data-href]:hover .card-img-bg { transform: scale(1.035); }

.card-art {
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  text-align: center;
}

.card-art::before,
.card-art::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.card-art::before {
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  transform: translate(30%, -20%);
}

.card-art::after {
  inset: auto -18% -36% auto;
  width: 220px;
  height: 110px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.card-art-label {
  position: relative;
  z-index: 1;
  max-width: 10ch;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}

.card-art-note {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-art--intent { background: linear-gradient(138deg, #152334, #4b6584 52%, #a7c5eb); }
.card-art--arena { background: linear-gradient(140deg, #1a1b36, #5f49a7 56%, #f08ca9); }
.card-art--brain { background: linear-gradient(140deg, #1f3437, #5d917b 54%, #c3d884); }
.card-art--bias { background: linear-gradient(140deg, #351d32, #9a567f 54%, #edb67c); }
.card-art--ren { background: linear-gradient(140deg, #172b35, #31809c 55%, #a8dbe1); }
.card-art--insta { background: linear-gradient(140deg, #472329, #bd5c6b 58%, #f3c47a); }
.card-art--typespace { background: radial-gradient(circle at 50% 42%, #7c75c5 0 2%, transparent 3%), radial-gradient(circle at 72% 25%, #b3c6ff 0 1%, transparent 2%), radial-gradient(circle at 25% 70%, #ffd0b3 0 1%, transparent 2%), #16172d; }
.card-art--emoji { background: linear-gradient(140deg, #113c63, #2377a8 50%, #ffc553); }
.card-art--motion { background: linear-gradient(140deg, #24322f, #62836a 50%, #c4d99b); }
.card-art--snap { background: linear-gradient(140deg, #123b82, #2563eb 55%, #7fb7ff); }
.card-art--fail { background: linear-gradient(140deg, #4b2217, #d6572a 54%, #f7b74c); }
.card-art--handoff { background: linear-gradient(140deg, #2d1a51, #7042b8 55%, #b9a2ed); }
.card-art--superforge {
  background:
    radial-gradient(circle at 74% 26%, rgba(253,224,71,0.34), transparent 44%),
    linear-gradient(140deg, #13161f, #8a6a12 48%, #fde047);
}
.card-art--motionskills {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(94,234,212,0.46), transparent 54%),
    linear-gradient(140deg, #05191e, #0d7c74 46%, #7dd3fc);
}
.card-art--readme { background: linear-gradient(140deg, #2a0e22, #be185d 52%, #fbcfe8); }

.card-body {
  display: grid;
  gap: 10px;
  padding: 18px 16px 10px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  padding: 6px 9px;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-title {
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

.card-desc { color: var(--ink-mid); font-size: 14px; line-height: 1.58; }

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 20px;
}

.card-meta { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.02em; }
.card-meta--link { color: var(--ink-mid); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

.legacy-tools-deck,
.legacy-ai-products { display: none; }

html.lang-jp .work-list-title,
html.lang-jp .card-title { line-height: 1.16; letter-spacing: -0.02em; }

@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
  .work-list-page,
  .work-grid-wrap.ai-index-grid { padding: 32px 20px 64px; }
  .work-grid { grid-template-columns: 1fr; }
  .card-image { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card,
  .card-image::after,
  .card-art,
  .card-img-bg { transition: none !important; }
}