@font-face {
    font-family: 'Syndicat Grotesk';
    src: url('../font/SyndicatGrotesk-Regular.woff2') format('woff2'),
         url('../font/SyndicatGrotesk-Regular.woff') format('woff'),
         url('../font/SyndicatGrotesk-Regular.ttf')  format('truetype');
}

@font-face {
    font-family: 'Syndicat Grotesk';
    src: url('../font/SyndicatGrotesk-RegularItalic.woff2') format('woff2'),
         url('../font/SyndicatGrotesk-RegularItalic.woff') format('woff'),
         url('../font/SyndicatGrotesk-RegularItalic.ttf')  format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Syndicat Grotesk Medium';
    src: url('../font/SyndicatGrotesk-Medium.woff2') format('woff2'),
         url('../font/SyndicatGrotesk-Medium.woff') format('woff'),
         url('../font/SyndicatGrotesk-Medium.ttf')  format('truetype');
}

:root {
    --outer-margin-x: 1.875rem;
    --outer-margin-y: 1.5625rem;
    --font-size: 1rem;
    --font-size-small: .6875rem;
    --line-height: 1.25rem;
    --caption-margin: .375rem;
    --base-width: 1440px;
    /*--active-color: black;*/
    --passive-color: #B4B4B4;
}

body {
    display: flex;
    padding: var(--outer-margin-y) var(--outer-margin-x);
    font-family: 'Syndicat Grotesk', Arial, Helvetica, sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
}

a.active, a:hover, a.active:hover figure:not(.cover) figcaption{
    color: var(--active-color);
}

/*
a figure:not(.cover) figcaption, a:hover figure:not(.cover) figcaption {
    color: var(--passive-color);
}
*/

.contributions a figure:not(.cover) figcaption{
    color: var(--passive-color);
} 

.contributions a.active figure:not(.cover) figcaption{
    color: var(--active-color);
} 

header {
    display: inherit;
    flex-shrink: 0;
}

header > nav {
    width: calc((var(--base-width) - var(--outer-margin-x) * 2) / 12 * 2);
    flex-shrink: 0;
}

#nav-issues > ul > li:first-child, 
#nav-artists > ul > li.divider-character, 
#nav-artists > ul > li.issue-number,
nav#subnav.issue > ul > li:first-child,
nav#subnav.mobile > ul > li:first-child,
nav#subnav
{
    margin-bottom: var(--line-height);
}

#nav-artists > ul > li.divider-character:not(:first-child), #nav-issues > ul > li:last-child {
    margin-top: var(--line-height);
}

#nav-issues {
    font-feature-settings: "tnum";
}

main { width: 100%; }

main > ul {
    width: 100%;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, calc( ((1440px - var(--outer-margin-x) * 2) / 12 * 1) - .25rem ));
    grid-auto-rows: calc((1440px - var(--outer-margin-x) * 2) / 12 * 1 / 2 * 3);
    /*gap: 0 .25rem;*/
    gap: 0 1rem;
}


main > ul.mobile:not(.always), #subnav.mobile {
    display: none;
}

main > ul ul {
    position: relative;
}

main > ul ul > li {
    position: absolute;
}

main > h2, video {
    width: 100%;
}

figure {
    display: flex;
    flex-direction: column;
}

figure:not(.cover).landscape, figure:not(.cover).square {
    width: 6.9375rem;
    height: 9.5rem;
    justify-content: space-between;
}

figure:not(.cover) picture {
    margin: 0 1.125rem;
    box-shadow: inset 0px 600px 0px #0000000D, 0px 0.5px 3px #00000042;
    border-radius: .125rem;
    background-color: var(--passive-color);
}

figure:not(.cover).landscape > picture , figure:not(.cover).square > picture {
    margin: 0;
} 

figure:not(.cover) picture img {
    border-radius: inherit;
    opacity: .9;
}

figure img {
    height: auto;
}


.contributions figure:not(.popup) img {
    max-height: 7rem;
    width: auto;
    margin: 0 auto;
}

figure:not(.cover) figcaption {
    margin-top: var(--line-height);
    font-family: 'Syndicat Grotesk Medium', Arial, Helvetica, sans-serif;
    font-size: var(--font-size-small);
    align-self: center;
}

figure.cover.portrait, video.portrait {
    width: 50%;
}

figure.cover figcaption {
    margin-top: var(--caption-margin);
}

.content-text p, figure.cover, video {
    margin-bottom: var(--line-height);
}

.content-text a {
    color: var(--passive-color);
}

.content-text a:hover {
    color: var(--active-color);
}

#releases div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

#releases div > a {
    width: calc(50% - .5rem);
}

#menu, main > ul.always + ul { 
    display: none; 
}

#about > *:not(:last-child) {
    margin-bottom: var(--line-height);
}

#about a {
    display: inline-block;
    color: gray;
}

