@charset "utf-8";
html{font-family:sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
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;}
a:link,a:visited{background:transparent;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); }
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: black; color: white; }
::selection { background-color: black; color: white; }

@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: all 1s; }
.hide { opacity: 0; }

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

:root {
  --sans: "sans", sans-serif;
  --serif: "Times New Roman", Times, serif;
  --padding: 25px;
  --h1-size: 35px;
  --h2-size: 16px;
  --text-body: clamp(16px, 1.4vw, 32px);
  --text-small: 24px;
  --text-caption: clamp(12px, 1vw, 16px);
  --text-margin: 1.5em;
  --letter-spacing: -0.04em;
  --line-height: 1.3;
  --black: #090909;
  --content-margin: 120px;
}

html { height: 100%; }
body { color: var(--black); font-family: var(--sans); font-size: var(--text-body); line-height: 1; height: 100%; }
.flex { display: flex; flex-wrap: wrap; }
.padding { padding: var(--padding); position: relative; }

h1 { color: var(--black); font-family: var(--serif); font-size: var(--h1-size); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { color: var(--black); font-family: var(--serif); font-size: var(--h2-size); font-weight: 400; letter-spacing: 0.05em; line-height: 1; margin: 0 0 0.75em; text-transform: uppercase; }
h3 { color: var(--black); font-family: var(--sans); font-size: var(--text-body); letter-spacing: var(--letter-spacing); line-height: 1; font-weight: 400; margin: 0; }
p, ul, ol { font-size: var(--text-body); letter-spacing: var(--letter-spacing); line-height: var(--line-height); margin: 0 0 var(--text-margin); }
i { font-style: normal; }
a { color: var(--black); transition: all .1s ease-out; }
button { background: none; border: none; font-family: var(--serif); font-size: var(--text-small); line-height: 1; padding: 0; transition: all .1s ease-out; }

.serif, .serif * { font-family: var(--serif); letter-spacing: 0; }
.small { font-size: var(--text-small); line-height: 1.2; }
figcaption p { font-size: var(--text-caption); font-family: var(--serif); letter-spacing: 0; text-align: center; }

h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,p:last-child, 
h1:only-child,h2:only-child,h3:only-child,h4:only-child,h5:only-child,h6:only-child,p:only-child { margin-bottom: 0; }

@media (hover: hover) {
  a:hover { opacity: 0.5; }
}


@media (min-width:1081px) {
  body { overflow: hidden; }
}

@media (max-width:1080px) {
  :root {
    --padding: 24px;
    --h1-size: 18px;
    --h2-size: 18px;
    --text-body: 22px;
    --text-small: 18px;
  }
}

@media (max-width:1080px) {
  :root {
    --padding: 20px;
  }
}

@media (max-width:400px) {

}

#nav { color: var(--colour); display: flex; font-family: var(--serif); font-size: var(--text-small); padding: var(--padding); position: fixed; top: 0; right: 0; z-index: 100; }
#nav a { color: var(--colour); padding-left: 0.3em; }
#nav a.mobile { display: none; }
button#menu { color: var(--colour); display: none; position: fixed; top: 0; right: 0; z-index: 101; }
button#menu .close { display: none; }

footer { position: fixed; bottom: 0; left: 0; overflow: hidden; width: 100%; z-index: 1; }
footer svg { height: auto; width: 100%; }
footer #logo { transition: opacity 0.25s; }
footer #marque { position: absolute; bottom: 0; left: 0; height: 100%; width: auto; box-sizing: border-box; opacity: 0; transition: opacity 0.25s; }
footer #marque svg { height: 100%; width: auto; }

body.open { overflow: hidden; }
body.open #nav { color: var(--black); }
body.open #nav a { color: var(--black); }
body.open footer #logo { opacity: 0; }
body.open footer #marque { opacity: 1; }

@media (max-width:1080px) {
  button#menu { display: inline-block; padding: var(--padding); }
  body.open button#menu { color: var(--black); }

  #nav { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; background-color: var(--colour); height: 100vh; width: 100%; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  #nav a { color: var(--black); display: none; font-size: 50px; line-height: 1; padding: 4px; }
  #nav i { display: none; }

  footer { z-index: 101; }
  footer #marque svg { fill: var(--black); }
  body.open footer { background: linear-gradient(180deg, rgb(var(--bg-colour), 0) 0%, rgb(var(--bg-colour), 0.95) 15%, rgb(var(--bg-colour), 1) 100%); padding-top: var(--padding); }
  body.nav-active footer { background: transparent; }

  body.nav-active #nav { opacity: 1; visibility: visible; pointer-events: auto; }
  body.nav-active #nav a { display: inline-block; }
  body.nav-active button#menu { color: var(--black); }
  body.nav-active button#menu .open { display: none; }
  body.nav-active button#menu .close { display: inline; }
  body.nav-active footer svg { fill: var(--black); }
  body.nav-active footer #logo { opacity: 1; }
  body.nav-active footer #marque { opacity: 0; }
}

#home { color: var(--colour); height: 100vh; width: 100%; font-family: var(--serif); }
#home h1 { color: var(--colour); margin: 0; padding: var(--padding); text-align: center; box-sizing: border-box; width: 100%; max-width: 800px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
#home #caption { position: fixed; top: 0; left: 0; font-family: var(--serif); font-size: var(--text-small); padding: var(--padding); display: flex; gap: 5em; }
#home #caption i { display: inline-block; font-style: normal; text-align: center; width: 0.75em; }
#home #caption span { flex: 1; }

#home #slides { height: 100vh; width: 100%; position: absolute; top: 0; left: 0; }
#home #slides figure { position: relative; }
#home #slides img { height: 100vh; width: 100%; object-fit: cover; }
#home #slides .overlay { background: black; height: 100%; width: 100%; opacity: 0.1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#home #slides .slick-arrow { position: absolute; top: 0; width: 50%; height: 100%; z-index: 1; }
#home #slides .slick-prev { left: 0; }
#home #slides .slick-next { right: 0; }

body.open #home #slides .slick-arrow { display: none; }

@media (max-width:1200px) {
  #home #caption span { max-width: 520px; }
}
@media (max-width:1080px) {
  #home #caption span { display: none; }
}

article { position: fixed; top: 0; right: 0; height: 100vh; opacity: 0; transform: translateX(100%); pointer-events: none; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
article { overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-scroll-chaining: none; overscroll-behavior: contain; }
article::-webkit-scrollbar-track { background-color: transparent; -webkit-box-shadow: none; }
article::-webkit-scrollbar { background-color: transparent; width: 8px; }
article::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); }

