/* ============================================================
   EMOTIV — Portfolio (V2)
   Extends styles.css tokens. Aubergine #3A004D · mauve #835E8F
   ============================================================ */

/* ---------- current nav link ---------- */
.nav a.is-current { color: var(--mauve); position: relative; }
.nav a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--mauve); border-radius: 2px; }

/* ---------- portfolio hero ---------- */
.work-hero { position: relative; padding-top: 150px; padding-bottom: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.work-hero .wrap { text-align: center; max-width: 920px; position: relative; z-index: 2; }
.work-hero .symbol-mark { width: 66px; margin: 0 auto 1.6rem; }
.work-hero .display { font-size: clamp(2.4rem, 5.2vw, 4.3rem); margin-inline: auto; }
.work-hero .lead { margin: 1.5rem auto 0; max-width: 620px; }
.work-hero .hero-water { margin-top: 3rem; max-width: 720px; margin-inline: auto; }
.work-hero .wave-line { display: block; width: 100%; height: 26px; }
.work-hero .wave-line path { fill: none; stroke: var(--mauve); stroke-width: 2; opacity: .5; }

/* watermark symbol behind hero */
.work-hero .wm { position: absolute; right: -7%; top: -6%; width: 42%; max-width: 520px; opacity: .05; pointer-events: none; user-select: none; z-index: 0; }

/* ---------- count / meta strip ---------- */
.work-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.6rem; margin-top: 2.2rem; }
.work-meta .wm-item { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.work-meta .wm-num { font-size: 1.9rem; font-weight: 800; color: var(--brand); letter-spacing: -.03em; line-height: 1; }
.work-meta .wm-lab { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve); }

/* ---------- filter bar ---------- */
.work-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 3rem; }
.chip {
  font-family: inherit; font-size: .92rem; font-weight: 600; line-height: 1;
  padding: .72em 1.25em; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--brand); border: 1.5px solid var(--line-strong);
  transition: all .22s var(--ease);
}
.chip:hover { border-color: var(--mauve); color: var(--mauve); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .chip-n { opacity: .55; margin-left: .35em; font-weight: 700; }

/* ---------- work grid ---------- */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 3.2rem;
}
.work-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  will-change: transform;
}
.work-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -36px rgba(58,0,77,.45); border-color: var(--line-strong); }
.work-card.is-hidden { display: none; }

/* thumb (image slot lives here) */
.work-thumb { position: relative; aspect-ratio: 16 / 11; background: linear-gradient(160deg, var(--tint), var(--tint-2)); }
.work-thumb image-slot { width: 100%; height: 100%; display: block; }
.work-thumb .work-fill { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.work-thumb .thumb-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.work-thumb .thumb-fallback img { width: 34%; max-width: 130px; opacity: .8; }
.work-card .work-year {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  background: rgba(255,255,255,.92); color: var(--brand);
  padding: .42em .8em; border-radius: 999px; backdrop-filter: blur(4px);
}

/* body */
.work-body { padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.work-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.work-tag { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mauve); background: var(--tint); padding: .4em .8em; border-radius: 999px; }
.work-card h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin-bottom: .55rem; }
.work-card .work-desc { color: #5a4862; font-size: 1.02rem; line-height: 1.55; }
.work-card .work-quote {
  margin: 1rem 0 0; padding-left: 1rem; border-left: 3px solid var(--mauve-soft);
  font-style: italic; color: var(--brand); font-weight: 500; font-size: 1.04rem;
}
.work-link {
  margin-top: auto; padding-top: 1.3rem; display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .98rem; color: var(--brand); text-decoration: none;
}
.work-link .arrow { transition: transform .25s var(--ease); }
.work-card:hover .work-link .arrow { transform: translateX(5px); }

/* featured (first card spans full width on wide grid) */
.work-card--wide { grid-column: 1 / -1; }
.work-card--wide { flex-direction: row; }
.work-card--wide .work-thumb { flex: 0 0 48%; aspect-ratio: auto; }
.work-card--wide .work-body { justify-content: center; }
.work-card--wide h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--wide { flex-direction: column; }
  .work-card--wide .work-thumb { flex: none; aspect-ratio: 16/11; }
}

/* ---------- empty state when a filter has no match ---------- */
.work-empty { display: none; text-align: center; color: #5a4862; padding: 3rem 0; font-size: 1.1rem; }
.work-empty.is-on { display: block; }

/* ---------- CTA band ---------- */
.work-cta { text-align: center; }
.work-cta .display { font-size: clamp(2rem, 4vw, 3.2rem); margin-inline: auto; max-width: 18ch; }
.work-cta .lead { margin: 1.3rem auto 2.2rem; max-width: 560px; }

/* reveal stagger inside grid handled by .reveal data-d */