@charset "utf-8";
html{ font-family:sans-serif; font-kerning: normal; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img,svg{border:none;display:block;}
img{height:auto;width:100%;box-sizing:border-box;}
a:link,a:visited{text-decoration:none;}
a:active,a:hover {outline:0;}
a[href^="tel:"] { text-decoration: none !important; white-space: nowrap; }
a[x-apple-data-detectors]{color:inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;padding:0;margin:0;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input, textarea, button, select, label, a { -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: transparent; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
button, input[type=submit], input[type=password] { -webkit-appearance: none;-moz-appearance: none; appearance: none; border-radius: 0; }
textarea, input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
input:focus, input:hover { outline-style: none; box-shadow: none; }
button:focus, button:hover { outline-style: none; box-shadow: none; }
summary { user-select: none; }
video::-internal-media-controls-overlay-cast-button { display: none; }

::-moz-selection { background-color: var(--dark); color: white; }
::selection { background-color: var(--dark); color: white; }

@font-face{ font-family:"regular"; src:url("regular.woff2") format("woff2"); font-display: swap; }
@font-face{ font-family:"italic"; src:url("italic.woff2") format("woff2"); font-display: swap; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.loading { animation:fadeOut ease-in 1; animation-fill-mode: forwards; animation-duration: 0.5s; pointer-events: none; }
.fadein { opacity: 0; animation: fadeIn ease-in 1; animation-fill-mode: forwards; animation-duration: 0.5s; }
.hidden { opacity: 0; }
.inview { opacity: 1; transition: opacity 1s; }
.hide { opacity: 0; }

:root {
  --regular: "regular", sans-serif;
  --italic: "italic", sans-serif;
  --dark: #0A0A0A;
  --light: #F7F7F7;
  --blue: ##9AB4BE;

  --page-bg: var(--light);
  --colour: var(--dark);
  --font-size: 16px;
  --font-small: 13px;
  --font-margin: 1em;
  --line-height: 1.15;
  --padding: 10px;
}

@media (max-width:600px) {
  :root {
    --font-size: 15px;
    --font-small: 10px;
  }
}

html { height: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { background-color: var(--page-bg); color: var(--colour); font-family: "regular", sans-serif; font-size: var(--font-size); line-height: 1; height: 100%; }
main {  }
article { box-sizing: border-box; min-height: 100vh; padding: calc(var(--padding) * 8) var(--padding); }

@media (max-width:600px) {
  article { padding-top: calc(var(--padding) * 6); padding-bottom: calc(var(--padding) * 6); }

}

a { color: var(--colour); transition: all .1s ease-out; }

p { font-size: var(--font-size); line-height: var(--line-height); margin: 0 0 var(--font-margin); }
p:last-child, p:only-child { margin-bottom: 0; }
p.medium { margin: 0 auto; width: 85%; }
p.small { margin: 0 auto; width: 65%; }
strong { font-family: var(--italic); font-weight: 400; }
em { font-family: var(--italic); font-style: normal; }

#logo { position: fixed; top: var(--padding); left: var(--padding); display: block; }
#logo svg { height: 20px; width: auto; }

@media (max-width:600px) {
  #logo svg { height: 16px; }
}

footer { font-size: var(--font-small); line-height: 1; }
footer#timezone { position: fixed; bottom: var(--padding); right: var(--padding); }
footer#text { position: fixed; bottom: var(--padding); left: var(--padding); }
footer#text .mobile { display: none; }

@media (max-width:1080px) {
  footer#text .desktop { display: none; }
  footer#text .mobile { display: inline; }
}

nav#menu { --off: 0.5; --on: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; position: fixed; top: var(--padding); right: var(--padding); font-size: var(--font-small); line-height: 1; }
nav#menu i { opacity: var(--off); font-style: normal; }
nav#menu a { opacity: var(--off); }
nav#menu a.on { opacity: var(--on); }
nav#menu a:hover { opacity: var(--on); }

body.home nav#menu { --off: 1; --on: 0.5; }

nav#menu .sub { margin-right: auto; }

@media (max-width:1080px) {
  nav#menu { gap: 4px; }
}

.content { display: flex; align-items: center; justify-content: center; }
.content .text { max-width: 940px; margin: 0 auto; }
.content.columns { max-width: 1400px; margin: 0 auto; gap: 80px; }
.content.columns .col { width: 100%; }

@media (max-width:1080px) {
  .content.columns { flex-direction: column; gap: 40px; }
  .content.columns .col { max-width: 800px; }
}
@media (max-width:400px) {
  .content.columns { gap: 20px; }
}

.archive-images { --gutter: 10px; --grid: 14vw; min-height: auto; display: grid; gap: var(--grid); grid-template-columns: repeat(5, 1fr); }

@media (max-width:1280px) {
  .archive-images { --grid: 16vw; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width:800px) {
  .archive-images { --grid: 24vw; grid-template-columns: repeat(3, 1fr); padding-top: calc(var(--padding) * 4); padding-bottom: calc(var(--padding) * 4); }
}

.artwork-entries { display: flex; align-items: center; }

.swiper { width: 100%; }
a.swiper-slide { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 10px; height: auto; transition: opacity .2s ease-out; }

@media (hover: hover) {
  .swiper:hover a.swiper-slide { opacity: 0.5; }
  .swiper a.swiper-slide:hover { opacity: 1; }
}