/* ==========================================================================
   Reconstruction of the "perspective" article layout.
   All metrics taken from the original computed styles / stylesheet.
   Photography and logotypes are replaced by placeholders of identical
   size, position and aspect ratio.
   ========================================================================== */

/* ---------- reset ---------- */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
html{font-size:100%;-webkit-text-size-adjust:100%;box-sizing:border-box;height:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
p{margin:1em 0}
dl,menu,ol,ul{margin:1em 0}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0}

*::selection{background:#f5eae5}
*::-moz-selection{background:#f5eae5}

/* ---------- type foundation ----------
   Original: NHaasGroteskTXW02-65Md / NeueHaasGroteskDisp Pro Blk (licensed).
   Substituted with the nearest freely available grotesque.               */
:root{
  --text: 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display: 'Archivo Black','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ink:#1A1819;
  --cream:#EDEAE3;
  --nav-bg:#F1EEE9;
  --brown:#502F1E;
  --muted:#787677;
  /* Image placeholders, toned from the page's own palette. The closing
     full-bleed image is a pale line drawing in the original, so its
     placeholder stays light and the black headline reads across it. */
  --ph:#cfc7ba;
  --ph-light:#e7e2d8;
}

body{
  font-size:14.4px;
  color:var(--ink);
  font-family:var(--text);
  font-weight:500;
  font-style:normal;
  font-kerning:normal;
  overflow-x:hidden;
  overflow-y:scroll;
  min-height:100%;
  background:var(--cream);
  overflow-anchor:none;
}

a{color:inherit;text-decoration:none}
a:focus{outline:none}
a.current_page{cursor:default;color:var(--muted)}
h1,h2,h3,h4,li{font-weight:normal;-webkit-font-smoothing:antialiased}
h1 a,h2 a,h3 a,h4 a,li a{text-decoration:none}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,li a:hover{color:var(--muted)}
h1 a.current_page:hover,h2 a.current_page:hover,h3 a.current_page:hover,
h4 a.current_page:hover,li a.current_page:hover{color:inherit}

html.js body{visibility:hidden}
html.js body.header_done.folded_done{visibility:visible}

/* ---------- structure ---------- */
#outer{width:100%;overflow:hidden}
.structural{width:100%;max-width:1440px;margin:0 auto;left:0;right:0}

.clearfix:after,
nav.site_wide ul.head:after,
nav.site_wide ul.head>li ul:after,
#perspective .introduction:after,
#perspective .introduction .summary:after,
#perspective .introduction .summary>div:after,
#perspective .introduction .blocks:after,
#perspective .images.blocks:after,
#perspective .conclusion:after,
footer .structural:after,
footer .studio_works ul:after,
footer .contact:after{content:"";display:table;clear:both}

/* ==========================================================================
   FOLDED — the isometric, layered headline effect
   ========================================================================== */
.folded{display:inline-block;margin:0;position:relative}
.folded .marker{position:absolute;height:0;bottom:90vh}
.folded>p>*,.folded>.line>*{padding:0 .1em}
.folded>p,.folded>.line{
  overflow:hidden !important;
  font-size:1em !important;
  margin:-1px 0 !important;
  white-space:nowrap !important;
  height:.8em !important;
}
.folded>p>*,.folded>.line>*{line-height:.8em !important;height:.8em !important;margin:0 !important}
.folded>p:nth-child(odd),.folded>.line:nth-child(odd){
  -webkit-transform:skew(60deg,-30deg) scaleY(.66667) !important;
  transform:skew(60deg,-30deg) scaleY(.66667) !important;
}
.folded>p:nth-child(even),.folded>.line:nth-child(even){
  -webkit-transform:skew(0deg,-30deg) scaleY(1.33333) !important;
  transform:skew(0deg,-30deg) scaleY(1.33333) !important;
}
.folded>p:nth-child(2),.folded>.line:nth-child(2){position:relative !important;left:.46em !important}
.folded>p:nth-child(3),.folded>.line:nth-child(3){position:relative !important;left:.92em !important}
.folded>p:nth-child(4),.folded>.line:nth-child(4){position:relative !important;left:1.38em !important}
.folded>p:nth-child(5),.folded>.line:nth-child(5){position:relative !important;left:1.84em !important}
.folded>p:nth-child(6),.folded>.line:nth-child(6){position:relative !important;left:2.3em !important}
.folded>p:nth-child(7),.folded>.line:nth-child(7){position:relative !important;left:2.76em !important}
.folded>p:nth-child(8),.folded>.line:nth-child(8){position:relative !important;left:3.22em !important}
.folded>p:nth-child(9),.folded>.line:nth-child(9){position:relative !important;left:3.68em !important}
.folded>p:nth-child(10),.folded>.line:nth-child(10){position:relative !important;left:4.14em !important}
.folded>p:nth-child(11),.folded>.line:nth-child(11){position:relative !important;left:4.6em !important}
.folded>p:nth-child(12),.folded>.line:nth-child(12){position:relative !important;left:5.06em !important}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
/* Every .85em context below carries line-height:1.17647. At 12.24px that is a
   14.4px line box, which is what the original's text face gives for `normal`;
   Inter's own normal is 15.2px there and would stretch every list and label. */
nav.site_wide{
  position:relative;
  width:100%;
  z-index:6;
  text-transform:uppercase;
  font-size:.85em;line-height:1.17647;
}
nav.site_wide .structural{height:180px}
nav.site_wide .structural:before{content:"";display:inline-block;vertical-align:bottom;height:100%}
nav.site_wide .inner{
  display:inline-block;
  vertical-align:bottom;
  width:100%;
  padding:0 4.16667%;
}
nav.site_wide h3{font-size:.965em;letter-spacing:.4px;font-weight:600;margin:0 0 1.25em}
nav.site_wide ul.head{padding:0;margin:0}
nav.site_wide ul.head>li{float:left;margin-bottom:3.62903%}
nav.site_wide ul.head>li ul{margin:0;padding:0}
nav.site_wide ul.head>li ul li{
  display:flex;
  min-height:30px;
  float:left;
  width:120px;
  padding-right:25px;
  /* set tight: Inter needs less air between caps than the original's face to
     read as solidly at this size */
  font-size:.965em;
  letter-spacing:.4px;
  font-weight:600;
}
nav.site_wide ul.head>li ul li>*{align-self:flex-end}
nav.site_wide ul.head>li.non_perspectives{float:right}
nav.site_wide ul.head>li.non_perspectives li{
  width:auto;
  padding-right:35px;
  align-content:flex-end;
  align-items:flex-end;
}
nav.site_wide ul.head>li.non_perspectives li:last-child{padding-right:0}
nav.site_wide ul.head>li.non_perspectives li .flex{align-self:flex-end}
nav.site_wide.main{margin-top:-1px;margin-bottom:-1px}

#main_header nav.top{color:var(--cream)}
body.perspective nav.main{background:var(--nav-bg);color:var(--brown)}

/* ==========================================================================
   HEADER / SPLASH
   ========================================================================== */
#main_header{
  position:relative;
  background:var(--ink);
  z-index:8;
  padding-bottom:8.41%; /* replaced at runtime by the opening sequence */
}

#main_header .splash{
  position:relative;
  color:var(--cream);
  margin-top:-1px;
}
#main_header .splash .structural{
  text-align:center;
  left:0;right:0;
  -webkit-transform:translate3d(0,0,0);
}
#main_header .splash .structural h1{
  font-size:10.35vw;
  text-align:left;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  -webkit-transform:translate3d(0,0,0);
  /* The original's own tracking, plus a correction: Archivo Black sets this
     wordmark 0.0197em per character wider than the display face it replaces,
     and left uncorrected the folded block grows tall enough to reach the menu. */
  letter-spacing:-6px;
  margin-top:-12%;
}
#main_header .splash .structural h1 .dark{color:var(--ink)}

/* ==========================================================================
   PERSPECTIVE
   ========================================================================== */
#perspective{
  color:#000;
  background:#fff;
  width:100%;
  position:relative;
  z-index:7;
}

/* --- introduction --- */
#perspective .introduction{
  position:relative;
  padding-top:5.90278%;
  color:var(--brown);
  background:linear-gradient(to bottom,#F1EEE9 0%,#F1EEE9 90%,#fff 100%);
}
#perspective.asb_sport .introduction{padding-bottom:33.33333%}
#perspective .introduction .structural{position:relative}

#perspective .introduction .summary{
  position:absolute;
  top:-2px;
  padding-left:4.16667%;
  left:0;
  width:66.66667%;
  font-size:.85em;line-height:1.17647;
  z-index:2;
}
#perspective .introduction .summary h3{font-size:1em;letter-spacing:1px}
#perspective .introduction .summary>div{float:left;width:40%}
#perspective .introduction .summary>div:first-child{width:60%}
#perspective .introduction .summary>div>div{float:left}
#perspective .introduction .summary>div>div.number{width:33.33333%}
#perspective .introduction .summary>div>div.name{width:66.66667%;padding-right:30%}
#perspective .introduction .summary>div>div.location{width:66.66667%;padding-right:30.55556%}
#perspective .introduction .summary>div>div.interviewee{width:33.33333%}
#perspective .introduction .summary h3,
#perspective .introduction .summary p{display:inline-block;margin:0;text-transform:uppercase}

