/* ==================
Custom Styles
===================== */
:root {
  --color1: indianred;
  --color2: steelblue;
  --color3: olive;
  --color-dark: #000;
  --color-light: #fff;
  --color-gray-light: rgba(0, 0, 0, .1);

  --icon-height: 65px;
  --animation-speed-slow: 1s;
  --animation-speed-fast: .3s;

  --container-padding: 2rem;

  --font-stack: 'Roboto Slab', 'Times New Roman', 'Times', serif;
}

/* Little Screens */
@media (max-width: 767px) {
  :root {
    --icon-height: 50px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-stack);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.75em;
}

/* reduce font size for tablet and lower */
@media (max-width: 960px) {
  html {
    font-size: 1.1rem;
  }
}

body {
  margin: 0;
}

::-moz-selection,
::selection {
  background: var(--color-gray-light);
  text-shadow: none;
}

audio, canvas, iframe, img, svg, video {vertical-align: middle}
textarea {resize: vertical}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

.no-bullets {
  padding: 0;
  list-style-type: none;
}

.container {
  padding: var(--container-padding);
  transition: padding ease var(--animation-speed-fast);
}

.container--first-child {
  padding-top: 111px;
}

.no-margin {
  margin: 0;
}

.centered-content,
article {
  margin: 0 auto;
  max-width: 65ch;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  justify-items: stretch;
  align-items: end;
}

.grid-box--border {
  padding: 0 1rem;
  background-color: var(--color-gray-light);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid-box--span-2 {grid-column: span 2}
  .grid-box--span-3 {grid-column: span 3}
  .grid-box--span-4 {grid-column: span 4}
  .grid-box--span-5 {grid-column: span 5}
  .grid-box--span-6 {grid-column: span 6}
  .grid-box--span-7 {grid-column: span 7}
  .grid-box--span-8 {grid-column: span 8}
  .grid-box--span-9 {grid-column: span 9}
}