article#projects { z-index: 1; width: 80%; background: var(--colour); }
article#information { z-index: 2; width: 60%; background: var(--information); }
article#contact { z-index: 3; width: 40%; background: var(--contact); }

body.projects #projects { opacity: 1; transform: translateX(0); pointer-events: auto; }
body.information #information { opacity: 1; transform: translateX(0); pointer-events: auto; }
body.contact #contact { opacity: 1;transform: translateX(0); pointer-events: auto; }
article.on { z-index: 4 !important; }

@media (max-width:1080px) {
  article { z-index: 1; }
  body.projects article#projects { width: 100%; z-index: 10; }
  body.information article#information { width: 100%; z-index: 10; }
  body.contact article#contact { width: 100%; z-index: 10; }

  body[data-active="projects"].open footer { --bg-colour: var(--colour-rgb); }
  body[data-active="information"].open footer { --bg-colour: var(--information-rgb); }
  body[data-active="contact"].open footer { --bg-colour: var(--contact-rgb); }
}

/* PAGE CONTENT */
.content-block ul, 
.content-block ol { font-size: var(--text-body); line-height: 1.5; margin: 0 0 var(--text-margin) 1em; }
.content-block li ul,
.content-block li ol { font-size: 100%; margin: 0.5em 0 0.5em var(--text-margin); }
.content-block ul { list-style-type: disc; }
.content-block ul ul { list-style-type: circle; }
.content-block ul ul ul { list-style-type: square; }
.content-block ol { list-style-type: decimal; }
.content-block ol ol { list-style-type: lower-alpha; }
.content-block ol ol ol { list-style-type: lower-roman; }
.content-block ul:last-child, .page-content ol:last-child,
.content-block ul:only-child, .page-content ol:only-child { margin-bottom: 0; }

