/* Import fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); */

@font-face {
  font-family: 'Guillemet';
  src: url('./GuillemetW00-Black.woff2') format('woff2');
}

/* Our default values set as CSS variables */
:root {
  --color-bg: #f3f4ee;
  --color-text-main: #000000;
  --color-border: #292929;
  --color-heading: #292929;
  --color-border-faint: #999996;
  --color-link: #801955;
  --color-link-contrast: #991E66;
  --color-link-hover: #bf1c7b;
  --color-link-bg: #e1b4ce;
  --font-family: 'Rubik';
  --font-family-header: 'Guillemet';
}

/* Page structure */
body {
  font-family: var(--font-family);
  font-weight: 200;
  background-color: var(--color-bg);
  background-image: image-set(url(/img/BG_paper.webp) type('image/webp'),
      url(/img/BG_paper.jpg) type('image/jpeg'));
  background-size: 50%;
  margin: 0;
  container-type: inline-size;
  color: var(--color-text-main);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12vw;
  align-items: center;
  min-height: 100dvh;
}

/* Typography */
p {
  margin: 0 0 1rem 0;
  line-height: 1.5 !important;
}

mark {
  font-weight: 600;
  background-color: transparent;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-main);

  & + h2,
  & + h3,
  & + h4,
  & + h5,
  & + h6 {
    margin-top: 0.5rem;
  }

  & + ul {
    margin-top: 0.75rem;
  }
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

small,
.text_small {
  font-size: 0.8rem;
}

ul > li,
ol > li,
menu > li {
  list-style-type: none;
}

ul,
menu,
figure {
  padding: 0 0 0 0;
  margin: 0;
}

/* Link styles */
a {
  text-decoration: none;
  color: var(--color-link);
  transition: background 0.1s linear;

  &:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-shadow: 0 0 12px var(--color-link-bg);
  }
}

[data-toggler] {
  display: flex;
  align-items: center;
  cursor: pointer;
}

button[data-toggler]::after {
  content: '\25BE';
  display: inline-block;
  font-size: 1.1rem;
  color: var(--color-text-main);
  transition-duration: 0.125s;
  transform-origin: 50% 55%;
  margin-left: 0.333rem;
}

[data-toggle='open']::after {
  transform: rotate(-180deg);
}

/* Home */

.wrapper {
  max-width: 960px;
}