.yt-container {
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  position: relative;
}
.yt-embed {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

h1, h2, h3 {
  margin: 1em 0;
  line-height: 1.35em;
  font-weight: lighter;
  color: var(--color-dark);
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: .85em;
  letter-spacing: .125em;
  text-transform: uppercase;
  font-weight: bold;
}

ul, ol, p {
  line-height: 1.75em;
  margin: 1.75em 0;
}

li {
  margin: 1em 0;
}

img, iframe {max-width: 100%}

a,
button {
  color: var(--color-dark);
  background-color: var(--color-light);
  text-decoration: underline;
  text-decoration-color: var(--color-dark);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

button {
  border: none;
  border-radius: 0;
  margin: .25em .25em 0 0;
  padding: .5em;
  cursor: pointer;
}

a:hover,
button:hover,
a:focus,
button:focus {
  outline: .25rem solid var(--color-light);
  text-decoration: none;
  outline-offset: 0;
  filter: invert(1);
}

/* leave site icon */
.link--external::after {
  margin-right: .35em;
  margin-left: 3px;
  display: inline-block;
  width: 6px;
  height: 6px;
  outline: 1px solid;
  box-shadow: 3px -3px 0 0;
  opacity: .75;
  position: relative;
  top: -.35em;
  content: "";
}

.invert a,
.invert button {
  color: var(--color-light);
  background-color: var(--color-dark);
}

.invert a:hover,
.invert button:hover,
.invert a:focus,
.invert button:focus {
  outline: .25rem solid var(--color-dark);
}

.icon {
  width: var(--icon-height);
  height: var(--icon-height);
  position: relative;
  overflow: hidden;
}

.icon::after,
.icon::before {
  font-size: 1.5rem;
  line-height: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header {
  position: absolute;
  padding: 1rem;
  width: 100%;
  z-index: 11;
}

.header__link-home {
  display: inline-block;
  height: var(--icon-height);
  width: calc(var(--icon-height) * 5);
  padding: .5rem;
  padding-right: .65rem;
}

@media (max-width: 767px) {
  .header__link-home {
    width: calc(var(--icon-height) * 3.5);
  }
}

.header__link-home .no-fill {
  stroke-width: 2px;
  stroke: var(--color-dark);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invert .header__link-home .no-fill  {
  stroke: var(--color-light);
}

.header__link-menu {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 11;
}

.header__link-menu::after {
  content: "\00283f";
}

.menu__list {
  margin: 0;
  padding: 0 0 0 2rem;
}

.menu__list__item {
  margin: .65em 0;
  list-style-type: none;
  position: relative;
}

@keyframes skew {
  0%, 100% {
    transform:
      skewX(-10deg)
      scale(10)
      translateX(calc(var(--menu-icon-size) * -.25));
  }
  50% {
    transform:
      skewX(10deg)
      scale(11)
      translateX(calc(var(--menu-icon-size) * -.5));
  }
}

.menu__list__item__link::before {
  --menu-icon-size: 2rem;
  color: var(--color-dark);
  z-index: -1;
  top: calc(var(--menu-icon-size) * .35);
  left: calc(var(--menu-icon-size) * -1);
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
}

.menu__list__item__link:focus::before,
.menu__list__item__link:hover::before {
  color: rgba(255,255,255,.1);

  animation-name: skew;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.menu__list__item__link--home::before {
  content: "\002302";
}
.menu__list__item__link--band::before {
  content: "\002826";
  font-size: var(--menu-icon-size);
}
.menu__list__item__link--nils::before {
  content: "\00263c";
  font-size: calc(var(--menu-icon-size) * .75);
}
.menu__list__item__link--atextual::before {
  content: "\00ff06";
}
.menu__list__item__link--larvascript::before {
  content: "\00219d";
  font-size: calc(var(--menu-icon-size) * .75);
}
.menu__list__item__link--tartan::before {
  content: "\0025a6";
  content: "\002a69";
  font-size: calc(var(--menu-icon-size) * .75);
}
.menu__list__item__link--tartan:focus::before,
.menu__list__item__link--tartan:hover::before {
  top: -1em;
}
.menu__list__item__link--art::before {
  content: "\0026cb";
}
.menu__list__item__link--discography::before {
  content: "\01d122";
  font-size: calc(var(--menu-icon-size) * .65);
}
.menu__list__item__link--discography:focus::before,
.menu__list__item__link--discography:hover::before {
  margin-left: calc(var(--menu-icon-size));
}
.menu__list__item__link--bio::before {
  content: "\00273e";
  font-size: calc(var(--menu-icon-size) * .75);
}
.menu__list__item__link--contact::before {
  content: "\00270e";
}

.figure {
  position: sticky;
  top: 0;
  margin: 0;
}

.figure__media {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.figure__media--tartan {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  mix-blend-mode: normal;
}

.figure__caption__link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .75rem 1rem 1rem;
  margin: 0;
  text-align: center;
  z-index: 1;
}

.figure--video {
  padding-bottom: calc((9 / 16) * 100%); /* 16:9 */
  height: 0;
}

.figure__media--video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main--atextual {
  padding: 200px 5vw 5vw 15vw;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.definition-list {
  margin: 0;
  width: 100%;
  overflow: hidden;
  animation-name: fadein;
  animation-duration: calc(var(--animation-speed-slow));
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}

.definition-list:focus {
  outline: none;
}

.definition-list__term {
  line-height: 1.15em;
  font-size: 7vw;
}

.definition-list__definition {
  line-height: 1.15em;
  margin: 3vw 1vw 1vw 3vw;
  font-size: 5vw;
}

.decorative-terms {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

@keyframes slidein {
  0%, 10% {
    transform: translateX(-35vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: .035;
  }
}

.decorative-terms__term {
  position: absolute;
  right: -2vw;
  bottom: 15vh;
  font-size: 25vw;
  line-height: 1em;
  letter-spacing: -.025em;
  font-weight: bold;
  opacity: .035;
  text-align: right;
  animation-name: slidein;
  animation-duration: calc(var(--animation-speed-slow) * 2);
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.no-js .action-button {
  display: none;
}

.action-button {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}

.action-button::after {
  content: "\00ff06";
}

.prev-button::after {
  content: "\0000ab";
}

.next-button::after {
  content: "\000bb";
}

.play-button::after {
  content: "";
  border: .5em solid transparent;
  border-left: .75em solid var(--color-dark);
  width: 0;
  height: 0;
  left: 65%;
  transition:
    border ease var(--animation-speed-fast),
    width ease var(--animation-speed-fast),
    height ease var(--animation-speed-fast),
    left ease var(--animation-speed-fast);
}

.invert .play-button::after {
  border-left: .75em solid var(--color-light);
}

.play-button--pause::after {
  border: 0 solid transparent;
  border-left: .25em solid var(--color-dark);
  border-right: .25em solid var(--color-dark);
  width: 8%;
  height: 40%;
  left: 50%;
}

.invert .play-button--pause::after {
  border-left: .25em solid var(--color-light);
  border-right: .25em solid var(--color-light);
}

@keyframes biophoto {
  0%, 50%, 53%, 100% {
    filter: saturate(1);
    object-fit: initial;
  }
  51%, 52% {
    filter: saturate(15);
    object-fit: none;
  }
}

.bio-photo {
  float: right;
  border-radius: 50%;
  position: relative;
  object-fit: initial;
  right: -1rem;
  top: -1rem;
  transform: scaleX(1);
  max-width: 100%;

  animation-name: biophoto;
  animation-duration: 13s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

/* ===================== 
Steve Chab Band
======================== */

.steve-chab-band-logo-stacked {
  width: 100%;
  fill: var(--color-dark);
}

@media (max-width: 767px) {
  .steve-chab-band-logo-stacked {
    padding: 0 25%;
  }
}

.steve-chab-band-logo-bug {
  width: var(--icon-height);
  fill: var(--color-dark);
}


/* ===================== 
Print Special Message
======================== */
@media print {
  body {
    display: none;
  }

  html::after {
    content: "Jesus \A loves \A you!";
    font-family: 'Roboto Slab', serif;
    font-size: 20vw;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: .9em;
    text-transform: uppercase;
    display: block;
    white-space: pre;
    text-align: center;
    margin-top: 1em;
  }
}