/* ------------------------------------------------------------------
   Nisswa Dock Company — demonstration rebuild
   Archetype E, long-form story. Mobile first. No JS, no web fonts.

   Palette is deliberately NOT lake-navy: the three existing dock demos
   in this project are cool navy/teal, warm bone + red, and dark graphite
   + brass, and every dock company in Minnesota already runs blue. This
   one is birch paper, Norway-pine green and cedar — the materials the
   business actually mills.
   ------------------------------------------------------------------ */

:root{
  --paper:#f4f1e8;
  --paper-2:#fbf9f4;
  --ink:#1b1a16;
  --soft:#4d483c;
  --pine:#1e4634;
  --pine-2:#173628;
  --cedar:#8f3f10;
  --rule:#d8d1bf;
  --rule-2:#c3baa2;
  --on-pine:#f4f1e8;
  --sand:#e8c88a;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --gut:clamp(1.05rem,5vw,2rem);
  --measure:34rem;
}

*,*::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:1.06rem;
  line-height:1.62;
  overflow-wrap:break-word;
}

.wrap{
  max-width:44rem;
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

a{color:var(--cedar)}
a:hover{color:var(--pine)}

:focus-visible{
  outline:3px solid var(--cedar);
  outline-offset:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--pine);color:var(--on-pine);
  padding:.6rem 1rem;z-index:60;text-decoration:none;
}
.skip:focus{left:0}

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

.masthead{
  background:var(--pine);
  color:var(--on-pine);
  padding:1.25rem 0 1.9rem;
  border-bottom:6px solid var(--cedar);
}

.mark{display:flex;align-items:center;gap:.6rem;margin:0 0 1.05rem}
.mark-svg{width:34px;height:34px;color:var(--sand);flex:0 0 auto}
.mark-txt{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  font-size:1.02rem;
  line-height:1.15;
  display:flex;flex-direction:column;
}
.mark-sub{
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.19em;
  color:var(--sand);
  margin-top:.16rem;
}

.kicker{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sand);
  margin:0 0 .55rem;
}

h1{
  font-family:var(--sans);
  font-weight:750;
  font-size:clamp(1.42rem,5.6vw,2.15rem);
  line-height:1.22;
  letter-spacing:-.012em;
  margin:0 0 .7rem;
  max-width:22ch;
}

.lede-top{
  margin:0 0 1.15rem;
  max-width:44ch;
  color:#e4dfd2;
  font-size:1rem;
}

.calls{list-style:none;margin:0 0 .95rem;padding:0;display:grid;gap:.5rem}

.btn{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  padding:.62rem .85rem;
  text-decoration:none;
  border-radius:2px;
  font-family:var(--sans);
}
.btn-lab{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
}
.btn-num{font-family:var(--mono);font-size:1.02rem;font-weight:700;letter-spacing:-.01em}

.btn-call{background:var(--sand);color:#2a1c06}
.btn-call:hover{background:#f2d79f;color:#2a1c06}
.btn-call2,.btn-mail{
  background:transparent;color:var(--on-pine);
  border:1.5px solid #6d8a7b;
}
.btn-call2:hover,.btn-mail:hover{background:var(--pine-2);color:var(--on-pine)}
.btn-mail .btn-num{font-size:.9rem}

.hours-top{
  margin:0;
  font-size:.85rem;
  color:#ddd7c8;
  font-family:var(--sans);
}
.hours-top a{color:var(--sand)}

/* ---------------- reach table ---------------- */

.reach{
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  padding:1.9rem 0 2.1rem;
}

.chap{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cedar);
  margin:0 0 .4rem;
}
.chap-light{color:var(--sand)}

h2{
  font-family:var(--sans);
  font-weight:750;
  font-size:clamp(1.2rem,4.4vw,1.55rem);
  line-height:1.24;
  letter-spacing:-.008em;
  margin:0 0 .6rem;
  max-width:24ch;
}

.reach-note{margin:0 0 1.1rem;color:var(--soft);font-size:.97rem;max-width:var(--measure)}

.reach-list{margin:0;padding:0;border-top:2px solid var(--ink)}
.reach-row{
  padding:.72rem 0;
  border-bottom:1px solid var(--rule);
}
.reach-row dt{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--soft);
  margin:0 0 .18rem;
}
.reach-row dd{
  margin:0;
  font-size:1.06rem;
  line-height:1.45;
}
.reach-row dd a{font-weight:700}
.reach-x{color:var(--soft);font-size:.92rem}
.reach-plain{font-family:var(--mono);font-size:.9rem}

/* ---------------- prose ---------------- */

.prose{padding:2.1rem 0 .6rem}
.prose section{margin:0 0 2.3rem}
.prose p{margin:0 0 1.05rem;max-width:var(--measure)}

.drop::first-letter{
  float:left;
  font-size:3.1rem;
  line-height:.82;
  padding:.16rem .38rem 0 0;
  color:var(--pine);
  font-weight:700;
}

.spec{
  list-style:none;
  margin:1.3rem 0;
  padding:0;
  border-top:1px solid var(--rule-2);
}
.spec li{
  padding:.52rem 0;
  border-bottom:1px solid var(--rule);
}
.spec-k{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cedar);
  margin-bottom:.1rem;
}
.spec-v{display:block;font-size:1rem}

.note-box{
  background:var(--paper-2);
  border-left:4px solid var(--pine);
  padding:.85rem 1rem;
  font-size:.99rem;
}

