@charset "UTF-8";
/*

Primary look and layout styles for Reverie Studios website.
Base styles are meant for small smartphones.
Layout-specific changes for different devices are in breakpoints.scss.
Nav menu styles are in nav.scss.

This design makes extensive use of grid layout rules, with some flexbox.

*/
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700|Oswald:500|Charm");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
* {
  margin: 0;
  padding: 0;
  line-height: 1em;
  box-sizing: border-box; }

body {
  background: #38383c;
  background-image: linear-gradient(180deg, #141415 0px, #38383c 300px, #38383c);
  color: #e7e7f4;
  font-family: "Lora", Georgia, serif;
  font-size: 20px; }

h1, h2, h3, h4, h5, h6 {
  font-family: Oswald, Impact, sans-serif;
  text-transform: uppercase;
  margin: 0 0 0.5em 0;
  color: #fff; }

h6 {
  font-size: 110%; }

h5 {
  font-size: 125%; }

h4 {
  font-size: 130%; }

h3 {
  font-size: 145%; }

h2 {
  font-size: 160%; }

h1 {
  font-size: 185%; }

p, ol, li {
  margin-bottom: 1em;
  line-height: 1.3em; }

p.legal {
  font-family: Arial, Verdana, Geneva, sans-serif;
  font-size: 80%;
  margin-top: 2em; }

ol, li {
  margin-left: 1em; }
  section ol, section li {
    margin-left: 1.5em; }

a {
  color: #fbce6b;
  text-decoration: none; }

a.button {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 4em;
  background: #e7e7f4;
  color: #38383c;
  font-family: Arial, Verdana, Geneva, sans-serif;
  line-height: 1em;
  padding: 0.5em 0.75em; }

a.plain {
  color: transparent;
  margin: 0;
  padding: 0;
  border: none; }

a.skip-link::after {
  display: inline-block;
  content: "_";
  color: transparent;
  height: 100%;
  width: 1em;
  transform: rotate(90deg);
  margin-left: 0.5em;
  background: transparent url("../i/arrow-dusk-right.png") center center no-repeat;
  background-size: contain; }

.callout {
  background: #e7e7f4;
  color: #38383c;
  padding: 1rem;
  border-radius: 0.5rem; }
  .callout a {
    color: #000;
    border-bottom: 1px solid #000;
    font-weight: bold; }

.callout.discord {
  background: #e7e7f4 url("../i/discord_black_transparent.png") right center no-repeat;
  background-size: contain;
  background-origin: content-box; }

img {
  display: block;
  background: #000;
  padding: 1px;
  border: 1px solid #b9b9c3;
  max-width: 100%; }

img.sub-image {
  float: right;
  width: clamp(25%, 33%, 50%);
  height: auto;
  margin: 0 0 0.5em 0.5em; }

a.hidden {
  opacity: 0; }

h1.hidden {
  height: 0px;
  overflow: hidden;
  margin: 0; }

section#videos div.video {
  margin-bottom: 2em;
  width: 100%; }
section#videos div.video-wrapper {
  border: 1px solid #b9b9c3;
  padding: 1px; }
section#videos div.video-container {
  position: relative;
  width: 100%; }
section#videos div.video-container::after {
  display: block;
  padding-top: 56.25%;
  content: " "; }
section#videos iframe.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

section#masthead a {
  display: block;
  border: none; }
section#masthead img {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto; }
section#masthead img.logo-one-line {
  display: none; }

footer {
  font-family: Arial, Verdana, Geneva, sans-serif;
  margin: 2em 0 0 0;
  padding: 2em 0 1em 0;
  background: #191919; }
  footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1em; }
    footer ul li {
      margin: 0; }
    footer ul a.facebook:before {
      background: transparent url("../i/facebook_positive.png") center center no-repeat; }
    footer ul a.discord:before {
      background: transparent url("../i/discord_positive.png") center center no-repeat; }
    footer ul a.email:before {
      background: transparent url("../i/email_positive.png") center center no-repeat; }
    footer ul a.facebook, footer ul a.discord, footer ul a.email {
      display: flex; }
      footer ul a.facebook:before, footer ul a.discord:before, footer ul a.email:before {
        display: flex;
        content: " ";
        width: 1em;
        height: 1em;
        margin-right: 0.5em;
        background-size: contain; }
  footer p {
    font-size: 80%;
    text-align: center; }