#perspective.asb_sport .introduction .blocks .intro_image_one{float:left;width:38.40278%}
#perspective.asb_sport .introduction .blocks .description{
  float:right;
  width:28.95833%;
  padding-right:4.16667%;
  margin-bottom:10.06944%;
}
#perspective.asb_sport .introduction .blocks .description :first-child{margin-top:0}
#perspective.asb_sport .introduction .blocks .description p{font-size:.975em;line-height:1.35}
#perspective.asb_sport .introduction .blocks .interviewee_portrait{
  float:left;
  width:32.63889%;
  padding-left:11.59722%;
  padding-right:4.16667%;
}
#perspective.asb_sport .introduction .blocks .intro_image_two{
  float:left;
  width:32.63889%;
  padding-left:7.70833%;
  padding-right:4.16667%;
  margin-top:24.30556%;
}

/* --- title --- */
#perspective>.structural{position:relative}
#perspective h1{
  position:absolute;
  bottom:100%;
  color:#fff;
  font-size:8vw;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  z-index:2;
  letter-spacing:0;
}
#perspective.asb_sport h1{margin-bottom:12.5%}

/* --- image blocks --- */
#perspective .block{position:relative}
#perspective .image_wrapper{
  position:relative;
  width:100%;
  height:0;
  background:var(--ph);
  overflow:hidden;
}
#perspective .image_wrapper img,
#perspective .image_wrapper video{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* the clip fades in over its own still, so there is never a black frame */
#perspective .image_wrapper video{opacity:0;transition:opacity .9s linear}
#perspective .image_wrapper video.playing{opacity:1}
@media (prefers-reduced-motion:reduce){
  #perspective .image_wrapper video{display:none}
}
#perspective.asb_sport .images{margin-top:-29.30556%}
#perspective.asb_sport .images.blocks{padding-right:4.44444%}
#perspective.asb_sport .images.blocks .block{float:left;width:100%}
#perspective.asb_sport .images.blocks .block.image_one{padding-right:4.21512%;margin-bottom:7.26744%}
#perspective.asb_sport .images.blocks .block.image_two{width:61.77326%;padding-right:4.72384%;margin-bottom:9.81105%}
#perspective.asb_sport .images.blocks .block.image_three{width:38.22674%;padding-right:4.21512%;margin-bottom:9.81105%}
#perspective.asb_sport .images.blocks .block.image_four{padding-left:4.72384%;padding-right:4.21512%;margin-bottom:6.90407%}
#perspective.asb_sport .images.blocks .block.video_one{width:91.06105%;margin-left:4.72384%;margin-right:4.21512%;margin-bottom:9.81105%}
#perspective.asb_sport .images.blocks .block.image_five{padding-left:4.72384%;padding-right:13.51744%;width:57.26744%;margin-bottom:10.02907%}
#perspective.asb_sport .images.blocks .block.image_six{width:42.73256%;padding-left:8.50291%;padding-right:4.21512%;margin-bottom:8.72093%}
#perspective.asb_sport .images.blocks .block.image_seven{float:right;width:42.73256%;padding-right:4.21512%;margin-bottom:3.19767%}

/* --- conclusion --- */
#perspective .conclusion .image{float:left;width:100%;margin-right:-100%}
#perspective .conclusion .image .image_wrapper{background:var(--ph-light)}
#perspective .conclusion h2{
  float:right;
  color:var(--ink);
  font-size:5.5vw;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  position:relative;
  z-index:2;
}
#perspective .conclusion h2 .marker{bottom:100vh}

/* --- related --- */
#perspective .related{
  padding-left:4.16667%;
  padding-top:1.73611%;
  padding-bottom:17.70833%;
}
#perspective .related h4{margin:0;font-size:.85em;line-height:1.17647;text-transform:uppercase}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  position:relative;
  z-index:7;
  font-size:.85em;line-height:1.17647;
  padding-bottom:10vh;
}
body.perspective footer{background:#fff}
footer .studio_works{float:left;width:75%;padding:0 0 8.33333% 4.16667%}
footer .studio_works ul{margin:0;padding:0}
footer .studio_works li{text-transform:uppercase;margin:0;padding-right:6%;float:left}
footer .studio_works li:first-child{min-width:calc(204px + 6%)}
footer .studio_works li a:hover{color:var(--muted)}
footer .contact{width:75%;float:left;padding:0 0 3.47222% 4.16667%}
body.perspective footer .contact{margin-right:25%}
footer .contact p{text-transform:uppercase;margin:0;display:inline-block;padding-right:6%;float:left}
footer .contact p a:hover{text-decoration:underline}
footer .contact ul.social{float:left;margin:0;padding:0}
footer .contact ul.social li{list-style:none;text-transform:uppercase}
footer nav.next{float:right;width:25%;padding-right:8.33333%}
footer nav.next a{text-transform:uppercase}
body.perspective footer .next h4{margin:0}

/* ==========================================================================
   RESPONSIVE — thresholds copied from the original
   ========================================================================== */
@media screen and (min-width:1440px){
  #main_header .splash .structural h1{font-size:10.35em}
  #perspective h1{font-size:8em}
  #perspective .conclusion h2{font-size:5.5em}
}
@media screen and (max-width:1200px){
  #main_header .splash .structural h1{letter-spacing:-5px}
}
@media screen and (max-width:1060px){
  nav.site_wide ul.head>li.non_perspectives{float:right}
}
@media screen and (max-width:1024px){
  #main_header .splash .structural h1{letter-spacing:-4px}
}
@media screen and (max-width:768px){
  body.perspective nav.main{background:var(--ink);color:var(--nav-bg)}
  #main_header .splash .structural h1{letter-spacing:-3px;margin-top:-5%}
  #perspective .introduction{padding-top:3.90625%}
  #perspective.asb_sport .introduction{padding-bottom:39.0625%}
  #perspective .introduction .summary{position:static;width:80.07813%;margin:0 0 7.8125%}
  #perspective.asb_sport .introduction .blocks .description{width:53.38542%}
  #perspective.asb_sport .introduction .blocks .interviewee_portrait{
    padding-left:0;padding-right:0;margin-left:5.85938%;margin-top:5.85938%;
  }
  #perspective.asb_sport .introduction .blocks .intro_image_two{
    padding-left:0;padding-right:0;margin-top:5.85938%;
  }
  #perspective.asb_sport h1{font-size:9.5vw}
}
@media screen and (max-width:375px){
  #main_header .splash .structural h1{letter-spacing:-2px}
}
@media screen and (max-width:667px){
  body.perspective footer{position:relative;background:var(--cream);z-index:3}
  body.perspective footer .contact{margin-right:0}
  #perspective{background:var(--cream)}
  /* A phone gets the desktop page, narrowed: the same order of parts, the
     whole wordmark on screen, and every link still reachable. */
  #main_header{padding-bottom:0}
  nav.site_wide .structural{height:auto}
  nav.site_wide .inner{padding:8.5% 6.66667% 6.66667%}
  nav.site_wide h3{margin:0 0 1.25em}
  nav.site_wide ul.head>li{float:none;width:100%;margin-bottom:0}
  nav.site_wide ul.head>li:after{content:"";display:table;clear:both}
  nav.site_wide ul.head>li.non_perspectives{float:none;margin-top:1.75em}
  nav.site_wide ul.head>li ul li,
  nav.site_wide ul.head>li.non_perspectives li{
    width:50%;
    padding-right:6.66667%;
    min-height:0;
    margin:0 0 1em;
  }
  nav.site_wide ul.head>li.non_perspectives li:last-child{padding-right:6.66667%}
  /* the wordmark runs the full width of the screen, as it does on a desktop */
  #main_header .splash .structural h1{font-size:11.2vw;margin-top:12vw}
  #content nav.main{background:var(--ink);color:var(--nav-bg)}
  #perspective .introduction .summary{position:relative;width:100%;padding:0 6.66667%}
  #perspective .introduction .summary>div,
  #perspective .introduction .summary>div:first-child{width:100%}
  #perspective .introduction{padding-top:8%}
  #perspective .introduction .summary{margin-bottom:10.66667%}
  #perspective .introduction .summary>div>div{margin-bottom:2em}
  #perspective .introduction .summary>div>div:nth-child(2n+2){text-align:right}
  #perspective .introduction .summary>div>div.number,
  #perspective .introduction .summary>div>div.name,
  #perspective .introduction .summary>div>div.location,
  #perspective .introduction .summary>div>div.interviewee{width:50%;padding:0}
  /* The phone keeps the desktop's rhythm rather than stacking everything at
     one width: an opener across the full page, a wide-and-narrow pair, a
     picture pushed off the left edge, and a smaller one closing on the right.
     Only the proportions are re-cut for the narrower page. The rules are
     written without a variant prefix so every article gets the same rhythm. */
  #perspective .images.blocks{padding-right:0 !important}
  #perspective .images.blocks .block{float:left;padding:0 !important;margin:0 0 9% !important}
  #perspective .images.blocks .block.image_one{width:100% !important;margin-left:0 !important}
  #perspective .images.blocks .block.image_two{
    width:62% !important;padding-right:2.66667% !important;margin-left:0 !important;
  }
  #perspective .images.blocks .block.image_three{width:38% !important;margin-left:0 !important}
  #perspective .images.blocks .block.image_four{width:86.66667% !important;margin-left:13.33333% !important}
  #perspective .images.blocks .block.video_one{width:100% !important;margin-left:0 !important}
  #perspective .images.blocks .block.video_two{width:86.66667% !important;margin-left:13.33333% !important}
  #perspective .images.blocks .block.image_five{
    width:57% !important;padding-right:2.66667% !important;margin-left:0 !important;
  }
  #perspective .images.blocks .block.image_six{width:43% !important;margin-left:0 !important}
  #perspective .images.blocks .block.image_seven{
    float:right;width:70.66667% !important;margin-left:0 !important;
  }

  /* the opening trio: a full-width picture, the text, then a portrait and a
     second picture set against opposite edges */
  #perspective .introduction .blocks .block{margin-top:0 !important;margin-bottom:0 !important}
  #perspective .introduction .blocks .intro_image_one{
    float:none;width:100% !important;margin:0 0 9% !important;padding:0 !important;
  }
  #perspective .introduction .blocks .description,
  #perspective .introduction .blocks .description_two{
    float:none;width:100% !important;padding:0 6.66667% !important;margin:0 0 10% !important;
  }
  /* the portrait and the picture that follows it read as one pair, side by
     side as they are on a desktop, rather than two blocks of different widths
     stacked against the same edge */
  #perspective .introduction .blocks .interviewee_portrait{
    float:left;width:58% !important;
    margin:0 0 9% !important;padding:0 2.66667% 0 0 !important;
  }
  #perspective .introduction .blocks .intro_image_two{
    float:left;width:42% !important;margin:0 0 9% !important;padding:0 !important;
  }
  #perspective .conclusion{overflow:hidden;margin-bottom:13.33333%}
  #perspective .conclusion h2{float:left}
  #perspective .related{padding:0 6.66667% 9.33333%}
  /* the footer reads as one column, on the same gutter as the article */
  footer .studio_works{width:100%;padding:0 6.66667%}
  footer .studio_works li{display:block;float:none;padding:0 0 1.75em}
  footer .studio_works li:first-child{min-width:0}
  footer nav.next{float:none;width:100%;padding:0 6.66667%;margin-bottom:2.5em}
  footer .contact{width:100%;padding:0 6.66667% 8%}
  footer .contact p{display:block;float:none;width:100%;padding-right:0;margin:0 0 1.75em}
  footer .contact>:first-child{margin-bottom:1.75em}
  footer .contact ul.social{float:none;width:100%;margin:0}
  footer .contact ul.social li{padding:0;margin:0 0 .75em}
}
@media screen and (max-width:589.09091px){
  #perspective .conclusion h2{font-size:2.25em}
}

