@media (max-width:600px){

.feature-hero{
  margin-top:3.5rem;
}

.section-wrap{
  	padding:3rem 1.5rem;
}

.section-action {
  margin-top:5rem;
}
	
	
.action-btn,
.btn-float{ width:100%;}


.page-card .text-panel {
  padding:1.5rem;
}

.social-links {
  justify-content: center;	
}


.sitemap-page .page-card .text-panel{
	padding:1rem;
}


.lyrics-section{
	padding:0;

}

}



@media (max-width:880px){
	
.feature-hero{
  margin-top:4rem;
}

.section-wrap{
  	padding:4rem 1.5rem;
}
	
.article-shell{
	padding: 3rem 1.5rem 4rem;
}	
	

.mobile-menu-toggle{
    display:inline-flex;
    width:3rem;
    height:3rem;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid var(--hover-border-color);
    border-radius:999px;
    background:var(--panel-strong-color);
    color:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:
      border-color .2s ease,
      background .2s ease;
}

.mobile-menu-toggle:hover,
body.mobile-menu-open .mobile-menu-toggle{
    border:1px solid var(--hover-border-color);
  }

.mobile-menu-toggle span{
    width:22px;
    height:2px;
    border-radius:999px;
    background:var(--button-text-color);
    transition:
      transform .22s ease,
      opacity .18s ease;
}

body.mobile-menu-open .mobile-menu-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}

body.mobile-menu-open .mobile-menu-toggle span:nth-child(2){
    opacity:0;
}

body.mobile-menu-open .mobile-menu-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:0 1rem;
    overflow:hidden;
    background:var(--bg-color);
    transition:
      padding .3s var(--ease),
      box-shadow .3s var(--ease);
}

.header-nav,
.archive-nav{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.25rem;
    width:100%;
    margin:0;
    padding:0;
	padding-left:0.5rem;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-.5rem);
    pointer-events:none;
    transition:
      max-height .35s var(--ease),
      opacity .25s var(--ease),
      transform .35s var(--ease),
      padding .35s var(--ease);
  }

.site-nav.is-open{
    padding-bottom:2rem;
	border-bottom:1px solid var(--border-color);
    background:var(--nav-bg);
 }

.site-nav.is-open .header-nav,
.site-nav.is-open .archive-nav{
	display:flex;
    max-height:100vh;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.site-nav.is-open .header-nav{
    padding-top:1.5rem;
}

.site-nav.is-open .archive-nav{
    padding-top:1.25rem;
    margin-top:1.25rem;
}


.header-nav a,
.archive-nav a{
    position:relative;
    padding-left:1rem;
  }

.header-nav a::before,
.archive-nav a::before{
    content:"";

    position:absolute;
    left:0;
    top:50%;

    width:.4rem;
    height:1px;

    background:var(--gold-color);

    opacity:.7;

    transform:translateY(-50%);
  }

}