body.page {
  display: grid;
  grid-template: ". masthead nav ." ". main main ." "footer footer footer footer";
  grid-template-columns: 2rem 5fr 5fr 2rem;
  padding: 2em 0 0 0;
  column-gap: 0; }
  body.page nav {
    grid-area: nav; }
  body.page section#masthead {
    grid-area: masthead; }
  body.page section#main {
    grid-area: main;
    margin-top: 2em; }
  body.page footer {
    grid-area: footer; }
  body.page nav {
    text-align: right;
    margin-bottom: 1em; }
    body.page nav ul.main {
      text-align: left; }

body#home {
  grid-template-columns: 0rem 5fr 5fr 0rem;
  display: grid; }
  body#home #masthead {
    margin-left: 1rem; }
  body#home nav {
    margin-right: 1rem; }
  body#home section#main {
    display: grid;
    grid-template: "hero hero hero" ". intro ." ". community ." ". events ." ". about .";
    grid-template-columns: 1rem 1fr 1rem;
    column-gap: 0rem; }
  body#home section#hero {
    grid-area: hero; }
  body#home section#intro {
    grid-area: intro; }
  body#home section#community {
    grid-area: community; }
  body#home section#events {
    grid-area: events; }
  body#home section#about {
    grid-area: about; }
  body#home div.event-list {
    margin-bottom: 1em; }
  body#home section#events h2 {
    margin-top: 1em; }
  body#home section#hero {
    margin: 0 0 1em 0; }
    body#home section#hero img {
      width: 100%;
      height: auto;
      padding: 1px 0;
      border-width: 1px 0; }
  body#home div.event {
    border: 1px solid #b9b9c3;
    background: #000;
    padding: 1px;
    margin-bottom: 1em; }
    body#home div.event a {
      position: relative;
      display: block;
      border: none;
      color: #fff; }
      body#home div.event a:after {
        position: absolute;
        bottom: 1em;
        right: 0.75em;
        width: 1.5em;
        height: 1.5em;
        background: transparent url("/i/arrow-white-right.png") center center no-repeat;
        background-size: contain;
        content: " "; }
    body#home div.event div.blurb {
      position: absolute;
      top: 0;
      left: 0;
      padding: 1rem; }
    body#home div.event div.gradient {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    body#home div.event.miskatonic .blurb h3 {
      color: transparent; }
    body#home div.event.seance div.gradient {
      background-image: linear-gradient(90deg, black, transparent); }
    body#home div.event.daedalus div.gradient {
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.85) 75%); }
    body#home div.event.acog div.gradient {
      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent); }
    body#home div.event.eskhaton div.gradient {
      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent); }
    body#home div.event.hardway div.gradient {
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent); }
    body#home div.event.sanguis div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); }
    body#home div.event.ember div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent); }
    body#home div.event.haunting div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); }
    body#home div.event.reverie-presents div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); }
    body#home div.event.saturnalia div.gradient {
      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent); }
    body#home div.event.neonvoid84 div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent); }
    body#home div.event.convolution div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent); }
    body#home div.event.miskatonic div.gradient {
      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent); }
    body#home div.event.azimuth div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), transparent); }
    body#home div.event.fracture div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent); }
    body#home div.event.meat div.gradient {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); }
    body#home div.event h3 {
      font-size: 2em; }
    body#home div.event.daedalus h3, body#home div.event.daedalus p, body#home div.event.hardway h3, body#home div.event.hardway p {
      color: #000; }
    body#home div.event.daedalus div.blurb, body#home div.event.hardway div.blurb {
      left: auto;
      right: 0; }
    body#home div.event.daedalus a:after, body#home div.event.hardway a:after {
      background-image: url("../i/arrow-black-right.png"); }
  body#home div.event img {
    width: 100%;
    height: auto;
    border: none;
    padding: 0;
    position: relative; }
  body#home div.more-events {
    text-align: center;
    padding-bottom: 1em; }
    body#home div.more-events a {
      color: white;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid white; }
      body#home div.more-events a::after {
        display: inline-block;
        content: "_";
        color: transparent;
        height: 100%;
        width: 1em;
        margin-left: 0.5em;
        background: transparent url("../i/arrow-white-right.png") center center no-repeat;
        background-size: contain; }