.inline-call{
  font-family:var(--sans);
  font-size:.99rem;
  background:#eae5d6;
  border-top:2px solid var(--cedar);
  padding:.8rem .95rem;
  margin-top:1.35rem !important;
}
.inline-call a{font-weight:700;white-space:nowrap}

.towns{
  list-style:none;
  margin:1.15rem 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.towns li{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.03em;
  border:1px solid var(--rule-2);
  background:var(--paper-2);
  padding:.28rem .5rem;
  color:var(--soft);
}

/* ---------------- figures ---------------- */

.fig{margin:0 0 2.3rem}
.fig img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule-2);
  background:var(--paper-2);
}
.fig figcaption{
  font-family:var(--sans);
  font-size:.86rem;
  line-height:1.5;
  color:var(--soft);
  padding:.6rem 0 0;
  max-width:var(--measure);
}
.ph{
  display:inline-block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--cedar);
  color:var(--paper-2);
  padding:.12rem .38rem;
  margin-right:.34rem;
}
.fig code{
  font-family:var(--mono);
  font-size:.82em;
  background:#eae5d6;
  padding:.05rem .25rem;
  color:var(--ink);
}

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

.quote{
  background:var(--pine);
  color:var(--on-pine);
  padding:2.1rem 0 2.4rem;
  margin-top:1.4rem;
}
.quote h2{color:var(--on-pine)}
.quote-note{margin:0 0 1.35rem;color:#ddd7c8;max-width:var(--measure);font-size:.99rem}
.quote-note a{color:var(--sand);font-weight:700;white-space:nowrap}

.form{max-width:30rem}
.field{margin:0 0 1rem}
.field label{
  display:block;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--sand);
  margin-bottom:.3rem;
}
.hint{
  display:block;
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  font-size:.83rem;
  color:#ddd7c8;
  margin-top:.18rem;
}
.field input[type=text],
.field input[type=tel],
.field textarea{
  width:100%;
  font:inherit;
  font-family:var(--sans);
  font-size:1rem;
  padding:.6rem .65rem;
  border:1.5px solid #6d8a7b;
  background:var(--paper-2);
  color:var(--ink);
  border-radius:2px;
}
.field textarea{resize:vertical}

.field-check{display:flex;align-items:flex-start;gap:.55rem}
.field-check input{margin-top:.34rem;width:1.05rem;height:1.05rem;flex:0 0 auto}
.field-check label{
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  font-size:.93rem;
  color:#e4dfd2;
  margin:0;
}

.submit{
  font-family:var(--sans);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.05em;
  background:var(--sand);
  color:#2a1c06;
  border:0;
  border-radius:2px;
  padding:.78rem 1.2rem;
  cursor:pointer;
  width:100%;
}
.submit:hover{background:#f2d79f}

.form-fine{
  font-family:var(--sans);
  font-size:.82rem;
  color:#ddd7c8;
  margin:.75rem 0 0;
}

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

.foot{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  padding:2rem 0 6.2rem;
  font-family:var(--sans);
}
.foot-name{
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.95rem;
  margin:0 0 .6rem;
}
.foot-addr{
  font-style:normal;
  font-size:.97rem;
  line-height:1.65;
  margin:0 0 1.05rem;
}
.foot-addr a{font-weight:700;white-space:nowrap}
.foot-sr{font-size:.87rem;color:var(--soft);margin:0 0 1.05rem;max-width:var(--measure)}
.foot-copy{font-size:.85rem;color:var(--soft);margin:0 0 .9rem}
.foot-disc{
  font-size:.78rem;
  line-height:1.55;
  color:var(--soft);
  border-top:1px solid var(--rule);
  padding-top:.85rem;
  margin:0;
  max-width:var(--measure);
}

/* ---------------- fixed two-action pill ---------------- */

.pill{
  position:fixed;
  right:.7rem;
  bottom:.7rem;
  z-index:50;
  display:flex;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 3px 14px rgba(20,18,12,.34);
  font-family:var(--sans);
  font-weight:800;
  font-size:.88rem;
  letter-spacing:.03em;
}
.pill a{
  padding:.62rem .95rem;
  text-decoration:none;
  white-space:nowrap;
}
.pill-a{background:var(--cedar);color:#fff8ef}
.pill-a:hover{background:#7a350c;color:#fff8ef}
.pill-b{background:var(--pine);color:var(--on-pine);border-left:1px solid #6d8a7b}
.pill-b:hover{background:var(--pine-2);color:var(--on-pine)}

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

@media (min-width:34rem){
  .calls{grid-template-columns:1fr 1fr;gap:.55rem}
  .calls li:last-child{grid-column:1 / -1}
  .spec{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.4rem;
    border-top:0;
  }
  .spec li{border-top:1px solid var(--rule-2);border-bottom:0}
}

@media (min-width:52rem){
  body{font-size:1.1rem}
  .wrap{max-width:50rem}
  .masthead{padding:2rem 0 2.5rem}
  h1{font-size:2.35rem;max-width:20ch}
  .calls{grid-template-columns:repeat(3,1fr)}
  .calls li:last-child{grid-column:auto}
  .btn{flex-direction:column;align-items:flex-start;gap:.22rem}
  .prose{padding:3rem 0 1rem}
  .prose section{margin-bottom:3rem}
  .fig{margin-bottom:3rem}
  .reach-row{
    display:grid;
    grid-template-columns:15rem 1fr;
    gap:1.2rem;
    align-items:baseline;
    padding:.8rem 0;
  }
  .reach-row dt{margin:0}
  .foot{padding-bottom:5rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}