@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); 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; }

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

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

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadein { opacity: 0; -webkit-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s; }
.hidden { opacity: 0; }
.inview { opacity: 1; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

:root {
  --sans: "fvrt", serif;
  --serif: "adobe-garamond-pro", serif;
  --light: 250, 250, 245;
  --dark: 8, 8, 8;
  --concrete: 210, 217, 216;
  --clay: 158, 90, 65;
  --green: 66, 77, 59;
  --sand: 238, 221, 174;
  --teal: 143, 178, 191;
  --h1-size: 26px;
  --size-xl: 20px;
  --size-l: 18px;
  --size-m: 16px;
  --size-s: 14px;
  --size-xs: 12px;
  --size-caption: 13px;
  --padding: 10px;
  --indent: calc(var(--padding) * 4);
}

html { scroll-behavior: smooth; overflow-y: scroll; }
body { --bg-colour: var(--light); --text-colour: var(--dark); background-color: rgb(var(--bg-colour)); color: rgb(var(--text-colour)); font-family: var(--serif); font-size: var(--size-m); line-height: 1; }
body.concrete { --bg-colour: var(--concrete); --text-colour: var(--dark); }
body.sand { --bg-colour: var(--sand); --text-colour: var(--dark); }
body.clay { --bg-colour: var(--clay); --text-colour: var(--light); }
body.teal { --bg-colour: var(--teal); --text-colour: var(--dark); }
body.green { --bg-colour: var(--green); --text-colour: var(--light); }
img { height: auto; width: 100%; box-sizing: border-box; }

.layout { margin-bottom: 15vw; }
body.no-margin .layout { margin-bottom: 0; }
.outer { display: flex; padding: var(--padding); }
.flex { display: flex; align-items: flex-start; flex-wrap: wrap; }
.padding { padding: var(--padding); }
.indent { text-indent: var(--indent); }
.col-25 { flex: 0 0 25%; padding: var(--padding); box-sizing: border-box; }
.col-50 { flex: 0 0 50%; padding: var(--padding); box-sizing: border-box; }
.col-75 { flex: 0 0 75%; padding: var(--padding); box-sizing: border-box; }

h1 { font-family: var(--serif); font-size: var(--h1-size); font-weight: normal; line-height: 1.2; margin: 0 0 0.5em; }
h2 { font-family: var(--serif); font-size: var(--size-xl); font-weight: normal; line-height: 1.2; margin: 0; }
h3 { font-family: var(--sans); font-size: var(--size-s); font-weight: normal; letter-spacing: 0.01em; line-height: 1.2; margin: 0; text-indent: var(--indent); text-transform: uppercase; }
h4 { font-family: var(--sans); font-size: var(--size-xs); font-weight: normal; letter-spacing: 0.01em; line-height: 1.2; margin: 0; }

p { line-height: 1.2; margin: 0; }
p + p { text-indent: var(--indent); }
p + h4 { margin-top: 1em; }
p.text-large { font-size: var(--size-xl); }
p.text-smal { font-size: var(--size-s); letter-spacing: 0.01em; }
span.small-caps { font-variant: all-small-caps; }

h1 .indent { display: block; }

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; }

main a { color: rgb(var(--text-colour)); transition: all 0.2s; }
#cursor { display: none; }
@media (hover: hover) {
	a { cursor: crosshair; }
	#cursor { display: none; white-space: nowrap; position: fixed; top: -30px; left: -30px; pointer-events: none; z-index: 99999; }
	#cursor.mix { mix-blend-mode: difference; }
  html.hide-cursor, html.hide-cursor * { cursor: none; }
  html.hide-cursor #cursor { display: block; }
}
@media (hover: none) {
	#cursor { display: none !important; }
}

