/* Idaho Log Cabin Company — archetype G, single screen, :target panel swap,
   no JavaScript anywhere. Cool spruce ground with peeled-log cream and a
   saw-blade steel accent — deliberately not the tan/brown of their live theme,
   and deliberately not the warm bark of the other North Idaho log demo. */

:root{
  --spruce:#14211d;
  --spruce-2:#1c2c26;
  --cream:#f0ece1;
  --cream-dim:#b9bfb6;
  --steel:#8fb8c4;
  --sap:#d9a02b;
  --rule:#2c3d36;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--spruce);
  color:var(--cream);
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.62;
}
a{color:var(--cream)}
a:focus-visible{outline:2px solid var(--sap);outline-offset:2px}

.screen{
  width:100%;max-width:46rem;margin:0 auto;
  min-height:100vh;
  padding:0 1.1rem 2rem;
  display:flex;flex-direction:column;
}

/* top */
.top{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;
  align-items:center;justify-content:space-between;
  padding:1rem 0 .8rem;
}
.brand{
  margin:0;font-weight:700;font-size:1.04rem;line-height:1.25;
  letter-spacing:.01em;
}
.brand span{
  display:block;font-weight:400;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cream-dim);margin-top:.2rem;
}
.call{
  font-family:var(--mono);font-size:.88rem;text-decoration:none;
  background:var(--sap);color:#1a1405;font-weight:700;
  padding:.55rem .85rem;border-radius:2px;white-space:nowrap;
}

/* tab strip — the only navigation */
.tabs{
  display:flex;flex-wrap:wrap;gap:.35rem;
  padding:.5rem 0 1rem;border-bottom:1px solid var(--rule);
}
.tabs a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  color:var(--steel);border:1px solid var(--rule);
  padding:.42rem .65rem;border-radius:2px;
}
.tabs a:hover,.tabs a:focus{background:var(--spruce-2);color:var(--cream)}

/* panels — one screen, swapped by :target */
main{flex:1 0 auto;padding:1.5rem 0 0}
.panel{display:none;outline:none}
.panel:target{display:block}
#kits{display:block}
main:has(.panel:target) #kits{display:none}
#kits:target{display:block}

h1{
  margin:0 0 .9rem;font-size:clamp(1.6rem,6.2vw,2.4rem);
  line-height:1.16;font-weight:700;letter-spacing:-.01em;max-width:18ch;
}
h2{
  margin:0 0 .9rem;font-size:clamp(1.32rem,5vw,1.85rem);
  line-height:1.2;font-weight:700;letter-spacing:-.01em;
}
.lede{margin:0 0 1.3rem;font-size:1.08rem;color:#e2ded2}
.panel p{margin:0 0 1.05rem}

.quote{
  font-size:1.12rem;line-height:1.55;
  border-left:3px solid var(--sap);padding-left:1rem;
  color:#efe9da;
}

.facts{list-style:none;margin:1.3rem 0;padding:0;border-top:1px solid var(--rule)}
.facts li{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;
  padding:.6rem 0;border-bottom:1px solid var(--rule);
}
.facts span{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cream-dim);padding-top:.25rem;
}
.facts strong{font-size:.98rem;font-weight:600;text-align:right;flex:1 1 12rem}

.steps{list-style:none;margin:1.3rem 0;padding:0}
.steps li{
  display:flex;gap:.85rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.99rem;
}
.steps span{
  font-family:var(--mono);font-size:.82rem;color:var(--sap);
  letter-spacing:.08em;flex:0 0 auto;
}

.cta{margin:1.3rem 0 0}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.86rem;
  letter-spacing:.03em;text-decoration:none;
  background:var(--sap);color:#1a1405;font-weight:700;
  padding:.65rem 1rem;border-radius:2px;
}

/* placeholder frames */
.frame{margin:1.4rem 0}
.plate{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem;
  min-height:12rem;padding:.95rem;
  border:2px dashed #40564d;background:#182721;
}
.tag{
  align-self:flex-start;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--steel);color:#0d1a16;padding:.18rem .45rem;
}
.brief{font-size:.82rem;line-height:1.55;color:#a8b3ab}
figcaption{margin-top:.5rem;font-size:.82rem;color:var(--cream-dim)}

/* reach */
.reach{display:grid;grid-template-columns:1fr;gap:.7rem;margin:1.3rem 0}
.reach-card{
  display:block;text-decoration:none;
  background:var(--spruce-2);border:1px solid var(--rule);
  padding:.9rem 1rem;border-radius:2px;
}
.reach-card:hover{border-color:var(--sap)}
.ck{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream-dim);margin-bottom:.25rem;
}
.reach-card strong{font-family:var(--mono);font-size:1.02rem;color:#fff;word-break:break-word}
.addr{font-size:.95rem;line-height:1.7}
.maplink{color:var(--steel);font-size:.9rem}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.2rem}
.footline{margin:0 0 .9rem;font-family:var(--mono);font-size:.84rem;color:var(--cream-dim)}
.disclaimer{margin:0;font-size:.77rem;line-height:1.6;color:#7f8a83}

@media (min-width:600px){
  .reach{grid-template-columns:1fr 1fr}
}