/* The work index uses the approved Reverse hero's type and gutters. */
#projects.raio-work-index{
  --work-ink:#080808;--work-muted:#656b70;--work-line:#d7d9d6;
  --raio-font-family:RaioHeroLay,Arial,sans-serif;--raio-heading-font:var(--raio-font-family);--raio-body-font:var(--raio-font-family);
  padding:clamp(65px,6vw,90px) var(--raio-hero-margin) clamp(80px,7vw,105px);
  background:#f1f2f0;color:var(--work-ink);scroll-margin-top:85px;
  font-family:RaioHeroLay,Arial,sans-serif;
}
#projects .raio-work-index__heading{margin:0 0 clamp(28px,3vw,42px);font:400 clamp(18px,1.4vw,22px)/1.2 RaioHeroLay,Arial,sans-serif;letter-spacing:-.02em;color:var(--work-muted);text-transform:none}
.raio-work-index__layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(50px,7vw,100px);align-items:center}
.raio-work-index__list{list-style:none;margin:0;padding:0}
.raio-work-index__item{border-top:1px solid var(--work-line)}
.raio-work-index__item:last-child{border-bottom:1px solid var(--work-line)}
#projects .raio-work-index__link{display:grid;grid-template-columns:minmax(0,1fr) 145px 22px;gap:20px;align-items:center;min-height:76px;padding:14px 0;color:inherit;text-decoration:none}
#projects .raio-work-index__name{margin:0;font:400 clamp(28px,2.7vw,42px)/1.1 RaioHeroLay,Arial,sans-serif;letter-spacing:-.035em;text-transform:none;transition:transform .35s cubic-bezier(.22,1,.36,1),color .25s}
.raio-work-index__scope{font:400 12px/1.45 RaioHeroMono,monospace;color:var(--work-muted)}
.raio-work-index__mark{display:block;width:20px;height:20px;opacity:0;transform:scale(.6) rotate(-15deg);transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.raio-work-index__link.is-selected .raio-work-index__mark{opacity:1;transform:scale(1) rotate(0)}
#projects .raio-work-index__link:hover .raio-work-index__name,#projects .raio-work-index__link:focus-visible .raio-work-index__name{transform:translateX(7px)}
#projects .raio-work-index__link:focus-visible{outline:2px solid var(--work-ink);outline-offset:5px}
.raio-work-index__thumb{display:none}
.raio-work-index__preview{position:sticky;top:100px;margin:0;align-self:start;min-width:0}
.raio-work-index__viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e5e7e4}
.raio-work-index__frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.raio-work-index__frame--next{opacity:0}
.raio-work-index__caption{display:flex;justify-content:space-between;gap:20px;margin-top:15px;font:400 12px/1.4 RaioHeroMono,monospace;color:var(--work-muted)}
.raio-work-index__caption-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){
  .raio-work-index__layout{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:35px}
  #projects .raio-work-index__link{grid-template-columns:minmax(0,1fr) 110px 18px;gap:12px;min-height:78px}
  #projects .raio-work-index__name{font-size:clamp(23px,2.75vw,32px)}
  .raio-work-index__scope{font-size:11px}
}
@media(max-width:768px),(hover:none),(pointer:coarse){
  #projects.raio-work-index{padding-top:65px;padding-bottom:85px}
  .raio-work-index__layout{display:block}
  .raio-work-index__preview{display:none}
  #projects .raio-work-index__link{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:5px;min-height:94px;padding:18px 0}
  .raio-work-index__thumb{display:block;grid-column:1;grid-row:1/3;width:72px;height:50px;object-fit:cover;object-position:top center}
  #projects .raio-work-index__name{grid-column:2;grid-row:1;font-size:clamp(22px,5.6vw,30px);align-self:end}
  .raio-work-index__scope{grid-column:2;grid-row:2;font-size:10px;align-self:start}
  .raio-work-index__mark{display:none}
}
@media(prefers-reduced-motion:reduce){.raio-work-index__name,.raio-work-index__mark{transition:none!important}}