.wrapper:not(.home) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .content {
    max-width: 72rem;
    align-self: center;
    width: 100%;
    padding: 0 4vw;
    box-sizing: border-box;

    & > h3 {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    
    & > h4 {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    
    ul + h5 {
      margin-top: 1.5rem;
    }
  }
}

.home-header,
.comic-header {
  display: grid;
  /* justify-content: center; */
  justify-items: center;
  grid-template-areas:
    'logobadge logotype'
    'logocollective logocollective'
    'navbar navbar';
  height: auto;
  margin-bottom: 1.5rem;
  position: relative;
  padding-top: 1.5vw;

  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
  }

  &:before {
    left: 0;
    background-image: url(/img/LOGO_splash-left.webp);
    background-position: left top;
  }

  &:after {
    right: 0;
    background-image: url(/img/LOGO_splash-right.webp);
    background-position: right top;
  }

  .home-logotype {
    grid-area: logotype;
    align-content: center;
    justify-self: start;
    position: relative;
    z-index: 3;
    right: 2.5vw;

    h1 {
      width: calc(67vw * 0.8);
      max-width: 514.5px;
      height: calc(26vw * 0.8);
      max-height: 199.7px;
      overflow: hidden;
      text-indent: -999vw;
      background-image: url(/img/LOGO_logotype.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center center;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }

  .home-logobadge {
    display: block;
    grid-area: logobadge;
    justify-self: end;
    position: relative;
    top: -0.5vw;
    z-index: 2;
    left: 2.5vw;
    background-color: var(--color-bg);
    mask-image: url(/img/LOGO_chimera-bg.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100%;

    img {
      display: block;
      width: calc(26vw * 0.8);
      max-width: 199.7px;
      height: calc(26vw * 0.8);
      max-height: 199.7px;
    }
  }

  .home-logocollective {
    grid-area: logocollective;
    display: block;
    position: relative;
    width: 100%;
    top: -1.5vw;
    left: 0;
    right: 0;
    height: 6.2vw;
    max-height: 59.5px;
    background-color: var(--color-border);
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      height: 26px;
      left: 0;
      right: 0;
      bottom: 100%;
      background-color: var(--color-border);
      mask-image: url(/img/BGD_halftone-lg-up.png);
      mask-repeat: repeat-x;
      mask-size: auto 26px;
      mask-position: center center;
    }

    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 26px;
      background-color: var(--color-border);
      mask-image: url(/img/BGD_halftone-lg-down.png);
      mask-repeat: repeat-x;
      mask-size: auto 26px;
      mask-position: center center;
    }

    h2 {
      overflow: hidden;
      text-indent: -999vw;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(/img/LOGO_collective.svg);
      background-repeat: no-repeat;
      background-size: 43% auto;
      background-position: center center;
    }
  }

  .home-nav {
    grid-area: navbar;
    width: 72%;
    position: relative;
    z-index: 1;
    margin-top: 0.5vw;
    max-width: 960px;

    ul {
      text-transform: uppercase;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      & > li {
        font-size: 2.5vw;

        a {
          display: block;
          padding: 0.5rem;
          font-style: italic;
          font-weight: 800;
        }
      }
    }
  }
}

.wrapper.home {
  .content {
    display: flex;
    flex-direction: column;
    row-gap: 16vw;
  }

  .splash-banner {
    display: flex;
    flex-direction: row;
    width: 100cqw;
    overflow-x: hidden;
    justify-content: flex-start;
    background-image: linear-gradient(180deg, transparent 50%, var(--color-border) 50.1%);
    background-position: center -16px;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 26px;
      background-color: var(--color-border);
      mask-image: url(/img/BGD_halftone-md-down.png);
      mask-size: auto 16px;
      mask-repeat: repeat-x;
      mask-position: center bottom;
    }

    .splash-controls {
      position: absolute;
      top: 3.9vw;
      bottom: 4.4vw;
      left: 0;
      right: 0;
      pointer-events: none;

      .splash-control {
        position: absolute;
        top: 0;
        height: 100%;
        width: 10cqw;
        z-index: 1;
        background-color: rgba(61, 61, 61, 0.5);
        opacity: 0;

        button {
          background-color: transparent;
          border: none;
          position: absolute;
          padding: 0;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          font-family: var(--font-family);
          font-weight: 900;
          font-size: 20vw;
          color: var(--color-bg);
          pointer-events: auto;
          cursor: pointer;
          opacity: 0.667;
        }

        &.splash-prev {
          left: 0;
        }

        &.splash-next {
          right: 0;
        }
      }
    }

    &:not(.advance) {
      .splash-controls .splash-control:hover {
        transition: opacity 0.25s cubic-bezier(0.33, 0, 0, 1);
        opacity: 1;
      }
    }

    &.advance {
      ul {
        transition: transform 0.667s cubic-bezier(0.33, 0, 0, 1);
      }

      &[data-advance='1'] ul {
        transform: translateX(-230cqw);
      }

      &[data-advance='-1'] ul {
        transform: translateX(-70cqw);
      }

    }

    ul {
      display: flex;
      flex-direction: row;
      transform: translateX(-150cqw);

      & > li {
        width: 80cqw;

        .banner-title {
          font-size: 3.6vw;
          line-height: 1;
          font-weight: 700;
          text-transform: uppercase;
          position: relative;
          top: 0.175em;
          margin-left: 4%;
          transition: transform 0.444s cubic-bezier(0.333, 0, 0, 1);

          a {
            color: var(--color-heading);

            &:hover {
              text-shadow: none;
              text-decoration: none;
            }
          }
        }

        .banner-block {

          .banner-image {
            display: block;
            background-color: var(--color-border);
            border: 1px solid var(--color-border);
            border-width: 0.667vw 0;
            border-left: 0.5vw solid var(--color-border);
            border-right: 0.5vw solid var(--color-border);

            img {
              display: block;
              width: 100%;
              max-width: 768px;
              height: 45.44cqw;
              max-height: 436px;
              object-fit: cover;
              transition: opacity 0.125s ease-out;
            }
          }

          .banner-caption {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;

            .banner-credit {
              font-size: 2.4vw;
              line-height: 1.2;
              width: 100%;
              text-align: right;
              color: var(--color-bg);
              margin-bottom: calc(0.16vw + 16px);
              padding-right: 4%;
              /* background-color: var(--color-text-main); */
              transition: transform 0.444s cubic-bezier(0.333, 0, 0, 1);
            }
          }
        }

        &:not(.active) {
          .banner-title {
            transform: translateX(-10cqw);
          }
        }

        &.active ~ li {
          .banner-title {
            transform: translateX(10cqw);
          }
        }

        &:not(.active) .banner-credit {
          transform: translateX(-10cqw);
        }

      }
    }
  }

  .campaigns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0.75rem;
    padding: 0 1.5rem;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      height: 2rem;
      left: 0;
      right: 0;
      top: 89%;
      background-color: var(--color-border);
      mask-image: url(/img/BGD_halftone-stripe.png);
      mask-size: auto 11.67px;
      mask-repeat: repeat-x;
      mask-position: center top;
    }

    .campaign {
      position: relative;

      .campaign-title {
        position: absolute;
        left: 0;
        bottom: 101%;
        width: 100%;
        font-size: 4.8vw;
        line-height: 0.667;
        margin-left: 0.2vw;
        font-weight: normal;
        font-family: var(--font-family-header);
        /* text-transform: uppercase; */
      }

      .image-block {
        /* margin-top: 1.5vw; */

        a {
          display: block;
          overflow: hidden;
          border-radius: 0.5vw;
          border: 3px solid var(--color-link);

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }

        .image-caption {
          margin-top: 2.25vw;
          font-size: 2.2vw;
          line-height: 1.1;
          font-style: italic;
          text-align: right;
          margin-right: 0.25em;
        }
      }
    }
  }

  .comics {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: start;
    border-bottom: 0.8vw solid var(--color-border);
    grid-template-areas:
      'comic-title comic-title'
      'comic-ops comic-grid';

    .comics-title {
      grid-area: comic-title;
      font-size: 4.4vw;
      line-height: 0.75;
      text-transform: uppercase;
      font-weight: 800;
      padding-left: 5vw;
      padding-bottom: 0.1vw;
      color: var(--color-heading);
      position: relative;
      border-bottom: 1vw solid var(--color-border);
      z-index: 0;

      &:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 10.5px;
        width: 100%;
        background-color: var(--color-border);
        mask-image: url(/img/BGD_halftone-sm-up.png);
        mask-size: auto 10.5px;
        mask-repeat: repeat-x;
        mask-position: center bottom;
        z-index: -1;
      }
    }

    #comics-list-options {
      grid-area: comic-ops;
    }

    .comic-ops {
      font-size: 1.3rem;
      margin-top: 1.25rem;
      /* box-shadow: 2.5px 0 var(--color-text-main); */
      margin-bottom: -2px;

      .comic-op {
        padding: 0.5vw 1vw;
        border-bottom: 2px solid var(--color-border);
        align-items: baseline;
        display: grid;
        justify-items: end;
        grid-template-columns: 1fr min-content;
        grid-template-areas:
          'op-title op-toggle'
          'op-list op-list';

        &[data-toggleblock='closed'] {
          .discloser-options-list {
            max-height: 0;
            padding: 0;

            .discloser-option {
              max-height: 0;
              opacity: 0;
            }
          }
        }

        &:hover {
          .discloser-toggle {
            background-color: var(--color-link-bg);
          }
        }

        .op-title {
          grid-area: op-title;
        }

        .discloser-toggle {
          grid-area: op-toggle;
          border: none;
          background-color: transparent;
          font-size: 1.3rem;
          font-weight: 800;
          color: var(--color-link);
          border-radius: 0.5vw;
          cursor: pointer;
        }

        .discloser-options-list {
          grid-area: op-list;
          padding: 0 0 0.5rem 0;
          max-height: 100%;
          transition-duration: 0.333s;
          overflow: hidden;

          .discloser-option {
            font-size: 1rem;
            font-weight: 400;
            max-height: 1.5rem;
            transition-duration: 0.25s;

            label {
              display: flex;
              justify-content: flex-end;
              column-gap: 0.22rem;
              padding: 0.22rem;
              border-radius: 0.5vw;
              cursor: pointer;

              & + label {
                margin-top: 0.2rem;
              }

              &:hover {
                background-color: var(--color-link-bg);
              }
            }
          }
        }
      }
    }

    .comic-grid-box {
      grid-area: comic-grid;
      background-color: var(--color-border);
      box-shadow: 0 0.75vw var(--color-border);
      height: 100%;
      container-name: comic-grid;
      container-type: inline-size;
    }

    .comic-grid {
      display: grid;
      border-left: 0.75vw solid var(--color-border);
      border-right: 0.75vw solid var(--color-border);
      gap: 0.75vw;

      & > li {
        display: block;
        position: relative;
        transition: transform 0.125s cubic-bezier(0.25, 0, 0, 1);

        &[data-hidden='true'] {
          display: none;
        }

        &:hover {
          transform: scale(1.15);
          z-index: 1;

          .comic-thumb {
            box-shadow: 0 0 0px 0.45rem var(--color-border);
          }
        }

        .comic-thumb {
          display: block;
          border-radius: 0.5vw;
          overflow: hidden;
          transition: transform 0.25s cubic-bezier(0.25, 0, 0, 1);
          box-shadow: 0 0 0px 0px var(--color-bg);

          img {
            display: block;
            width: 100%;
            height: 100%;
            /* height: auto; */
            aspect-ratio: 1;
            object-fit: cover;
          }
        }
      }
    }
  }
}

