/* First up: config and functions */
@import 'http://artificialmemory.com/_config.css';
@import 'http://artificialmemory.com/_reset.css';


/* TYPOGRAPHY =============================================================================== */

body {
  font-family: 'Cantarell', avenir, helvetica, arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.display {
  font-family: 'Fjalla One', 'helvetica neue', helvetica, arial, sans-serif;
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-3);
}
h4 {
  font-size: var(--step-2);
}
h5 {
  font-size: var(--step-1);
}
h6 {
  font-size: var(--step-0);
}
a,a:visited {
  text-decoration: none;
  font-weight: bold;
  color: var(--primary-dark);
}

.intro a:hover {
  color: var(--light);
  background: var(--primary);
}



/* COMPOSITION =============================================================================== */

body {
  background: var(--light);
}
main {
  padding-inline: var(--space-s);
}
footer {
  padding-inline: var(--space-s);
  padding-block: var(--space-s);
  text-align: center;
}

.site-header {
  display: flex;
  text-align: center;
  display: block;
  width: 100%;
  margin-top: calc( -1 * var(--space-4xs-xs) ); 
  font-size: var(--step-1); 
}
.site-header .artmem {
  font-size: 13vw;
  line-height: 1;
  letter-spacing: -4px;
  text-transform: uppercase;
  color: var(--light);
  background: var(--tint);
  height: 11vw;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-s);
  transition: all .5s ease-in;
}
.site-header .artmem:hover {
  background: var(--primary);
}
.intro {
  margin-block: var(--space-l) var(--space-xl-2xl);
}
h1.paragraph {
  font-size: var(--step-1);
}
.main-nav {
  list-style: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.main-nav li {
  margin-block: var(--space-xs);
}
.main-nav a {
  text-transform: uppercase;
  font-size: var(--step-0);
  padding: var(--space-2xs) var(--space-xs);
  color: var(--primary-dark);  
}
.main-nav a:hover {
  text-decoration: underline;
}

.bio {
  max-width: 90vw;
  padding: var(--space-m);
  background: var(--tint);
  color: var(--text);
  text-align: left;
}
.textblock {
  max-width: 50ch;
}
.bio h2 {
  font-size: var(--step-5);
}
.self {
  max-width: 300px;
}



/* FLOW */
.flow > * + * {
  margin-block-start: var(--space-m);
}

/* GRID */
.grid {
  display: grid;
  grid-gap: var(--space-s);
}
@supports (width: min(250px, 100%)) {
  .grid {
    display: grid;
    grid-gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}

/* SIDEBAR */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.with-sidebar > :last-child {
  flex-grow: 1;
}

.with-sidebar > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* UTILITIES =============================================================================== */

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

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}


/* THUMBNAIL GALLERY */

.gallery img {
  transform: scale(1) translate(0, 0);
  transition: transform .2s ease-in;
}

.gallery figure {
  display: grid;
  grid-template-areas: "card";
  place-items: end;
  border-radius: var(--space-2xs);
  overflow: hidden;
  position: relative;
}

.gallery figure > * {
  grid-area: card;
}

.gallery figcaption {
  background-color: hsl(0 0% 100% / 87%);
  /* provide stacking context */
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  position: absolute;
  left:0;
  right: 0;
  bottom: 0;
  transition: all .2s ease-in;
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
  transform: translateY(0);
}

.gallery figure:hover img,
.gallery figure:focus img {
  transform: scale(1.2);
}

.gallery figure:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

@media (any-hover: hover) and (any-pointer: fine) {
.gallery figcaption {
  transform: translateY(100%);
}
}

@media (prefers-reduced-motion: reduce) {
  .gallery * {
    transition-duration: 0ms !important;
  }
  
  .gallery img {
    transform: none !important;
  }
  
  .gallery figcaption {
    transition-delay: 0ms;
  }
}

/* Vignette */
.gallery figure::after {
  content: "";
  grid-area: card;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 2rem 1rem hsl(0 0% 0% / 65%);
  position: relative;
}

/* IMAGES */
img {
  max-width: 100%;
}


/* Button */
.button {
  text-decoration: none;
  background: rgba(255,255,255,.8);
  border-radius: var(--space-xs);
  padding: var(--space-3xs) var(--space-2xs);
}
.button:hover {
  background: rgba(255,255,255,1);
}

/* Lightbox */

.lightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 1000;
  color: #fff;
  text-align: center;
}

.lightbox:target {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}
.lightbox .content {
  animation: fade_in_show 1s
}

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



.art img {
  border-radius: var(--space-xs);
  display: block;
  margin: auto;
  margin-bottom: var(--space-m);
  max-height: 80vh;
  max-width: 90vh;
}

.lightbox .close {
  color: #fff;
  font-size: var(--step-2);
  font-weight: bold;
  position: fixed;
  right: var(--space-xs);
  top: var(--space-xs);
  z-index: 1001;
  text-decoration: none;
}
.lightbox .prev,
.lightbox .next {
  color: #fff;
  font-size: var(--step-2);
  font-weight: bold;
  position: fixed;
  z-index: 1001;
  text-decoration: none;
}
.lightbox .prev {
  top: 50vh;
  left: var(--space-m);
}
.lightbox .next {
  top: 50vh;
  right: var(--space-m);
}

.art p {
  font-size: var(--step-0);
}

.art h2 {
  font-size: var(--step-1);
  }