/* ==========================================================================
   Our Work — index + case study pages (extends /styles.css)
   ========================================================================== */

/* reveal on scroll (only hidden when JS is running) */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.nav__links a[aria-current="page"] { color: var(--acid); }

/* ---------- Index ---------- */
.wk-hero { padding-top: clamp(140px, 16vw, 210px); padding-bottom: 40px; }
.wk-hero__title { font-size: clamp(48px, 8vw, 140px); line-height: .92; letter-spacing: -0.055em; font-weight: 500; margin: 0; max-width: 12ch; }
.wk-hero__title em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.wk-hero__lede { max-width: 560px; color: #c2c6cc; font-size: clamp(17px, 1.4vw, 20px); margin: 28px 0 48px; }
.wk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip {
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; color: #cfd2d6;
  transition: background .3s, color .3s, border-color .3s;
}
.wk-chip span { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 4px; }
.wk-chip:hover { border-color: var(--text); color: var(--text); }
.wk-chip.is-active { background: var(--acid); border-color: var(--acid); color: #000; }
.wk-chip.is-active span { color: rgba(0,0,0,.6); }

.wk-list { padding-top: 24px; }
.wk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); }
.wk-card[hidden] { display: none; }
.wk-card a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--ink);
  transition: border-color .4s, transform .6s var(--ease);
}
.wk-card a:hover { border-color: rgba(200,255,61,.4); transform: translateY(-4px); }
.wk-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.wk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.wk-card a:hover .wk-card__media img { transform: scale(1.05); }
.wk-card__body { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 12px; }
.wk-card__client { margin: 0; color: var(--acid); }
.wk-card__client span { color: var(--muted); }
.wk-card__title { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; }
.wk-card__stat { margin: 0; color: var(--muted); }
.wk-card__stat strong { color: var(--text); font-size: 1.25em; letter-spacing: -0.02em; }
.wk-card__go {
  position: absolute; right: 20px; top: 20px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--acid); color: #000; font-size: 20px;
  transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease);
}
.wk-card a:hover .wk-card__go { transform: scale(1) rotate(-45deg); }
.wk-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tags li { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: #cfd2d6; }

/* ---------- Case study ---------- */
.cs-head { padding: clamp(130px, 14vw, 190px) var(--gutter) 48px; }
.cs-back { display: block; width: fit-content; color: var(--muted); margin-bottom: 28px; transition: color .3s; }
.cs-back:hover { color: var(--acid); }
.cs-title { font-size: clamp(36px, 5.2vw, 88px); line-height: .98; letter-spacing: -0.045em; font-weight: 500; margin: 0; max-width: 20ch; }
.cs-title--long { font-size: clamp(30px, 3.8vw, 64px); line-height: 1.04; max-width: 28ch; }
.cs-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.cs-lede { margin: 0; font-size: clamp(18px, 1.5vw, 22px); color: #c2c6cc; max-width: 560px; }
.cs-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cs-meta > div { background: var(--void); padding: 18px 20px; }
.cs-meta dt { color: var(--muted); margin-bottom: 6px; }
.cs-meta dd { margin: 0; }
.cs-meta__stat { grid-column: 1 / -1; }
.cs-meta__stat strong { display: block; font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -0.05em; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-meta__stat span { color: var(--muted); }
.cs-cover { margin: 0 var(--gutter); border-radius: 24px; overflow: hidden; background: var(--ink-2); }
.cs-cover img { width: 100%; height: auto; }

.cs-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 320px); justify-content: space-between; gap: clamp(32px, 6vw, 120px); padding: clamp(56px, 8vw, 120px) var(--gutter); }
.cs-aside { order: 2; }
.cs-aside__card { position: sticky; top: 110px; display: grid; gap: 18px; justify-items: start; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--ink); }
.cs-aside__card p { margin: 0; }
.cs-aside__stat { color: var(--muted); }
.cs-aside__stat strong { display: block; color: var(--text); font-size: 40px; letter-spacing: -0.04em; font-weight: 500; line-height: 1.05; }
.cs-aside .btn { width: 100%; justify-content: center; }

.prose { font-size: 18px; line-height: 1.7; color: #d0d3d8; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; }
.prose h2, .prose h3, .prose h4 { color: var(--text); letter-spacing: -0.03em; font-weight: 500; line-height: 1.15; margin: 2em 0 .6em; }
.prose h2 { font-size: clamp(28px, 2.6vw, 38px); }
.prose h3 { font-size: clamp(22px, 2vw, 28px); }
.prose h4, .prose h5, .prose h6 { font-size: 20px; }
.prose strong, .prose b { color: var(--text); }
.prose a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 0; margin: 0 0 1.4em; list-style: none; display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--acid); }
.prose ol { counter-reset: n; }
.prose ol > li::before { counter-increment: n; content: counter(n, decimal-leading-zero); position: absolute; left: 0; font-family: var(--mono); font-size: 12px; color: var(--acid); top: .3em; }
.prose img { display: block; width: 100%; height: auto; border-radius: 16px; margin: 2em 0; background: var(--ink-2); }
.prose blockquote { margin: 2em 0; padding-left: 24px; border-left: 2px solid var(--acid); font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--text); }

.cs-next { display: block; margin: 0 var(--gutter); padding: 40px 0 clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.cs-next__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 16px; }
.cs-next__title { font-size: clamp(28px, 4vw, 64px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; transition: color .4s; max-width: 22ch; }
.cs-next__client { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--acid); }
.cs-next__img { width: clamp(160px, 22vw, 320px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; transition: transform .8s var(--ease); flex: none; }
.cs-next:hover .cs-next__img { transform: scale(1.04) rotate(-2deg); }
.cs-next:hover .cs-next__title { color: var(--acid); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cs-intro { grid-template-columns: 1fr; }
  .cs-layout { grid-template-columns: 1fr; }
  .cs-aside { order: 2; }
  .cs-aside__card { position: static; }
}
@media (max-width: 720px) {
  .wk-grid { grid-template-columns: 1fr; }
  .wk-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .wk-filters::-webkit-scrollbar { display: none; }
  .wk-chip { flex: none; }
  .wk-card__go { transform: scale(1) rotate(-45deg); width: 40px; height: 40px; }
  .cs-cover { border-radius: 16px; }
  .prose { font-size: 17px; }
  .cs-next__row { flex-direction: column-reverse; align-items: flex-start; }
  .cs-next__img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

.cs-meta > div:last-child { grid-column: 1 / -1; }