div#lightbox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 100%;
  top: 0;
  background: black;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  div#lightbox div#controls, div#lightbox div.content, div#lightbox div.caption {
    flex: 0 0 auto;
    margin-bottom: 10px; }
  div#lightbox.active {
    left: 0; }
  div#lightbox div.content {
    background: transparent;
    max-height: 75%; }
  div#lightbox div#controls {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto 0.5em auto; }
    div#lightbox div#controls a {
      flex: 0 0 auto;
      position: relative;
      width: 2em;
      height: 2em;
      gap: 1em;
      display: block;
      overflow: hidden;
      border: none;
      text-indent: 100%;
      color: transparent; }
      div#lightbox div#controls a:first-child {
        margin-left: 0; }
      div#lightbox div#controls a:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      div#lightbox div#controls a.close:before {
        background: url("../i/close-white.png") center center no-repeat;
        background-size: contain; }
      div#lightbox div#controls a.next:before {
        background: url("../i/arrow-white-right.png") center center no-repeat;
        background-size: contain; }
      div#lightbox div#controls a.prev:before {
        background: url("../i/arrow-white-left.png") center center no-repeat;
        background-size: contain; }

div.gallery {
  margin: 1em 0 2em 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; }
  div.gallery a, div.gallery img {
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
  div.gallery div.image img {
    width: 100%;
    height: auto; }

body#schedule img {
  width: 100%;
  height: auto; }
body#schedule div.upcoming-events, body#schedule div.past-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem; }
body#schedule div.event {
  margin: 0 0 2em 0; }
body#schedule h3 {
  margin-top: 0.5em; }

body#team h4 {
  font-family: "Lora", Georgia, serif;
  font-weight: normal;
  text-transform: none;
  margin-bottom: 0.25em; }
body#team ul.staff-info {
  font-family: Arial, Verdana, Geneva, sans-serif;
  font-size: 80%;
  display: flex;
  list-style: none; }
  body#team ul.staff-info li {
    margin: 0 0.5em 1em 0; }
  body#team ul.staff-info li:after {
    content: '•';
    margin-left: 0.5em; }
  body#team ul.staff-info li:last-child:after {
    content: none; }
body#team div#principals, body#team div#collaborators {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0em;
  column-gap: 0em; }
  body#team div#principals div.staff, body#team div#collaborators div.staff {
    margin-top: 1em; }

body#about-larp blockquote {
  margin: 0 0 1em 0.5em;
  padding: 0.5em 0 0.5em 1em;
  border-left: 1px solid #e7e7f4; }
  body#about-larp blockquote p:last-child {
    margin-bottom: 0; }

body#saturnalia img {
  width: 100%;
  height: auto;
  margin-bottom: 1em; }
body#saturnalia div.link-out a {
  display: block;
  background: #ec3721;
  background: linear-gradient(#b1382a, #ec3721);
  color: #fff;
  font-weight: bold;
  font-size: 110%;
  margin: 1em 0 1em 0;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.5);
  line-height: 1em; }
  body#saturnalia div.link-out a::after {
    display: inline-block;
    content: "_";
    color: transparent;
    height: 100%;
    width: 1em;
    margin-left: 0.5em;
    background: transparent url("../i/arrow-white-right.png") center center no-repeat;
    background-size: contain; }

body#hardway div.hardway-grid img {
  width: 100%;
  margin-bottom: 2em; }
body#hardway div#store {
  text-align: center; }
body#hardway div#store a {
  display: inline-block;
  margin: 0 0 2em 0;
  font-size: 120%;
  text-transform: uppercase; }
  body#hardway div#store a::after {
    display: inline-block;
    content: "_";
    color: transparent;
    height: 100%;
    width: 1em;
    margin-left: 0.5em;
    background: transparent url("../i/arrow-black-right.png") center center no-repeat;
    background-size: contain; }

body#eskhaton, body#acog, body#seance, body#daedalus {
  grid-template: ". masthead nav ." ". main main ." "footer footer footer footer";
  grid-template-columns: 0rem 5fr 5fr 0rem; }
  body#eskhaton #masthead, body#acog #masthead, body#seance #masthead, body#daedalus #masthead {
    margin-left: 1rem; }
  body#eskhaton nav, body#acog nav, body#seance nav, body#daedalus nav {
    margin-right: 1rem; }
  body#eskhaton section#main, body#acog section#main, body#seance section#main, body#daedalus section#main {
    display: grid;
    grid-template: ". in-disclaim ." "in in in" ". out .";
    grid-template-columns: 1rem 1fr 1rem;
    column-gap: 0rem; }
    body#eskhaton section#main section#in-game-disclaimer, body#acog section#main section#in-game-disclaimer, body#seance section#main section#in-game-disclaimer, body#daedalus section#main section#in-game-disclaimer {
      grid-area: in-disclaim; }
    body#eskhaton section#main section#in-game, body#acog section#main section#in-game, body#seance section#main section#in-game, body#daedalus section#main section#in-game {
      grid-area: in;
      margin-bottom: 2em;
      display: grid;
      grid-template: ". ingame .";
      grid-template-columns: 1rem 1fr 1rem; }
      body#eskhaton section#main section#in-game div.inner, body#acog section#main section#in-game div.inner, body#seance section#main section#in-game div.inner, body#daedalus section#main section#in-game div.inner {
        grid-area: ingame; }
    body#eskhaton section#main section#out-of-game, body#acog section#main section#out-of-game, body#seance section#main section#out-of-game, body#daedalus section#main section#out-of-game {
      grid-area: out; }

