*{ margin:0; padding:0; }
body{ font-family:'Open Sans', sans-serif; }

.grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 3rem;
}

.item:first-child {
  max-width: 600px;
}

.item {
  text-decoration: none;
  color: inherit;
}

.page{ width:min(90%, 1200px); margin:0 auto; }

/* header */
header{ margin-bottom:5em; position:relative; }
h1{
  line-height:1; padding:0.5em 0; text-align:center;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#047582; mix-blend-mode:color-burn; font-size:18vw;
}
header img{ max-width:100%; display:block; }
h1,h2{ font-family:'Playfair Display', serif; font-weight:normal; }


.with-separator {
  border-top:2px solid #EEE; padding:1em; font-size:15px;
  display:flex; margin-top:1em; margin-down:1em; line-height:1.5; padding:1em 0 0em 0;
}

.item{
  align-self:Left; justify-self:Left;
  text-decoration:none; color:#333;
}
.item:nth-child(odd){ justify-self:start; }
.item:nth-child(even){ justify-self:end; }

.item__image{ position:relative; margin-bottom:0.6em; }

/* Keep DOM images visible; WebGL fades in on hover */
.item img{
  width:100%;
  display:block;
  opacity:1;
}

.item__meta{
  position:absolute; left:-0.4em; bottom:0.4em;
  transform-origin:0 100%; transform:rotate(-90deg);
  text-transform:uppercase; font-size:80%;
}
.item__title{ 
	color: #141414;
	font-family: "FontL", sans-serif; font-size:40px; line-height:1.2; margin-bottom:0.4em; }
	.item_p{ line-height:1.4; font-size:1em; }
	.item_h{ width:100%; }
	.item_v{ width:80%; }

.item__page{ 
	color: #141414;
	font-family: "FontL", sans-serif; font-size:40px; line-height:1.2; margin-bottom:0.4em; }
	.item_p{ line-height:1.4; font-size:1em; }
	.item_h{ width:100%; }
	.item_v{ width:80%; }

.Desc{ 
  color: #141414;
  font-family: "FontL", sans-serif;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 0.4em auto;
  max-width: 18ch;
  padding: 1em 0 4em 0;
}


.Bpage{ 
	color: #141414;
	font-family: "FontB", sans-serif; font-size:60px; line-height:1.2; margin-bottom:0.4em;; }
	.item_p{ line-height:1.4; font-size:1em; }
	.item_h{ width:100%; }
	.item_v{ width:80%; }

/* footer */
.footer{
  border-top:2px solid #EEE; padding:1em; font-size:15px;
  display:flex; line-height:1.5; padding:4em 0 4em 0;
}
.footer a{ color:#333; }
.footer p + p{ margin-left:auto; text-align:right; }

@media screen and (max-width:600px){
  .grid{ display:block; }
  .item_v,.item_h{ width:auto; margin-bottom:3em; }
  .item img{ width:100%; max-width:none; }
}

@font-face {
  font-family: "FontB";
  src: url("/fonts/Europa-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "FontR";
  src: url("/fonts/EuropaNuova-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "FontL";
  src: url("/fonts/Europa-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* WebGL canvas above the page; clicks pass through */
#container{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:10;
  pointer-events:none;
}

.cta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
}

.cta-line h2 {
  margin: 0;
  font-family: "FontR", sans-serif;
  font-size: 92px;
  line-height: 1;
  color: #111;
}

.cta-arrow {
  font-size: 110px;
  line-height: 1;
  color: #111;
  display: inline-block;
}