/* ==========================================================================
   PROJECT INDEX
   A second template that shares the header, navigation and footer with the
   article, and adds a standing text block above the navigation, a category
   list revealed on demand, and the twelve-tile grid.
   ========================================================================== */
body.home.index{background:var(--cream)}
body.home.index #outer{padding-top:0}
body.home.index #main_header{position:relative;color:var(--cream)}
body.home.index #main_header>.blurb .structural{z-index:2}
body.home.index #main_header>.blurb .structural p{
  font-family:var(--text);
  font-weight:700;
  letter-spacing:1px;
  margin:0;
  padding:4.16667% 4.16667% 3.81944% 4.16667%;
  font-size:2.5vw;
  line-height:1.08;
  -webkit-font-smoothing:antialiased;
}
body.home.index #main_header nav.top .structural{height:140px}
body.home.index nav.main{background:var(--nav-bg);color:var(--brown)}
body.home.index footer{background:#fff}
body.home.index footer .contact{margin-right:25%}
body.home.index footer .next h4{margin:0}

/* ---- shared aspect box ---- */
.aspect_maintainer{position:relative;width:100%;height:0;overflow:hidden;background:var(--ph)}
.aspect_maintainer img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ---- the category list ---- */
nav.projects{background:#F6F6F6;font-size:.85em;line-height:1.17647;width:100%;position:relative;z-index:7}
nav.projects .controls{
  display:none;
  background:#F6F6F6;
  color:var(--ink);
  font-size:.85em;line-height:1.17647;
  padding:30px 0;
}
body.project.index nav.projects .controls{display:block}
body.project.index nav.projects .controls .all{display:none}
nav.projects .controls .structural{display:flex;justify-content:flex-end;padding:0 4.16667%}
nav.projects .controls a,
nav.projects .controls button{
  display:block;
  color:inherit;
  border:none;
  background:transparent;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  font-family:var(--text);
  font-weight:500;
  cursor:pointer;
  margin:0 0 2em;
  padding:0;
  text-align:left;
  font-size:1.15em;
  /* two lines measure 27.2px in the original; Inter's normal would give 28.8 */
  line-height:1.13667;
  letter-spacing:1px;
}
nav.projects .controls a:focus,nav.projects .controls button:focus{outline:none}
nav.projects .controls a:last-child,nav.projects .controls button:last-child{margin-bottom:0}
nav.projects .controls button:hover{color:var(--muted)}

nav.projects .categories{padding:16.66667% 26.38889% 0 4.16667%;display:none}
nav.projects .categories:after{content:"";display:table;clear:both}
nav.projects .categories .cat{
  display:inline-block;
  vertical-align:top;
  width:20%;
  padding-right:4%;
  margin-top:-10%;
}
nav.projects .categories .cat h1{font-size:1em;text-transform:uppercase;margin:0 0 21%}
nav.projects .categories .cat ul{position:relative;margin:0;padding:0 0 112%;pointer-events:none}
nav.projects .categories .cat ul li{
  list-style:none;
  margin:.5em 0;
  font-size:.9em;
  line-height:1;
  text-transform:uppercase;
  pointer-events:all;
}
nav.projects .categories .cat ul aside{
  position:absolute;
  bottom:0;left:0;
  width:108.5%;
  max-width:155px;
  display:none;
  z-index:3;
}
nav.projects .categories .cat ul aside .image{background:#F6F6F6}
nav.projects .categories .cat ul aside img{opacity:.75;filter:grayscale(100%)}
nav.projects .categories .cat ul a:hover aside{display:block}
nav.projects.open .controls .by_category{color:var(--muted)}
nav.projects.open .categories{display:block}

/* ---- the grid ---- */
#project{width:100%;position:relative;z-index:7}
#project.index{background:#fff}
#project.index .articles{position:relative;z-index:2;padding:4.86111% 4.16667% 0}
#project.index .articles:after{content:"";display:table;clear:both}
#project.index .articles article{float:left;margin-bottom:5.30303%}
#project.index .articles article a{display:block}
#project.index .articles article a h2{
  font-size:1em;
  text-transform:uppercase;
  margin:.75em 0;
  max-width:25%;
}
#project.index .articles article a .image{opacity:.85}
#project.index .articles article a img{
  transition:filter .75s ease;
  filter:grayscale(100%);
}
#project.index .articles article a:hover img{filter:grayscale(0%)}
#project.index .articles article a:hover h2{color:var(--muted)}

#project.index .articles article:nth-child(12n+1){width:50%;padding-right:.37879%}
#project.index .articles article:nth-child(12n+2){width:31.06061%;padding-right:.37879%}
#project.index .articles article:nth-child(12n+3){width:18.93939%}
#project.index .articles article:nth-child(12n+4){width:54.92424%;padding-right:.37879%;clear:left}
#project.index .articles article:nth-child(12n+5){width:17.80303%;padding-right:.37879%}
#project.index .articles article:nth-child(12n+6){width:27.27273%}
#project.index .articles article:nth-child(12n+7){width:13.63636%;padding-right:.37879%;clear:left}
#project.index .articles article:nth-child(12n+8){width:54.92424%;padding-right:.37879%}
#project.index .articles article:nth-child(12n+9){width:31.43939%}
#project.index .articles article:nth-child(12n+10){width:54.92424%;padding-right:.37879%;clear:left}
#project.index .articles article:nth-child(12n+11){margin-top:7.72727%;width:17.80303%;padding-right:.37879%}
#project.index .articles article:nth-child(12n+12){margin-top:7.72727%;width:27.27273%}

@media screen and (min-width:1440px){
  body.home.index #main_header>.blurb .structural p{font-size:2.5em}
}
@media screen and (max-width:864px){
  body.home.index #main_header>.blurb .structural p{font-size:1.5em}
}
@media screen and (max-width:768px){
  body.home.index nav.main{background:var(--ink);color:var(--nav-bg)}
  nav.projects .categories{
    background:#fff;color:var(--ink);
    padding:5.20833% 6.51042% 0;
    columns:2;
  }
  nav.projects .categories .cat{
    width:100%;margin-top:3.90625%;float:none;display:block;break-inside:avoid;
  }
  nav.projects .categories .cat h1{margin-bottom:3.90625%}
  nav.projects .categories .cat ul{padding-bottom:2.60417%}
  nav.projects .categories .cat ul aside{bottom:auto;top:100%}
  #project.index .articles article a h2{font-size:.9em}
}
@media screen and (max-width:667px){
  body.home.index #main_header>.blurb .structural p{
    margin:0;padding:9.33333% 6.66667% 6.66667%;z-index:2;position:relative;
  }
  body.home.index #main_header nav.top .structural{height:auto}
  body.home.index footer{position:relative;z-index:3}
  body.home.index footer .contact{margin-right:0}
  nav.projects{position:relative;background:var(--nav-bg);color:var(--brown);margin-top:-1px}
  nav.projects .controls{display:block;background:#fff}
  nav.projects .controls .structural{display:block;padding:0 6.66667%}
  nav.projects .categories{columns:1;padding:6.66667%}
  nav.projects .categories .cat{width:100%;margin-top:0}
  nav.projects .categories .cat h1{margin-bottom:8%}
  nav.projects .categories .cat ul{margin-bottom:5.33333%}
  nav.projects .categories .cat ul aside .image{background:var(--nav-bg)}
  nav.projects .categories .cat ul aside img{filter:grayscale(0%)}
  #project{overflow:hidden}
  #project.index .articles{margin-top:0;margin-bottom:53.33333%}
  /* the caption gets the width of its tile rather than the desktop's
     quarter-column, so a project name reads on one line */
  #project.index .articles article a h2{font-size:1em;max-width:100%;margin:.85em 0 0}
  #project.index .articles article a img{filter:grayscale(0%)}
  /* full-width plates interleaved with pairs, so the page has a rhythm rather
     than one tile under another all the way down */
  #project.index .articles article{margin-bottom:9%;padding:0}
  #project.index .articles article:nth-child(12n+1),
  #project.index .articles article:nth-child(12n+4),
  #project.index .articles article:nth-child(12n+7),
  #project.index .articles article:nth-child(12n+10){width:100%;clear:left}
  #project.index .articles article:nth-child(12n+2),
  #project.index .articles article:nth-child(12n+11){width:62%;clear:left;padding-right:2.66667%}
  #project.index .articles article:nth-child(12n+3),
  #project.index .articles article:nth-child(12n+12){width:38%}
  #project.index .articles article:nth-child(12n+5){width:45%;clear:left;padding-right:2.66667%}
  #project.index .articles article:nth-child(12n+6){width:55%}
  #project.index .articles article:nth-child(12n+8){width:55%;clear:left;padding-right:2.66667%}
  #project.index .articles article:nth-child(12n+9){width:45%}
}

/* ---- the headline that arrives in the footer ---- */
footer h2{pointer-events:none}
body.project.index footer h2.logo.before{
  text-transform:uppercase;
  margin:-10% 0 9.02778% 0;
  float:right;
  font-size:9vw;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:-6px;
}
@media screen and (min-width:1440px){
  body.project.index footer h2.logo.before{font-size:9em}
}
@media screen and (max-width:1200px){
  body.project.index footer h2.logo.before{letter-spacing:-5px}
}
@media screen and (max-width:1024px){
  body.project.index footer h2.logo.before{letter-spacing:-4px}
}
@media screen and (max-width:880px){
  body.project.index footer h2.logo.before{font-size:5.5em}
}
@media screen and (max-width:768px){
  body.project.index footer h2.logo.before{letter-spacing:-3px}
}
@media screen and (max-width:667px){
  /* the footer wordmark stays, as it does on a desktop; it just scales */
  body.project.index footer h2.logo.before{font-size:11vw;margin:-6% 0 6% 0}
}

/* ==========================================================================
   STUDIO
   A page with no opening sequence: the header steps aside on wide screens
   and the article begins straight under the navigation. It brings three
   pieces of behaviour of its own - a carousel, blocks that unfold, and a
   set of tabs.
   ========================================================================== */
body.studio.index{background:#F2F2F2;color:var(--ink)}
body.studio.index #main_header{display:none}
body.studio.index nav.main{background:var(--ink);color:var(--nav-bg)}
body.studio.index footer{display:none}
body.studio.index footer .structural{overflow:hidden}
body.studio.index footer h1{
  display:none;
  color:var(--ink);
  text-transform:uppercase;
  font-size:11vw;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-6px;
  left:-3.25em;
  margin:0;
}
#studio h1{
  text-transform:uppercase;
  margin:0;
  float:right;
  font-size:11vw;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-6px;
}

#studio{width:100%}
#studio .structural:after{content:"";display:table;clear:both}

/* ---- contact bar ---- */
#studio .contact{
  font-size:.85em;line-height:1.17647;
  background:var(--ink);
  color:var(--nav-bg);
  text-align:right;
  margin:-1px 0;
}
#studio .contact .inner{padding:0 4.16667% 1.04167% 0}
#studio .contact p{
  margin:0;
  display:inline-block;
  vertical-align:top;
  width:100px;
  padding-right:15px;
  text-align:left;
}
#studio .contact p:first-child{width:auto}
#studio .contact p:nth-child(2){width:calc(4.16667% / 2 + 140px)}
#studio .contact p:nth-child(3){width:calc(4.16667% / 2 + 100px)}
#studio .contact p a:hover{text-decoration:underline}
#studio .contact ul{display:block;padding:0;margin:2em 0 0}
#studio .contact ul:after{content:"";display:table;clear:both}
#studio .contact ul li{list-style:none;float:right;padding-right:15px}

