/* /work/ — the client-facing gallery + case-study pages. Shares style.css tokens (Dracula). */

.work-page { padding-top: 5rem; padding-bottom: 4rem; }

.work-hero { text-align: center; padding: 3rem 1rem 2rem; }
.work-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(135deg, #50fa7b, #8be9fd, #bd93f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}
.work-hero .lead {
  color: #f8f8f2;
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}
.work-hero .meta { color: #6272a4; font-size: 0.85rem; }
.work-hero .meta a { color: #8be9fd; text-decoration: none; }
.work-hero .meta a:hover { color: #50fa7b; }

/* ---- gallery ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  max-width: 1040px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}
.work-card {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 1.25rem;
  color: #f8f8f2;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.work-card:hover { border-color: #bd93f9; transform: translateY(-2px); }
.work-card.pending { opacity: 0.75; }
.work-card .client {
  color: #6272a4;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-card h3 { color: #8be9fd; font-size: 1.1rem; margin: 0; line-height: 1.35; }
.work-card p { color: #d8d8d2; font-size: 0.92rem; line-height: 1.55; margin: 0; }
.work-card .flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
}
.work-card .flow span {
  background: #1a1a24;
  border: 1px solid #2a2a3a;
  color: #f8f8f2;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.work-card .flow em { color: #6272a4; font-style: normal; }
.work-card .status {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.78rem;
  color: #6272a4;
}
.work-card .status b { font-weight: 600; }
.status .live { color: #50fa7b; }
.status .handed { color: #8be9fd; }
.status .retired { color: #ffb86c; }
.status .building { color: #f1fa8c; }
.status .soon { color: #bd93f9; }

.work-aside {
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
  color: #6272a4;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}
.work-aside a { color: #8be9fd; text-decoration: none; }
.work-aside a:hover { color: #50fa7b; }

/* ---- case-study body (mirrors .project-body on /projects/) ---- */
.work-body { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.work-body h2 { color: #bd93f9; font-size: 1.4rem; margin: 2.5rem 0 1rem; letter-spacing: 0.05em; }
.work-body h3 { color: #50fa7b; font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.work-body p { color: #d8d8d2; line-height: 1.7; margin-bottom: 1rem; }
.work-body ol, .work-body ul { color: #d8d8d2; line-height: 1.7; margin: 0 0 1rem 1.25rem; }
.work-body li { margin-bottom: 0.4rem; }
.work-body code { background: #1a1a1a; color: #ff79c6; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
.work-body a { color: #8be9fd; text-decoration: none; border-bottom: 1px dashed #6272a4; }
.work-body a:hover { color: #50fa7b; border-bottom-color: #50fa7b; }

.story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.story-card { background: #12121a; border: 1px solid #2a2a3a; border-radius: 6px; padding: 1rem; }
.story-card h4 { color: #ff79c6; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
.story-card p { color: #d8d8d2; font-size: 0.92rem; line-height: 1.55; margin: 0; }

.diagram {
  background: #0e0e12;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 1rem;
  margin: 1.25rem 0;
  overflow: hidden;
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram-caption { color: #6272a4; font-size: 0.82rem; margin: -0.5rem 0 1.5rem; text-align: center; }

.stack-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.stack-pill { background: #1a1a1a; color: #8be9fd; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid #2a2a3a; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2.5rem 0 1rem; }
.cta { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; border: 1px solid; transition: all 0.2s ease; }
.cta.primary { background: #50fa7b; color: #0a0a0a; border-color: #50fa7b; }
.cta.primary:hover { background: transparent; color: #50fa7b; }
.cta.secondary { background: transparent; color: #8be9fd; border-color: #6272a4; }
.cta.secondary:hover { border-color: #8be9fd; }

.crosslinks { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #1a1a1a; color: #6272a4; font-size: 0.9rem; text-align: center; }
.crosslinks a { color: #8be9fd; text-decoration: none; margin: 0 0.5rem; }
.crosslinks a:hover { color: #50fa7b; }

/* ---- screenshots (real captures; always ≤ the column width, never a scroll) ---- */
.shot { margin: 1.25rem 0 1.5rem; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid #2a2a3a; border-radius: 8px; }
.shot.narrow img { max-width: 640px; margin: 0 auto; }
.shot figcaption { color: #6272a4; font-size: 0.82rem; text-align: center; margin-top: 0.5rem; }