/* games page: builds on /style.css */

.back{position:absolute;top:22px;left:6vw;z-index:10;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--grey);
  transition:color .4s var(--ease),transform .5s var(--smooth)}
.back:hover{color:#fff;transform:translateX(-4px)}

/* hero: six letters instead of four */
.logo-letters span:nth-of-type(5){transition-delay:.2s}
.logo-letters span:nth-of-type(6){transition-delay:.25s}
.logo-letters{font-size:clamp(64px,16vw,200px)}

.about{padding-top:4vh}
.work{padding-top:4vh}
.work .kicker{margin-bottom:5vh}

/* per-game accent from --c */
.row{--accent:color-mix(in srgb,var(--c,#fff) 72%,#fff);align-items:flex-start}
.row::before{background:var(--accent)}
.row .cat::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:1px;
  background:var(--accent);transition:transform .5s var(--smooth)}
.row:hover .cat::before{transform:scale(1.5)}
.row .arrow{margin-top:34px}
.row:hover .arrow{color:var(--accent)}

.row-main{max-width:720px}
.row-main .how{margin-top:12px;font-size:clamp(14px,1.5vw,16px);line-height:1.55;color:var(--dim)}
.row:hover .row-main .how{color:var(--grey)}
.url{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.02em;color:var(--dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;transition:color .5s var(--ease)}
.row:hover .url{color:var(--accent)}

/* the homepage hides descriptions on phones; here they are the point */
@media(max-width:680px){
  .row-main p{display:block}
  .row .arrow{margin-top:26px}
  .back{top:16px;left:16px}
}