/* ==========================================================================
   N.W. Michigan Contracting Inc — demonstration rebuild, Trueline Web.

   Archetype F: service index. Five deep service records, each with its own
   copy, its own spec list and its own tap-to-call. No gallery section and no
   grid of work anywhere.

   Navigation: NOTHING is fixed, sticky or floating. Not a bar, not a rail,
   not a pill. A numbered index sits inside the masthead and scrolls away with
   it; the phone recurs instead — 9 tel: links down the page. This is
   deliberate: the two other Traverse City excavation demos in this pipeline
   both use a persistent rail / call bar, so this one must not.

   Palette: bone paper, deep plum, terracotta for every call action, and a
   single brass note in the mark. Plum is used by no other build in this
   directory, and it is deliberately nothing like their own site's dark
   forest green + magenta + sky blue.

   Type: Georgia for the h1, record headings and the customer quotation, at
   deliberately LOW scale contrast (h1 caps at 2.6rem). System sans for body.
   ui-monospace for every label, numeral, index and spec key.

   No JavaScript. No web font. No iframe. No third-party embed of any kind.
   ========================================================================== */

:root{
  --paper:#f2f0ec;
  --paper-2:#e8e5de;
  --surface:#faf9f6;
  --ink:#17161a;
  --ink-2:#4c4952;
  --plum:#4b2240;
  --plum-2:#33162c;
  --terra:#9c3218;
  --terra-2:#7d270f;
  --brass:#7a5410;
  --line:#cfcac1;
  --line-2:#b6b0a5;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
}

img,svg{ max-width:100%; }

a{ color:var(--terra-2); }
a:hover{ color:var(--terra); }

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

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

h1,h2,h3{ line-height:1.2; margin:0 0 .5rem; }

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

.mast{
  background:var(--surface);
  border-bottom:3px solid var(--plum);
  padding:1.15rem 0 1.9rem;
}

.mast-top{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.5rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--ink);
}
.mark{ width:44px; height:44px; flex:0 0 44px; }
.brand-txt strong{
  display:block;
  font-size:1.02rem;
  letter-spacing:.005em;
}
.brand-txt span{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:.15rem;
}

/* the call block — the single most important object on the page */
.call{
  display:block;
  text-decoration:none;
  background:var(--terra);
  color:#fff;
  border-radius:4px;
  padding:.75rem .95rem;
  text-align:center;
}
.call:hover{ background:var(--terra-2); color:#fff; }
.call-k{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.call-n{
  display:block;
  font-family:var(--mono);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.01em;
  margin-top:.1rem;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--plum);
  margin:0 0 .55rem;
}

h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.6rem, 6.3vw, 2.6rem);
  max-width:20ch;
  margin-bottom:.7rem;
}

.lede{
  font-size:1.09rem;
  max-width:56ch;
  margin:0 0 1.4rem;
  color:var(--ink-2);
}

.facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin:0 0 1rem;
}
.facts > div{ background:var(--surface); padding:.6rem .75rem; }
.facts dt{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.facts dd{
  margin:.1rem 0 0;
  font-family:var(--mono);
  font-size:.9rem;
  font-weight:700;
  color:var(--plum);
}

.stamp{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 1.6rem;
}
.stamp time{ color:var(--plum); font-weight:700; }

.index{
  border-top:1px solid var(--line);
  padding-top:1.1rem;
}
.idx-h{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:400;
  margin-bottom:.55rem;
}
.index ol{
  list-style:none;
  margin:0;
  padding:0;
}
.index li{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  border-bottom:1px solid var(--line);
  padding:.45rem 0;
}
.index .n{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--brass);
  flex:0 0 1.8rem;
}
.index a{
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.index a:hover{ color:var(--terra-2); border-bottom-color:var(--terra); }
.idx-more{
  font-family:var(--mono);
  font-size:.78rem;
  margin:.7rem 0 0;
  color:var(--ink-2);
}

/* ---------------------------------------------------------- resume band */

.resume-band{
  background:var(--plum);
  color:#f3eef1;
  padding:1.15rem 0;
}
.rb-k{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#dcc79a;
  margin:0 0 .55rem;
}
.rb-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .5rem;
}
.rb-list li{
  font-family:var(--mono);
  font-size:.82rem;
  border:1px solid #7a5069;
  border-radius:3px;
  padding:.22rem .5rem;
}

