/* Mike's Log Home Refinishing - the storefront. One stylesheet, no framework, no web fonts:
   fast on a phone with one bar of signal up north. Colors are the logo's. */
:root{
  --forest:#1f3b2b; --forest-2:#2b4d38; --pine:#3d6b4c;
  --log:#8a5a2b; --log-2:#b07a43; --honey:#d9a760;
  --cream:#f5ecda; --paper:#fbf7ee; --card:#ffffff;
  --ink:#1d2420; --muted:#5b6660; --line:#e4dac5;
  --radius:12px; --shadow:0 1px 2px rgba(29,36,32,.06),0 8px 24px rgba(29,36,32,.07);
  --head:"Rockwell","Roboto Slab","Bitter","Georgia",serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--log)}
a:hover{color:var(--forest)}
h1,h2,h3{font-family:var(--head);line-height:1.15;color:var(--forest);margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}

/* header */
.top{background:var(--forest);color:var(--cream)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:72px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;margin-right:auto}
.brand img{width:52px;height:52px}
.brand span{font-family:var(--head);font-size:1.15rem;line-height:1.1;letter-spacing:.02em}
.brand:hover{color:#fff}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav a{color:var(--cream);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:.95rem}
.nav a:hover,.nav a[aria-current=page]{background:var(--forest-2);color:#fff}
.nav a.call{background:var(--honey);color:var(--forest)}
.nav a.call:hover{background:#e7b977}

/* buttons */
.btn{display:inline-block;background:var(--log);color:#fff;text-decoration:none;font-weight:700;
  padding:12px 20px;border-radius:10px;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--forest);color:#fff}
.btn.light{background:var(--cream);color:var(--forest)}
.btn.light:hover{background:#fff}
.btn[disabled]{opacity:.6;cursor:wait}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}

/* hero */
.hero{background:var(--forest);color:var(--cream);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:repeating-linear-gradient(180deg,var(--log) 0 10px,var(--log-2) 10px 12px,#6f4822 12px 17px);opacity:.9}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:88px}
.hero h1{color:#fff}
.hero p.lead{font-size:1.2rem;max-width:34em;color:var(--cream)}
.hero img{width:min(340px,100%);justify-self:center;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}

/* sections */
section.band{padding:64px 0}
section.band.alt{background:var(--cream)}
.intro{max-width:44em;color:var(--muted);font-size:1.08rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.step h3::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:var(--forest);color:var(--cream);font-size:1rem;margin-right:10px;vertical-align:2px}
.step p{margin:0;color:var(--muted)}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.service{background:var(--card);border-left:5px solid var(--log-2);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.service p{margin:0;color:var(--muted)}
.area{background:var(--card);border-radius:var(--radius);padding:22px 24px;margin-top:24px;box-shadow:var(--shadow)}
.area p{margin:0;color:var(--muted)}
.season{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.season div{background:var(--forest);color:var(--cream);border-radius:var(--radius);padding:22px 24px}
.season b{display:block;font-family:var(--head);font-size:1.25rem;color:#fff}
.cta{background:var(--log);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:var(--cream);font-size:1.1rem}
.cta .actions{justify-content:center}

/* our work */
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:28px}
.project{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.project .cover{aspect-ratio:3/2;background:var(--cream);overflow:hidden}
.project .cover img{width:100%;height:100%;object-fit:cover}
.project .body{padding:18px 20px 20px}
.project .meta{color:var(--muted);font-size:.92rem;margin-bottom:6px}
.project .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{background:var(--cream);color:var(--forest);border-radius:20px;padding:2px 10px;font-size:.82rem;font-weight:600}
.post{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin:0 0 28px}
.post .meta{color:var(--muted);margin-bottom:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:16px}
.gallery button{padding:0;border:0;background:var(--cream);border-radius:8px;overflow:hidden;cursor:zoom-in;aspect-ratio:1;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .label{position:absolute;left:8px;top:8px;background:rgba(31,59,43,.85);color:#fff;font-size:.75rem;font-weight:700;
  padding:2px 8px;border-radius:12px;text-transform:uppercase;letter-spacing:.04em}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:28px;color:var(--muted);text-align:center}
dialog.view{border:0;padding:0;background:transparent;max-width:min(1200px,96vw);max-height:94vh}
dialog.view::backdrop{background:rgba(14,22,17,.88)}
dialog.view img{max-height:86vh;width:auto;margin:0 auto;border-radius:8px}
dialog.view p{color:#fff;text-align:center;margin:10px 0 0}
dialog.view .close{position:fixed;top:14px;right:18px;font-size:2rem;line-height:1;background:none;border:0;color:#fff;cursor:pointer}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
form.inquiry{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-weight:700;color:var(--forest)}
.field .hint{font-weight:400;color:var(--muted);font-size:.9rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #cfc4ad;border-radius:8px;padding:11px 12px;width:100%}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--pine);outline:3px solid rgba(61,107,76,.2)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.msg{margin:0 0 16px;padding:12px 14px;border-radius:8px;background:#f7e4de;color:#7a2a16;font-weight:600}
.msg[hidden]{display:none}
.small{font-size:.9rem;color:var(--muted)}
.reach{background:var(--forest);color:var(--cream);border-radius:var(--radius);padding:26px}
.reach h2{color:#fff}
.reach a{color:var(--honey);font-weight:700}
.reach dl{margin:0}
.reach dt{font-weight:700;color:#fff;margin-top:14px}
.reach dd{margin:0}

/* footer */
footer{background:#16291e;color:#c9d2c8;padding:36px 0;font-size:.95rem}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--honey)}
footer b{color:#fff;font-family:var(--head);font-weight:700}

@media (max-width:820px){
  .hero .wrap,.contact-grid{grid-template-columns:1fr}
  .hero img{width:120px;order:-1;justify-self:start}
  .hero .wrap{padding-top:32px;gap:16px}
  .top .wrap{gap:6px 12px}
  .nav a{padding:6px 9px}
  .brand img{width:44px;height:44px}
  .steps,.services,.season,.pair{grid-template-columns:1fr}
  section.band{padding:44px 0}
  .brand span{font-size:1rem}
}
@media (prefers-reduced-motion:no-preference){ .btn,.nav a{transition:background .15s} }
.project{color:inherit;text-decoration:none}
.project:hover h3{color:var(--log)}