/* Siouxland K & K Construction Inc. — Sioux Falls, SD
   Archetype E — long-form story. Prose column, no navigation bar,
   numbers set in monospace because the numbers are the point. */

:root{
  --ink:#24201b;
  --paper:#f5f0e6;
  --band:#ebe4d6;
  --rule:#d6cdba;
  --muted:#56504a;
  --ox:#8c2018;
  --ox-lt:#e8836a;
  --serif:Georgia,"Iowa Old Style","Times New Roman",Times,serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.68;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:36rem;
  margin:0 auto;
  padding:0 1.25rem;
}

a{color:var(--ox)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ox);
  outline-offset:2px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--ink);
  color:var(--paper);
  padding:.7rem 1rem;
  font-family:var(--mono);
  font-size:.85rem;
  z-index:10;
}
.skip:focus{left:0}

/* ---------- masthead ---------- */

.masthead{
  border-top:9px solid var(--ox);
  padding:1.4rem 0 2rem;
}

.ident{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.mark{width:38px;height:38px;flex:none;display:block}
.ident-name{
  margin:0;
  font-size:.94rem;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.01em;
}
.ident-name span{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:.25rem;
}

h1{
  font-size:1.72rem;
  line-height:1.22;
  font-weight:400;
  letter-spacing:-.012em;
  margin:1.5rem 0 0;
  max-width:22ch;
}

.lede{
  margin:.9rem 0 1.4rem;
  color:var(--muted);
  font-size:1.02rem;
}

.phone{margin:0}
.phone a{
  display:block;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:.85rem 1.05rem .95rem;
  border-left:6px solid var(--ox);
}
.phone a:hover .phone-num,.phone a:focus .phone-num{text-decoration:underline}
.phone-lab{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ox-lt);
  padding-bottom:.15rem;
}
.phone-num{
  display:block;
  font-family:var(--mono);
  font-size:1.62rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}

.under{
  margin:.85rem 0 0;
  font-family:var(--mono);
  font-size:.76rem;
  line-height:1.6;
  color:var(--muted);
  word-break:break-word;
}

/* ---------- the record ---------- */

.record{
  background:var(--band);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:2rem 0 2.2rem;
}
.record h2{
  margin:0 0 1.2rem;
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.facts{margin:0}
.facts > div{
  padding:.6rem 0;
  border-top:1px solid var(--rule);
}
.facts > div:first-child{border-top:0}
.facts dt{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:.2rem;
}
.facts dd{
  margin:0;
  font-size:.98rem;
  line-height:1.5;
}
.facts dd b{
  font-family:var(--mono);
  font-size:1.24rem;
  letter-spacing:-.02em;
}

.ph{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ox);
  background:transparent;
  border-bottom:1px dashed var(--ox);
  padding:0 .18rem;
  white-space:nowrap;
}

.record-note{
  margin:1.4rem 0 0;
  padding-top:1.1rem;
  border-top:2px solid var(--ink);
  font-size:.95rem;
  color:var(--muted);
}

/* ---------- the story ---------- */

main{padding:2.4rem 0 1rem}

.drop{
  margin-top:0;
  font-size:1.16rem;
  line-height:1.55;
}

.opening p + p{margin-top:1.1rem}

.contents{
  margin:1.8rem 0 0;
  padding:1.1rem 0 .2rem;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  list-style:none;
  counter-reset:c;
}
.contents li{
  counter-increment:c;
  padding:.34rem 0 .34rem 2.6rem;
  position:relative;
  font-size:.98rem;
}
.contents li::before{
  content:"0" counter(c);
  position:absolute;
  left:0;
  top:.42rem;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.contents a{text-decoration-thickness:1px;text-underline-offset:3px}

.chapter{
  position:relative;
  padding-top:2.6rem;
}
.chapter .no{
  margin:0 0 .5rem;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ox);
}
.chapter h2{
  margin:0 0 1rem;
  font-size:1.42rem;
  line-height:1.25;
  font-weight:400;
  letter-spacing:-.01em;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--ink);
}
.chapter p{margin:0 0 1.05rem}
.chapter p:last-child{margin-bottom:0}

.hiring{
  margin-top:1.4rem !important;
  padding:.95rem 1.05rem;
  background:var(--band);
  border-left:5px solid var(--ink);
  font-size:.95rem;
}

/* ---------- inline evidence frames ---------- */