#about a:hover {
    color: var(--active-color);
}

#about > #imprint + div {
    display: none;
}

/*
.contributions > li  figure figcaption{
    transition: color .35s ease-out .15s
}
.contributions.mobile ul li:nth-child(n+8) {
    display: none;
}
*/

.contributions > li:hover a figure:not(.cover) figcaption {
    color: var(--active-color);
}

.contributions.mobile ul li:not(:first-child) figcaption { opacity: 0; }

.contributions + h3, h3 + .contributions  {
    margin-top: var(--line-height);
}

div.release {
    scroll-margin: 0.875rem;
}

div.release:not(:last-of-type){
    margin-bottom: calc(var(--line-height) * 3);
}

#home, #popup {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

#home h1, #popup h1 {
    position: absolute;
    left: var(--outer-margin-x);
    top: calc( var(--outer-margin-y) + 0.25rem);
    /*
    font-size: 15vw;
    top: 0.975rem;
    left: 1.125rem;
    line-height: .725;
    white-space: nowrap;
    color: var(--active-color);
    */
    width: calc(100% - var(--outer-margin-x) * 2)
}

#home svg, #popup svg {
    fill: var(--active-color);
}

#home a, #popup a {
    display: block;
    width: inherit;
    height: inherit;
}

#home figure, #popup figure {
    width: inherit;
    height: inherit;
    position: relative;
    display: flex;
    z-index: -1;
}

#home figure picture, #popup figure picture{
    width: inherit;
    height: inherit;
}

#home figure img, #popup figure img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#popup {
    display: none;
}

#popup.visible { display: block; }

@media only screen and (max-width: 1024px) {
    :root {
        --outer-margin-x: clamp(1rem, 2.93vw, 1.875rem);
        --outer-margin-y: clamp(.85rem, 2.44vw, 1.5625rem);
    }

    body.about #nav-artists { display:  none; }
    body.about #subnav > ul > * { display: none; }
    body.about #subnav > ul > li:first-child, body.about #subnav > ul > li:last-child { display: block; }
    body.about { flex-direction: column;}

    /*
    #nav-issues  {
      display: none;
      position: fixed;
      background-color: white;
      top: 0;
      left: 0;
      padding: var(--outer-margin-y) var(--outer-margin-x) ;
      width: 100dvw;
      height: 100dvh;
      z-index: 99;
    }
    */

    header.menu {
      position: fixed;
      background-color: white;
      top: 0;
      left: 0;
      padding: var(--outer-margin-y) var(--outer-margin-x) ;
      width: 100dvw;
      height: 100dvh;
      z-index: 99;
      overflow-y: scroll;
    }

    main {
        grid-template-columns: repeat(3, 1fr);
    }

    main > ul:not(.mobile):not(.digital) {
        display: none;
    }

    main > ul.mobile:not(.always) {
        display: grid;
    }

    header, body.exception {
        flex-direction: column;
    }

    #subnav:not(.mobile), 
    .issue-number, 
    .issues #nav-artists, 
    .releases #nav-artists,
    header.exception > #nav-artists,
    #nav-issues {
        display: none;
    }

    header.menu > #subnav {position: absolute;}
    header.menu > #subnav > ul > li:not(:last-child) {display: none;}
    header.menu > #nav-issues { display: block; }
    header.menu > #nav-issues {
        margin-bottom: var(--line-height);
    }

    header.menu > #nav-artists { display: none; }

    #subnav.mobile {
        display: flex;
    }

    body.issues, body.releases { flex-direction: column;}
    
    #menu { 
        display: block;
        position: fixed;
        z-index: 99;
        top: var(--outer-margin-y); 
        right: var(--outer-margin-x);
    }

    ul.mobile {
        margin-top: calc(var(--line-height) * 2.2);
    }

    figure.cover.portrait, video.portrait {
        width: 100%;
    }

  }

@media only screen and (max-width: 863px) {

    #releases div {
        gap: 0;
    }
    
    #releases div > a {
        width: 100%;
    }
}

  @media only screen and (max-width: 654px) {
    #nav-issues  {
      display: none;
    }
    main {
        grid-template-columns: repeat(2, 1fr);
    }
  }


  @media only screen and (max-width: 430px) {
    #nav-issues  {
      display: none;
    }
    main {
        grid-template-columns: 1fr;
    }
  }

  @media only screen and (max-width: 390px) {
    header > nav { 
        width: auto;
        padding-right: 1rem;
    }
  }

/*
  @media only screen and (max-width: 390px) {
    header > nav { width: auto; }
    main > ul.mobile {
        grid-template-columns: repeat(auto-fill, calc( ((1440px - var(--outer-margin-x) * 2) / 12 * 1) - .25rem ));
    }
    main > ul {
        justify-content: flex-end;
    }
  }
*/