/* ==========================================================================
   Winnipesaukee Island Services — demonstration site by Trueline Web.
   ARCHETYPE H — card stack.

   HARD RULE HELD THROUGHOUT THIS FILE, because it is the whole argument:
     - no `grid-template-columns` anywhere
     - no `float` anywhere
     - no fixed pixel width on any layout box (only max-width and clamp)
     - every list reflows by wrapping, never by column count
   The live site is a 1000px fixed canvas with a four-column service table
   and no viewport meta. This page has one column at every width.
   ========================================================================== */

:root{
  --paper:#ece9e3;
  --card:#fbfaf7;
  --ink:#14171a;
  --muted:#565c64;
  --granite:#33414b;
  --granite-d:#26313a;
  --ochre:#8a4f0c;
  --ochre-d:#6d3e09;
  --sand:#e8c98d;
  --pale:#cfd8de;
  --line:#c9c4bb;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(1rem,4.4vw,1.9rem);
}

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

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

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

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

img{max-width:100%;height:auto;}

/* --- the single column ---------------------------------------------------
   One measure. Everything on the page sits inside it. No second track. */
.mast-in,.card,.band,.foot-in{
  width:100%;
  max-width:44rem;
  margin-left:auto;
  margin-right:auto;
}

/* --- masthead ------------------------------------------------------------ */
.mast{
  background:var(--granite);
  color:#fff;
  padding:clamp(1.4rem,6vw,3rem) var(--pad) clamp(1.6rem,6vw,2.6rem);
  border-bottom:6px solid var(--ochre);
}

.wordmark{
  margin:0 0 1.1rem;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--sand);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
}
.wis{
  display:inline-block;
  background:#fff;
  color:var(--granite-d);
  font-weight:700;
  letter-spacing:.06em;
  padding:.18rem .48rem;
  border-radius:2px;
}
.wm-full{color:var(--pale);}

.mast h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.72rem,6.2vw,2.6rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 .8rem;
  max-width:20ch;
}

.lede{
  margin:0 0 1.5rem;
  color:var(--pale);
  font-size:1.03rem;
  max-width:52ch;
}

/* --- the big call target ------------------------------------------------- */
.call-big{
  display:block;
  background:var(--ochre);
  color:#fff;
  text-decoration:none;
  padding:.85rem 1rem 1rem;
  border-radius:4px;
  text-align:center;
  border:2px solid var(--ochre);
}
.call-big:hover{background:var(--ochre-d);border-color:var(--ochre-d);}
.cb-label{
  display:block;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#fff;
}
.cb-num{
  display:block;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.4rem,6.6vw,1.95rem);
  letter-spacing:.01em;
  line-height:1.2;
  color:#fff;
}

.mast-alt{
  margin:1.2rem 0 .5rem;
  font-family:var(--mono);
  font-size:.87rem;
  line-height:1.7;
  word-break:break-word;
}
.alt-link{color:var(--sand);}
.mast-addr{color:var(--pale);}
.mast-note{
  margin:0;
  color:var(--pale);
  font-size:.92rem;
}

/* --- section bands ------------------------------------------------------- */
.band{
  margin:0;
  padding:1.35rem var(--pad) 1.15rem;
  background:var(--granite-d);
  color:#fff;
  font-family:var(--serif);
  font-size:1.12rem;
  max-width:none;
}
.band-k{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--sand);
  margin-bottom:.25rem;
}

/* the band's inner measure, without a second column */
.band{padding-left:max(var(--pad),calc((100% - 44rem)/2));
      padding-right:max(var(--pad),calc((100% - 44rem)/2));}

/* --- cards --------------------------------------------------------------- */
.card{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:1.6rem var(--pad) 1.9rem;
}
.card:last-of-type{border-bottom:none;}

.chead{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem .8rem;
  padding-bottom:.75rem;
  margin-bottom:1rem;
  border-bottom:2px solid var(--granite);
}

.idx{
  margin:0;
  flex:1 1 auto;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--granite);
  font-weight:700;
}

/* the call target lives in the HEADING ROW of every card — not a floating
   bar, not a separate call card, not chrome on the bottom edge. */
.callmini{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ochre-d);
  text-decoration:none;
  border:2px solid var(--ochre);
  border-radius:3px;
  padding:.32rem .6rem;
  white-space:nowrap;
}
.callmini:hover{background:var(--ochre);color:#fff;}
.cm-num{letter-spacing:.02em;}

.card h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.24rem,4.6vw,1.6rem);
  line-height:1.24;
  margin:0 0 .7rem;
  color:var(--granite-d);
  max-width:26ch;
}
.card h3{
  font-family:var(--serif);
  font-size:1.08rem;
  margin:1.4rem 0 .45rem;
  color:var(--granite-d);
}
.card p{margin:0 0 .95rem;max-width:60ch;}
.card p:last-child{margin-bottom:0;}

