@font-face {
  font-family: 'FuturaLTBook';
  src: url('/fonts/FuturaLTBook.eot');
  src: url('/fonts/FuturaLTBook.eot?#iefix') format('embedded-opentype'),
  url('/fonts/FuturaLTBook.woff2') format('woff2'),
  url('/fonts/FuturaLTBook.woff') format('woff'),
  url('/fonts/FuturaLTBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FuturaLTBold';
  src: url('/fonts/FuturaLTBook.eot');
  src: url('/fonts/FuturaLTBold.eot?#iefix') format('embedded-opentype'),
  url('/fonts/FuturaLTBold.woff2') format('woff2'),
  url('/fonts/FuturaLTBold.woff') format('woff'),
  url('/fonts/FuturaLTBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(11px, 2.5vw, 15px); line-height: 1.4; height: 100%; scroll-behavior: smooth;}
body {background: #e7e6e1; color: #3c3c3b; font-family: 'FuturaLTBook'; display: flex; justify-content: center; align-items: stretch; min-height: 100%;}
.innerbody {background: #f6f5ef; flex-grow: 1; position: relative; display: flex; flex-direction: column;}
.container {margin: 0 auto; max-width: 80rem; padding: 0 2rem; position: relative;}
.narrow.container {max-width: 46rem; padding: 0;}
.narrow.container:first-child {margin-top: -2rem;}
a {color: #3c3c3b;}
p, ul, ol {margin-bottom: 1.8rem;}
ul {margin-left: 0.8rem;}
ol {margin-left: 2rem;}
h1 {font-size: 2rem; font-weight: normal; margin-bottom: 3.25rem; line-height: 1.2; text-align: center;}
h1 + h2 {letter-spacing: 0.05em; font-size: 0.85rem; line-height: 1.8; font-weight: normal; text-align: center; margin-top: -2.25rem; margin-bottom: 3.25rem; padding: 0;}
h2, h3 {font-size: 1.15rem; font-weight: normal; padding: 0.35rem 0;}
img {max-width: 100%;}

.header {text-transform: uppercase; letter-spacing: 0.075em; position: absolute; width: 100%; padding: 1.8rem 0; z-index: 3;}
.header .container {display: flex; align-items: center;}
.header .container h1 {font-size: 1.5rem; width: 17rem; text-align: center; letter-spacing: 0.1em; margin: 0;}
.header .container a {text-decoration: none; color: #3c3c3b;}
.header .container > div {flex: 1}
.header .container > div ul {display: flex; gap: 2.2rem; margin: 0;}
.header .container > div:nth-child(1) ul {justify-content: flex-end;}
.header .container > div ul li {list-style: none; font-size: 0.8rem; text-align: center;}
.header .container > div ul li a {display: block; position: relative;}
.header .container > div ul li.selected a::before {content: "•"; left: 50%; top: 0; position: absolute; margin-top: -1rem; transform: translateX(-50%);}
body.home .header .container a {color: white;}
.header .container > button,
.header .container > ul {display: none;}
@media (max-width: 75rem) {
  .header .container > div {display: none;}
  .header .container > ul {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #f6f5ef; 
    height: 100vh; 
    margin: -1.8rem 0 0 0; 
    z-index: 6;
    flex-direction: column;
    justify-content: center;
  }
  .header .container > ul li {list-style: none; text-align: center;}
  .header .container > ul li a {padding: 1rem 1rem; display: block; font-size: 1rem;}
  .header .container h1 {text-align: left; position: absolute; z-index: 3; top: 0; z-index: 7;}
  .header .container > button {
    position: absolute; 
    background: transparent url(/img/menu.svg) center center / contain no-repeat;
    width: 2.15rem; 
    height: 2.15rem; 
    border: 0; 
    border-radius: 0; 
    right: 1.8rem; 
    top: 0;
    color: transparent;
    margin-top: -0.15rem;
    display: block;
    z-index: 6;
  } 
  body.home .header .container > button {background: transparent url(/img/menu_white.svg) center center / contain no-repeat;}
  body.menuopen .header .container > ul {display: flex;}
  body.menuopen .header .container > button {background: transparent url(/img/close.svg) center center / contain no-repeat; }
  body.menuopen .header .container a {color: #3c3c3b!important;}
}
@media (max-width: 40rem) {
  .header .container h1 {font-size: 2rem;}
  .header .container > button {width: 3rem; height: 3rem; margin-top: -0.3rem;}
  .header .container > ul li a {font-size: 1.5rem;}
}



@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.carousel {height: 100vh; background: #333; position: relative;}
.carousel ul li div,
.carousel ul li div img {display: block; width: 100%; height: 100%;}
.carousel ul li {list-style: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
.carousel ul li:nth-last-child(2), .carousel ul li:nth-last-child(1) {opacity: 1;}
.carousel ul li div img {object-fit: cover;}
.carousel ul li:nth-last-child(2) div::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 64%,rgba(0,0,0,0) 100%); z-index: 2;}
.carousel ul li div span {
  position: absolute; 
  top: 50%; 
  left: 0;
  width: 100%; 
  display: block; 
  text-align: center; 
  transform: translateY(-50%);
  font-size: 5rem;
  padding: 0 3rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0025em;
  font-family: 'FuturaLTBold';
  text-transform: uppercase;
  color: white;
  z-index: 2;
  line-height: 1.2;
}
.carousel.mobile {display: none;}

.main {flex-grow: 1; letter-spacing: 0.05em; font-size: 0.85rem; padding: 13rem 0 5rem; line-height: 1.8;}
@media (max-width: 45rem) {
  h1 + h2, .main {font-size: 1.2rem;}
  h1 + h2 {padding: 0.2rem 0 1rem;}
  h2, h3 {font-size: 1.6rem;}
  .carousel {display: none;}
  .carousel.mobile {display: block;}
}

.tiles {display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-gap: 3.3rem; margin: 0;}
.tiles li {list-style: none; overflow: hidden;}
.tiles li a {
  display: block; 
  aspect-ratio: 1.4; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative;
  text-decoration: none;
  flex-direction: column;
}
.tiles li a::before {
  content: ""; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  opacity: 0; 
  background: rgba(0,0,0,0.25); 
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}
.tiles li a > span:first-child {
  color: white; 
  font-family: 'FuturaLTBold';
  opacity: 0;
  transition: opacity 0.3s ease-in-out; 
  position: relative; 
  z-index: 2;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  display: block;
  text-align: center;
  line-height: 1.2;
  padding: 0 1rem;
}
.tiles li a > span:nth-child(2):not(.circle) {color: white; opacity: 0; transition: opacity 0.3s ease-in-out; position: relative; z-index: 2; padding-top: 0.45rem;}
.tiles li a > span.circle {
  color: white; 
  position: absolute; 
  left: 0.5rem; 
  bottom: 0.5rem; 
  border: 1px solid white; 
  border-radius: 100%;
  width: 5.5rem; 
  height: 5.5rem; 
  line-height: 1.25;
  font-family: 'FuturaLTBold';
  text-transform: uppercase;
  text-align: center;
  display: flex;
  font-size: 0.9rem;
  letter-spacing: 0;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tiles li a > span.circle span {display: block; position: relative; bottom: 0.05rem;}
.tiles li a > img {position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; transition: transform 0.3s ease-in-out; object-fit: cover;}
.tiles li a:hover > img {transform: scale(1.1);}
.tiles li a:hover::before {opacity: 1;}
.tiles.nohover li a::before {opacity: 0.5!important;}
.tiles li a:hover > span, .tiles li a:hover > span:nth-child(2):not(.circle) {opacity: 1;}
.tiles.nohover li a span {opacity: 1!important;}
.narrow.container + .tiles {margin: 7rem 0 0;}
@media (max-width: 45rem) {
  .tiles {grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); grid-gap: 2rem;}
  .tiles.largetiles {grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));}
  .tiles li a > span {opacity: 1!important;}
  .tiles li a::before {opacity: 1!important;}
  .tiles li a > span:first-child {padding: 0 2rem; font-size: 1.5rem;}
  .tiles.largetiles li a > span:first-child {font-size: 2.75rem;}
  .tiles li a > span.circle {transform-origin: 0% 100%; transform: scale(0.7);}
  .tiles li a > span:nth-child(2):not(.circle) {font-size: 0.75rem;}
}
@media (max-width: 30rem) {
  .tiles {grid-template-columns: 1fr;}
  .tiles li a > span:first-child {font-size: 2.75rem;}
  .tiles li a > span.circle {transform: scale(1);}
  .tiles li a > span:nth-child(2):not(.circle) {font-size: 1rem;}
}

/* 4x5 = 1.25/0.8 else 2x3 = 1.5/0.666 aspect ratio */

.button {
  background: #f6f5ef;
  color: #3c3c3b;
  border: 1px solid #3c3c3b;
  display: inline-block;
  text-decoration: none;
  padding: 0.4rem 1.25rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 1rem;
  letter-spacing: 0.025em;
  margin: 1.5rem 0 3rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.15s ease-in-out;
  text-align: center;
  line-height: 1.2;
  font-family: 'FuturaLTBook';
  cursor: pointer;
}
.button:hover {
  background: #3c3c3b;
  color: #f6f5ef;
}
@media (max-width: 45rem) {
  p, ul, ol {margin-bottom: 2.75rem;}
  .button {font-size: 1.5rem; padding: 0.8rem 1.75rem 0.9rem;}
}

.photogrid {display: grid; grid-template-columns: repeat(minmax(30rem, 1fr)); grid-gap: 2.25rem; margin: 7rem 0 0;}
.photogrid li {list-style: none;}
.photogrid li a, .photogrid li a img {display: block;}
.photogrid li.landscape {grid-column-start: 1; grid-column-end: 3;}
.photogrid.shortcode {margin: 4rem 0 4rem 0; display: flex; gap: 2.25rem; flex-wrap: wrap;}
.photogrid.shortcode li {flex: 1;}
@media (max-width: 45rem) {
  .photogrid {grid-gap: 2rem!important;}
  .photogrid.large_on_mobile {grid-template-columns: 1fr;}
  .photogrid.large_on_mobile li.landscape {grid-column-end: 2;}
  .photogrid.shortcode li.landscape {flex: auto;}
}



.footer {font-size: 0.85rem; letter-spacing: 0.05em; padding: 2rem 0;}
.footer .container {display: flex;}
.footer .container > div {flex: 1; display: flex; align-items: center;}
.footer .container > div a {color: #3c3c3b; text-decoration: none;}
.footer .container > div a:hover {text-decoration: underline;}
.footer .container > div:nth-child(1) {justify-content: flex-start;}
.footer .container > div:nth-child(2) {justify-content: center;}
.footer .container > div:nth-child(2) img {height: 4rem; cursor: pointer; margin-right: 0.75rem;}
.footer .container > div:nth-child(3) {justify-content: flex-end; opacity: 0;}
@media (max-width: 45rem) {
  .footer .container {flex-direction: column; gap: 2rem;}
  .footer .container > div:nth-child(2) {font-size: 1.2rem;}
  .footer .container > div:nth-child(2) img {height: 5.5rem; cursor: pointer; margin-right: 1rem;}
  .footer .container > div:nth-child(3) {justify-content: center; font-size: 1.2rem;}
}


.verttext {
  position: absolute;
  cursor: pointer;
  transform: rotate(-90deg);
  transform-origin: 100% 100%;
  top: 18.5rem;
  z-index: 50;
  right: 2rem;
  letter-spacing: 0.05em; 
  font-size: 0.85rem; 
}
body.home .verttext {color: white;}
@media (max-width: 80rem) {
  .verttext {display: none;}
}
#scrolltotop .verttext {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  text-decoration: none !important;
  top: auto;
  bottom: 9.35rem;
  transition: opacity 0.3s ease-in-out;
  color: #3c3c3b;
}
body.scrolled #scrolltotop .verttext {opacity: 1; pointer-events: all;}

.form {font-size: 1rem;}
.form input[type="text"],
.form input[type="email"] {
  font-size: 1rem; 
  padding: 0.4rem 0.4rem 0.5rem; 
  color: #3c3c3b; 
  font-family: 'FuturaLTBook';
  border: 1px solid #3c3c3b;
  background: white;
  letter-spacing: 0.025em;
  margin: 0.25rem 0;
}
.form .button {left: 0; transform: none;}
.form > div {display: flex; flex-direction: column;}
@media (max-width: 45rem) {
  .form {font-size: 1.5rem;}
}

body.section_forms .narrow.container {max-width: 30rem;}
body.section_forms h1 {font-size: 3rem;}
body.section_forms.hasbackgroundimage .innerbody {background: rgba(0,0,0,0.5);}
body.section_forms.hasbackgroundimage,
body.section_forms.hasbackgroundimage .footer .container > div a,
body.section_forms.hasbackgroundimage .header .container a {color: white;}
body.section_forms.hasbackgroundimage .button {background: transparent; color: white; border-color: white;}
body.section_forms.hasbackgroundimage:not(.menuopen) .header .container > button {background-image: url(/img/menu_white.svg);} 
body.section_forms.hasbackgroundimage .footer .container > div:nth-child(2) img {filter: contrast(1.75) invert(1);}
body.section_forms.hasbackgroundimage .form input[type="text"],
body.section_forms.hasbackgroundimage .form input[type="email"] {border: 0;}
body.section_forms.hasbackgroundimage .button:hover {
  color: #3c3c3b;
  background: white;
}




@media (min-width: 90rem) and (min-height: 60rem) {
  body.horizontalscroll {display: block; background: #f6f5ef; overflow: hidden; overflow-x: auto;}
  body.horizontalscroll .header {position: fixed; width: 100%; top: 0;}
  body.horizontalscroll .footer {position: fixed; width: 100%; bottom: 0;}
  body.horizontalscroll .innerbody {max-width: none;}
  body.horizontalscroll .main {padding: 0;}
  body.horizontalscroll .main > .container {display: flex; margin: 0 2rem; max-width: none; padding: 10rem 0 12rem; height: 100vh; align-items: center; gap: 9.5rem; position: relative; left: 10vw;}
  body.horizontalscroll .main > .container .narrow.container {max-width: 35rem; min-width: 35rem; margin-top: 0!important;}
  body.horizontalscroll .photogrid {margin-top: 0; display: flex; gap: 2.25rem; height: 100%; border-right: 15vw solid #f6f5ef; max-height: 50rem;}
  body.horizontalscroll .photogrid li,
  body.horizontalscroll .photogrid li a,
  body.horizontalscroll .photogrid li a img {height: 100%; width: auto; max-width: none;}
  body.horizontalscroll .verttext {position: fixed;}
}