/* A single charcoal navigation rail with silver details. */
.work{
  background-image:linear-gradient(180deg,#111216 0%,#11121655 20%,#11121666 80%,#111216 100%),linear-gradient(90deg,#11121677,#11121655 60%,#11121688),url('assets/atmosphere-v27/soft-silver.jpg');
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center 46%;
}
.work .work-toolbar{align-items:center;gap:24px;margin-top:28px;margin-bottom:20px}
.work .filters{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  width:100%;max-width:580px;padding:4px;overflow:visible;
  background:linear-gradient(180deg,#25272cf5,#16181df5);
  border:1px solid #e7eaf022;border-top-color:#e7eaf03b;border-radius:10px;
  box-shadow:inset 0 1px 0 #ffffff08,0 8px 20px #00000020;
}
.work .filter{
  position:relative;display:flex;align-items:flex-end;justify-content:flex-start;
  min-width:0;min-height:60px;padding:27px 15px 12px;margin:0;
  color:#aeb0b8;background:transparent;border:1px solid transparent;border-radius:6px;
  font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.025em;white-space:nowrap;
  transform:none;box-shadow:none;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.work .filter span{
  position:absolute;top:9px;right:13px;margin:0;
  font-family:Manrope,sans-serif;font-size:10px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;line-height:1;opacity:.65;
}
.work .filter:not(:last-child):before{content:'';position:absolute;right:-1px;top:13px;bottom:13px;width:1px;background:#ffffff0b}
.work .filter:after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:1px;background:#e8e6df;opacity:0;transform:scaleX(.5);transform-origin:left;transition:opacity .2s ease,transform .2s ease}
.work .filter.active,.work .filter[aria-pressed=true]{color:#f4f1e9;background:linear-gradient(155deg,#45484f,#2a2c32 65%);border-color:#e3e8ef29;box-shadow:inset 0 1px 0 #ffffff09;transform:none}
.work .filter.active span{color:#e4e6eb;opacity:.85}
.work .filter.active:after{opacity:1;transform:scaleX(1)}
.work .filter:focus-visible{outline:2px solid #dbe1e9;outline-offset:3px;z-index:1}
.deck-nav{
  width:46px;height:46px;border-radius:10px;
  background:linear-gradient(160deg,#292c32ef,#191b20ef);color:#e4e5e8;
  border:1px solid #e4e8ed29;border-top-color:#e4e8ed40;
  box-shadow:inset 0 1px 0 #ffffff06;transition:background .2s,border-color .2s;
}
.pill,.pill-white{
  border-radius:10px;background:linear-gradient(165deg,#f0eee8,#c6c8ca);color:#191b20;
  border:1px solid #f3f4f56b;box-shadow:inset 0 1px 0 #ffffff8c,0 3px 10px #0002;
}
.pill-outline{color:#e9e8e5;background:linear-gradient(160deg,#292c32e6,#16181ee6);border-color:#e4e8ed3b;box-shadow:inset 0 1px 0 #ffffff08}
#work-grid.work-deck .card-play,#work-grid.work-deck .card-open:hover .card-play,#work-grid.work-deck .is-selected .card-play{border-radius:12px;color:#1b1d22;background:linear-gradient(150deg,#f0eee8,#c9cbd0);border:1px solid #ffffff73;box-shadow:0 3px 14px #0004,inset 0 1px 0 #ffffff70}
.menu-toggle,.header-contact.round-link{border-radius:12px;background:#1c1f25b3;border-color:#e4e8ed35;box-shadow:inset 0 1px 0 #ffffff08}
@media(hover:hover){
  .work .filter:hover{transform:none;color:#f4f1e9;background:#ffffff09;border-color:transparent;box-shadow:none}
  .work .filter.active:hover{background:linear-gradient(155deg,#4b4f57,#2d3037 65%);border-color:#e3e8ef40;box-shadow:inset 0 1px 0 #ffffff09}
  .deck-nav:hover{background:#343840;border-color:#dbe1e966}
  .pill:hover,.pill-white:hover{transform:translateY(-2px);background:linear-gradient(165deg,#fff,#d4d6da);box-shadow:inset 0 1px 0 #fff,0 5px 14px #0003}
  .pill-outline:hover{color:#fff;background:#30343c;border-color:#e4e8ed66;box-shadow:inset 0 1px 0 #ffffff0d}
  #work-grid.work-deck .card-open:hover .card-play{background:linear-gradient(150deg,#fff,#d5d8dd)}
}
@media(max-width:767px){
  .work{background-image:linear-gradient(180deg,#111216 0%,#111216aa 18%,#111216bb 65%,#111216dd 88%,#111216 100%),url('assets/atmosphere-v27/soft-silver.jpg');background-size:100% 100%,cover;background-position:center,48% center}
  .work .work-toolbar{margin-top:26px;margin-bottom:19px;display:block}
  .work .filters{max-width:none;padding:3px;border-radius:9px}
  .work .filter{min-height:55px;padding:26px 10px 11px;font-size:12px;letter-spacing:0;border-radius:5px}
  .work .filter span{top:8px;right:9px;font-size:9px}
  .work .filter:after{left:9px;right:9px;bottom:4px}
  .work .filter:not(:last-child):before{top:11px;bottom:11px}
  .deck-nav{width:44px;height:44px;border-radius:9px}
}
@media(max-width:359px){
  .work .filter{min-height:53px;padding-left:6px;padding-right:6px;font-size:11px}
  .work .filter span{right:6px;font-size:8px}
  .work .filter:after{left:6px;right:6px}
}