@media (min-width:1600px) {
  :root {
  --size-m: 18px;
  --size-s: 16px;
  --size-xs: 14px;
  --size-caption: 15px;
  }
}
@media (max-width:1400px) {
  :root {

  }
}
@media (max-width:1080px) {
  :root {
	  --h1-size: 20px;
	  --size-xl: 16px;
	  --size-m: 14px;
  	--size-s: 12px;
	  --size-xs: 10px;
  	--size-caption: 11px;
	  --padding: 5px;
  }
	.col-25 { flex: 0 0 100%; }
	.col-50 { flex: 0 0 100%; }
	.col-75 { flex: 0 0 100%; }
}

@media (max-width:800px) {
}

/* HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#site-header { box-sizing: border-box; padding: var(--padding); padding-top: calc(var(--padding) * 4); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; }
#site-header { background: var(--bg-colour); background: linear-gradient(180deg, rgba(var(--bg-colour),0) 0%, rgba(var(--bg-colour),0.3) 27%, rgba(var(--bg-colour),0.6) 100%); }
#site-header a { color: rgb(var(--text-colour)); }
#site-header a.logo { box-sizing: border-box; display: flex; justify-content: space-between; padding: var(--padding); margin: 0; }
#site-header a.logo svg { fill: currentColor; height: auto;}
#site-header a.logo svg#brunsdon { width: calc(50% - 10px); }
#site-header a.logo svg#studio { width: 33.705%; }

#site-header nav { display: flex; font-size: var(--size-xl); width: 50%; }
#site-header nav>div { box-sizing: border-box; flex: 0 0 50%; padding: var(--padding); }
#site-header nav a.on { font-style: italic; }

#site-header.logo-large .studios { overflow: hidden; }
#site-header .studios .marquee { --gap: 5px; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); }
#site-header .studios .marquee div { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 20s linear infinite; }
#site-header .studios .marquee div span { padding: 0 5px; }
#site-header .studios .marquee div span i { font-style: normal; text-transform: uppercase; }

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

@media (hover: hover) {
	#site-header nav .links a { display: inline-block; }
	#site-header nav .links a:nth-child(1) { width: 95px; }
	#site-header nav .links a:nth-child(2) { width: 90px; }
	#site-header nav .links a:nth-child(3) { width: 50px; }
	#site-header nav a:hover { font-style: italic; }
}

@media (max-width:1400px) {
	#site-header.logo-large nav { justify-content: space-between; }
	#site-header.logo-large nav>div.links { flex: auto; }
	#site-header.logo-large nav>div.studios { max-width: 40%; }
}

@media (max-width:1180px) {
	#site-header nav .studios { display: none; }
}

@media (max-width:1080px) {
	#site-header a.logo svg#brunsdon { width: calc(50% - 5px); }
	#site-header nav { width: 100%; }
	#site-header nav>div { flex-basis: 100%; }
	#site-header nav .studios { display: none; }
}
@media (hover: hover) and (max-width:1080px) {
	#site-header nav .links a:nth-child(1) { width: 77px; }
	#site-header nav .links a:nth-child(2) { width: 70px; }
	#site-header nav .links a:nth-child(3) { width: 40px; }
}


@media (min-width:1081px) {
	#site-header.logo-small { display: flex; justify-content: space-between; }
	#site-header.logo-small a.logo { order: -1; width: 50%; box-sizing: border-box; }
	#site-header.logo-small a.logo svg#brunsdon { width: calc(50% - 10px); }
	#site-header.logo-small nav { width: 25%; margin-left: auto; flex-direction: column; justify-content: space-between; padding: var(--padding); box-sizing: border-box; }
	#site-header.logo-small nav>div { flex: 0; padding: 0; }
	#site-header.logo-small nav .links { text-align: right; }
}
@media (min-width:1081px) and (max-width:1400px) {
		#site-header.logo-small nav { width: 33%; }	
}

/* Acknowledgement
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#acknowledgement { display: none; z-index: 998; }
#acknowledgement .inner { display: flex; }
#acknowledgement .col-50 { margin-left: auto; }
#acknowledgement .continue { font-size: var(--size-xl); margin-top: 1em; }

html.acknowledgement-on { overflow-y: hidden; }
html.acknowledgement-on body { --text-colour: var(--dark); }
html.acknowledgement-on #acknowledgement { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
html.acknowledgement-on #site-header { background: transparent; }
html.acknowledgement-on #site-header nav { opacity: 0.1; }

@media (max-width:1080px) {
	#acknowledgement p { --size-xl: 20px; }
}
@media (hover: hover) {
  #acknowledgement .continue { display: none; }
}

/* CONTENT
-------------------------------------------------------------------------------------------------*/
main { padding: var(--padding); }
.content a { color: var(--text-colour); text-decoration: underline; text-underline-offset: 2px; }

