/* Client archive (clients/, clients/<client>/, clients/<client>/<year>/<project>/)
   Extends style.css + project.css. Pages generated by tools/build_clients.py. */

.media.lb-item, .ar-card .media { display: block; }
.ar-crumbs a { color: var(--white); }
.ar-hero .pj-info .lead:empty { display: none; }
@media (max-width: 700px) { .header__nav--always .hide-sm { display: none; } }

/* ---------- clients index: typographic list ---------- */
.ar-index { padding: 0 var(--gutter) var(--space); }
.ar-list__head, .ar-list__item > a, .ar-list__inner {
  display: grid; grid-template-columns: 1fr 14em 8em 4em; align-items: baseline; gap: var(--gutter);
}
.ar-list__head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ar-list__head span:nth-child(n+3), .ar-list__years, .ar-list__count { text-align: right; }
.ar-list__item > a, .ar-list__inner { padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line); }
.ar-list__name {
  font-size: clamp(1.6rem, 3.6vw, 3.8rem); font-weight: 600; text-transform: uppercase;
  letter-spacing: -.045em; line-height: 1; transition: transform .9s var(--ease), color .6s;
}
.ar-list__sector, .ar-list__years, .ar-list__count { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.ar-list__item.is-empty .ar-list__name { color: rgba(224, 226, 238, .32); }
@media (hover: hover) {
  .ar-list__item > a:hover .ar-list__name { transform: translateX(1.4vw); }
}
.page-archive--index .svc-preview { width: 22vw; }

/* ---------- client page: years ---------- */
.ar-archive { padding: 0 var(--gutter) var(--space); }
.ar-years {
  position: sticky; top: 64px; z-index: 5;
  display: flex; gap: clamp(16px, 2vw, 32px); padding: 14px 0; margin-bottom: clamp(24px, 4vw, 56px);
  background: linear-gradient(var(--black) 70%, transparent);
}
.ar-years button {
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey); padding: 4px 0; position: relative; transition: color .5s var(--ease);
}
.ar-years button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.ar-years button:hover, .ar-years button[aria-pressed="true"] { color: var(--white); }
.ar-years button[aria-pressed="true"]::after { transform: scaleX(1); }

.ar-year { padding-top: clamp(32px, 5vw, 80px); transition: opacity .5s var(--ease); }
.ar-year[hidden] { display: none; }
.ar-year__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-bottom: 18px; margin-bottom: clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line);
}
.ar-year__num { font-size: clamp(4rem, 13vw, 15rem); font-weight: 600; letter-spacing: -.06em; line-height: .78; }
.ar-year__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px) clamp(10px, 1.4vw, 24px); }
.ar-card { display: block; }
.ar-card__meta { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding-top: 14px; }
.ar-card__title { font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; transition: transform .9s var(--ease); }
.ar-card__date { font-size: var(--fs-label); letter-spacing: .14em; color: var(--white); font-variant-numeric: tabular-nums; }
.ar-card__cat { grid-column: 1 / -1; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
@media (hover: hover) {
  .ar-card:hover .media__inner { transform: scale(1.04); }
  .ar-card:hover .ar-card__title { transform: translateX(8px); }
}

/* ---------- project page ---------- */
.ar-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--gutter);
  padding: clamp(60px, 8vw, 120px) var(--gutter); border-top: 1px solid var(--line);
}
.ar-pager a { display: grid; gap: 8px; }
.ar-pager__next { text-align: right; justify-items: end; }
.ar-pager__title { font-size: clamp(1.6rem, 4vw, 4.4rem); font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; transition: transform 1s var(--ease); }
.ar-pager__prev:hover .ar-pager__title { transform: translateX(-1vw); }
.ar-pager__next:hover .ar-pager__title { transform: translateX(1vw); }
.ar-pager__all { align-self: center; }
.lb-item { cursor: zoom-in; }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 140; background: rgba(9, 12, 25, .97);
  display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s .6s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.lb__top, .lb__bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px var(--gutter); }
.lb__title { color: var(--grey); }
.lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 clamp(16px, 7vw, 120px); }
.lb__stage img, .lb__stage video {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  opacity: 0; transform: scale(.97); transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.lb__stage .is-in { opacity: 1; transform: none; }
.lb__btn { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; padding: 10px 0; opacity: .7; transition: opacity .4s; }
.lb__btn:hover, .lb__btn:focus-visible { opacity: 1; }
.lb__count { font-variant-numeric: tabular-nums; }
.lb__nav { position: absolute; top: 0; bottom: 0; width: 30%; }
.lb__nav--prev { left: 0; cursor: w-resize; }
.lb__nav--next { right: 0; cursor: e-resize; }

@media (max-width: 1024px) {
  .ar-list__head, .ar-list__item > a, .ar-list__inner { grid-template-columns: 1fr 10em 4em; }
  .ar-list__years, .ar-list__head span:nth-child(3) { display: none; }
}
@media (max-width: 700px) {
  .ar-list__head { display: none; }
  .ar-list__item > a, .ar-list__inner { grid-template-columns: 1fr auto; }
  .ar-list__sector { grid-column: 1; grid-row: 2; }
  .ar-list__count { grid-row: 1 / span 2; align-self: center; }
  .ar-years { top: 56px; }
  .ar-year__grid { grid-template-columns: 1fr; }
  .ar-pager { grid-template-columns: 1fr 1fr; }
  .ar-pager__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .lb__stage { padding: 0; }
}