.comic-header {
  margin-bottom: 0;

  .comic-logo {
    width: 50vw;
    height: auto;
  }
}

.comic-main {
  display: grid;
  column-gap: 3rem;
  row-gap: 2rem;
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    'banner banner'
    'desc titlebar'
    'desc sidebar'
    'desc empty';

  .banner-image {
    grid-area: banner;

    img {
      width: 100cqw;
      height: 25cqw;
      object-fit: contain;
    }
  }

  .comic-desc {
    grid-area: desc;
    padding-left: 4vw;

    .description-content {
      margin-bottom: 2rem;

      p {
        font-size: 1.05rem;
      }
    }

    .cover-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1rem;
      grid-template-areas: 'comic-cover cover-ops';

      .cover-image {
        grid-area: comic-cover;

        a {
          display: block;
          border: 0.333vw solid var(--color-border);
          border-radius: 0.5vw;
          overflow: hidden;

          img {
            display: block;
            max-width: 100%;
            height: auto;
          }
        }
      }

      .cover-ops {
        grid-area: cover-ops;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .cover-op {
          display: block;
          font-size: 1.1rem;
          font-weight: bold;
          padding: 0.5em 1em;
          cursor: pointer;

          &:hover {
            background-color: #ccc;
          }
        }
      }
    }
  }

  .comic-titlebar {
    grid-area: titlebar;
    padding-right: 4vw;

    .title {
      font-size: 1.333rem;
      margin-bottom: 0.25em;
    }

    .credits {
      font-weight: normal;
      font-size: 1rem;
    }
  }

  .sidebar {
    grid-area: sidebar;
    margin-right: 4vw;

    & > h5 {
      font-family: var(--font-family);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 1.5rem;
      color: var(--color-heading);
      /* padding-bottom: 2.5px; */
      border-bottom: 2.5px solid var(--color-border-faint);
      line-height: 0.6;
      margin-left: -0.1rem;
      margin-right: -4vw;
      position: relative;
      z-index: 0;

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        height: 10.5px;
        width: 100%;
        background-color: var(--color-border-faint);
        mask-image: url(/img/BGD_halftone-sm-down.png);
        mask-size: auto 10.5px;
        mask-repeat: repeat-x;
        mask-position: center bottom;
        z-index: -1;
      }
    }

    .related {
      margin: 1rem 0 0 0;

      dt {
        text-transform: uppercase;
        font-size: 0.9rem;
        font-style: italic;
        margin-left: -0.125em;
      }

      dd {
        font-size: 1.1rem;
        margin: 0;
        font-weight: bold;
        display: inline-block;

        &:has(+ dd)::after {
          content: ',';
          margin-right: 0.333em;
          font-weight: normal;
        }

        a[href*='ko-fi.com'],
        a[href*='patreon.com'],
        a[href*='paypal.com'],
        a[href*='paypal.me'],
        a[href*='gofundme.com'],
        a[href*='tumblr.com'],
        a[href*='bsky.app'],
        a[href*='x.com'],
        a[href*='discord.gg'],
        a[href*='discordapp.com'],
        a[href*='twitch.tv'],
        a[href*='mastodon'],
        a[href*='instagram.com'],
        a[href*='facebook.com'],
        a[href*='youtube.com'],
        a[href*='tiktok.com'],
        a[href*='payhip.com'],
        a[href*='storenvy.com'],
        a[href*='society6.com'],
        a[href*='bigcartel.com'] {
          .link {
            display: inline-block;
            width: 0;
            overflow: hidden;
            text-indent: -999vw;
          }
        }

        a[href*='ko-fi.com'] {
          &::before {
            content: 'Ko-Fi';
          }
        }

        a[href*='patreon.com'] {
          &::before {
            content: 'Patreon';
          }
        }

        a[href*='paypal.com'], a[href*='paypal.me'] {
          &::before {
            content: 'PayPal';
          }
        }

        a[href*='gofundme.com'] {
          &::before {
            content: 'GoFundMe';
          }
        }

        a[href*='tumblr.com'] {
          &::before {
            content: 'Tumblr';
          }
        }

        a[href*='bsky.app'] {
          &::before {
            content: 'Bluesky';
          }
        }
        
        a[href*='bsky.app/profile/alexassan.bsky.social'] {
          &::before {
            content: 'Bluesky (Alex)';
          }
        }
        
        a[href*='bsky.app/profile/lindarrow.bsky.social'] {
          &::before {
            content: 'Bluesky (Lin)';
          }
        }

        a[href*='x.com'] {
          &::before {
            content: 'Twitter';
          }
        }

        a[href*='mastodon'] {
          &::before {
            content: 'Mastodon';
          }
        }

        a[href*='instagram.com'] {
          &::before {
            content: 'Instagram';
          }
        }

        a[href*='bigcartel.com'] {
          &::before {
            content: 'Big Cartel';
          }
        }

        a[href*='payhip.com'] {
          &::before {
            content: 'Payhip';
          }
        }

        a[href*='society6.com'] {
          &::before {
            content: 'Society6';
          }
        }

        a[href*='facebook.com'] {
          &::before {
            content: 'Facebook';
          }
        }

        a[href*='storenvy.com'] {
          &::before {
            content: 'Storenvy';
          }
        }

        a[href*='youtube.com'] {
          &::before {
            content: 'YouTube';
          }
        }

        a[href*='tiktok.com'] {
          &::before {
            content: 'TikTok';
          }
        }

        a[href*='twitch.tv'] {
          &::before {
            content: 'Twitch';
          }
        }

        a[href*='discord.gg'],
        a[href*='discordapp.com'] {
          &::before {
            content: 'Discord';
          }
        }
      }

      dt + dd {
        /* margin-left: 0.125em; */

        &::before {
          content: none;
        }
      }

      dd + dt {
        margin-top: 0.75em;
      }
    }
  }
}

