@font-face{font-family:"Big Shoulders";src:url(/fonts/big-shoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Big Shoulders Stencil";src:url(/fonts/big-shoulders-stencil.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --galvanized:#DDE2E1;
  --zinc:#BFC7C7;
  --plate:#F4F6F5;
  --mill:#1B2529;
  --mill-soft:#46535A;
  --primer:#9A3218;
  --gutter:clamp(16px,3.4vw,48px);
  --display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --stencil:"Big Shoulders Stencil","Big Shoulders","Arial Narrow",Impact,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--galvanized);color:var(--mill);font:400 1.0625rem/1.55 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--primer);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--plate)}
.skip{position:absolute;left:-999px;top:0;background:var(--plate);padding:.6em 1em;z-index:10}
.skip:focus{left:8px;top:8px}

/* An I-beam seen from the side: two flanges and a web. */
.beam{height:20px;border-block:6px solid var(--mill);background:var(--zinc);margin:0}

.preview{background:var(--mill);color:var(--plate);font-size:.875rem;padding:.45rem var(--gutter)}

.site-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 2rem;padding:1.1rem var(--gutter)}
.mark{font:900 1.75rem/1 var(--display);text-decoration:none;letter-spacing:.005em;white-space:nowrap}
.site-nav{display:flex;gap:clamp(1rem,2.4vw,2.25rem)}
.site-nav a{font-weight:500;text-decoration:none;padding:.5rem 0;border-bottom:3px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{border-bottom-color:var(--primer)}

/* Home: hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);padding-left:var(--gutter);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding-block:clamp(1.25rem,2.6vw,2.5rem) 1.5rem}
h1{font:900 clamp(3rem,5.3vw,5.4rem)/.94 var(--display);margin:0;letter-spacing:-.004em}
.lede{font-size:clamp(1.0625rem,1.3vw,1.25rem);margin:1.25rem 0 1.75rem;max-width:34ch}
.hero-photo{margin:0;min-height:clamp(320px,62vh,720px);position:relative}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.where{font-size:.9375rem;margin:0;color:var(--mill-soft)}
.where a{white-space:nowrap}

.button{display:inline-block;background:var(--primer);color:var(--plate);font-weight:700;text-decoration:none;padding:.85em 1.3em;border:0;font-family:inherit;font-size:1rem;cursor:pointer}
.button:hover{background:var(--mill)}
.on-dark .button:hover{background:var(--plate);color:var(--mill)}

h2{font:900 clamp(2.2rem,3.8vw,3.6rem)/1 var(--display);margin:0 0 .6em}
h3{font:900 clamp(1.7rem,2.4vw,2.3rem)/1.05 var(--display);margin:0 0 .4em}

/* Home: the two trades */
.trades{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);padding:clamp(3rem,6vw,6rem) var(--gutter)}
.trade figure{margin:0 0 1.25rem}
.trade:nth-child(2){margin-top:clamp(0rem,9vw,9rem)}
.plain-list{list-style:none;margin:0;padding:0;columns:2;column-gap:1.5rem}
.plain-list li{break-inside:avoid;padding:.15rem 0}

/* Home: project schedule. The memorable part of the site. */
.schedule-wrap{background:var(--plate);padding:clamp(2.5rem,5vw,5rem) var(--gutter)}
.schedule-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 2rem;margin-bottom:1.25rem}
.schedule-head h2{margin:0}
.schedule-head p{margin:0;color:var(--mill-soft)}
.schedule-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.schedule{list-style:none;margin:0;padding:0;border-top:6px solid var(--mill)}
.schedule li{border-bottom:1px solid var(--zinc)}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem 2rem;padding:1rem 0 1.1rem;text-decoration:none}
.row-name{font:800 clamp(2.5rem,5.4vw,5.1rem)/.98 var(--stencil);transition:color .12s linear}
.row:hover .row-name,.row:focus-visible .row-name{color:var(--primer)}
.row-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 2rem;font-size:.9375rem;max-width:44rem}
.row-credits span span{display:block;color:var(--mill-soft);font-size:.8125rem}
.row-img{display:none}
.schedule-photo{position:sticky;top:1.25rem;margin:0}
.schedule-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--zinc);transition:opacity .16s linear}
.schedule-photo figcaption{font-size:.875rem;color:var(--mill-soft);margin-top:.5rem}

/* Call to action band */
.send{background:var(--mill);color:var(--plate);padding:clamp(3rem,6vw,5.5rem) var(--gutter);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem 4rem;align-items:end}
.send h2{margin:0;font-size:clamp(2.8rem,6vw,5.6rem);line-height:.95}
.send p{margin-bottom:1.25rem}
.send a:not(.button){font-weight:500}

footer{padding:1.75rem var(--gutter) 2.25rem;font-size:.9375rem;display:flex;flex-wrap:wrap;gap:.75rem 3rem;justify-content:space-between}
footer p{margin:0}

