/* ============ all-projects page (projects.html) ============
   Uses the brand palette from style.css. Calmer than the home page — this is a
   reading/scanning page — but keeps the terminal framing. */

.works-body {
  min-height: 100vh;
  background: var(--bg, #000);
  color: var(--fg, #e8e8e8);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The bilingual [data-lang-block] rule, the .works-section/.works-label shell,
   the why-grid and the CTA now live in style.css — those blocks are shared with
   the home page, which only loads style.css. */

/* ---------- header ---------- */
.works-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.1rem, 5vw, 4rem);
  background: rgba(0, 0, 0, .86); backdrop-filter: blur(6px);
  border-bottom: 1px solid #1c1c1c;
}
.works-header .logo { font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; color: var(--fg); text-decoration: none; }
.works-header .logo:hover { color: var(--green); }
.works-nav { display: flex; align-items: center; gap: 1rem; }
.works-lang { display: flex; gap: .35rem; }
.works-lang button {
  background: transparent; border: 1px solid #2a2a2a; color: var(--dim);
  font-family: inherit; font-size: .68rem; padding: .25rem .5rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.works-lang button.is-active { color: #000; background: var(--green); border-color: var(--green); }

/* ---------- hero ---------- */
.works-hero { padding: clamp(3rem, 9vw, 7rem) clamp(1.1rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem); }
.works-back {
  display: inline-block; margin-bottom: 1.6rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
.works-back:hover { color: var(--green); }
.works-hero h1 {
  font-size: clamp(1.9rem, 7vw, 4.2rem); line-height: 1.05; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 1.2rem;
}
.works-hero-sub { max-width: 60ch; color: var(--dim); font-size: clamp(.82rem, 1.6vw, .95rem); }

/* ---------- projects grid ---------- */
.works-grid {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.works-loading { color: var(--dim); font-size: .8rem; }
.work-card {
  display: flex; flex-direction: column;
  border: 1px solid #1c1c1c; background: #050505;
  transition: border-color .3s ease, transform .3s ease;
}
.work-card:hover { border-color: #2e2e2e; transform: translateY(-3px); }
.work-card-media {
  aspect-ratio: 16 / 10; overflow: hidden; background: #0b0b0b;
  border-bottom: 1px solid #1c1c1c;
}
.work-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .4s ease, transform .5s ease; }
.work-card:hover .work-card-media img { filter: grayscale(0); transform: scale(1.03); }
.work-card-media.is-empty { display: flex; align-items: center; justify-content: center; color: #2a2a2a; font-size: .7rem; letter-spacing: .1em; }
.work-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.work-card-head {
  display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.work-card-head .is-live { color: var(--green); }
.work-card h2 { font-size: .98rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.work-card h2 a { color: inherit; text-decoration: none; }
.work-card h2 a:hover { color: var(--green); }
.work-card-desc { font-size: .78rem; color: var(--dim); line-height: 1.65; text-transform: uppercase; }
.work-card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .5rem; }
.work-card-tags span {
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); border: 1px solid #232323; padding: .18rem .45rem;
}

/* ---------- footer ---------- */
.works-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.2rem; padding: 1.8rem clamp(1.1rem, 5vw, 4rem) 2.4rem;
  border-top: 1px solid #1c1c1c; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
.works-footer a { color: var(--dim); text-decoration: none; }
.works-footer a:hover { color: var(--green); }
.works-footer .sep { opacity: .35; }

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .grain::before { animation: none; }
  .grain { opacity: .05; }
  .scanlines { opacity: .08; }
  .work-card-media img { filter: none; }
}