/*!
Theme Name: thomasnewbolt
Description: A theme for the artist, Thomas Newbolt
Version: 1.0.0
License: MIT
Text Domain: thomasnewbolt
*/

/* normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
}

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

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, select, textarea {
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: none;
}

textarea {
  overflow: auto;
}

/* ============================================================
   Custom properties
   ============================================================ */

:root {
  --font-body: GrotesqueMTStdBoldExtended, sans-serif;
  --font-accent: GrotesqueMTStdBlack, sans-serif;
  --color-bg: #000;
  --color-text: #eee;
  --color-heading: #fff;
  --color-btn-hover-text: #000;
  --color-btn-hover-bg: #eee;
}

/* ============================================================
   Fonts
   ============================================================ */

@font-face {
  font-family: 'GrotesqueMTStdBoldExtended';
  src: url('fonts/GrotesqueMTStdBoldExtended.woff2') format('woff2');
}

@font-face {
  font-family: 'GrotesqueMTStdBlack';
  src: url('fonts/GrotesqueMTStdBlack.woff2') format('woff2');
}

/* ============================================================
   Base
   ============================================================ */

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  text-transform: lowercase;
}

body.page,
body.attachment {
  overflow: hidden;
}

.cursor {
  position: fixed;
  text-align: center;
  bottom: 1em;
  left: 1em;
  width: 100%;
}

.site {
  position: relative;
  min-height: 100%;
  padding: 2vw;
}

.page .site,
.attachment .site {
  position: fixed;
  display: flex;
  flex-direction: column;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
}