body#eskhaton section#opal, body#eskhaton section#cults {
  margin-top: 1em; }
body#eskhaton section#opal {
  grid-area: opal; }
body#eskhaton section#cults {
  grid-area: cults; }
body#eskhaton section#in-game {
  background: #fff;
  background: linear-gradient(180deg, #d3ccba 0%, #f7f0dc 50%);
  color: #000;
  padding: 2em 0; }
  body#eskhaton section#in-game section#opal::before {
    background: url("../i/events/eskhaton/feather.png") center center no-repeat;
    background-size: contain;
    content: " ";
    width: 70%;
    height: 6rem;
    position: relative;
    display: block;
    margin: 0 auto 1em auto; }
  body#eskhaton section#in-game section#cults:before {
    background: transparent url("../i/events/eskhaton/eskhaton_sigils_horizontal.png") center center no-repeat;
    background-size: contain;
    content: " ";
    width: 100%;
    height: 6rem;
    position: relative;
    display: block;
    margin: 0 auto 1em 0; }
  body#eskhaton section#in-game section#salutation, body#eskhaton section#in-game section#signature, body#eskhaton section#in-game section#cults h3 {
    font-family: Charm, Palatino, Georgia, sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 150%; }
  body#eskhaton section#in-game section#opal section#salutation p, body#eskhaton section#in-game section#opal section#signature p {
    margin: 0; }
  body#eskhaton section#in-game section#opal section#signature {
    margin-left: 50%;
    margin-top: 1em;
    position: relative; }
    body#eskhaton section#in-game section#opal section#signature:before {
      content: "\2014";
      position: absolute;
      left: -1em;
      top: 0; }
  body#eskhaton section#in-game section#opal section#main-text p {
    text-indent: 2em;
    margin-bottom: 0; }
  body#eskhaton section#in-game section#cults p:first-letter {
    float: left;
    font-size: 350%;
    margin: 0.10em 0.15em 0 0;
    font-family: Charm, Palatino, Georgia, sans-serif;
    line-height: 1em;
    background: #000;
    color: #fff;
    padding: 0.1em 0.2em;
    border: 0.09em solid #ccc; }
  body#eskhaton section#in-game section#cults br.mobile {
    display: none; }
  body#eskhaton section#in-game section#cults section#mareen p:first-letter {
    color: #323b56;
    border-color: #323b56;
    background: #d0e3e8 url("../i/events/eskhaton/mareen_back.jpg") top left no-repeat;
    background-size: cover; }
  body#eskhaton section#in-game section#cults section#extant p:first-letter {
    color: #eaf1e4;
    border-color: #9fa09e;
    background: #d0e3e8 url("../i/events/eskhaton/extant_back.jpg") top left no-repeat;
    background-size: cover; }
  body#eskhaton section#in-game section#cults section#seekers p:first-letter {
    color: #e0e1d4;
    border-color: #333;
    background: #d0e3e8 url("../i/events/eskhaton/seekers_back.jpg") top right no-repeat;
    background-size: cover; }
  body#eskhaton section#in-game section#cults section#expositors p:first-letter {
    color: #b2274c;
    border-color: #c22f57;
    background: #d0e3e8 url("../i/events/eskhaton/expositors_back.jpg") top right no-repeat;
    background-size: cover; }
  body#eskhaton section#in-game section#cults section#progenus p:first-letter {
    color: #81b1e4;
    border-color: #6887a9;
    background: #d0e3e8 url("../i/events/eskhaton/progenus_back.jpg") top right no-repeat;
    background-size: cover; }