/* ---- hero carousel ---- */
#studio .hero{background:var(--ink)}
#studio .hero .carousel{position:relative;float:right;width:78.81944%}
#studio .hero .carousel .prev,
#studio .hero .carousel .next{
  position:absolute;
  display:block;
  top:0;bottom:0;
  width:10%;
  z-index:4;
  cursor:pointer;
  opacity:.8;
  background-color:transparent;
  background-repeat:no-repeat;
  background-size:24px 42px;
  background-position:center;
  border:0;
  padding:0;
}
#studio .hero .carousel .prev:hover,
#studio .hero .carousel .next:hover{opacity:1}
#studio .hero .carousel .prev{
  left:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 42'%3E%3Cpath d='M20 3 L5 21 L20 39' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
}
#studio .hero .carousel .next{
  right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 42'%3E%3Cpath d='M4 3 L19 21 L4 39' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
}

/* ---- the standing intro ---- */
#studio .blurb,#studio .tabs{
  width:70.48611%;
  margin-left:21.18056%;
  margin-right:8.33333%;
}
#studio .blurb{padding:5.20833% 0 7.98611%}
#studio .blurb p{
  font-family:var(--text);
  font-weight:700;
  font-size:1.2vw;
  width:66.66667%;
  margin-left:33.33333%;
  padding:0 12.80788% 0 2.21675%;
}
#studio .blurb p:first-child{margin-top:0}

/* ---- three standing columns ---- */
#studio .social-good{
  width:70.48611%;
  margin-left:21.18056%;
  margin-right:8.33333%;
  padding:5.20833% 0 0;
}
#studio .social-good .just-column,
#studio .social-good .bcorp-column,
#studio .social-good .third-column{
  width:33.33333%;
  padding-bottom:8.867%;
  display:inline-block;
  vertical-align:top;
}
#studio .social-good > div:nth-child(3n+1){padding-right:45px}
#studio .social-good > div:nth-child(3n+2){padding:0 22.5px}
#studio .social-good > div:nth-child(3n+3){padding-left:45px}
#studio .social-good .mark{
  display:block;
  margin-top:31px;
  margin-bottom:29px;
  height:35px;
}
#studio .social-good .mark.tall{height:70px;margin-top:0;margin-bottom:25px}
#studio .social-good h2{
  font-family:var(--text);
  font-weight:700;
  font-size:1.1vw;
}
#studio .social-good p{max-width:25em}
#studio .social-good p:first-child{margin-top:0}
#studio .social-good a:hover{text-decoration:underline}
#studio .charitable-column-section h2{margin-top:95px}

/* ---- blocks that unfold ---- */
#studio .truncated{display:none}
#studio .truncate-wrapper.expanded .show{display:none}
#studio .truncate-wrapper.expanded .truncated{display:block}
#studio .charitable-column-section .show,
#studio .livingbuilding-column-section .show{display:block}
#studio .livingbuilding-column-section{margin-top:50px}
#studio .show,#studio .hide{cursor:pointer;text-decoration:underline}

