:root{
  --sand:#ead9bb;
  --sand-2:#dec79d;
  --sand-3:#cbab78;
  --sand-4:#b58d58;
  --ink:#2b2016;
  --clay:#a4491f;
  --stone:#5a4a37;
  --soft:#cdb88f;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font:18px/1.6 "Hanken Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2{font-family:Newsreader,serif; font-weight:400; margin:0}

.top{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px var(--pad);
}
.logo{font:500 1.15rem Newsreader,serif; text-decoration:none; letter-spacing:.02em}
.top nav{display:flex; gap:28px}
.top nav a{
  font-size:.88rem; text-decoration:none; color:var(--stone);
  padding-bottom:2px; border-bottom:1px solid transparent; transition:.2s;
}
.top nav a:hover{color:var(--ink); border-bottom-color:var(--clay)}

.hero{padding:clamp(24px,6vw,72px) 0 0}
.wordmark{
  font-size:clamp(4.6rem,23vw,22rem);
  line-height:.82;
  letter-spacing:-.045em;
  padding:0 var(--pad);
  margin-left:-.04em;
}
.ridge{display:block; width:100%; height:clamp(110px,18vw,260px); margin-top:clamp(8px,2vw,24px)}
.ridge{margin-bottom:-1px}
.ridge .r3{fill:var(--sand-2)}
.ridge .r2{fill:var(--sand-3)}
.ridge .r1{fill:var(--sand-4)}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
  padding:28px var(--pad) clamp(56px,9vw,120px);
  background:var(--sand-4);
}
.lede{font:400 clamp(1.4rem,2.6vw,2.1rem)/1.25 Newsreader,serif; max-width:20em; margin:0}
.cue{font-size:.9rem; white-space:nowrap; border-bottom:1px solid var(--ink); padding-bottom:3px; text-decoration:none}
.cue:hover{color:var(--sand)}

.building{padding:clamp(48px,8vw,110px) var(--pad)}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:-.01em; margin-bottom:clamp(28px,5vw,56px)}
.rows{list-style:none; margin:0; padding:0}
.rows li{
  display:grid;
  grid-template-columns:70px minmax(140px,1.1fr) 2fr 150px;
  gap:24px; align-items:baseline;
  padding:30px 0; border-top:1px solid var(--soft);
}
.rows li:last-child{border-bottom:1px solid var(--soft)}
.num{font:400 1rem Newsreader,serif; color:var(--clay)}
.name{font:400 clamp(1.8rem,3vw,2.6rem)/1 Newsreader,serif}
.rows p{margin:0; color:var(--stone); max-width:34em}
.status{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-align:right; color:var(--ink)}

.pattern{display:block}

.origin{padding:clamp(56px,9vw,130px) var(--pad); max-width:980px}
.origin p{font:400 clamp(1.5rem,3vw,2.4rem)/1.3 Newsreader,serif; margin:0}

.contact{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px;
  padding:clamp(40px,6vw,80px) var(--pad) 36px;
  background:var(--ink); color:var(--sand);
}
.contact h2{margin-bottom:12px}
.mail{
  font:400 clamp(1.3rem,3vw,2rem) Newsreader,serif; text-decoration:none;
  border-bottom:1px solid var(--clay); padding-bottom:3px;
}
.mail:hover{color:var(--sand-3)}
.small{margin:0; font-size:.85rem; color:var(--soft)}

@media (max-width:820px){
  .top nav{gap:18px}
  .hero-foot{flex-direction:column; align-items:flex-start; gap:20px}
  .rows li{grid-template-columns:44px 1fr; row-gap:6px}
  .rows li p{grid-column:2}
  .status{grid-column:2; text-align:left; margin-top:6px}
}
@media (max-width:480px){
  .top nav a:first-child{display:none}
}