body#acog section#in-game {
  background: gray url("../i/events/acog/nuke.jpg") center center no-repeat;
  background-size: cover;
  color: #472529;
  overflow: hidden; }
  body#acog section#in-game div.inner {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 10em; }
  body#acog section#in-game h2, body#acog section#in-game h3, body#acog section#in-game p {
    font-family: "Courier New", "Courier", monospace; }
  body#acog section#in-game div.letter {
    width: 25em;
    padding: 1em;
    border: 10px solid #ed152e;
    background: #f4f3ef;
    box-shadow: -3px -3px 11px black;
    transform: rotate(10deg);
    justify-self: flex-start; }
    body#acog section#in-game div.letter h2, body#acog section#in-game div.letter h3 {
      background: #ed152e;
      color: #fff;
      text-align: center;
      margin: 0; }
    body#acog section#in-game div.letter h3 {
      margin-bottom: 1em; }
    body#acog section#in-game div.letter p {
      font-size: 90%; }
    body#acog section#in-game div.letter strong {
      font-weight: normal;
      border-bottom: 1px solid #472529; }
    body#acog section#in-game div.letter span {
      color: black;
      background: black; }
  body#acog section#in-game img.badge {
    width: 30%;
    height: 55%;
    background: transparent;
    border: none;
    margin-top: -6em;
    margin-left: -1em;
    z-index: 10;
    transform: rotate(-8deg); }

body#seance section#in-game {
  background: #917c64;
  color: #efe8e0;
  padding: 2em 0; }
  body#seance section#in-game h2, body#seance section#in-game h3 {
    font-family: "Lora", Georgia, serif;
    text-transform: none;
    font-weight: normal;
    font-style: italic; }
  body#seance section#in-game img.ames_photo {
    width: 10em;
    height: auto;
    float: right;
    margin: 0 0 1em 1em;
    transform: rotate(2.5deg);
    padding: 0;
    border: 0.5em solid #fff;
    border-bottom-width: 2em;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); }
  body#seance section#in-game p.author {
    display: block;
    position: relative;
    margin-left: 33%;
    margin-top: 0.5em; }
    body#seance section#in-game p.author:before {
      content: "\2014";
      position: absolute;
      left: -1em;
      top: 0; }

body#daedalus section#in-game {
  padding: 8em 0 2em 0;
  background: black url("../i/events/daedalus/daedalus-splash.jpg") center center no-repeat;
  background-size: cover; }
  body#daedalus section#in-game div.inner {
    color: #fff; }
  body#daedalus section#in-game h2 {
    font-size: 280%;
    text-align: center;
    margin-bottom: 1em; }
  body#daedalus section#in-game p {
    font-size: 120%;
    margin: 0; }

body#haunting section#hero {
  margin: 0 0 1em 0; }
  body#haunting section#hero img {
    width: 100%;
    height: auto; }

body#fracture img {
  margin-bottom: 1em; }

body#miskatonic section#hero {
  margin: 0 0 1em 0; }
  body#miskatonic section#hero img {
    width: 100%;
    height: auto; }

body#convolution img {
  margin-bottom: 1em; }

body#neonvoid84 {
  background: #070C23 url("../i/events/neonvoid84/neon_bg.jpg") center top;
  background-size: contain; }
  body#neonvoid84 .neonvoid84-logo img {
    border: none;
    background: transparent;
    background: radial-gradient(ellipse 60% 40% at center, #D825D1aa 10%, transparent 80%);
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto; }
  body#neonvoid84 img {
    margin-bottom: 1em; }
  body#neonvoid84 .neonvoid84-text {
    margin-top: 2rem; }
    body#neonvoid84 .neonvoid84-text h3, body#neonvoid84 .neonvoid84-text h4 {
      font-family: "DM Sans";
      font-weight: 900;
      font-size: 250%; }
    body#neonvoid84 .neonvoid84-text h3 {
      margin: 1rem 0;
      text-align: center;
      color: #D825D1;
      background: radial-gradient(ellipse at center, #9b25d866 0%, transparent 50%);
      text-shadow: 0px 4px 20px #9f1d9a; }
    body#neonvoid84 .neonvoid84-text h3.warning {
      color: #d83425;
      background: radial-gradient(ellipse at center, #d8542566 0%, transparent 50%);
      text-shadow: 0px 4px 20px #9f1d1d; }
    body#neonvoid84 .neonvoid84-text h4 {
      text-align: center;
      font-size: 200%;
      color: #A8F9DE;
      text-shadow: 0px 1px 10px #A8F9DE; }
    body#neonvoid84 .neonvoid84-text p.tagline {
      font-family: "DM Sans";
      font-weight: 100;
      font-size: 200%;
      color: #A8F9DE;
      text-shadow: 0px 1px 10px #A8F9DE; }
      body#neonvoid84 .neonvoid84-text p.tagline strong {
        font-weight: 900; }
  body#neonvoid84 .neonvoid84-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem; }
    body#neonvoid84 .neonvoid84-buttons .button {
      text-transform: uppercase;
      font-family: "DM Sans";
      font-weight: 700;
      font-size: 125%;
      color: #fffa;
      text-shadow: 0px 0px 8px #fff;
      position: relative;
      border: 1px solid #fff8;
      border-width: 1px 0px 0px 0px;
      background: linear-gradient(#27A2D1 20%, #46f0d1);
      box-shadow: 0 1px 2px #000b, 0 0 10px #D825D1, 0 0 20px #25D1D8;
      transition: box-shadow 0.125s ease-in-out, color 0.125s ease-in-out; }
    body#neonvoid84 .neonvoid84-buttons .button:hover {
      color: #fff;
      box-shadow: 0 1px 2px #000b, 0 0 15px #D825D1, 0 0 50px #25D1D8; }
    body#neonvoid84 .neonvoid84-buttons .button:after {
      content: "→"; }
  body#neonvoid84 .detail-grid {
    display: grid;
    grid-template-columns: fit-content(20ch) 1fr;
    border-top: 1px solid #D825D1aa;
    padding-top: 0.5rem; }
    body#neonvoid84 .detail-grid p {
      border-bottom: 1px solid #D825D1aa;
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem; }
    body#neonvoid84 .detail-grid p.title {
      padding-right: 1rem; }
    body#neonvoid84 .detail-grid p strong {
      text-shadow: 0px 1px 10px #A8F9DE; }
  body#neonvoid84 footer {
    background: transparent; }

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

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto 1rem auto; }

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* prevent line breaks */
  border: 0; }

