/*general */
body { 
  font-family: Verdana, sans-serif; 
  margin: 0; 
  padding: 0; 
  background: #181818; 
}

header {
  background: #000000;
  color: #ffffff;  
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

section { 
  padding-block: 1rem;
        }  

section + section {                                   
  margin-top: 2rem;                                                 
  padding-top: 2rem;
}

nav a { 
  margin: 0 0.5rem; 
  color: #ffffff; 
  text-decoration: none; 
}

nav a:hover { 
  text-decoration: underline; 
  background: #BFBFBF;
}

main { 
  padding: 2rem; 
  max-width: none; 
  margin: 0; 
}

h1, h2 { 
  color: #D2D2D2; 
}

h1 {
  font-size: 1.8rem;
  line-height: 1.1;
}

h3, h4, h5 {
  color: #D2D2D2; /* sub-headings */
}

main h1 + h2,
main h2 + h3,
main h3 + h4,
main h4 + h5,
main h5 + h6
 {
  margin-top: 0.6rem;
}

img { max-width: 100%; height: auto; }
video { max-width: 100%; margin: 1rem 0; }
ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem; /* indent bullets */
  list-style: disc;     
}

p, li {
  color: #e7e7e7; /* paragraph & list text */
}

a, span {
  text-decoration: none;
  color:  #ffffff;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}
/*override */
.socials {
  list-style: none;       /* remove bullet points */
  padding: 0;
  margin: 0;
  display: flex;          /* flexbox for row layout */
  gap: 1rem;              /* spacing between items */
  flex-wrap: wrap;        /* wrap if too long */
}

.socials li {
  display: inline;        /* horizontal */
}

.socials li a {
  text-decoration: none;
  color:  #ffffff;
  font-weight: bold;
}

.socials li a:hover {
  text-decoration: underline;
}

.site-title { 
  color: #F2F2F2; 
  text-align: center;
            }
.page-nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: .5rem 0;
}

.page-nav a {
   color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.page-nav a:hover {
  text-decoration: underline;
  background: #BFBFBF;
}

/* .section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  justify-content: center;
  padding: .75rem 0 1rem;
  margin-bottom: 1rem;
}

.section-nav a {
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-weight: 600;
  color: #ffffff;
} */

.section-rail .section-nav a:hover, .section-rail .section-nav a:focus { text-decoration: underline; background: #E0E0E0;}

/* side menu */
:root { --content-w: 1100px; --header-h: 80px; }

.layout {
  display: grid;
   grid-template-columns: 220px minmax(0, var(--content-w)) 1fr;
  gap: 2rem;
}

.layout > main {
  grid-column: 2;
  padding: 2rem;
  margin: 0;          
  max-width: 100%;      
}

.section-rail .section-nav {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 0;               
  margin: 0;
  padding: 0;
  justify-content: flex-start;

}

.section-rail .section-nav a {
  color: #C8C8C8;
  text-decoration: none;
  padding: .25rem .5rem;
  font-weight: 600;
  border-right: 2px solid #2A2A2A;
}

.section-rail {  
  position: sticky;
  top: calc(var(--header-h) + 8px);
  align-self: start;
  color: #fff; 
  border-right: 1px solid #2A2A2A; 
  padding: 1rem 1rem 1rem 0;
  grid-column: 1;            
              }

.works {
  max-width: 700px;   
  width: 100%;
  height: auto;
  display: block;
}

/* game page */


.game-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 0 auto;
  padding: 0;
  list-style: none;           
  max-width: 1400px;            
}
.game-card a{
  display: block;
  text-decoration: none;        
}

.game-card .thumb{
  width: 100%;
  aspect-ratio: 16 / 9;        
  object-fit: cover;
  display: block;
  border-radius: 6px;
  border: 1px solid #2A2A2A;    
  background: #000;
}

.game-card .title{
  display: block;
  margin-top: .5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #D2D2D2;               
}

.game-card a:hover .title{ 
  text-decoration: underline; 
}


.game-card .videoplayer {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}


/* behaviours */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }


/* collage */

.art-gallery { 
  column-width: 400px;
  column-gap: 8px; 
  max-width: 1400px; /* collage centered*/ 
  width: calc(100% - 32px); 
  margin: 0 auto; /* center on the page */ 
}

.art-gallery > img {
  width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 0 16px; 
  break-inside: avoid; 
                   }

.art-gallery .card {
  break-inside: avoid;           
  margin: 0 0 16px;
  overflow: hidden;
  background: #181818;
  
}


.art-gallery .card > img,
.art-gallery .card > blockquote { 
  width:100%; 
  display:block; 
  
}

.art-gallery .card .videoplayer {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  border: 0;
}



/* mobile */

/* Large tablets & down */
@media (max-width: 1100px) {
  /* Collapse the side rail; let content go full-width */
  .section-rail { display: none; }
  .layout {
    grid-template-columns: 1fr;   /* no side columns */
    gap: 0;
  }
  .layout > main {
    grid-column: 1;
    padding: 1.25rem;
  }

  /*top nav wrap*/
  .page-nav {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: 0 .5rem;
  }
  .page-nav a {
    padding: .35rem .6rem;
    border-radius: 999px;
  }


  ul { padding-left: 1.25rem; }
}

/* Phones */
@media (max-width: 768px) {
  header { padding: .75rem; }
  .site-title { font-size: 1.5rem; }

  
  h1 { font-size: 1.4rem; line-height: 1.15; }
  h2 { font-size: 1.15rem; }
  h3, h4, h5 { font-size: 1rem; }

  
  section { padding-block: .75rem; }
  section + section { margin-top: 1.25rem; padding-top: 1.25rem; }

  
  .socials { gap: .5rem .75rem; }
}

/* Tiny*/
@media (max-width: 480px) {
  main { padding: 1rem; }
  .page-nav { gap: .4rem .5rem; }
  .page-nav a { font-weight: 600; }

  /*links don’t overflow */
  a { word-break: break-word; }
}

/* Art page mobile */
@media (max-width: 900px)  { 
  .art-gallery { 
    column-width: 240px; 
  } 
}

@media (max-width: 600px){
  .art-gallery { 
    column-count: 1; 
    column-width: auto; 
  }
}

/* game page mobile */

@media (max-width: 600px){
  .game-grid{ 
    grid-template-columns: repeat(2, minmax(140px, 1fr)); 
    gap: 16px; 
  }
}
  
@media (max-width: 420px){
  .game-grid{ 
    grid-template-columns: 1fr; 
  }
}

.page-nav a, .socials li a {
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
}