.content-block img { height: auto; width: 100%; box-sizing: border-box; }
.content-block .video { overflow: hidden; position: relative; padding-top: 56.25%; }
.content-block .video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; }

.content-block { margin-bottom: var(--text-margin); }

.grid-block .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding); }
.grid-block .cell { flex: 1; }

.people-block .person { display: flex; }
.people-block p { margin: 0; }
.people-block p:first-child { width: 33.33%; padding-right: 1em; box-sizing: border-box; }

.image-block figure { margin: 0 auto; width: 33.33%; }
.image-block figure img { margin-bottom: 10px; }

.rows { --gap: 2em; border-top: 1px solid currentColor; }
.rows .row { border-bottom: 1px solid currentColor; }
.rows .row h3 { display: flex; padding: 0.5em 0; }
.rows .row h3 span { display: inline-block; width: var(--gap); }
.rows .row dl { display: flex; padding-left: var(--gap); }
.rows .row dl:last-child { padding-bottom: 1em; }
.rows .row dt { margin: 0; flex: 0 0 30%; padding-right: 1em; box-sizing: border-box; }
.rows .row dd { margin: 0; }
.rows .row dd p,
.rows .row dd ul,
.rows .row dd ol { margin-bottom: 0; }

.rows details.row dt { flex-basis: 20%; }

.rows summary { cursor: pointer; list-style: none; position: relative; }
.rows summary::after { content: '+'; margin-left: 1em; position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; font-family: var(--serif); font-size: 150%; }
.rows details[open] summary::after { content: '−'; }

@media (max-width:1080px) {
  .rows .row { border-bottom: 1px solid currentColor; }
  .rows .row h3 span { display: inline; width: auto; }
  .rows .row dl { display: block; padding-left: 0; margin-bottom: 0.25em; }
  .rows .row dt { padding-right: 0; }
}

/* PROJECTS */
#projects #intro { height: var(--content-margin); width: 50%; }
#projects #table .row { display: flex; padding-bottom: 10px; transition: color .2s ease-out; }
#projects #table header.row { padding-bottom: 15px; }
#projects #table div.row { letter-spacing: var(--letter-spacing); }
#projects #table .project { flex: 1; padding-right: 1em; }
#projects #table .location { flex: 1; padding-right: 1em; }
#projects #table .services { flex: 2; padding-right: 1em; }
#projects #table .services .letters { display: none; }
#projects #table .year { text-align: right; width: 100px; }

@media (min-width:1081px) {
  #projects #table figure { visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; position: fixed; bottom: var(--padding); right: var(--padding); width: 51%; }
  #projects #table figure img { margin-left: auto; max-height: 80vh; width: 100%; object-fit: cover; }
  #projects #table figure figcaption { display: none; }
}

@media (hover: hover) {
  #projects #table div.row:hover { cursor: pointer; color: white; }
  #projects #table div.row:hover figure { visibility: visible; opacity: 1; }
}

@media (max-width:1080px) {
  #projects #intro { height: auto; margin-bottom: 1em; width: 70%; }
  #projects #table header.row { display: none; }
  #projects #table div.row { flex-wrap: wrap; }
  #projects #table .location { display: none; }
  #projects #table .year { display: none; }
  #projects #table .project { flex: 1; padding: 0; }
  #projects #table .services { flex: 0 0 100px; text-align: right; padding: 0; }
  #projects #table .services .words { display: none; }
  #projects #table .services .letters { display: inline; }
  #projects #table figure { margin: 1em auto 2em; width: 80%; }
  #projects #table figure img { margin-bottom: 5px; height: auto; width: 100%; }
}

/* INFORMATION */
#information .content-block:first-child { margin-top: var(--content-margin); }

/* CONTACT */
#contact .content-block:first-child { margin-top: var(--content-margin); }
#contact .image-block figure { width: 50%; }
#contact .grid a { color: rgba(255,255,255,0.3); }