.footerBox {
  position: relative;
  width: 100%;

  &:before,
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 20vw;
    height: 20vw;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    transform: rotate(180deg);
  }

  &:before {
    left: 0;
    background-image: url(/img/LOGO_splash-right.webp);
    background-position: left -5vw;
  }

  &:after {
    right: 0;
    background-image: url(/img/LOGO_splash-left.webp);
    background-position: right -5vw;
  }

  .footer {
    width: 100%;
    padding-bottom: 0.25rem;
    flex-wrap: wrap;
    position: relative;
    background-color: var(--color-border);
    z-index: 1;

    & a {
      color: var(--color-link-contrast);

      &:hover {
        text-shadow: 0 0 12px var(--color-link);
      }
    }

    &:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 16px;
      background-color: var(--color-border);
      mask-image: url(/img/BGD_halftone-md-up.png);
      mask-repeat: repeat-x;
      mask-size: auto 16px;
      mask-position: center top;
    }

    .links {
      max-width: 960px;
      margin: 0 auto;

      display: flex;
      justify-content: space-around;
      white-space: nowrap;
      padding: 0.5rem;
      font-size: 2vw;

      a {
        font-weight: 600;
      }
    }
  }
}

@container comic-grid (min-width: 1rem) {
  .comic-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@container comic-grid (min-width: 35rem) {
  .comic-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@container comic-grid (min-width: 49rem) {
  .comic-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@container comic-grid (min-width: 63rem) {
  .comic-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@container comic-grid (min-width: 77rem) {
  .comic-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}


@media screen and (pointer: coarse) {
  .wrapper.home {
    .splash-banner {
      .splash-controls {
        display: none;
      }

      & ul {
        transform: translateX(0);
        width: 100vw;
        /* height: 60vw; */
        overflow-x: scroll;

        &::-webkit-scrollbar {
          display: none; // Safari and Chrome
        }

        scroll-snap-type: x mandatory;
        scroll-padding: 50%;

        & > li {
          scroll-snap-align: center;
          scroll-snap-stop: always;
          width: 80vw;
          flex: none;

          &:not(.active) {
            .banner-title {
              transform: translateX(0) !important;
            }

            .banner-credit {
              transform: translateX(0);
            }
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 960px) {

  .home-header,
  .comic-header {
    margin-left: calc(480px - 50cqw);
    margin-right: calc(480px - 50cqw);

    & .home-logotype {
      right: 24px;
    }

    & .home-logobadge {
      left: 24px;
    }

    & .home-logocollective {
      top: -14.4px;

      h2 {
        background-size: 413px auto;
      }
    }

    & .home-nav {
      & ul {
        & > li {
          font-size: 24.375px;
        }
      }
    }
  }

  .wrapper.home {

    & .content {
      row-gap: 153.6px;
    }

    & .splash-banner {
      margin: 0 calc(480px - 50cqw);

      & .splash-controls {
        top: 42px;
        bottom: 52px;
      }

      &.advance {
        &[data-advance='1'] ul {
          transform: translateX(calc((50cqw - 480px) - 2208px));
        }

        &[data-advance='-1'] ul {
          transform: translateX(calc((50cqw - 480px) - 672px));
        }
      }

      & ul {
        transform: translateX(calc((50cqw - 480px) - 1440px));

        & > li {
          width: 768px;

          & .banner-title {
            font-size: 35.1px;
          }

          & .banner-block {
            & .banner-caption {
              .banner-credit {
                font-size: 23.4px;
                margin-bottom: 17.5px;
              }
            }
          }
        }
      }
    }

    & .campaigns {
      &:after {
        margin: 0 calc(480px - 50cqw);
      }

      & .campaign {
        & .image-block {
          .image-caption {
            font-size: 21.12px;
            margin-top: 21.6px;
          }
        }

        .campaign-title {
          font-size: 46.8px;
        }
      }
    }

    & .comics {
      margin: 0 calc(480px - 50cqw);
      /* margin-right: calc(480px - 50cqw); */

      .comics-title {
        /* max-width: 960px; */
        font-size: 42.24px;
        /* margin: 0 calc(480px - 50cqw); */
        /* padding-left: calc(55vw - 480px); */
      }
    }

    & .comic-ops {
      & .comic-op {
        margin-left: calc(480px - 50cqw);

        .op-title {
          font-size: 20.8px;
        }
      }
    }
  }

  .comic-main {
    .banner-image {
      margin: 0 calc(480px - 50cqw);
    }
  }

  .footerBox {
    .footer {
      .links {
        font-size: 19.2px;
      }
    }
  }
}

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

  .home-header,
  .comic-header {
    margin-bottom: 12vw;
    grid-template-areas:
      'logobadge'
      'logotype'
      'logocollective'
      'navbar';

    /* &::before {
      background-size: auto 29%;
      background-position: center bottom calc(0.5rem + 6vw);
    } */

    .home-logobadge {
      justify-self: center;
      margin-bottom: -5vw;
      top: 0;
      left: 0;
      /* mask-size: 43.5vw; */
      mask-size: 199.7px;

      img {
        width: 50vw;
        height: 42vw;
      }
    }

    .home-logotype {
      justify-self: center;
      margin-left: -5vw;

      h1 {
        width: 93.5vw;
        height: 36vw;
        position: relative;
        left: 5%;
      }
    }

    .home-logocollective {
      height: 9.7vw;

      h2 {
        background-size: 74%;
      }
    }

    .home-nav {
      width: 100%;
      margin-top: 4vw;

      ul {
        margin-top: 1vw;
        flex-wrap: wrap;

        & > li {
          font-size: 4.5vw;
        }
      }
    }
  }

  .wrapper {
    .comic-header {
      margin-bottom: 0;

      & ~ .content {
        margin: 0 1rem;
      }
    }
  }

  .wrapper.home {
    .content {
      row-gap: 24vw;
    }

    .splash-banner {
      padding-bottom: 1.5vw;

      ul {
        & > li {
          .banner-title {
            font-size: 5.5vw;
          }

          .banner-block {
            .banner-caption {
              .banner-credit {
                font-size: 3.7vw;
                margin: 0.75vw 0 13px 0;
              }
            }
          }
        }
      }
    }

    .campaigns {
      column-gap: 0.333rem;
      padding: 0 0.333rem;

      &::after {
        top: 76%;
        background-size: 10px;
      }

      .campaign {
        .campaign-title {
          font-size: 5.6vw;
          margin-left: 1.5vw;
          margin-bottom: 0.5vw;
          width: calc(100% - 3vw);
        }

        .image-block {
          a {
            margin-bottom: 2vw;
          }

          .image-caption {
            font-size: 3vw;
            margin: 4.5vw 1vw 0 1vw;
          }
        }
      }
    }

    .comics {
      grid-template-columns: auto;
      grid-template-areas:
        'comic-title'
        'comic-ops'
        'comic-grid';

      .comics-title {
        font-size: 6.9vw;
        line-height: 0.9;
      }

      .comic-ops {
        margin-top: 0;

        .comic-op {
          padding: 1.5vw;

          .op-title {
            font-size: 1.4rem;
            width: 100%;
            justify-content: end;
          }

          .discloser-toggle {
            font-size: 1.4rem;
          }

          .discloser-options-list {
            .discloser-option {
              font-size: 5vw;
              max-height: 2.5em;

              label {
                padding: 0.5em 0.22rem 0.5em 1rem;
              }
            }
          }
        }
      }

      .comic-grid-box {
        border-top: 1vw solid var(--color-border);
      }
    }
  }

  .comic-main {
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 1rem;
    grid-template-areas:
      'banner'
      'titlebar'
      'desc'
      'sidebar';

    .comic-desc {
      padding: 0 4vw;

      .cover-block {
        grid-template-columns: 4fr 3fr;
      }

      .description-content {
        margin-bottom: 1.5rem;
      }
    }

    .comic-titlebar {
      padding: 0 4vw;
    }

    .sidebar {
      padding: 0;

      h5 {
        font-size: 5vw;
        line-height: 0.55;
        padding-left: 3.9vw;
        margin-top: 1rem;
      }

      .related {
        padding: 0 4vw;

        dt {
          font-size: 1.1rem;
        }
      }
    }
  }
}