/* ======================================================
   BASE / RESET
====================================================== */

body {
  background-color: #000;
  color: #000;
}

img {
  border: 0;
  padding: 0;
}

a:active {
  opacity: 0.7;
}

.page a.active {
  opacity: 0.4;
}

i, em {
  font-style: italic;
}

b, strong {
  font-weight: bolder;
}

sub, sup {
  position: relative;
  vertical-align: baseline;
}

sub { top: 0.3em; }
sup { top: -0.4em; }

s {
  text-decoration: line-through;
}

ul, ol {
  margin: 0;
  padding-left: 2em;
}

blockquote {
  margin: 0;
  padding-left: 2em;
}

hr {
  height: 1px;
  border: 0;
  background: rgba(127,127,127,0.2);
}

/* ======================================================
   CONTENT
====================================================== */

.content img {
  float: none;
  margin-bottom: 0.5em;
}

.gallery_image_caption {
  margin: 1.2rem 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255,255,255,0.35);
  font-family: "Neue Haas Grotesk", Icons;
}

/* ======================================================
   LOADING
====================================================== */

.loading[data-loading] {
  position: fixed;
  bottom: 8px;
  left: 8px;
}

/* ======================================================
   TYPOGRAPHY (EDITOR STYLES)
====================================================== */

[data-predefined-style="true"] bodycopy {
  font-family: "Monument Grotesk Variable", Icons;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
  font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a {
  color: #fff;
  text-decoration: none;
}

bodycopy a.image-link,
bodycopy a.icon-link {
  color: rgba(15,206,131,1);
}

/* Headings */

[data-predefined-style="true"] h1 {
  font-family: "Monument Grotesk Variable", Icons;
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
}

[data-predefined-style="true"] h2 {
  font-family: "Monument Grotesk Variable", Icons;
  font-size: 1rem;
  font-weight: 281;
  line-height: 1.7;
  color: #fff;
}

[data-predefined-style="true"] h2 a:hover {
  color: rgba(140,140,140,1);
}

[data-predefined-style="true"] small {
  display: inline-block;
  font-family: "Monument Grotesk Variable", Icons;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
}

/* ======================================================
   LAYOUT / BREAKPOINTS
====================================================== */

[data-css-preset] .page {
  background-color: initial;
}

.mobile .page {
  width: 100%;
  max-width: 100%;
  background: transparent;
}

[data-css-preset] .container {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

[data-css-preset] .container_width {
  width: 100%;
}

/* GLOBAL CONTENT PADDING */
[data-css-preset] .content_padding {
  padding: 2rem;
}

/* REMOVE PADDING FOR HOMEPAGE HERO */
.page_container:first-child .content_padding {
  padding-top: 0;
  padding-bottom: 0;
}

[data-css-preset] text-limit {
  max-width: 66rem;
  display: inline-block;
}

/* ======================================================
   THUMBNAILS
====================================================== */

div[thumbnails] {
  justify-content: flex-start;
}

.thumbnails .thumb_image {
  margin-top: 1rem;
}

.thumbnails .title {
  margin: 1.1rem 0 0.2rem;
  font-family: "Degular", Icons;
  font-size: 1.3rem;
  font-weight: 490;
  text-align: center;
  color: #fff;
}

.thumbnails .tags {
  font-family: "Degular", Icons;
  font-size: 0.9rem;
  line-height: 0.8;
  text-align: center;
  color: #ddd;
}

.thumbnails .tags a {
  color: rgba(200,200,200,0.4);
  text-decoration: none;
}

/* ======================================================
   SITE MENU
====================================================== */

#site_menu_button {
  position: fixed;
  top: 3rem;
  right: 3rem;
  font-size: 28px;
  padding: 6px;
  color: rgba(0,0,0,0.75);
}

body.mobile #site_menu_button {
  font-size: 34px;
}

#site_menu {
  background: rgba(20,20,20,0.95);
  padding: 20px 30px 90px;
  max-width: 400px;
  min-width: 300px;
}

#site_menu a {
  color: rgba(255,255,255,0.75);
}

/* ======================================================
   AUDIO PLAYER
====================================================== */

.audio-player {
  max-width: 36rem;
  height: 3.3rem;
  background: #fff;
  font-size: 1.2rem;
  outline: 1px solid rgba(0,0,0,0.15);
}

/* ======================================================
   SCROLL LOGO
====================================================== */

#scroll-logo {
  position: fixed;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 20;
}

#scroll-logo.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================
   HERO WORDMARK
====================================================== */




#hero-wordmark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 10;
  pointer-events: none;
}