@media (hover: hover) {
  .content a:hover { opacity: 0.7; text-decoration: none; }
}

.content .video { overflow: hidden; position: relative; padding-top: 56.25%; }
.content .video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; }
.content figcaption { font-family: var(--sans); font-size: var(--size-xs); font-weight: normal; letter-spacing: 0.01em; line-height: 1.2; margin: 10px 0 0; }

.content ul, 
.content ol { line-height: 1.4; margin: 0 0 1em 1.5em; }
.content li ul,
.content li ol { font-size: 100%; margin: 0.5em 0 0.5em 1.5em; }
.content ul { list-style-type: disc; }
.content ul ul { list-style-type: circle; }
.content ul ul ul { list-style-type: square; }
.content ol { list-style-type: decimal; }
.content ol ol { list-style-type: lower-alpha; }
.content ol ol ol { list-style-type: lower-roman; }
.content li { margin-bottom: 0.5em; }
.content ul:last-child, .content ol:last-child, .content figure:last-child,
.content ul:only-child, .content ol:only-child, .content figure:only-child { margin-bottom: 0; }

.sticky { position: sticky; top: var(--padding); }

nav.anchors { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--size-xl); line-height: 1.2; }
nav.anchors a { padding-bottom: 1em; padding-right: 1em; text-decoration: none; box-sizing: border-box; }
nav.anchors a .indent { display: block; }
nav.anchors a.on { font-style: italic; }

@media (hover: hover) {
  nav.anchors a:hover { font-style: italic; transition: none; }
  nav.anchors a:hover .indent { font-style: normal; }
}

@media (max-width:1080px) {
	nav.anchors-hide { display: none; }
	nav.anchors { flex-direction: row; margin-bottom: calc(var(--padding) * 6); }
	nav.anchors a { flex: 0 0 25%; padding: 0; text-align: center; }
	nav.anchors a .indent { text-indent: 0; }
}
@media (max-width:600px) {
	nav.anchors { font-size: var(--size-m);  }
}
@media (max-width:400px) {
	nav.anchors { font-size: 13px;  }
}

.deatils .detail { font-size: var(--size-xl); margin-bottom: 1.5em; }

.content-block { --margin: 60px; margin-bottom: var(--margin); }
.columns-block { display: flex; justify-content: space-between; flex-wrap: wrap; }
.columns-block .col { flex: 0 0 calc(50% - var(--padding)); }
.columns-block figure + .text { margin-top: 1em; }

.image-block.half figure { margin-left: auto; width: calc(50% - var(--padding)); }
.image-block.full figure { margin: 0 12%; }
.video-block .full { margin: 0 12%; }

.sections .content-block { --margin: 30px; }

@media (max-width:600px) {
	.content-block { --margin: 40px; }
	.sections .content-block { --margin: 20px; }
/*
	.columns-block .col { flex: 0 0 100%; }
	.columns-block .col:first-child { margin-bottom: 40px; }
*/
}

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.home-mobile { display: none; }

@media (max-width:1080px) {
	.home figure { flex-basis: 50%; }
	.home figure:nth-child(3) { display: none; }
	.home.images-1 figure { flex-basis: 100%; }
}

@media (max-width:800px) {
	.home-mobile { display: block; }
	.home.has-mobile { display: none; }
}

