.audio {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  border: 8px solid #393939;
  border-radius: 2.2em;
  rotate: -.3deg;
  background: #393939;
  color: white;

  audio {
    flex: 1 1 auto;
  }

  a, span {
    flex: 0 1 auto;
    margin: .2em .5em;
  }

  a:hover {
    color: #ccc;
  }
}


.center {
  text-align: center;
}


.framed {
  border: 3px solid var(--black);
}


/*
  I've found .photos, .hero, and .full to be too complex.
  This tries to be simpler.
  Apply it to a container around an iframe, object, img, or video.
*/

.full-width {
  /* Undo the main column padding, so we pull to the left edge of the screen. */
  margin: 10vh 0 10vh calc(26em - 50vw);
  @media (max-width: 56em) { margin-left: -3vw; }

  /* Definitely fill the full width, hey? */
  & > * {
    width: 100vw;
    max-width: none;
  }

  /* Don't be too tall */
  iframe, object {
    height: 80vh;
  }
}

.hero {
  display: block;
  text-align: center;
  margin: 6vh 0 4vh;

  img, video {
    max-width: 100%;
  }

  p {
    margin-top: 1vh;
  }
}

title + .hero {
  margin-top: 0;
}

title + section > .hero:first-child {
  margin-top: 0;
}


.hide {
  display: none;
}


.inline {
  display: inline;
}


.left {
  text-align: left;
}


.photos {
  title { margin-bottom: 8vh; }

  .slug {
    text-align: center;

    & > * {
      display: inline-block;
      text-align: left;
    }
  }

  .hero {
    margin: 20vh 0;
    height: 90vh;

    img {
      max-width: 100%;
      max-height: 90vh;
    }

    &.full {
      margin-left: calc(26em - 50vw);
      height: auto;
      img {
        width: 100vw;
        max-width: none;
        max-height: none;
      }

      @media (max-width: 56em) {
        margin-left: -3vw;
      }
    }

    &.wide {
      height: auto;
      img {
        width: 100%;
        max-height: none;
      }
    }

    &.tall {
      height: auto;
      img {
        max-height: none;
      }
    }
  }

  .hero + p {
    margin-top: 20vh;
  }

  h1 {
    margin-top: 12vh;
  }
}


#screensaver {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  object-position: top left;
  background: white;
  border: 2vmin solid #f2f2f2;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  #screensaver {
    filter: invert(1);
  }
}


