/* Unified compact action-button system for the Reading Room. */
.site-actions,
.article-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:flex-start;
  gap:6px;
  margin-top:11px;
}

/* Flatten nested action groups used by Old School Gamer and STARCADE
   so every button participates in the same row/size system. */
.site-actions > .article-actions{
  display:contents;
}

.site-home,
.article-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 180px;
  width:180px;
  min-height:38px;
  padding:6px 8px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#d9e6ee;
  text-decoration:none;
  text-align:center;
  font-size:9px;
  font-weight:800;
  letter-spacing:.25px;
  line-height:1.2;
}

.card-shell > .article-actions{
  margin-top:11px;
}

@media (hover:hover) and (pointer:fine){
  .site-home:hover,
  .article-link:hover{
    border-color:#ffd166;
    background:rgba(255,209,102,.14);
    color:#fff;
  }
}

/* Keep only the actual return-to-site control visually special. */
.site-actions.site-return{
  align-items:center;
  justify-content:center;
  margin:0 0 24px;
}
.site-return .site-home{
  flex:0 1 auto;
  width:auto;
  max-width:100%;
  min-height:38px;
  padding:9px 14px;
  border:1px solid rgba(255,209,102,.55);
  border-radius:10px;
  background:rgba(255,209,102,.10);
  color:#ffd166;
  font-size:12px;
  letter-spacing:.45px;
}

@media(max-width:650px){
  .site-actions,
  .article-actions,
  .card-shell > .article-actions{
    margin-top:9px;
  }
  .site-home,
  .article-link{
    flex-basis:100%;
    width:100%;
    min-height:36px;
    font-size:8.8px;
  }
  .site-return .site-home{
    width:auto;
    flex-basis:auto;
    font-size:11px;
  }
}

/* The Workshop buttons now use the same compact system as everything else. */
.technical-six{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
}
.technical-six .article-link{
  flex:0 0 180px;
  width:180px;
}
@media(max-width:650px){
  .technical-six .article-link{
    flex-basis:100%;
    width:100%;
  }
}