* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased; 
  -moz-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  font-smooth: never;
  -moz-font-smooth: never;
}

@font-face {
  font-family: 'Axo';
  src: url('../fonts/Axo-Regular.woff') format('woff'),
      url('../fonts/Axo-Regular.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  min-height: 0vw;
  text-size-adjust: 100%;
}

@media screen and (min-width: 700px)  {
html {
  font-size: calc(4px + .9vw);
}
}
@media screen and (max-width: 699px)  {
html {
  font-size: calc(4px + .75vw);
}
}

:root {
  --lightgrey: color(display-p3 0.929412 0.929412 0.929412 / 1);
  --darkgrey: color(display-p3 0.290196 0.290196 0.286275 / 1);
  --mediumgrey: #9d9d9c;
  --white: color(display-p3 1 1 1 / 1);

   /* Typesettings */

  --letter-spacing-250: 0.25;
  --letter-spacing-125: 0.125;
  --letter-spacing-20: 0.02;
  --gap-project-banner: calc(var(--gap-small) / 2.5);

}

@media screen and (min-width: 1800px){
  :root {
    /* Typesettings */
      --text-large: 1.15rem;
      --text-large-line-height: 1.2857;
      --text-medium: calc(0.7428 * var(--text-large));
      --text-medium-line-height: 1.2;
      --text-small: calc(0.571 * var(--text-large));
      --text-small-line-height: 1.425;

    /* gaps */
    --gap: 1.4rem;
    --gap-small: 0.57rem;
    --about-margin: 2.62rem;
    --about-extra-margin: 1.6rem;
    --about-column-gap: var(--gap);
    --border-size: 1.5px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1799px){
  :root {
    /* Typesettings */
      --text-large: 1.3rem; 
      --text-large-line-height: 1.2857;
      --text-medium: calc(0.714 * var(--text-large));
      --text-medium-line-height: 1.2;
      --text-small: calc(0.571 * var(--text-large));
      --text-small-line-height: 1.425;

    /* gaps */
    --gap: 1.7rem;
    --gap-small: 0.69rem;
    --about-margin: 3.8rem;
    --about-extra-margin: 0;
    --about-column-gap: var(--gap);
    --border-size: 1.2px;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px){
  :root {
    /* Typesettings */
      --text-large: 1.94rem;
      --text-large-line-height: 1.2857;
      --text-medium: calc(0.714 * var(--text-large));
      --text-medium-line-height: 1.2;
      --text-small: calc(0.571 * var(--text-large));
      --text-small-line-height: 1.425;

    /* gaps */
    --gap: 2rem;
    --gap-small: 0.95rem;
    --about-margin: 3.2rem;
    --about-extra-margin: 2rem;
    --about-column-gap: 1.3rem;
    --border-size: 1px;
  }
}

@media screen and (max-width: 699px)  {
  :root {
   /* Typesettings */
      --text-large: 2.27rem;
      --text-large-line-height: 1.2855;
      --text-medium: var(--text-large);
      --text-medium-line-height: var(--text-large-line-height);
      --text-small: var(--text-large);
      --text-small-line-height: var(--text-large-line-height);

    /* gaps */
    --gap: 2.2rem;
    --gap-small: 0.7rem;
    --about-margin: 5.25rem;
    --about-extra-margin: 0;
    --about-column-gap: 1.3rem;
    --border-size: 1px;
  }
}

html {
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
 font-family: "Axo", monospace;
 background-color: var(--lightgrey);
 color: var(--darkgrey);
}

.hidden {
  display: none !important;
}

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

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

button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
  width: 100%;
  display: block;
}

figcaption {
  font-weight: inherit;
}

img {
  display: block;
}

video {
  display: block;
  isolation: isolate;
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

.sr-only {
  border: 0;
  clip-path: polygon(0% 0%,0% 0%,0% 0%,0% 0%);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.uppercase {
  text-transform: uppercase;
}

sup {
  font-size: inherit;
  vertical-align: inherit;
  font-variant-position: super;
}

.text-s {
  font-size: var(--text-small);
  line-height: var(--text-small-line-height);
}

.text-m {
  font-size: var(--text-medium);
  line-height: var(--text-medium-line-height);
}

.text-l {
  font-size: var(--text-large);
  line-height: var(--text-large-line-height);
}

.spacing-s-20 {
  letter-spacing: calc(var(--text-small) * var(--letter-spacing-20));
}
.spacing-s-125 {
  letter-spacing: calc(var(--text-small) * var(--letter-spacing-125));
}
.spacing-s-250 {
  letter-spacing: calc(var(--text-small) * var(--letter-spacing-250));
}
.spacing-m-20 {
  letter-spacing: calc(var(--text-medium) * var(--letter-spacing-20));
}
.spacing-m-125 {
  letter-spacing: calc(var(--text-medium) * var(--letter-spacing-125));
}
.spacing-m-250 {
  letter-spacing: calc(var(--text-medium) * var(--letter-spacing-250));
}
.spacing-l-20 {
  letter-spacing: calc(var(--text-large) * var(--letter-spacing-20));
}
.spacing-l-125 {
  letter-spacing: calc(var(--text-large) * var(--letter-spacing-125));
}
.spacing-l-250 {
  letter-spacing: calc(var(--text-large) * var(--letter-spacing-250));
}

.cursor-plus {
  cursor: url("../svg/plus.svg") 10 10, auto;
}
.cursor-cross {
  cursor: url("../svg/cross.svg") 10 10, auto;
}
.cursor-link {
  cursor: url("../svg/link.svg") 10 10, auto;
}
.cursor-arrow-left {
  cursor: url("../svg/arrow-left.svg") 10 10, auto;
}
.cursor-arrow-right {
  cursor: url("../svg/arrow-right.svg") 10 10, auto;
}

header {
  position: sticky;
  z-index: 10;
  top: 0;
  margin: 0;
  padding: var(--gap);
  background: var(--lightgrey);
  line-height: 1;
}

header.on-landing {
  background: none;
  color: var(--white);
}

header.on-landing #logo::before {
  background-image: url('../svg/oural-light.svg');
}

header #logo {
  color: transparent
}

header #logo::before {
  content: "";
  display: block;
  position: absolute;
  height: var(--text-medium);
  aspect-ratio: 10/2.169;
  background-image: url('../svg/oural-dark.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}

.landing-slideshow {
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
}

.landing-slideshow::before,
.landing-slideshow::after
 {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: calc(6 * var(--text-medium));
  background: linear-gradient(in lch to var(--gradient-direction), color(display-p3 0 0 0 / 0.5), color(display-p3 1 1 1 / 0));
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.landing-slideshow::before {
  --gradient-direction: bottom;
  top: 0;
}

.landing-slideshow::after {
  --gradient-direction: top;
  bottom: 0;
}

.landing-slideshow .slides {
  width: 100%;
  height: 100%;
}

.landing-slideshow .slide {
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  --animation-duration: 600ms
}

.landing-slideshow .slide.current {
  display: block;
}

.landing-slideshow .slide.next {
  display: block;
  opacity: 0;
}

.landing-slideshow .slide.fade-in {
  animation: slideFadingIn var(--animation-duration) ease-in-out forwards;
}

.landing-slideshow .slide.fade-out {
  animation: slideFadingOut var(--animation-duration) ease-in-out forwards;
}

@keyframes slideFadingIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideFadingOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


@keyframes slideFadingOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.landing-slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  --object-position: center;
  object-position: var(--object-position);
}

.landing-slideshow .slide figcaption {
  position: absolute;
  --margin: calc(var(--gap) + var(--gap-small));
  bottom: var(--margin);
  left: var(--gap);
  right: var(--gap);
  text-align: center;
  color: var(--white);
  z-index: 2;
}

.landing-slideshow .slide figcaption a {
  pointer-events: all;
}

.button-slideshow {
  position: absolute;
  width: 50%;
} 

.landing-slideshow .button-slideshow {
  --dimension: calc(6 * var(--text-medium));
  top: var(--dimension);
  bottom: var(--dimension);
}

.button-slideshow#previous {
  left: 0;
}
.button-slideshow#next {
  right: 0;
}

.about {
  text-align: center;
  padding: 0 var(--gap) var(--about-margin) var(--gap);
}

.about h3
{
  text-transform: uppercase;
}

.about h3 + p {
  margin-top: 0;
}

.about .row {
  display: grid;
  gap: var(--about-column-gap);
  margin: var(--about-margin) 0 var(--about-margin) 0;
  --position: start;
  --text-align: center;
}

.about .row.border {
  border-bottom: var(--border-size) solid var(--darkgrey);
  padding-bottom: var(--about-margin);
}

.about .row .column {
  grid-column: span var(--span);
  display: flex;
  flex-direction: column;
  justify-content: var(--position);
  text-align: var(--text-align);
}

.about .row .column img {
  width: 100%;
  height: auto;
}

.about-title,
.about-email
{
  display: block;
  padding: var(--about-extra-margin) 0 var(--about-extra-margin) 0;
}

.about .about-text.text-l  {
  width: 75rem;
  max-width: 100%;
  margin: 0 auto;
}

.about .text-m h3 {
  letter-spacing: calc(var(--text-medium) * var(--letter-spacing-125));
}

picture + .about-text,
.about-text + picture img
{
  margin-top: var(--about-margin);
}


.about p:first-of-type {
  margin-top: 0;
}

.about-text a {
  text-decoration: underline;
}
.about-text a:hover {
  text-decoration: none;
}
.about-text a::after,
.external-link::after
{
  content:' ↗';
}

.projects {
  padding: 0 var(--gap) var(--gap) var(--gap);
}

.projects-list {
  display: grid;
  gap: var(--gap);
}

.projects-list .card {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--gap-small);
}