.js-stars {
  width: 100%; /* Necessary because the JS sets the canvas width to 2x the monitor's width, for retina */
  height: 100%;
  background-color: hsl(250, 30%, 5%);
  background: radial-gradient(at bottom left, hsl(210, 100%, 8%) 0%, hsl(250,60%,10%) 20%, hsl(250,40%,7%) 40%, hsl(330, 40%, 9%) 80%, hsl(10, 50%, 13%) 100%);
  content-visibility: auto;

  &[bw] {
    background: radial-gradient(at bottom left, #111 0%, #222 20%, #111 40%, #111 90%, #222 100%);
  }

  &[bio] {
    background: radial-gradient(at bottom left, hsl(206,12%,10%) 0%, hsl(250,15%,13%) 35%, hsl(250,12%,7%) 70%, hsl(0, 10%, 12%) 80%, hsl(8, 13%, 5%) 100%);
  }
}


.types {
  display: inline-block;
  max-width: none;
  width: auto;
  padding-left: 10vw;
  padding-right: 10vw;

  title {
    text-align: center;
  }

  & > div {
    margin: 6vh 0;
    vertical-align: top;
    text-align: center;

    & + div {
      margin-top: 12vh;
    }

    h2 {
      display: block;
      margin-bottom: 0;
      font-size: 2.2em;
    }

    a {
      display: inline-flex;
      align-items: center;
      max-width: 15em;
      margin: 1rem 1rem 2rem;
      text-align: left;
      font-size: 1.2em;
      line-height: 1.1;
      text-decoration: none;
      &:hover { opacity: 1; }

      img, canvas, video {
        flex: 0 0 5.2em;
        width: 5.2em;
        height: 5.2em;
        margin: .5rem .6em;
        border-radius: 100%;
        * { border-radius: 100%; }
      }
    }
  }
}


main.writing {

  h3 {
    margin: 2vh 0 .5vh;
  }
}


.youtube {
  width: 52em;
  aspect-ratio: 16 / 9;
}


a {
  color: inherit;
  text-decoration: underline;
}

a, a * {
  cursor: pointer;
}

a:hover {
  color: var(--link-hover);
}


blockquote {
  margin: 2vh 0;
  padding-left: 2em;
  border-left: 2px solid var(--black);
  font-style: italic;
}


body {
  margin: 0;
  text-align: center;

  &.full {
    padding: 0;
  }
}


canvas {
  display: block;
}


footer {
  margin-top: 10vh;
  padding: 2vh 0 0;
  border-top: 3px solid currentColor;
  text-align: right;
  rotate: .2deg;
}


header {
  position: relative;
  text-align: center;
  z-index: 10; /* This avoids weirdly positioned elements, like the stuff on /type, from blocking the links */

  .js-stars {
    position: absolute; /* Pull the canvas out of normal flow, so be-enticed isn't pushed down below it */
  }

  be-enticed {
    display: inline-block;
    position: relative;
    font-size: 1.1em;
    padding: 3rem 0.2rem;
    color: white;
    z-index: 2;

    @media (max-width: 450px) {
      font-size: 1em;
    }
  }

  witty-quip {
    display: inline;

    & img {
      height: 1em;
    }
  }

  a,
  a:visited {
    color: inherit;
    &:hover {
      color: inherit; /* Need this for specificity in Chrome on the index page, ugh */
      opacity: 0.8;
    }
  }
}


h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0;
}

h1 {
  margin: -2px -1px 2vh;
  font-size: 2.4em;
}

h2 {
  margin: -1px -1px 2vh;
}


hr {
  margin: 3em 0;
  rotate: .2deg;
  border: none;
  border-bottom: 3px solid var(--black);
}


html {
  width: 100%;
  height: 100%;
  font-family: "sofia pro light", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;

  color: var(--black);

  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--black), transparent);
}


iframe {
  display: block;
  max-width: 100%;
  margin: 2vh auto;
  border: 0;
}


img {
  vertical-align: middle;
  height: auto;
}


main {
  width: 100%;
  max-width: var(--maxLineLength);
  margin: 0 auto;
  padding: 8vh 2em 12vh;
  text-align: left;

  @media (max-width: 56em) {
    padding: 8vh 3vw 16vh;
  }
}

main.full {
  max-width: none;
  padding: 0;

  canvas {
    display: block;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

main > .full {
  --space: calc(100vw + 4em - var(--maxLineLength));
  margin-left: calc(-0.5 * var(--space));
  width: 100vw;

  @media (max-width: 56em) {
    margin-left: -3vw;
  }
}


object {
  display: block;
}


p {
  margin: 0;
  rotate: .2deg;
}

p + p {
  margin-top: 2vh;
}


section {
  margin: 10vh 0;
}

title + section {
  margin-top: 0;
}


span {
  display: inline-block;
}


title {
  display: block;
  margin: 0 0 4vh;
  font-size: clamp(3rem, 4vw, 4.5rem);
  line-height: 1.3em;
  margin-left: -3px;
  text-wrap: balance;
}


video {
  vertical-align: middle;
}


@font-face {
  font-display: block;
  font-family: "sofia pro light";
  src: url("https://cdn.ivanish.ca/assets/sofia-pro-light.woff2");
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --maxLineLength: 56em;
  --link-hover: hsl(311, 100%, 25%);
  --black: hsl(311, 100%, 10%);
}

@keyframes fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade-in 0.1s linear both;
}