.shot{margin:2.4rem 0 0}
.frame{
  aspect-ratio:4/3;
  border:2px dashed #a8977c;
  background:
    repeating-linear-gradient(135deg,transparent 0 13px,rgba(36,32,27,.05) 13px 26px),
    var(--band);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tag{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--ink);
  padding:.4rem .7rem;
}
.shot figcaption{
  margin-top:.75rem;
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted);
  border-left:3px solid var(--rule);
  padding-left:.85rem;
}
.shot figcaption b{color:var(--ink)}

/* ---------- inline call bands ---------- */

.callrule{margin:2.6rem 0 0}
.callrule a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .8rem;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:.9rem 1.05rem;
  font-size:.95rem;
}
.callrule a span{
  font-family:var(--mono);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ox-lt);
}
.callrule a:hover span,.callrule a:focus span{text-decoration:underline}

/* ---------- estimate form ---------- */

.quote{
  margin-top:3rem;
  background:var(--band);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:2.2rem 0 2.4rem;
}
.quote h2{
  margin:0 0 .7rem;
  font-size:1.42rem;
  font-weight:400;
  letter-spacing:-.01em;
}
.quote-intro{
  margin:0 0 1.5rem;
  font-size:.98rem;
  color:var(--muted);
}

.field{margin:0 0 1.1rem}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:.35rem;
}
.field input,.field textarea{
  width:100%;
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:0;
  padding:.65rem .7rem;
}
.field textarea{resize:vertical}
.field ::placeholder{color:var(--muted);opacity:1}

.submit{margin:0}
.submit button{
  width:100%;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ox);
  border:2px solid var(--ox);
  border-radius:0;
  padding:.9rem 1rem;
  cursor:pointer;
}
.submit button:hover{background:var(--ink);border-color:var(--ink)}

.formnote{
  margin:.85rem 0 0;
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.6;
  color:var(--muted);
  word-break:break-word;
}

/* ---------- where we are ---------- */

.findus{padding:2.4rem 0 2.6rem}
.findus h2{
  margin:0 0 1rem;
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.findus address{
  font-style:normal;
  font-size:1.12rem;
  line-height:1.55;
}
.findus p{margin:1rem 0 0;font-size:.95rem}
.maplink{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em}
.findus-hours{color:var(--muted)}
.findus-hours b{color:var(--ink)}
.findus-call a{
  display:inline-block;
  font-family:var(--mono);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--paper);
  background:var(--ink);
  text-decoration:none;
  padding:.7rem 1.1rem;
  border-left:5px solid var(--ox);
}
.findus-call a:hover,.findus-call a:focus{text-decoration:underline}

/* ---------- footer ---------- */

footer{
  background:var(--ink);
  color:var(--paper);
  padding:2.2rem 0 2.4rem;
  border-top:9px solid var(--ox);
}
footer a{color:var(--ox-lt)}
.f-name{
  margin:0 0 .6rem;
  font-size:1.06rem;
  font-weight:700;
}
.f-line{
  margin:0;
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.85;
  word-break:break-word;
}
.f-copy{
  margin:1.4rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid rgba(245,240,230,.28);
  font-family:var(--mono);
  font-size:.72rem;
  color:#cfc6b5;
}
.f-demo{
  margin:.6rem 0 0;
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.7;
  color:#cfc6b5;
}

/* ---------- wider screens ---------- */

@media (min-width:700px){
  body{font-size:18px}
  .wrap{max-width:40rem;padding:0 2rem}
  h1{font-size:2.5rem;margin-top:1.9rem}
  .lede{font-size:1.1rem}
  .phone a{display:inline-block;padding:.9rem 1.6rem 1rem}
  .phone-num{font-size:1.95rem}
  .masthead{padding:1.8rem 0 2.8rem}
  .drop{font-size:1.3rem}
  .chapter h2{font-size:1.75rem}
  .quote h2{font-size:1.75rem}
  .facts{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    column-gap:2rem;
  }
  .facts > div:nth-child(2){border-top:0}
  .callrule a{padding:1.05rem 1.6rem}
  .findus address{font-size:1.2rem}
  .frame{aspect-ratio:3/2}
}

@media (min-width:1080px){
  .wrap{max-width:42rem}
  .chapter{padding-top:3.2rem}
  .chapter .no{
    position:absolute;
    left:-6.6rem;
    top:3.55rem;
    width:5rem;
    margin:0;
    text-align:right;
    font-size:.86rem;
  }
  .shot{margin-top:3rem}
  main{padding-top:3.2rem}
}