/*

Styles for the main nav menu. 

There are two sets of style rules, defined using mutually exclusive media queries.
The two rule sets do NOT inherit from each other. This reduces rule confusion but adds some duplicate rules.

Mobile
- used when the device window is <= 1024px
- a single button that triggers an overlay containing the full menu hierarchy

Desktop
- used when the device window is > 1024px
- a small number of top-level items and dropdowns under them

*/
@media screen and (max-width: 1024px) {
  nav {
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 120%;
    align-self: center; }
    nav ul {
      list-style: none; }
    nav li {
      margin: 0; }
    nav li a {
      border: none;
      color: #bbbbc6; }
    nav li.active a {
      font-weight: bold;
      color: #fff; }
    nav li.active ul a {
      font-weight: normal;
      color: #bbbbc6; }
    nav ul.main {
      display: block;
      position: fixed;
      right: 0;
      top: 0;
      height: 100%;
      padding: 2em 1rem 0 1rem;
      width: auto;
      z-index: 100;
      background: rgba(31, 31, 33, 0.95);
      border-left: 0.25rem solid rgba(103, 103, 109, 0.95);
      transition: opacity 0.25s ease-in; }
      nav ul.main.closed {
        opacity: 0;
        right: -100vw; }
    nav ul.main li.menu-toggle {
      text-align: right; }
    nav ul.main > li {
      margin-bottom: 0.75em; }
    nav ul.main li > ul {
      margin-left: 0.5em;
      margin-top: 0.5em;
      padding-left: 0.5em;
      border-left: 1px solid #e7e7f4; }
    nav ul.main li > ul li {
      margin-bottom: 0.25em; }
    nav a.facebook:before {
      background: transparent url("../i/facebook_negative.png") center center no-repeat; }
    nav a.discord:before {
      background: transparent url("../i/discord_negative.png") center center no-repeat; }
    nav a.email:before {
      background: transparent url("../i/email_negative.png") center center no-repeat; }
    nav a.facebook, nav a.discord, nav a.email {
      display: flex; }
      nav a.facebook:before, nav a.discord:before, nav a.email:before {
        display: flex;
        content: "_";
        color: transparent;
        width: 1em;
        height: 1.3em;
        margin-right: 0.5em;
        background-size: contain; } }
@media screen and (min-width: 1025px) {
  nav {
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 90%;
    display: flex;
    align-self: center; }
    nav a.menu-toggle, nav ul.main li.menu-toggle {
      display: none; }
    nav ul {
      border: none;
      list-style: none; }
    nav ul.main {
      width: 100%;
      display: flex;
      justify-content: space-around; }
      nav ul.main li {
        flex: 0 1 auto;
        position: relative;
        margin: 0;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.5em; }
      nav ul.main a {
        border: none;
        color: #bbbbc6;
        display: block;
        padding: 0.5em 0.65em; }
      nav ul.main li.active a {
        color: #fff;
        font-weight: bold; }
      nav ul.main li.active ul a {
        font-weight: normal;
        color: #bbbbc6; }
      nav ul.main a.facebook, nav ul.main a.discord, nav ul.main a.email {
        display: flex; }
        nav ul.main a.facebook:before, nav ul.main a.discord:before, nav ul.main a.email:before {
          display: flex;
          content: "_";
          color: transparent;
          width: 1em;
          height: 1em;
          margin-right: 0.5em;
          background-size: contain; }
    nav ul.main li > ul {
      display: none;
      border: none;
      z-index: 99; }
      nav ul.main li > ul li:hover {
        background: rgba(0, 0, 0, 0.3); }
    nav ul.main li:hover {
      background: #494951; }
    nav ul.main li:hover > ul {
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      margin: 0;
      padding: 0;
      white-space: nowrap; }
      nav ul.main li:hover > ul li {
        background: #494951;
        border-radius: 0; }
      nav ul.main li:hover > ul li:hover {
        background: #fbce6b; }
        nav ul.main li:hover > ul li:hover a {
          color: rgba(0, 0, 0, 0.7); }
      nav ul.main li:hover > ul li:first-child {
        margin-top: 0.5em;
        border-radius: 0.5em 0.5em 0 0; }
      nav ul.main li:hover > ul li:last-child {
        border-radius: 0 0 0.5em 0.5em; }
      nav ul.main li:hover > ul:hover {
        display: block; }
    nav a.facebook:before {
      background: transparent url("../i/facebook_negative.png") center center no-repeat; }
    nav a.discord:before {
      background: transparent url("../i/discord_negative.png") center center no-repeat; }
    nav a.email:before {
      background: transparent url("../i/email_negative.png") center center no-repeat; }
    nav a:hover.facebook:before {
      background: transparent url("../i/facebook_positive.png") center center no-repeat; }
    nav a:hover.discord:before {
      background: transparent url("../i/discord_positive.png") center center no-repeat; }
    nav a:hover.email:before {
      background: transparent url("../i/email_positive.png") center center no-repeat; } }
/*

Styles that define how the site design changes as the device window size increases.
These rules are almost entirely changes to basic font sizes, grid layout, and margins.
The one exception is {body#home section#main section#events}, which has some minor decorative changes throughout.

*/
@media screen and (min-width: 320px) {
  body {
    font-size: 12px; }

  body#neonvoid84 .button {
    font-size: 110% !important; } }
@media screen and (min-width: 375px) {
  body#home div.event-list p {
    font-size: 120%; }

  body#acog section#main section#in-game div.inner {
    padding-left: 5em; }
    body#acog section#main section#in-game div.inner img.badge {
      width: 50%;
      margin-left: -6em; } }
@media screen and (min-width: 414px) {
  body {
    font-size: 15px; }

  body#acog section#main section#in-game div.inner {
    padding-left: 2em; }
    body#acog section#main section#in-game div.inner img.badge {
      width: 45%;
      margin-left: -1em; } }
@media screen and (min-width: 768px) {
  body {
    font-size: 17px; }

  .callout {
    padding: 2rem; }

  section#videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem; }

  section#masthead img.logo-one-line {
    display: block; }
  section#masthead img.logo-two-line {
    display: none; }

  body#home nav, body.page nav {
    align-self: center;
    margin-bottom: 0; }

  body.page {
    grid-template: ". masthead nav ." ". main main ." "footer footer footer footer";
    grid-template-columns: 2rem 5fr 1fr 2rem; }

  body#home, body#seance, body#eskhaton, body#acog, body#daedalus {
    grid-template: ". masthead nav ." "main main main main" "footer footer footer footer";
    grid-template-columns: 2rem 5fr 1fr 2rem; }
    body#home section#main, body#seance section#main, body#eskhaton section#main, body#acog section#main, body#daedalus section#main {
      grid-template-columns: 2rem 1fr 2rem; }
      body#home section#main section#in-game, body#seance section#main section#in-game, body#eskhaton section#main section#in-game, body#acog section#main section#in-game, body#daedalus section#main section#in-game {
        grid-template-columns: 2rem 1fr 2rem; }

  body#home section#main {
    display: grid;
    grid-template: "hero hero hero" ". intro ." ". community ." "events events events" ". about .";
    grid-template-columns: 2rem 1fr 2rem; }
  body#home section#events h2 {
    margin-left: 2rem; }
  body#home div.event-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid #e7e7f4; }
    body#home div.event-list div.event {
      margin-bottom: 0;
      padding: 0;
      border: 0; }
      body#home div.event-list div.event div.blurb {
        padding: 1rem 2rem; }
      body#home div.event-list div.event h3 {
        font-size: 180%;
        margin-bottom: 0.25em; }
      body#home div.event-list div.event p {
        font-size: 85%; }

  body#schedule div.upcoming-events, body#schedule div.past-events {
    display: grid; }

  body#acog section#main section#in-game div.inner {
    padding-left: 0;
    flex-direction: row-reverse;
    align-items: flex-end; }
    body#acog section#main section#in-game div.inner img.badge {
      width: 30%;
      height: 55%;
      margin: 0; } }