/* ------------------------------------------------------------- records */

.record{
  padding:2.4rem 0 2.6rem;
  border-bottom:1px solid var(--line);
}
.record.alt{ background:var(--paper-2); }

.rec-n{
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--brass);
  margin:0 0 .25rem;
}

.record h2{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 5.4vw, 1.95rem);
  color:var(--plum);
  margin-bottom:.6rem;
}

.rec-lead{
  max-width:58ch;
  margin:0 0 1.25rem;
}

.spec{
  list-style:none;
  margin:0 0 1.4rem;
  padding:0;
  border-top:1px solid var(--line-2);
}
.spec li{
  font-family:var(--mono);
  font-size:.86rem;
  padding:.42rem 0 .42rem 1.35rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
.spec li::before{
  content:"";
  position:absolute;
  left:0;
  top:.95em;
  width:.6rem;
  height:2px;
  background:var(--terra);
}

.aside{
  border-left:3px solid var(--brass);
  padding:.15rem 0 .15rem .9rem;
  margin:0 0 1.4rem;
  max-width:56ch;
  color:var(--ink-2);
}

/* photograph plates — every one carries an empty DATE TAKEN field */

.plate{ margin:0 0 1.4rem; }

.frame{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:170px;
  background:
    repeating-linear-gradient(135deg,
      rgba(75,34,64,.055) 0 9px,
      rgba(75,34,64,0) 9px 18px),
    var(--surface);
  border:2px dashed var(--line-2);
  border-radius:3px;
  padding:1.2rem;
}
.frame span{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--plum);
  text-align:center;
}

.plate figcaption{ padding-top:.7rem; }
.shot{
  font-size:.93rem;
  color:var(--ink-2);
  margin:0 0 .7rem;
  max-width:56ch;
}

.datestamp{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.4rem;
  margin:0;
  border-top:1px solid var(--line);
  padding-top:.5rem;
}
.datestamp > div{ display:flex; gap:.5rem; align-items:baseline; }
.datestamp dt{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.datestamp dd{
  margin:0;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--plum);
  min-width:6rem;
  border-bottom:1px solid var(--line-2);
}

.btn{
  display:inline-block;
  background:var(--terra);
  color:#fff;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:.7rem 1rem;
  border-radius:4px;
}
.btn:hover{ background:var(--terra-2); color:#fff; }

.rec-call{ margin:0; }

/* ---------------------------------------------------------------- who */

.who{ padding:2.4rem 0 2.6rem; border-bottom:1px solid var(--line); }
.who h2{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 5.4vw, 1.95rem);
  color:var(--plum);
  margin-bottom:1.1rem;
}
.who h3{
  font-family:var(--mono);
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:.5rem;
}
.who-main p{ max-width:58ch; }
.who-call{ margin:1.2rem 0 1.6rem; }

.creds{
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid var(--plum);
}
.creds li{
  border-bottom:1px solid var(--line);
  padding:.55rem 0;
  font-size:.95rem;
}
.creds span{
  display:block;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* ------------------------------------------------------------- review */

.review{ padding:2.2rem 0 2.4rem; background:var(--paper-2); border-bottom:1px solid var(--line); }
.review h2{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:400;
  margin-bottom:.9rem;
}
.review blockquote{
  margin:0 0 1rem;
  padding:0 0 0 1rem;
  border-left:3px solid var(--plum);
}
.review blockquote p{
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.45;
  margin:0 0 .5rem;
  color:var(--plum);
}
.review blockquote footer{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--ink-2);
}
.rev-date{ color:var(--terra-2); font-weight:700; }
.rev-note{
  font-size:.95rem;
  color:var(--ink-2);
  max-width:56ch;
  margin:0;
}