.page.admin-bar .site,
.attachment.admin-bar .site {
  min-height: 0;
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  .page.admin-bar .site,
  .attachment.admin-bar .site {
    top: 46px;
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}

.site-header {
  position: fixed;
  top: 2vw;
  left: 2vw;
  right: 2vw;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.admin-bar .site-header {
  top: calc(32px + 2vw);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: calc(46px + 2vw);
  }
}

.site-content {
  transition: transform .3s ease-out;
}

.page .site-content,
.attachment .site-content {
  flex: 0 1 100%;
}

.page .site-content .content-area,
.attachment .site-content .content-area {
  margin: 0 auto;
  padding: 0;
  width: auto;
}

.page .site-content .content-area,
.attachment .site-content .content-area {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.page:not(.home) .site-content h1 {
  margin-top: 0;
}

.page:not(.home) .site-content .content-area {
  width: 70%;
}

.entry-footer {
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  opacity: .5;
}

.type-page p {
  font-family: var(--font-accent);
}

.type-page p a {
  font-family: var(--font-body);
}

h1, h2, h3, h4 {
  color: var(--color-heading);
}

a {
  color: var(--color-heading);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: #d28208;
}

button, a.button {
  background: transparent;
  border: 0;
  outline: none;
  border-radius: 0;
  padding: .2em .2em 0;
  appearance: none;
  color: var(--color-text);
  text-transform: lowercase;
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus, a.button:focus {
  outline: none;
}

button:visited, a.button:visited {
  color: var(--color-text);
}

button:not(.active):hover, a.button:not(.active):hover {
  color: #d28208;
}

button.active, a.button.active {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

button.active:hover, a.button.active:hover {
  background: #d28208;
}

img {
  display: block;
  object-fit: contain;
}

figure {
  position: relative;
  margin: 0;
}

figure img {
  width: auto;
}

figure.work-thumb {
  animation: fadein .2s;
  animation-fill-mode: both;
}

.js figure.work-thumb.delayed {
  background: #fff;
  transition: background-color .2s;
}

.js figure.work-thumb.delayed img {
  transition: opacity .2s;
  opacity: 0;
}

.js figure.work-thumb.loaded {
  background: transparent;
}

.js figure.work-thumb.loaded img {
  opacity: 1;
}

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

@media (min-width: 760px) {
  .category figure:hover figcaption {
    opacity: 1;
  }
}

figcaption {
  position: absolute;
  opacity: 0;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  padding: 1em;
  background: black;
  font-size: .7em;
  pointer-events: none;
  transition: opacity .15s;
}

figcaption dl,
figcaption dd {
  margin: 0;
  line-height: 1.5;
}

figcaption dd.dimensions,
figcaption dd.medium {
  font-family: var(--font-accent);
}

figcaption dt {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.breadcrumb ol,
.breadcrumb li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.breadcrumb li:nth-child(2) {
  font-family: var(--font-accent);
}

.breadcrumb a {
  display: inline-block;
}

.breadcrumb a:hover {
  color: #d28208;
}

.breadcrumb li.last a:hover {
  color: #5c8dbd;
}

.breadcrumb h1 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

.category .site-main {
  margin: 4em auto 0;
  padding: 0 0 4em 4em;
  width: calc(100% - 8em);
}

@media (max-width: 759px) {
  .category .site-main {
    margin: 2em 0;
    width: 100%;
    padding-bottom: 0;
  }
}

.site-main section {
  position: relative;
}

.site-main h2 {
  position: absolute;
  top: 0;
  right: 100%;
  margin: 0;
  padding-right: .5em;
  font-size: 1em;
}

.site-main .items {
  display: flex;
  flex-wrap: wrap;
}

.attachment .site-main {
  display: flex;
  justify-content: center;
}

.category figure {
  margin: 0 .5em .5em 0;
}

.category figure img {
  height: 250px;
}

@media (max-width: 759px) {
  .category figure img {
    height: 100px;
  }
}

.attachment .prevnext {
  flex: 1 1 0%;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
}

.attachment .prevnext[rel="prev"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='%23fff' d='M13 5 L20 5 L7 20 L20 35 L13 35 L0 20 L13 5'/></svg>") 20 20, w-resize;
}

.attachment .prevnext[rel="next"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='%23fff' d='M0 5 L7 5 L20 20 L7 35 L0 35 L13 20 L0 5'/></svg>") 20 20, e-resize;
}

.attachment figure {
  height: calc(100vh - 4vw - 4em);
}

.attachment figure:hover .meta-button {
  pointer-events: all;
}

.attachment figure:hover .meta-button::after {
  transform: scale(1);
}

.attachment figcaption {
  background: #111;
  z-index: 0;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  left: 50px;
  top: 50px;
  transition: opacity .5s;
}

@media (max-width: 759px) {
  .attachment figcaption {
    left: 50%;
    top: 50%;
    width: 70vw;
    height: 70vw;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity .5s;
  }

  .attachment figcaption.in {
    opacity: 1;
    pointer-events: all;
  }
}

@media (min-width: 760px) {
  .attachment figcaption.in {
    opacity: 1;
    pointer-events: all;
    z-index: 4;
  }
}

.attachment .meta-showing figure {
  overflow: visible;
}

.attachment .media {
  height: 100%;
  position: relative;
  background: black;
  z-index: 1;
  transform: translateY(0);
  overflow: hidden;
}

.attachment img {
  height: 100%;
  max-width: 96vw;
}

.attachment .meta-button {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  font-size: 0px;
}

@media (min-width: 760px) {
  .attachment .meta-button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: black;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent white;
    transform: scale(0);
    transform-origin: top right;
    transition: transform .3s ease, border-color .3s ease;
  }

  .attachment .meta-button:hover {
    opacity: 1;
  }

  .attachment .meta-button:hover::after {
    border-color: transparent transparent transparent #ece9e7;
  }
}

@media (max-width: 759px) {
  .attachment .meta-button {
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
  }
}

.zoomable {
  overflow: hidden;
}

.zoomable .large {
  position: absolute;
  left: 0;
  top: 0;
  height: 200%;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}

.zoomable .large:hidden {
  display: none;
}

@media (hover: hover) {
  .zoomable.hoverzoom .media:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g><circle style='stroke:%23fff;stroke-width:5px;fill:none;' cx='20' cy='20' r='15'/></g></svg>") 20 20, default;
  }

  .zoomable.hoverzoom .media:hover .large {
    opacity: 1;
  }
}


/* ============================================================
   Navigation
   ============================================================ */

.breadcrumb {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: fixed;
  bottom: 2vw;
  left: 2vw;
  z-index: 10;
}

.menu-toggle {
  position: relative;
  z-index: 11;
  color: var(--color-heading);
  right: -.2em;
  top: -.2em;
}

.main-navigation {
  text-align: right;
}

.menu-main-menu-container {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  transform: translateY(-100%);
  transition: transform .3s ease-out;
  z-index: 5;
}

.admin-bar .menu-main-menu-container {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .menu-main-menu-container {
    top: 46px;
  }
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15vmin;
  text-align: center;
}

.menu a {
  display: block;
  position: relative;
}

.menu a:hover {
  color: #fff;
  opacity: 1;
}

.menu img {
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  height: calc(100vh - 4vw - 1em);
  max-width: 96vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

.menu li {
  position: relative;
  z-index: 0;
}

.menu li .shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0);
  z-index: -1;
}

.menu li span {
  display: block;
}

.menu li:hover {
  z-index: 1;
}

.menu li:hover .text {
  animation: menuin .25s ease-out 1 forwards;
}

@media (hover: hover) {
  .menu li:hover img {
    opacity: 1;
  }
}

.nav-active .menu-toggle {
  background: #fff;
  color: var(--color-btn-hover-text);
}

.nav-active .menu-toggle:hover {
  background: #d28208;
  color: #000;
}

.nav-active .menu-main-menu-container {
  transform: translateY(0);
}

.nav-active .site-content {
  transform: translateY(100vh);
}

.category .nav-active .site-content {
  transform: none;
}

@keyframes menuin {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

/* ============================================================
   Lory slider
   ============================================================ */

.slider {
  opacity: 0;
  transition: opacity 1s .2s;
}

.slider.init {
  opacity: 1;
}

.slider.init img:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g><circle style='stroke:%23fff;stroke-width:5px;fill:none;' cx='20' cy='20' r='15'/></g></svg>") 20 20, default;
}

.slider.init .prev {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g><path fill='%23fff' d='M13 5 L20 5 L7 20 L20 35 L13 35 L0 20 L13 5'></path></g></svg>") 20 20, default;
}

.slider.init .next {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g><path fill='%23fff' d='M0 5 L7 5 L20 20 L7 35 L0 35 L13 20 L0 5'></path></g></svg>") 20 20, default;
}

.slider--frame {
  position: relative;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
}

.slider--slides {
  display: inline-block;
}

.slider--slide {
  width: 96vw;
  position: relative;
  display: inline-block;
  text-align: center;
}

.slider--slide > div {
  display: flex;
}

.slider--slide > div .prev,
.slider--slide > div .next {
  flex: 0 1 50%;
}

.slider--slide a {
  display: inline-block;
}

.slider--slide img {
  display: block;
  margin: 0 auto;
  height: 480px;
  max-width: 90vw;
}

@media (max-height: 760px) {
  .slider--slide img {
    height: 380px;
  }
}

@media (max-height: 600px) {
  .slider--slide img {
    height: 280px;
  }
}

@media (max-width: 400px) {
  .slider--slide img {
    height: 250px;
  }
}