@media screen and (min-width: 900px) {
  body {
    font-size: 20px; }

  body#schedule div.upcoming-events, body#schedule div.past-events {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem; }

  div.gallery {
    grid-template-columns: 1fr 1fr 1fr; }

  body#saturnalia img.hero {
    grid-area: hero; }
  body#saturnalia p.partnership {
    grid-area: partnership; }
  body#saturnalia div.link-out {
    grid-area: link; }
  body#saturnalia p.story {
    grid-area: story; }
  body#saturnalia p.logistics {
    grid-area: logistics; }

  body#hardway div.hardway-grid {
    display: grid;
    grid-template: "store store" "img text" "details details";
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem; }
  body#hardway img.hero {
    grid-area: img;
    width: 100%;
    height: auto; }
  body#hardway div.hardway-text {
    grid-area: text; }
  body#hardway div#store {
    grid-area: store; }
  body#hardway div.hardway-details {
    grid-area: details; }

  body#eskhaton section#in-game div.inner {
    display: grid;
    grid-template: ". opal . cults .";
    grid-template-columns: 1fr fit-content(470px) 1em fit-content(670px) 1fr;
    column-gap: 0; }
  body#eskhaton section#cults {
    font-size: 80%; } }
@media screen and (min-width: 1025px) {
  body {
    font-size: 22px; }

  body.page {
    grid-template: ". masthead nav ." ". main main ." "footer footer footer footer";
    grid-template-columns: 1fr fit-content(285px) fit-content(645px) 1fr;
    column-gap: 30px;
    padding-top: 4em; }

  section#masthead img.logo-two-line {
    display: block; }
  section#masthead img.logo-one-line {
    display: none; }

  body#home {
    grid-template: ". masthead nav ." ". main main ." "footer footer footer footer";
    grid-template-columns: 1fr fit-content(285px) fit-content(645px) 1fr;
    column-gap: 30px; }
    body#home #masthead {
      margin-left: 0; }
    body#home nav {
      margin-right: 0; }
    body#home section#main {
      grid-template: "hero" "intro" "community" "events" "about"; }
    body#home section#hero img {
      border-width: 1px;
      padding: 1px; }
    body#home section#events h2 {
      margin-left: 0;
      border: none; }
    body#home section#events div.event-list {
      gap: 1em;
      border: none; }
    body#home section#events div.event {
      border: 1px solid #b9b9c3;
      background: #000;
      padding: 1px; }
    body#home section#events div.blurb {
      padding: 1em; }
    body#home section#events div.blurb p {
      font-size: 80%; }

  body#schedule div.event p {
    font-size: 80%; }

  body#about-studio div#principals, body#about-studio div#collaborators {
    grid-template-columns: 1fr 1fr;
    column-gap: 2em; }
    body#about-studio div#principals div.contact, body#about-studio div#principals p, body#about-studio div#collaborators div.contact, body#about-studio div#collaborators p {
      font-size: 80%; }

  body#hardway div.hardway-grid {
    grid-template-columns: 1.5fr 1fr;
    column-gap: 1em; }

  body#eskhaton, body#acog, body#seance, body#daedalus {
    grid-template: ". masthead nav ." "main main main main" "footer footer footer footer";
    grid-template-columns: 1fr fit-content(285px) 645px 1fr;
    column-gap: 30px; }
    body#eskhaton section#main, body#acog section#main, body#seance section#main, body#daedalus section#main {
      display: grid;
      grid-template: ". in-disclaim ." "in in in" ". out .";
      grid-template-columns: 1fr fit-content(960px) 1fr;
      column-gap: 0rem; }
      body#eskhaton section#main section#in-game, body#acog section#main section#in-game, body#seance section#main section#in-game, body#daedalus section#main section#in-game {
        grid-template-columns: 1fr 960px 1fr; }

  body#eskhaton section#in-game {
    font-size: 80%; }

  body#daedalus section#main section#in-game {
    padding-bottom: 4em; } }