.sub{color:var(--muted);font-size:.95rem;}
.why{
  border-left:4px solid var(--ochre);
  padding:.6rem 0 .6rem .85rem;
  color:var(--muted);
  font-size:.95rem;
}

/* --- lists: they WRAP, they do not sit in columns ------------------------ */
ul.tick{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  max-width:60ch;
}
ul.tick li{
  position:relative;
  padding:.3rem 0 .3rem 1.5rem;
  border-bottom:1px solid #e6e2d9;
}
ul.tick li:last-child{border-bottom:none;}
ul.tick li::before{
  content:"—";
  position:absolute;
  left:0;
  top:.3rem;
  color:var(--ochre);
  font-weight:700;
}

ul.chips{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}
ul.chips li{
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.35;
  border:1px solid var(--line);
  border-radius:3px;
  background:#f4f1ea;
  padding:.34rem .55rem;
  color:var(--ink);
}
ul.towns li{
  border-color:var(--granite);
  background:var(--granite);
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
}

/* --- fact rows: one column of rows, key left, value right ---------------- */
ul.facts{
  list-style:none;
  margin:1.2rem 0;
  padding:0;
  border-top:1px solid var(--line);
}
ul.facts li{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.4rem 1rem;
  padding:.5rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:.84rem;
}
.fk{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;}
.fv{color:var(--granite-d);font-weight:700;text-align:right;}

/* --- marked photo placeholders ------------------------------------------ */
.frame{margin:1.4rem 0 0;}
.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  border:3px dashed var(--ochre);
  border-radius:4px;
  background:
    repeating-linear-gradient(135deg,#f2eee5 0 12px,#ece7db 12px 24px);
  padding:1rem;
  text-align:center;
}
.ph-k{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ochre-d);
}
.frame figcaption{
  margin-top:.6rem;
  font-size:.88rem;
  color:var(--muted);
  line-height:1.55;
}
.mono{font-family:var(--mono);font-size:.85em;color:var(--granite-d);word-break:break-word;}

/* --- quote card ---------------------------------------------------------- */
.card-quote{background:#f6f2ea;}

.quoteform{margin:1.2rem 0 1.4rem;max-width:34rem;}
.field{margin:0 0 1rem;}
.field label{
  display:block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--granite-d);
  margin-bottom:.3rem;
}
.hint{
  display:block;
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:normal;
  text-transform:none;
  font-weight:400;
  color:var(--muted);
  margin-top:.2rem;
}
.field input,.field textarea{
  display:block;
  width:100%;
  max-width:100%;
  font-family:var(--sans);
  font-size:1.02rem;
  color:var(--ink);
  background:#fff;
  border:2px solid var(--granite);
  border-radius:3px;
  padding:.6rem .65rem;
}
.field textarea{resize:vertical;}
.field button{
  width:100%;
  font-family:var(--mono);
  font-size:.92rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  background:var(--granite);
  border:2px solid var(--granite);
  border-radius:3px;
  padding:.85rem 1rem;
  cursor:pointer;
}
.field button:hover{background:var(--granite-d);border-color:var(--granite-d);}

.orcall{
  margin:1.4rem 0 .6rem;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}
.direct{margin:0 0 .7rem;}
.call-inline{max-width:24rem;}
.direct-alt{
  margin:0 0 .9rem;
  font-family:var(--mono);
  font-size:.92rem;
  word-break:break-word;
}

.maplink{font-weight:700;}

/* --- footer -------------------------------------------------------------- */
.site{
  background:var(--granite-d);
  color:var(--pale);
  padding:2rem var(--pad) 2.4rem;
  border-top:6px solid var(--ochre);
}
.foot-name{
  margin:0 0 .5rem;
  font-family:var(--serif);
  font-size:1.14rem;
  color:#fff;
}
.foot-line{
  margin:0 0 .8rem;
  font-size:.92rem;
  line-height:1.65;
  color:var(--pale);
}
.foot-line a{color:var(--sand);}
.foot-copy{
  margin:1rem 0 .9rem;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--pale);
}
.disclaimer{
  margin:0;
  padding-top:.9rem;
  border-top:1px solid #4b5b66;
  font-size:.78rem;
  line-height:1.6;
  color:var(--pale);
}

/* --- wider viewports: the column simply gets more air --------------------
   No new columns appear. Nothing rearranges. The page a phone gets is the
   page a desktop gets, which is the entire point of the rebuild. */
@media (min-width:46rem){
  body{font-size:1.05rem;}
  .card{padding:2.1rem clamp(1.9rem,4vw,2.6rem) 2.4rem;}
  .mast{padding-left:clamp(1.9rem,4vw,2.6rem);padding-right:clamp(1.9rem,4vw,2.6rem);}
  .site{padding-left:clamp(1.9rem,4vw,2.6rem);padding-right:clamp(1.9rem,4vw,2.6rem);}
  .call-big{max-width:24rem;}
}

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