.projects-list h2 {
  text-align: center;
}

.projects-list h2 a::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.projects-list .card-cover {
  order: -1;
  width: 100%;
  aspect-ratio: 5/4;
  display: block;
}
.projects-list .card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  --object-position: center;
  object-position: var(--object-position);
}

.index {
  padding: 0 var(--gap) var(--gap) var(--gap);
}

.index-head .desc::before {
  content: "↓ ";
}
.index-head .asc::before {
  content: "↑ ";
}

.index-list .row,
.index-head
  {
  position: relative;
  display: grid;
  gap: var(--gap-small);
  padding: var(--gap-small) 0 var(--gap-small) 0;
}

.index-list .row {
  border-bottom: var(--border-size) solid var(--darkgrey);
  color: var(--mediumgrey);
}

.index-head {
  border-bottom: var(--border-size) solid var(--darkgrey);
}

.index-list .row.clickable {
  color: var(--darkgrey);
}

.index-list .row.clickable:hover  {
  background-color: var(--white);
}

.index-list a::before {
  z-index: 1;
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.index-list a:focus-visible {
  outline: none;
}
.index-list a:focus-visible::before {
  background-color: var(--white);
  z-index: -1;
}

.index-list .cell,
.index-head .index-sort {
  display: cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-list .cell .empty::before {
  content: "—";
}

.project-banner-header {
  text-align: center;
}

.project-banner-header p {
  margin: 0;
}

.project-banner-table {
    column-gap: var(--gap);
    display: grid;
    position: relative;
  }

.project-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.project-slideshow-inner {
  position: absolute;
  overflow: hidden;
  left: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  --_margin: 10vw;
  --_slideWidth: calc(100vw - ( 2 * var(--_margin)));
  --_offsetSwipe: 0px;
  transform: translateX(calc((-1 * var(--_slideWidth)) + var(--_margin) - var(--_offsetSwipe)));
}

.project-slideshow .slide {
  scroll-snap-align: center;
  position: relative;
  height: 100%;
  width: var(--_slideWidth);
  flex-shrink: 0;
  --_order: 0;
  order : var(--_order);
  padding: 0 calc(var(--gap-small) / 2) 0 calc(var(--gap-small) / 2);
}

.project-slideshow .slide:last-child {
  --_order: -1;
}

.project-slideshow .slide picture {
  height: 100%;
}

.project-slideshow img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: right;
  transition: var(--_transformEase) var(--_transformDuration);
}

.project-slideshow .slide.active img {
  object-position: center;
}

.project-slideshow .slide.active + .slide img,
.project-slideshow[data-current="end"] .slide:first-child img
{
  object-position: left;
}

.project-slideshow .button-slideshow {
  top: 0;
  bottom: 0;
}

.lightbox {
  position: fixed;
  --top: calc(var(--text-medium) + 2 * var(--gap));
  top: var(--top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.lightbox::after {
  content: "";
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  opacity: 0.8;
  z-index: -1;
}

@media screen and (min-width: 1000px)  {

  .index-list .row,
  .index-head
  {
    grid-template-columns: 2.5fr 12fr 8fr 8fr 6fr 6fr 13fr 4fr 4fr 4fr 4fr;
  }

  .project-banner-header {
    display: grid;
    column-gap: var(--gap);
    grid-template-columns: 2fr 6fr;
    background-color: var(--lightgrey);
    padding: var(--gap);
  }

  .project-banner-title {
    display: grid;
    column-gap: var(--gap);
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  
  .project-banner-header .project-banner-table {
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    align-items: center;
  }


  .project-banner-content li {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    border-bottom: var(--border-size) solid var(--darkgrey);
    overflow: hidden;
  }

  .project-banner-content li > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .project-banner-content li > *:first-child {
    flex-shrink: 0;
    max-width: 50%;
  }

  .project-banner-content li > *:last-child {
    flex-grow: 1;
    text-align: right;
  }

  .project-banner-content li:nth-child(-n+4){
    border-top: var(--border-size) solid var(--darkgrey);
  }

  .banner-btn {
    --dimension: calc(2*var(--text-medium));
    width: var(--dimension);
    height: var(--dimension);
    position: relative;
  }
  .banner-btn::before,
  .banner-btn::after
  {
    content: "";
    display: block;
    width: var(--border-size);
    height: calc(2*var(--text-medium));
    position: absolute;
    background: var(--darkgrey);
    top: 0;
    left: 50%;
  }
  .banner-btn::after {
    rotate: 90deg;
  }

  .banner-btn[aria-expanded="true"] {
    rotate: 45deg;
  }

  .project-banner-content {
    grid-template-columns: repeat(4, 1fr);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(calc(100% - 1px));
    display: none;
    background-color: var(--lightgrey);
    padding: 0 var(--gap) var(--gap) var(--gap);
  }

  .project-banner-content.active {
    display: grid;
  }

   .project-banner-inner {
    transform: translateY(0);
    transition: transform 300ms ease-in-out;
   }
  .project-banner-inner.active {
    --height: 100%;
    transform: translateY(var(--height));
  }
   .project-banner-table .row-2 {
    grid-row: 1 / span 2;
  }
  .project-banner-table .row-1 span {
    display: inline-block;
  }
  .project-banner-table .row-1 span:first-child::after {
    content: " : ";
  }

}

@media screen and (min-width: 700px)  {
  
  header {
    display: grid;
    grid-template-columns: 1.37fr 3fr;
  }

  .button-menu {
    display: none;
  }

  nav#menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .about .row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .projects-list {
    grid-template-columns: 1fr 1fr;
  }

  .view-project {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  .project-slideshow {
    height: 100%;
  }

  .project-banner-table#metadata li {
    padding: var(--gap-project-banner) 0 var(--gap-project-banner) 0;
  }

  .lightbox {
    padding: var(--gap);
  }

}

@media screen and (min-width: 700px) and (max-width: 999px) and (orientation: portrait)  {
  .project {
    flex: 1;
    overflow: hidden;
    height: calc(-10rem + 100dvh);
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 1000px) {
  .project {
    flex: 1;
    overflow: hidden;
    height: calc(-10rem + 100dvh);
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 699px)  {

  header {
    display: flex;
    justify-content: space-between;
  }
  .button-menu {
    z-index: 1;
    position: relative;
  }

  header #logo {
    z-index: 1;
  }

  header nav#menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    display: none;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    line-height: calc(var(--text-medium) * 4);
        background-color: var(--lightgrey);
  }

  header.on-landing nav#menu {
    background-color: color(display-p3 0 0 0 / 0.5);
  }

  .button-menu.active::before,
  .button-menu.active::after
  {
    content: "";
    display: block;
    width: var(--border-size);
    height: calc(var(--text-medium));
    position: absolute;
    background: var(--darkgrey);
    left: calc(-1.1 * var(--text-medium));
    top: calc(0.15 * var(--text-medium));
  }

  header.on-landing .button-menu::before, 
  header.on-landing .button-menu::after
  {
    background: var(--lightgrey);
  }


  .button-menu::before {
    rotate: 45deg;
  }
  .button-menu::after {
    rotate: -45deg;
  }

  header nav.active#menu {
    display: flex;
  }

   .about .row {
    grid-template-columns: 1fr;
  }

  .about .column + .column {
    margin-top: var(--about-margin);
  }

  .projects-list {
    grid-template-columns: 1fr;
  }

  .index-list .row,
  .index-head
  {
    grid-template-columns: 1.5fr 5fr 3fr 2fr;
  }

  .index .typology,
  .index .act,
  .index .moa,
  .index .stage,
  .index .delivery-year,
  .index .moe-fees,
  .index .superficy
  {
    display: none;
    visibility: hidden;
  }

  .project-slideshow {
    height: 70dvw;
  }

   .project-banner-table li {
    padding: var(--gap-small) 0 var(--gap-small) 0;
  }
  .project-banner-header .project-banner-table li:nth-child(1){
    border-top: var(--border-size) solid var(--darkgrey);
  }

}

@media screen and (max-width: 999px)  {
  .project-banner {
    padding: 0 var(--gap) var(--gap) var(--gap);
  }

  .project-banner-header hgroup {
    margin: var(--about-margin) 0 var(--about-margin) 0;
  }

  .project-banner-table li {
    border-bottom: var(--border-size) solid var(--darkgrey);
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    border-bottom: var(--border-size) solid var(--darkgrey);
    overflow: hidden;
  }

  .project-banner-table .banner-btn-container {
    display: none;
  }

  .project-banner-table li > *  {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

   .project-banner-table li > *:first-child  {
    max-width: 50%;
    flex-shrink: 0;
  }

   .project-banner-table li > *:last-child  {
    flex-grow: 1;
    text-align: right;
  }

}


@media screen and (min-width: 700px) and (max-width: 999px) {
  
 .about .text-large .about-text {
  width: 61rem;
  }

   .index-list .row,
   .index-head
  {
    grid-template-columns: 3fr 14fr 8fr 6fr 6fr 6fr 4fr 6fr 6fr;
  }

  .index .moa,
  .index .stage
  {
    display: none;
    visibility: hidden;
  }

  .project-banner-table {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-banner-header .project-banner-table {
    font-size: var(--text-small);
    line-height: var(--text-small-line-height);
    letter-spacing: calc(var(--text-small) * var(--letter-spacing-20));
  }
  
  .project-banner-header .project-banner-table li {
    padding: var(--gap-project-banner) 0 var(--gap-project-banner) 0;
  }

  .project-banner-header .project-banner-table li:nth-child(-n+3){
    border-top: var(--border-size) solid var(--darkgrey);
  }

}

@media screen and (min-width: 1000px) and (max-width: 1799px) {
  
 .about .text-large .about-text {
  width: 70rem;
  }

}

@media screen and (min-width: 1800px) {
  
 .about .text-large .about-text {
  width: 75rem;
  }

}

@media (hover: none) {
  .cursor-link::after {
    content:' ↗';
  }
  .project-slideshow .button-slideshow {
    display: none;
  }
}