/* STUDIO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.studio article .sections section { margin-bottom: calc(var(--padding) * 4); }

.hover-block figure { display: none; }
.hover-block span img { display: none; }

@media (hover: hover) {
	.hover-block span[data-img]:hover { cursor: crosshair; opacity: 0.5; }
	.hover-block figure { z-index: -1; opacity: 0; position: fixed; top: 25vh; left: 0; bottom: 0; margin: 0; height: 50vh; width: 50vw; display: flex; align-items: center; justify-content: center; transition: opacity .1s ease-out; pointer-events: none; }
	.hover-block figure img { max-height: 300px; max-width: 300px; width: auto; }
	.hover-block figure.on { opacity: 1; z-index: 1; }
}

@media (max-width:1080px) {
	body.studio article .contact { display: flex; flex-wrap: wrap; justify-content: space-between; }
	body.studio article .contact.sticky { position: relative; top: auto; }
	body.studio article .contact .detail { flex: 0 0 100%; padding-left: calc(50% + 10px); box-sizing: border-box; }
	body.studio article .contact .detail:nth-child(1) { flex: 0 0 calc(50% - 10px); padding: 0; }
	body.studio article .contact .detail:nth-child(2) { flex: 0 0 calc(50% - 10px); padding: 0; }
	body.studio article .sections section { margin-bottom: calc(var(--padding) * 6); }
	.hover-block figure { display: none; }
}

@media (max-width:600px) {
	body.studio article .contact { display: block; }
	body.studio article .contact .detail { display: block; padding: 0; }
	body.studio article .contact .detail h2 { text-indent: var(--indent); }
}

/* INSIGHTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.insights-list article { margin-bottom: calc(var(--padding) * 4); }
.insights-list a { display: block; font-size: var(--size-s); }
.insights-list a img { transition: opacity 0.3s; }
.insights-list header { display: flex; align-items: center; margin: 10px 0 0; }
.insights-list header span { flex: 0 0 36%; }
.insights-list header h4 { font-size: var(--size-s); text-align: right; margin-left: auto; box-sizing: border-box; }
.insights-list article p { margin-top: 1em; }

@media (hover: hover) {
	.insights-list a:hover img { opacity: 0.8; }
}

@media (max-width:1300px) {
	.insights-list header { display: block; }
	.insights-list header h4 { text-align: left; padding: 0.6em 0 0; }
}
@media (max-width:1080px) {
	.insights-list .col-25 { flex-basis: 50%; }
	.insights-list .blank { display: none; }
	.insights-list article p { margin-top: 0.6em; }
	.insight .sticky { position: relative; top: auto; }
}
@media (max-width:600px) {
	.insights-list a { font-size: var(--size-xs); }
	.insights-list header h4 { font-size: var(--size-xs); }
}
@media (max-width:360px) {
	.insights-list .col-25 { flex-basis: 100%; }
}

/*login*/
form.login { margin-bottom: 20px; }
form.login label { display: block; color: var(--text-colour); font-family: var(--sans); font-size: var(--size-m); font-weight: normal; line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: 0.01em; }
form.login input { display: block; background: transparent; border: none; border-bottom: 2px dotted currentColor; color: var(--text-colour); font-family: var(--serif); font-size: var(--size-m); line-height: 30px; margin: 0 0 20px; padding: 5px 0; width: 260px; box-sizing: border-box; }
form.login button { background: transparent; border: none; color: var(--text-colour); font-family: var(--serif); font-size: var(--size-m); margin-bottom: 30px; padding: 0; }
form.login input:focus { outline: none; }

@media (hover: hover) {
	form.login input:hover { outline: none; }
}

/* PROJECTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.projects-list article { margin-bottom: calc(var(--padding) * 14); }
.projects-list a { display: block; font-size: var(--size-s); }
.projects-list a img { transition: opacity 0.3s; }
.projects-list header { display: flex; align-items: center; margin: 10px 0 0; }
.projects-list header span { flex: 0 0 40%; font-size: var(--size-m); }
.projects-list header h4 { text-align: right; margin-left: auto; box-sizing: border-box; }
.projects-list header h4 em { font-family: var(--serif); font-size: var(--size-caption); font-style: normal; }
.projects-list header p { margin-top: 20px; }

@media (hover: hover) {
	.projects-list a:hover img { opacity: 0.9; }
}

@media (max-width:1400px) {
	.projects-list header span { font-size: var(--size-s); }
}
@media (max-width:1080px) {
	.projects-list .col-25 { flex-basis: 50%; }
	.projects-list .blank { display: none; }
}
@media (max-width:600px) {
	.projects-list a { font-size: var(--size-xs); }
	.projects-list header span { font-size: var(--size-xs); }
	.projects-list header h4 { font-size: var(--size-xs); }
}
@media (max-width:360px) {
	.projects-list .col-25 { flex-basis: 100%; }
}

.project header { margin-bottom: calc(var(--padding) * 6); }
.project header .col-25.flex { justify-content: space-between; }
.project header .col-25.flex .half { flex: 0 0 calc(50% - var(--padding)); }
.project header .col-25.summary { margin-left: auto; }

.project section { margin-bottom: calc(var(--padding) * 10); }
.project section .gallery { --f-carousel-spacing: 0; --f-carousel-slide-width: 25%; padding: 0; }
.project section .gallery .f-carousel__slide { overflow-x: initial; overflow-y: initial; padding: var(--padding); }
.project section .gallery .col-25 { width: 25%; }
.project section .gallery .col-50 { width: 50%; }
.project section .gallery figcaption { display: flex; align-items: flex-start; }
.project section .gallery figcaption h4 { text-align: right; margin-left: auto; box-sizing: border-box; }
.project section .gallery figcaption span { font-family: var(--serif); flex: 0 0 20%; font-size: var(--size-s); }
.project section .gallery figcaption em { font-family: var(--serif); font-size: var(--size-caption); font-style: normal; }

@media (max-width:1080px) {
	.project section { margin-bottom: calc(var(--padding) * 8); }
	.projects-list .col-25 { flex-basis: 50%; }
	.project section .gallery { --f-carousel-slide-width: 50%; }
	.project section .gallery .empty { display: none; }
	.project section .gallery .col-25 { width: 50%; }
	.project section .gallery figcaption span { font-size: var(--size-xs); }
}

html.modal-active { overflow-y: hidden; }
#gallery-modal { background-color: rgb(var(--bg-colour)); display: none; padding: var(--padding); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 998; }
#gallery-modal .close-gallery { background: transparent; border: none; color: var(--dark); cursor: crosshair; padding: var(--padding); font-family: var(--serif); font-size: var(--size-xl); position: absolute; top: 0; right: 0; z-index: 9999; }
.project-gallery .f-carousel__slide { height: 85vh; overflow-y: hidden; }
.project-gallery figure { height: 100%; padding: var(--padding); }
.project-gallery figure.width-50 { width: 50%; }
.project-gallery figure.width-75 { width: 75%; }
.project-gallery figure.width-100 { width: 75%; }
.project-gallery figure img { height: auto; width: auto; max-height: 100%; max-width: 100%; }
.project-gallery figcaption { padding: 0 var(--padding); position: absolute; bottom: 0; right: 0; width: 25%; }
.project-gallery figcaption em { font-family: var(--serif); font-style: normal; padding-right: var(--padding); }
.project-gallery figcaption em span { display: none; }
.project-gallery figcaption p { display: inline; }
.gallery-nav { display: flex; height: 90%; width: 100%; position: absolute; top: 0; left: 0; flex-direction: row-reverse; }
.gallery-nav>div { height: 100%; flex: 0 0 50%; }

@media (max-width:1080px) {
	.project-gallery figure { height: auto; }
	.project-gallery figcaption { margin-top: var(--padding); position: relative; bottom: auto; right: auto; width: 100%; }
	.project-gallery figcaption em span { display: inline; }
}
@media (max-width:600px) {
	.project-gallery figure.width-50 { width: 100%; }
	.project-gallery figure.width-75 { width: 100%; }
}