/* ---- the wide picture block ---- */
#studio .livingbuilding-hidden.column{
  width:70.48611%;
  margin-left:21.18056%;
  margin-right:8.33333%;
  padding:5.20833% 0 7.98611%;
}
#studio .livingbuilding-left{
  width:66.66667%;
  float:left;
  margin-top:1em;
  display:inline-block;
  vertical-align:top;
  padding:0;
}
#studio .livingbuilding-left .image{opacity:.8}
#studio .livingbuilding-left img{filter:grayscale(100%)}
#studio .livingbuilding-right{
  width:33.33333%;
  display:inline-block;
  vertical-align:top;
  padding-bottom:8.867%;
}

/* ---- tabs ---- */
#studio .tabs:after{content:"";display:table;clear:both}
#studio .tabs .toggles{float:left;width:100%}
#studio .tabs .toggles:after{content:"";display:table;clear:both}
#studio .tabs h2{
  position:relative;
  text-transform:uppercase;
  font-size:.95em;
  letter-spacing:.5px;
  width:25%;
  margin:0;
  float:left;
  cursor:pointer;
  z-index:2;
}
#studio .tabs h2:nth-child(3n+1){padding-right:33.75px}
#studio .tabs h2:nth-child(3n+2){padding:0 16.875px}
#studio .tabs h2:nth-child(3n+3){padding:0 16.875px}
#studio .tabs h2:nth-child(3n+4){padding-left:33.75px}
#studio .tabs h2.current_tab{opacity:.5}
#studio .tabs h2:hover{color:var(--muted)}
#studio .tabs .tab{
  font-size:.95em;
  letter-spacing:.5px;
  width:66.66667%;
  padding-top:4.4335%;
  float:left;
  display:none;
}
#studio .tabs .tab.open{display:block}
#studio .tabs .tab article{margin:0 0 2.5em}
#studio .tabs .tab article h3{margin:0;text-transform:uppercase;font-size:1em}
#studio .tabs .tab article p{margin:.35em 0 0;max-width:32em}

@media screen and (min-width:1440px){
  #studio .blurb p{font-size:1.2em}
  #studio .social-good h2{font-size:1.1em}
}
@media screen and (max-width:1309.09091px){
  #studio .social-good h2{font-size:1em}
}
@media screen and (max-width:768px){
  body.studio.index{background:#fff}
  #studio .contact{display:none}
  #studio .hero{background:transparent}
  #studio .hero .carousel{width:100%}
  #studio .blurb,#studio .tabs{width:100%;margin-left:0;margin-right:0}
  #studio .blurb{padding-left:22.78646%;padding-right:5.85938%}
  #studio .social-good{width:100%;margin-left:0;margin-right:0;padding-left:22.78646%;padding-right:5.85938%}
  #studio h1,body.studio.index footer h1{letter-spacing:-3px}
  #studio .tabs .tab{width:50%;padding-top:0}
  #studio .blurb p{font-size:1em}
  #studio .social-good{width:100%;margin-left:0;margin-right:0}
  #studio .social-good .just-column,
  #studio .social-good .bcorp-column,
  #studio .social-good .third-column{display:block;width:50%;margin-bottom:20%}
  #studio .social-good > div:nth-child(2n+1){padding:0 33.75px 0 0}
  #studio .social-good > div:nth-child(2n+2){padding:0}
  #studio .livingbuilding-hidden.column{width:100%;margin-left:0;margin-right:0}
  #studio .tabs{padding-left:7.16146%;padding-right:7.16146%}
  #studio .tabs .toggles{width:50%}
  #studio .tabs h2{width:100%;margin:0 0 2em}
  #studio .tabs h2:nth-child(3n+1),
  #studio .tabs h2:nth-child(3n+2),
  #studio .tabs h2:nth-child(3n+3),
  #studio .tabs h2:nth-child(3n+4){padding:0}
}
@media screen and (max-width:720px){
  #studio h1,body.studio.index footer h1{font-size:10.4vw}
}
@media screen and (max-width:667px){
  body.studio.index #main_header{display:flex;flex-direction:column}
  body.studio.index footer{display:block}
  #studio .structural{overflow:hidden}
  #studio .blurb{padding-left:6.66667%;padding-right:6.66667%}
  #studio .blurb p{width:100%;margin-left:0;padding:0}
  #studio .social-good .just-column,
  #studio .social-good .bcorp-column,
  #studio .social-good .third-column{width:100%;margin-bottom:20%}
  #studio .social-good > div:nth-child(2n+1),
  #studio .social-good > div:nth-child(2n+2){padding:0}
  #studio .tabs{padding-left:6.66667%;padding-right:6.66667%}
  #studio .tabs .toggles{width:100%}
  #studio .social-good{padding-left:6.66667%;padding-right:6.66667%}
  #studio .livingbuilding-hidden.column{padding-left:6.66667%;padding-right:6.66667%}
  #studio .livingbuilding-left,
  #studio .livingbuilding-right{width:100%;margin-bottom:20%;padding:0}
  #studio .tabs .tab{width:100%;margin-top:10%}
  /* two people to a row; flex keeps the rows level even though the notes
     under each name run to different lengths */
  #studio .tabs .tab.open{display:flex;flex-wrap:wrap}
  #studio .tabs .tab article{width:50%;margin-bottom:2.5em}
  #studio .tabs .tab article:nth-child(2n+1){padding-right:5.33333%;padding-left:0}
  #studio .tabs .tab article:nth-child(2n+2){padding-left:5.33333%;padding-right:0}
  #studio h1{color:var(--ink);margin:0 0 1em;right:0}
  #studio h1,body.studio.index footer h1{letter-spacing:-1px}
  body.studio.index footer h1{display:inline-block;left:0}
  body.studio.index footer .contact{width:100%}
  body.studio.index footer nav.next{display:none}
}

/* ---- carousel mechanics, shared ---- */
.carousel .items{position:relative}
.carousel .items>*{width:100%;visibility:hidden}
.carousel .items>*.current{z-index:3;visibility:visible}
.carousel.relative .items{white-space:nowrap}
.carousel.relative .items>*{
  display:inline-block;
  vertical-align:top;
  position:relative;
  white-space:normal;
}
.carousel.relative .items>*:first-child~*{margin-left:-100%}
.carousel .items>*.sliding{
  transition:transform .75s ease,visibility .75s ease;
}
.carousel .items>*.out_left{visibility:visible;transform:translateX(-100%)}
.carousel .items>*.out_right{visibility:visible;transform:translateX(100%)}
.carousel .items>*.in_from_left{visibility:visible;transform:translateX(-100%)}
.carousel .items>*.in_from_right{visibility:visible;transform:translateX(100%)}

/* ==========================================================================
   NEWS
   A filter column standing beside a two-up feed. The header keeps its full
   opening sequence, as the article page does.
   ========================================================================== */
body.news{background:#F2F2F2;color:#000}
body.news.index nav.main{background:var(--ink);color:var(--nav-bg)}

#news{width:100%}
#news.index{background:#F2F2F2}
#news.index .articles{position:relative;z-index:2;padding:4.86111% 4.16667% 0}
#news.index .articles:after{content:"";display:table;clear:both}

#news.index .articles .categories-container{float:left;width:34%;padding-right:5.30303%}
#news.index .articles .categories-container .category{
  display:block;
  margin-bottom:50px;
  opacity:.5;
  cursor:pointer;
}
#news.index .articles .categories-container .category:hover,
#news.index .articles .categories-container .category.active{opacity:1}
#news.index .articles .categories-container .category h2{font-size:1.5em;
  /* 24.8px line box, as the original's face gives at 21.6px */
  line-height:1.14815}

#news.index .articles .articles-container{float:right;width:66%}
#news.index .articles .articles-container article{
  float:left;
  margin-bottom:5.30303%;
  width:50%;
  padding-right:5.30303%;
}
#news.index .articles .articles-container article:nth-child(2n-1){clear:both}
#news.index .articles .articles-container article a{display:block}
#news.index .articles .articles-container article a h2{
  font-size:1.5em;
  margin:.75em 0 .25em 0;
  max-width:100%;
}
#news.index .articles .articles-container article a .date{font-size:.9em;margin-bottom:2em}
#news.index .articles .articles-container article a .summary{margin:.75em 0}
#news.index .articles .articles-container article a .image{opacity:.85}
#news.index .articles .articles-container article a img{
  transition:filter .75s ease;
  filter:grayscale(100%);
}
#news.index .articles .articles-container article a:hover img{filter:grayscale(0%)}
#news.index .articles .articles-container article a:hover h2{color:var(--muted)}