/* -------------------------------------------------------------- quote */

.quote{ padding:2.4rem 0 2.8rem; }
.quote h2{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 5.4vw, 1.95rem);
  color:var(--plum);
  margin-bottom:.7rem;
}
.q-lead{ max-width:56ch; margin:0 0 1.5rem; }
.inline-tel{ font-family:var(--mono); font-weight:700; white-space:nowrap; }

.qform{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--plum);
  border-radius:3px;
  padding:1.15rem;
  max-width:34rem;
}
.field{ margin:0 0 1rem; }
.field:last-child{ margin-bottom:0; }
.qform label{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.3rem;
}
.qform input,
.qform textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:3px;
  padding:.6rem .65rem;
}
.qform textarea{ resize:vertical; }
.qform button{
  font-family:var(--mono);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.04em;
  background:var(--terra);
  color:#fff;
  border:0;
  border-radius:4px;
  padding:.75rem 1.2rem;
  cursor:pointer;
  width:100%;
}
.qform button:hover{ background:var(--terra-2); }
.q-side{ margin-top:1.6rem; }
.q-side h3{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:400;
  margin-bottom:.6rem;
}
.q-side ul{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  border-top:2px solid var(--plum);
}
.q-side li{
  border-bottom:1px solid var(--line);
  padding:.5rem 0;
  font-size:.95rem;
}
.q-side span{
  display:block;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.q-side p{ font-size:.93rem; color:var(--ink-2); margin:0; max-width:38ch; }

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

.foot{
  background:var(--plum-2);
  color:#e9e2e6;
  padding:2.2rem 0 2.4rem;
}
.foot a{ color:#f0c98a; }
.foot a:hover{ color:#fff; }
.foot address{ font-style:normal; line-height:1.75; }

.foot-grid{
  display:grid;
  gap:1.7rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid #5b3a52;
}
.foot-h{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#dcc79a;
  font-weight:400;
  margin-bottom:.5rem;
}
.foot p{ margin:.55rem 0 0; }
.foot-l{ font-family:var(--mono); font-size:.82rem; }
.foot-nav{ list-style:none; margin:0; padding:0; }
.foot-nav li{ padding:.2rem 0; }
.foot-nav a{ font-size:.95rem; }

.foot-stamp{ margin:1.3rem 0 0; color:#bcaeb7; }
.foot-stamp time{ color:#dcc79a; }

.copy{
  font-size:.86rem;
  color:#c8bcc4;
  margin:.5rem 0 0;
}
.disclaim{
  font-size:.8rem;
  line-height:1.6;
  color:#bcaeb7;
  border-top:1px solid #5b3a52;
  margin-top:1.2rem;
  padding-top:1rem;
  max-width:60ch;
}

/* ================================================================ 620px */
@media (min-width:620px){
  .mast-top{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .call-mast{ flex:0 0 auto; text-align:right; padding:.7rem 1.1rem; }
  .facts{ grid-template-columns:repeat(4,1fr); }
  .spec.cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.6rem;
    border-top:0;
  }
  .spec.cols li{ border-top:1px solid var(--line-2); border-bottom:0; }
  .frame{ min-height:230px; }
  .index ol{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.6rem;
  }
  .qform button{ width:auto; }
}

/* ================================================================ 900px */
@media (min-width:900px){
  body{ font-size:1.075rem; }
  .record{ padding:3.1rem 0 3.3rem; }
  .who-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:2.4rem;
  }
  .plate{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:1.4rem;
    align-items:start;
  }
  .plate figcaption{ padding-top:0; }
  .frame{ min-height:270px; }
  .spec.cols{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2rem; }
  .rev-body{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:2.4rem;
    align-items:start;
  }
  .q-grid{
    display:grid;
    grid-template-columns:minmax(0,34rem) minmax(0,1fr);
    gap:2.6rem;
    align-items:start;
  }
  .q-side{ margin-top:0; }
  .index ol{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}