/* Project page */
.page-head{padding:clamp(1.5rem,4vw,3.5rem) var(--gutter) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{margin-bottom:.3em}
.page-head .project-title{font-family:var(--stencil);font-weight:800;font-size:clamp(3rem,8.4vw,8.4rem)}
.back{display:inline-block;margin-bottom:1rem;font-weight:500}
.credits{display:flex;flex-wrap:wrap;gap:.75rem 4rem;margin:0}
.credits div{min-width:12rem}
.credits dt{color:var(--mill-soft);font-size:.875rem}
.credits dd{margin:0;font-weight:500;font-size:1.125rem}
.gap-note{background:var(--plate);border-left:6px solid var(--primer);padding:1rem 1.25rem;margin:1.75rem 0 0;max-width:46rem}
.gap-note strong{display:block}
.gap-note p{margin:0}
.gallery{--row:clamp(260px,32vw,480px);display:flex;flex-wrap:wrap;gap:clamp(.75rem,1.4vw,1.25rem);padding:0 var(--gutter) clamp(3rem,5vw,4.5rem)}
.gallery::after{content:"";flex-grow:20}
.gallery figure{margin:0;flex:var(--ratio) 1 calc(var(--ratio)*var(--row));max-width:var(--natural)}
.gallery img{width:100%;background:var(--zinc)}
.pager{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem var(--gutter);background:var(--plate)}
.pager a{font:900 clamp(1.4rem,2.6vw,2.2rem)/1.05 var(--display);text-decoration:none}
.pager a:hover{color:var(--primer)}
.pager a:last-child{text-align:right}
.pager span{display:block;font:400 .875rem/1.4 var(--body);color:var(--mill-soft)}

/* Process: a real sequence, drawn as a structural grid line with numbered bubbles */
.steps{list-style:none;margin:0;padding:clamp(1rem,3vw,2.5rem) var(--gutter) clamp(3rem,6vw,5rem)}
.step{display:grid;grid-template-columns:clamp(3.25rem,6vw,5rem) minmax(0,5fr) minmax(0,4fr);gap:0 clamp(1.25rem,3vw,3rem);position:relative;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.step::before{content:"";position:absolute;left:calc(clamp(3.25rem,6vw,5rem)/2 - 1px);top:0;bottom:0;width:2px;background:var(--mill)}
.step:last-child::before{display:none}
.bubble{position:relative;width:clamp(3.25rem,6vw,5rem);aspect-ratio:1;border:3px solid var(--mill);border-radius:50%;background:var(--galvanized);display:grid;place-items:center;font:900 clamp(1.6rem,2.8vw,2.5rem)/1 var(--display)}
.step-body{padding-top:.5rem}
.step figure{margin:.5rem 0 0}
.step figcaption,.photo-needed{font-size:.875rem;color:var(--mill-soft)}
.photo-needed{display:grid;place-items:center;text-align:center;aspect-ratio:3/2;border:2px dashed var(--mill-soft);padding:1rem;margin-top:.5rem}
.tag{background:var(--plate);color:var(--primer);font-size:.8125rem;font-weight:700;padding:.1em .45em;white-space:nowrap}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);padding:0 var(--gutter) clamp(3rem,6vw,5rem)}
.contact address{font-style:normal;font-size:1.25rem;line-height:1.45}
.contact .big-phone{display:block;font:900 clamp(2.4rem,5vw,4.4rem)/1 var(--display);text-decoration:none;margin:0 0 1.25rem}
.contact .big-phone:hover{color:var(--primer)}
form{background:var(--plate);padding:clamp(1.25rem,3vw,2.25rem)}
label{display:block;font-weight:500;margin:0 0 .3rem}
.field{margin-bottom:1.1rem}
.hint{display:block;font-weight:400;font-size:.875rem;color:var(--mill-soft)}
input,textarea{width:100%;font:inherit;color:inherit;background:#fff;border:2px solid var(--mill-soft);padding:.6em .7em;border-radius:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.tight{margin-top:1.25rem}
.building{margin:1.75rem 0 0}
.form-title{font-size:clamp(1.9rem,3vw,2.6rem)}
.form-status{margin:1rem 0 0;font-weight:500;min-height:1.5em}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-left:0}
  .hero-copy{padding-inline:var(--gutter);gap:1.5rem;padding-bottom:1.5rem}
  .hero-photo{min-height:0;aspect-ratio:3/2}
  .hero-photo img{position:static}
  .trades{grid-template-columns:minmax(0,1fr)}
  .trade:nth-child(2){margin-top:0}
  .schedule-grid{grid-template-columns:minmax(0,1fr)}
  .schedule-photo{display:none}
  .row-img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--zinc);margin:.35rem 0 .5rem}
  .send{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:clamp(3.25rem,6vw,5rem) minmax(0,1fr)}
  .step figure,.step .photo-needed{grid-column:2;margin-top:1rem}
  .contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .gallery figure{flex-basis:100%}
  .gallery::after{display:none}
  .two{grid-template-columns:minmax(0,1fr)}
  .row-credits{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.1rem 1rem}
  .plain-list{columns:1}
  .pager a{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}