/* the arriving headline is shared with the project index */
body.news.index footer h2.logo.before{
  text-transform:uppercase;
  margin:-10% 0 9.02778% 0;
  float:right;
  font-size:9vw;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:-6px;
}
@media screen and (min-width:1440px){
  body.news.index footer h2.logo.before{font-size:9em}
}
@media screen and (max-width:1200px){
  body.news.index footer h2.logo.before{letter-spacing:-5px}
}
@media screen and (max-width:1024px){
  body.news.index footer h2.logo.before{letter-spacing:-4px}
}
@media screen and (max-width:880px){
  body.news.index footer h2.logo.before{font-size:5.5em}
}
@media screen and (max-width:768px){
  body.news.index footer h2.logo.before{letter-spacing:-3px}
  #news.index .articles .articles-container article a h2{font-size:.9em}
}
@media screen and (max-width:667px){
  /* the footer wordmark stays, as it does on a desktop; it just scales */
  body.news.index footer h2.logo.before{font-size:11vw;margin:-6% 0 6% 0}
  #news{overflow:hidden}
  #news.index .articles{margin-top:0;margin-bottom:53.33333%}
  /* the filters sit in a row, as they read on a desktop, instead of a
     column of headings a screen tall */
  #news.index .articles .categories-container{float:none;width:100%;padding:0 0 8%}
  #news.index .articles .categories-container .category{
    display:inline-block;margin:0 1.25em 1em 0;
  }
  #news.index .articles .categories-container .category h2{font-size:1.15em;margin:0}
  #news.index .articles .articles-container{width:100%;padding:0}
  /* a lead item across the page, then the rest two to a row, as they are on
     a desktop — an index rather than one long column of pictures */
  #news.index .articles .articles-container article{
    width:50%;margin-bottom:9%;
  }
  #news.index .articles .articles-container article:nth-child(2n){clear:both;padding:0 3% 0 0}
  #news.index .articles .articles-container article:nth-child(2n+1){clear:none;padding:0 0 0 3%}
  #news.index .articles .articles-container article:first-child{width:100%;padding:0;clear:both}
  #news.index .articles .articles-container article:not(:first-child) .summary{display:none}
  #news.index .articles .articles-container article a h2{font-size:1em}
  #news.index .articles .articles-container article a img{filter:grayscale(0%)}
}

/* the feed clears on its own odd children; filtering re-marks them */
#news.index .articles .articles-container article.first_in_row{clear:both}
#news.index .articles .articles-container article[hidden]{display:none}

/* ==========================================================================
   LIVING BUILDING
   A narrow measure of running text, then one card per building: a year, a
   target, a picture, and a timeline ruled off against a heavy left edge.
   ========================================================================== */
body.living-building.index{background:#F2F2F2;color:var(--ink)}
body.living-building.index #main_header{display:none}
body.living-building.index nav.main{background:var(--ink);color:var(--nav-bg)}
body.living-building.index footer{display:none}
body.living-building.index footer h1{
  display:none;
  color:var(--ink);
  text-transform:uppercase;
  font-size:11vw;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-6px;
  left:-3.25em;
  margin:0;
}
#living-building h1.logo{
  text-transform:uppercase;
  margin:0;
  float:right;
  font-size:11vw;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-6px;
}
@media screen and (max-width:720px){
  #living-building h1.logo,body.living-building.index footer h1{font-size:10.4vw}
}
@media screen and (max-width:667px){
  #living-building h1.logo,
  body.living-building.index footer h1{letter-spacing:-1px}
}

#living-building{width:100%}
#living-building .structural:after{content:"";display:table;clear:both}
#living-building .contain{
  margin-left:21.18056%;
  margin-right:21.18056%;
  padding:5.20833% 0 0;
}
#living-building .contain>h1{font-size:2em;
  /* 33.6px line box, as the original's face gives at 28.8px */
  line-height:1.16667}
#living-building .blurb{margin-bottom:120px}
#living-building .blurb p{
  font-family:var(--text);
  font-weight:700;
  font-size:1.2vw;
  max-width:40em;
}
#living-building .blurb p:first-child{margin-top:0}

#living-building .buildings .buildings-title{font-size:2vw;margin-bottom:2em}
#living-building .buildings .building{
  border-left:20px solid;
  padding-left:30px;
  padding-bottom:150px;
  margin-bottom:30px;
}
#living-building .buildings .building>.year{
  font-size:3vw;
  line-height:.8em;
  margin:0 0 1em;
  font-family:var(--text);
  font-weight:700;
}
#living-building .buildings .building .title,
#living-building .buildings .building .target{
  font-size:2vw;
  margin:0;
  font-family:var(--text);
  font-weight:700;
}
#living-building .buildings .building .hero{margin-top:1em;margin-bottom:2em}
#living-building .buildings .building .stages{border-left:5px solid;padding-left:20px}
#living-building .buildings .building .stages .stage{display:flex;margin-bottom:20px}
#living-building .buildings .building .stages .stage :nth-child(1){width:5em}
#living-building .buildings .building .stages .stage :nth-child(2){width:7.5em;color:#929292}
#living-building .buildings .building .stages .stage :nth-child(3){width:calc(100% - 20em)}
#living-building .buildings .building .view-project{font-size:1.2vw;text-decoration:none}
#living-building .buildings .building .view-project:hover{text-decoration:underline}

@media screen and (min-width:1440px){
  #living-building .blurb p{font-size:1.2em}
  #living-building .buildings .buildings-title{font-size:2em}
  #living-building .buildings .building>.year{font-size:3em}
  #living-building .buildings .building .title,
  #living-building .buildings .building .target{font-size:2em}
  #living-building .buildings .building .view-project{font-size:1.2em}
}
@media screen and (max-width:1440px){
  #living-building .buildings .buildings-title{font-size:2em}
  #living-building .buildings .building>.year{font-size:3em}
  #living-building .buildings .building .title,
  #living-building .buildings .building .target{font-size:2em}
}
@media screen and (max-width:1200px){
  #living-building .blurb p{font-size:1em}
  #living-building .buildings .building .view-project{font-size:1em}
}
@media screen and (max-width:768px){
  body.living-building.index{background:#fff}
  #living-building .contain{
    padding-left:22.78646%;
    padding-right:22.78646%;
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}
@media screen and (max-width:667px){
  body.living-building.index #main_header{display:flex;flex-direction:column}
  /* the card keeps its ruled edge, but at phone scale: a thinner rule, less
     dead space under it, and the picture breaking out to the right edge so
     the block is not one more centred rectangle */
  #living-building .buildings .building{
    border-left-width:8px;
    padding-left:16px;
    padding-bottom:14%;
    margin-bottom:12%;
  }
  #living-building .buildings .building .hero{
    margin-right:-6.66667%;margin-top:1.25em;margin-bottom:1.75em;
  }
  #living-building .buildings .building .stages{padding-left:14px}
  body.living-building.index footer{display:block}
  body.living-building.index footer .structural{overflow:hidden}
  body.living-building.index footer .contact{width:100%}
  body.living-building.index footer nav.next{display:none}
  body.living-building.index footer h1{display:inline-block;left:0}
  #living-building h1.logo{color:var(--ink);margin:0 0 1em;right:0}
  #living-building .structural{overflow:hidden}
  #living-building .contain{padding-left:6.66667%;padding-right:6.66667%}
  #living-building .buildings .building{border-left:10px solid}
  #living-building .buildings .building .title,
  #living-building .buildings .building .target{font-size:1.5em;margin:0 0 1em}
  #living-building .buildings .building .title span:not(.dash),
  #living-building .buildings .building .target span:not(.dash){display:block}
  #living-building .buildings .building .title .dash,
  #living-building .buildings .building .target .dash{display:none}
  #living-building .buildings .building .stages .stage{flex-wrap:wrap}
  #living-building .buildings .building .stages .stage :nth-child(3){width:100%}
}

/* ==========================================================================
   ARTICLE ARRANGEMENTS
   Every article shares the same machinery - the folded headings, the pinned
   opening, the parallax, the container and its gutters - and differs only in
   how its pictures are placed. Five arrangements follow. Each row adds up to
   the full measure, and each keeps to the same gutter as the first article,
   so the six read as one series.
   ========================================================================== */

/* shared: the grid box, its gutter, and the default full-measure block */
#perspective.rivermouth .images.blocks,
#perspective.hillside .images.blocks,
#perspective.central .images.blocks,
#perspective.kopuru .images.blocks,
#perspective.harbour .images.blocks{padding-right:4.44444%}
#perspective.rivermouth .images.blocks .block,
#perspective.hillside .images.blocks .block,
#perspective.central .images.blocks .block,
#perspective.kopuru .images.blocks .block,
#perspective.harbour .images.blocks .block{float:left;width:100%}

/* shared: the running text of an article */
#perspective.rivermouth .introduction .blocks .description p,
#perspective.hillside .introduction .blocks .description p,
#perspective.hillside .introduction .blocks .description_two p,
#perspective.central .introduction .blocks .description p,
#perspective.kopuru .introduction .blocks .description p,
#perspective.kopuru .introduction .blocks .description_two p,
#perspective.harbour .introduction .blocks .description p{
  font-size:.975em;
  line-height:1.35;
}
#perspective.rivermouth .introduction .blocks .description :first-child,
#perspective.hillside .introduction .blocks .description :first-child,
#perspective.central .introduction .blocks .description :first-child,
#perspective.kopuru .introduction .blocks .description :first-child,
#perspective.harbour .introduction .blocks .description :first-child{margin-top:0}

/* ---------------------------------------------------------- rivermouth ---
   A house. Wide plate, a facing pair, then a long horizontal to close.     */
#perspective.rivermouth .introduction{padding-bottom:30%}
#perspective.rivermouth .images{margin-top:-14%}
#perspective.rivermouth h1{margin-bottom:10%}
#perspective.rivermouth .introduction .blocks .interviewee_portrait{
  float:left;width:44%;margin-right:20%;
}
#perspective.rivermouth .introduction .blocks .description{
  float:right;width:32%;padding-right:4.16667%;margin-bottom:10%;
}
#perspective.rivermouth .images.blocks .block.image_one{
  padding-right:4.21512%;margin-bottom:8%;
}
#perspective.rivermouth .images.blocks .block.image_two{
  width:58%;padding-right:4.21512%;margin-bottom:9%;
}
#perspective.rivermouth .images.blocks .block.image_three{
  width:42%;padding-right:4.21512%;margin-bottom:9%;
}
#perspective.rivermouth .images.blocks .block.video_one{
  width:91%;margin-left:4.5%;margin-right:4.5%;margin-bottom:9%;
}
#perspective.rivermouth .images.blocks .block.image_four{
  width:42%;padding-left:4.5%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.rivermouth .images.blocks .block.image_five{
  width:58%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.rivermouth .images.blocks .block.image_six{
  padding-left:18%;padding-right:18%;margin-bottom:4%;
}

/* ------------------------------------------------------------ hillside ---
   A retreat. Everything sits off centre, and one upright is pushed low.    */
#perspective.hillside .introduction{padding-bottom:34%}
#perspective.hillside .images{margin-top:-20%}
#perspective.hillside h1{margin-bottom:8%}
#perspective.hillside .introduction .blocks .intro_image_one{
  float:left;width:26%;margin-left:4.16667%;margin-right:36%;
}
#perspective.hillside .introduction .blocks .description{
  float:left;width:28%;margin-top:8%;margin-bottom:4%;
}
#perspective.hillside .introduction .blocks .interviewee_portrait{
  float:right;width:36%;padding-right:4.16667%;margin-top:6%;
}
#perspective.hillside .introduction .blocks .description_two{
  float:left;width:26%;margin-left:4.16667%;margin-top:4%;
}
#perspective.hillside .images.blocks .block.image_one{
  width:66%;padding-right:4.21512%;margin-bottom:9%;
}
#perspective.hillside .images.blocks .block.image_two{
  width:34%;padding-right:4.21512%;margin-top:14%;margin-bottom:9%;
}
#perspective.hillside .images.blocks .block.image_three{
  padding-right:4.21512%;margin-bottom:9%;
}
#perspective.hillside .images.blocks .block.image_four{
  width:46%;padding-left:9%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.hillside .images.blocks .block.image_five{
  width:54%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.hillside .images.blocks .block.video_one{
  width:82%;margin-right:18%;margin-bottom:6%;
}
#perspective.hillside .images.blocks .block.image_six{
  padding-left:35%;padding-right:8%;margin-bottom:4%;
}

/* ------------------------------------------------------------- central ---
   A university building. Regular, dense, three rows of two.                */
#perspective.central .introduction{padding-bottom:38%}
#perspective.central .images{margin-top:-24%}
#perspective.central h1{margin-bottom:12.5%}
#perspective.central .introduction .blocks .interviewee_portrait{
  float:left;width:42%;margin-right:6%;
}
#perspective.central .introduction .blocks .intro_image_one{
  float:left;width:26%;padding-right:4.16667%;margin-top:10%;
}
#perspective.central .introduction .blocks .description{
  float:right;width:26%;padding-right:4.16667%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.image_one{
  padding-right:4.21512%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.image_two{
  width:56%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.image_three{
  width:44%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.image_four{
  width:44%;padding-left:4.5%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.image_five{
  width:56%;padding-right:4.21512%;margin-bottom:8%;
}
#perspective.central .images.blocks .block.video_one{
  width:91%;margin-left:4.5%;margin-right:4.5%;margin-bottom:4%;
}

/* -------------------------------------------------------------- kopuru ---
   A small public building. One broad plate, then a stepped run of uprights. */
#perspective.kopuru .introduction{padding-bottom:36%}
#perspective.kopuru .images{margin-top:-26%}
#perspective.kopuru h1{margin-bottom:16%}
#perspective.kopuru .introduction .blocks .intro_image_one{
  float:left;width:56%;padding-left:4.16667%;padding-right:14%;margin-bottom:4%;
}
#perspective.kopuru .introduction .blocks .interviewee_portrait{
  float:right;width:40%;padding-right:4.16667%;margin-bottom:4%;
}
#perspective.kopuru .introduction .blocks .description{
  float:left;width:56%;padding-left:8%;padding-right:14%;margin-bottom:8%;
}
#perspective.kopuru .introduction .blocks .description_two{
  clear:both;float:right;width:40%;padding-right:16%;
}
#perspective.kopuru .images.blocks .block.image_one{
  padding-right:4.21512%;margin-bottom:9%;
}
#perspective.kopuru .images.blocks .block.image_two{
  width:34%;padding-left:9%;padding-right:4.21512%;margin-bottom:7%;
}
#perspective.kopuru .images.blocks .block.image_three{
  width:33%;padding-right:4.21512%;margin-top:6%;margin-bottom:7%;
}
#perspective.kopuru .images.blocks .block.image_four{
  width:33%;padding-right:4.21512%;margin-top:12%;margin-bottom:7%;
}
#perspective.kopuru .images.blocks .block.video_one{
  width:95%;margin-right:5%;margin-bottom:7%;
}
#perspective.kopuru .images.blocks .block.image_five{
  width:42%;padding-left:8.5%;padding-right:4.21512%;margin-bottom:6%;
}
#perspective.kopuru .images.blocks .block.image_six{
  width:58%;padding-right:4.21512%;margin-bottom:6%;
}

/* ------------------------------------------------------------- harbour ---
   A campus. The arrangement of the first article, which this one follows.  */
#perspective.harbour .introduction{padding-bottom:33.33333%}
#perspective.harbour .images{margin-top:-29.30556%}
#perspective.harbour h1{margin-bottom:12.5%}
#perspective.harbour .introduction .blocks .intro_image_one{float:left;width:38.40278%}
#perspective.harbour .introduction .blocks .description{
  float:right;width:28.95833%;padding-right:4.16667%;margin-bottom:10.06944%;
}
#perspective.harbour .introduction .blocks .interviewee_portrait{
  float:left;width:32.63889%;padding-left:11.59722%;padding-right:4.16667%;
}
#perspective.harbour .introduction .blocks .intro_image_two{
  float:left;width:32.63889%;padding-left:7.70833%;padding-right:4.16667%;margin-top:24.30556%;
}
#perspective.harbour .images.blocks .block.image_one{
  padding-right:4.21512%;margin-bottom:7.26744%;
}
#perspective.harbour .images.blocks .block.image_two{
  width:61.77326%;padding-right:4.72384%;margin-bottom:9.81105%;
}
#perspective.harbour .images.blocks .block.image_three{
  width:38.22674%;padding-right:4.21512%;margin-bottom:9.81105%;
}
#perspective.harbour .images.blocks .block.image_four{
  padding-left:4.72384%;padding-right:4.21512%;margin-bottom:6.90407%;
}
#perspective.harbour .images.blocks .block.video_one{
  width:91.06105%;margin-left:4.72384%;margin-right:4.21512%;margin-bottom:9.81105%;
}
#perspective.harbour .images.blocks .block.image_five{
  padding-left:4.72384%;padding-right:13.51744%;width:57.26744%;margin-bottom:10.02907%;
}
#perspective.harbour .images.blocks .block.image_six{
  width:42.73256%;padding-left:8.50291%;padding-right:4.21512%;margin-bottom:8.72093%;
}

/* ---------------------------------------------------------- responsive --- */
@media screen and (max-width:768px){
  #perspective.rivermouth .introduction,
  #perspective.hillside .introduction,
  #perspective.central .introduction,
  #perspective.kopuru .introduction,
  #perspective.harbour .introduction{padding-bottom:39.0625%}
  #perspective.rivermouth h1,
  #perspective.hillside h1,
  #perspective.central h1,
  #perspective.kopuru h1,
  #perspective.harbour h1{font-size:9.5vw}
}
@media screen and (max-width:667px){
  #perspective.rivermouth .introduction .blocks .block,
  #perspective.hillside .introduction .blocks .block,
  #perspective.central .introduction .blocks .block,
  #perspective.kopuru .introduction .blocks .block,
  #perspective.harbour .introduction .blocks .block{
    float:none;
    width:94.66667%;
    margin:5.33333% 0 0 5.33333%;
    padding:0;
  }
  #perspective.rivermouth .introduction .blocks .description,
  #perspective.hillside .introduction .blocks .description,
  #perspective.hillside .introduction .blocks .description_two,
  #perspective.central .introduction .blocks .description,
  #perspective.kopuru .introduction .blocks .description,
  #perspective.kopuru .introduction .blocks .description_two,
  #perspective.harbour .introduction .blocks .description{
    float:none;
    width:100%;
    margin-left:0;
    padding:0 5.33333%;
  }
}

/* ==========================================================================
   PROJECT PAGE
   One project at a time. The title sits large and right, the hero takes two
   thirds of the measure with the description beside it, and the pictures
   below run in groups: a narrow column and a wide one, alternating.
   ========================================================================== */
body.project.detail{background:#fff;color:var(--ink)}
body.project.detail #main_header{display:none}
#project.detail nav.related{
  position:relative;
  z-index:8;
  float:left;
  width:40.55556%;
  padding-left:4.16667%;
  margin-bottom:-9.02778%;
  font-size:.85em;line-height:1.17647;
}
#project.detail nav.related h4{font-size:1em;text-transform:uppercase;margin:0 0 8.58779%}
#project.detail nav.related ul{position:relative;width:45%;margin:0;padding:0}
#project.detail nav.related ul li{
  list-style:none;
  margin:.5em 0;
  font-size:.9em;
  line-height:1;
  text-transform:uppercase;
}
#project.detail nav.related ul aside{
  position:absolute;
  top:0;
  margin-top:-19.08397%;
  left:100%;
  width:74.21544%;
  max-width:175px;
  display:none;
}
#project.detail nav.related ul aside .image{opacity:.75}
#project.detail nav.related ul a:hover aside{display:block}
body.project.detail nav.main{background:var(--nav-bg);color:var(--brown)}

#project.detail{width:100%;position:relative;z-index:7;background:#fff}
#project.detail:after{content:"";display:table;clear:both}
#project.detail .transform_wrapper{position:relative;z-index:2}

#project.detail .introduction{
  position:relative;
  padding-top:10.76389%;
  padding-left:4.16667%;
}
#project.detail .introduction:after{content:"";display:table;clear:both}
#project.detail .introduction .summary{
  font-size:.85em;line-height:1.17647;
  position:absolute;
  top:0;left:0;
  width:95.65217%;
  margin:11.23188% 4.34783% 0;
  z-index:2;
}
#project.detail .introduction .summary:after{content:"";display:table;clear:both}
#project.detail .introduction .summary>div{
  width:13.4058%;
  padding-right:2.17391%;
  float:left;
}
#project.detail .introduction .summary>div h3{
  font-size:1em;
  display:inline-block;
  margin:0;
  text-transform:uppercase;
}
#project.detail .introduction h1{
  position:relative;
  float:right;
  max-width:70%;
  margin:-8% 0 0;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:0;
  font-size:8em;
}
/* the title steps down as it gets longer, so it always clears the measure */
#project.detail .introduction h1.long{font-size:6.5em}
#project.detail .introduction h1.longer{font-size:5.25em}

#project.detail .hero{
  clear:both;
  float:left;
  width:65.97222%;
  padding-left:4.16667%;
  margin-right:4.86111%;
}
#project.detail .description{
  float:left;
  width:25.69444%;
  font-size:.9em;
  line-height:1.35;
}
#project.detail .description :first-child{margin-top:0}
#project.detail .description h3{
  font-size:1em;
  text-transform:uppercase;
  margin:2em 0 .5em;
}
#project.detail .description ul{margin:0;padding:0;list-style:none}
#project.detail .description li{margin:0 0 .25em}

#project.detail .media-items{
  float:left;
  width:100%;
  margin-top:1.04167%;
  padding:0 2.08333%;
}
#project.detail .media-items:after{content:"";display:table;clear:both}
#project.detail .media-items .group{float:left;padding:2.17391%}
#project.detail .media-items .group.narrow{width:37.97101%}
#project.detail .media-items .group.wide{width:62.02899%}
#project.detail .media-items .group .media-item + .media-item{margin-top:1.52672%}
#project.detail .media-items .group.pair:after{content:"";display:table;clear:both}
#project.detail .media-items .group.pair .media-item{float:left;width:49.53271%;margin-top:0}
#project.detail .media-items .group.pair .media-item:first-child{margin-right:.93458%}

body.project.detail footer nav.next .image{width:37.97101%;margin-top:1em}
body.project.detail footer nav.next .image img{
  transition:filter .75s ease;
  filter:grayscale(100%);
}
body.project.detail footer nav.next a:hover .image img{filter:grayscale(0%)}
body.project.detail footer h2.logo.before{
  text-transform:uppercase;
  margin:-10% 0 9.02778% 0;
  float:right;
  font-size:9vw;
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:-6px;
}
@media screen and (min-width:1440px){
  body.project.detail footer h2.logo.before{font-size:9em}
}
@media screen and (max-width:880px){
  body.project.detail footer h2.logo.before{font-size:5.5em}
}
@media screen and (max-width:768px){
  #project.detail .introduction h1{font-size:6em}
  #project.detail .introduction h1.long{font-size:5em}
  #project.detail .introduction h1.longer{font-size:4em}
  #project.detail .hero{width:100%;margin-right:0}
  #project.detail .description{width:100%;padding:2em 4.16667% 0 4.16667%}
  #project.detail .media-items .group.narrow,
  #project.detail .media-items .group.wide{width:50%}
}
@media screen and (max-width:667px){
  body.project.detail footer h2.logo.before{font-size:10.4vw;letter-spacing:-1px}
  body.project.detail #main_header{display:flex;flex-direction:column}
  body.project.detail nav.projects .controls{display:block}
  #project.detail nav.related{padding-left:6.66667%;font-size:.75em;margin-bottom:0}
  #project.detail nav.related h4{font-size:.9em;margin:4em 0}
  #project.detail nav.related ul{width:100%}
  #project.detail nav.related ul li{margin:1em 0}
  #project.detail .introduction{overflow:hidden;margin:0 0 -3.5em;padding-left:0}
  #project.detail .introduction .summary{
    position:relative;font-size:.75em;width:86.66667%;margin-left:6.66667%;
  }
  #project.detail .introduction .summary>div{width:50%;margin-bottom:4em}
  #project.detail .introduction .summary>div:last-child{width:50%;float:left}
  #project.detail .introduction .summary>div:last-child h3{width:100%}
  /* the project title is not pulled up over the caption here: on a phone
     the section clips, and the first line of the title would be lost */
  #project.detail .introduction h1{font-size:12vw;margin:0 0 6% !important;max-width:100%}
  #project.detail .introduction h1.long{font-size:11vw}
  #project.detail .introduction h1.longer{font-size:10vw}
  #project.detail .hero{width:100%;padding:0;margin:0 0 13.33333%;overflow:hidden}
  #project.detail .hero .image{width:140%;margin-left:-20%}
  #project.detail .description{width:100%;padding:0 6.66667%}
  /* the media keeps a rhythm here too: full-width plates, narrower ones set
     against alternating edges, and pairs that stay side by side */
  #project.detail .media-items{padding:4% 0 0}
  #project.detail .media-items .group{padding:0;margin-bottom:8%}
  #project.detail .media-items .group.wide{width:100%;float:left}
  #project.detail .media-items .group.narrow{width:73.33333%;float:left}
  #project.detail .media-items .group.narrow:nth-of-type(2n){float:right}
  #project.detail .media-items .group.pair .media-item{width:49.5%;float:left;margin:0}
  #project.detail .media-items .group.pair .media-item:first-child{margin-right:1%}
  #project.detail .media-items .group .media-item + .media-item{margin-top:3%}
}

@media screen and (max-width:667px){
  /* On a desktop the title is lifted out of the flow and lies across the top
     of the gallery, white over the dark plate behind it. A phone has no such
     plate: the block above is cream, and white type would vanish into it. So
     here the title stands in the flow instead, in ink, as the heading the
     picture sequence deserves. */
  #perspective h1{
    position:static;
    display:block;
    float:none;
    clear:both;
    color:var(--ink);
    z-index:auto;
    margin:0 0 9.33333% !important;
  }
  /* the pictures are pulled up under the title on a desktop, where it lies
     over them; here it stands above them, so the pull comes off */
  #perspective .images{margin-top:0 !important}
}

/* ==========================================================================
   PHOTOGRAPHY
   The three pictures that open an article are warmed to the page's own
   range, so the opening reads as one piece before the gallery below moves
   into full colour.
   ========================================================================== */
#perspective .introduction .blocks img{
  filter:sepia(.52) saturate(.85) contrast(.96) brightness(1.04);
}
/* the closing picture carries a black headline across it */
#perspective .conclusion .image .aspect_maintainer:after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(to right,rgba(243,240,233,.86) 0%,rgba(243,240,233,.5) 55%,rgba(243,240,233,.2) 100%);
}
#perspective .conclusion .image img{filter:grayscale(35%) brightness(1.06)}