/* Wild Wake Wood Works — site styles
   Palette drawn from eastern red cedar heart and sap. */

:root{
  --bark:#241F1B;
  --cedar:#A24E30;
  --heart:#7C3A24;
  --sap:#E8D5B5;
  --cream:#F4EADA;
  --paper:#FBF7F0;
  --moss:#55634B;
  --rule:#E6DCCD;
  --ink:#3A322C;
  --serif:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--heart);}
a:hover{color:var(--cedar);}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- header ---------- */
.top{
  background:var(--bark);
  border-bottom:3px solid var(--cedar);
}
.top .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.brand img{width:132px;height:auto;}
.brand span{
  color:var(--cream);font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap;}
nav a{
  color:var(--sap);text-decoration:none;font-size:14px;
  letter-spacing:1.8px;text-transform:uppercase;padding-bottom:3px;
  border-bottom:2px solid transparent;
}
nav a:hover,nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--cedar);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--bark) url('../img/hero.jpg') center 58% / cover no-repeat;
  min-height:clamp(380px,56vw,620px);
  display:flex;align-items:flex-end;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(20,16,14,.10) 0%,
      rgba(20,16,14,.30) 30%,
      rgba(20,16,14,.68) 62%,
      rgba(20,16,14,.92) 100%),
    linear-gradient(to right,
      rgba(20,16,14,.55) 0%,
      rgba(20,16,14,.15) 62%,
      rgba(20,16,14,0) 100%);
}
.hero-inner{position:relative;z-index:1;width:100%;padding:0 0 48px;}
.hero h1{
  color:var(--cream);
  font-size:clamp(32px,5.2vw,62px);
  line-height:1.1;margin:0 0 12px;letter-spacing:1px;
  text-shadow:0 2px 22px rgba(0,0,0,.55);
  text-wrap:balance;
}
.hero p{
  color:var(--cream);font-size:clamp(17px,2vw,21px);margin:0 0 26px;max-width:40ch;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.75);
  text-wrap:balance;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;
  background:var(--cedar);color:#fff;
  padding:13px 26px;border-radius:3px;
  font-size:14px;letter-spacing:2px;text-transform:uppercase;
  border:2px solid var(--cedar);
}
.btn:hover{background:var(--heart);border-color:var(--heart);color:#fff;}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--sap);}
.btn.ghost:hover{background:var(--sap);color:var(--bark);border-color:var(--sap);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:62px 0;}
section.tight{padding:44px 0;}
section.dark{background:var(--bark);color:var(--sap);}
section.dark h2{color:var(--cream);}
section.band{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

h2{
  font-size:clamp(25px,3.4vw,36px);line-height:1.2;
  margin:0 0 8px;color:var(--bark);letter-spacing:.5px;
}
.kicker{
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--moss);margin:0 0 14px;
}
section.dark .kicker{color:var(--sap);}
.lede{font-size:clamp(18px,2.1vw,22px);max-width:62ch;margin:0 0 10px;}
p{max-width:68ch;}

/* ---------- grids ---------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.card .body{padding:18px 20px 22px;}
.card h3{margin:0 0 6px;font-size:21px;color:var(--bark);}
.card p{font-size:16px;margin:0;color:#574d46;}

.facts{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:26px;}
.fact{border-left:3px solid var(--cedar);padding:4px 0 4px 16px;}
.fact b{display:block;font-size:26px;color:var(--bark);line-height:1.15;}
section.dark .fact b{color:var(--cream);}
.fact span{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--moss);}
section.dark .fact span{color:var(--sap);}

/* ---------- species table ---------- */
.species{width:100%;border-collapse:collapse;margin-top:22px;font-size:17px;}
.species th{
  text-align:left;background:var(--bark);color:var(--cream);
  padding:12px 14px;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:normal;
}
.species td{padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top;}
.species tr:nth-child(even) td{background:#fff;}
.species td:first-child{font-weight:bold;color:var(--bark);white-space:nowrap;}

/* ---------- callout ---------- */
.callout{
  background:#fff;border:1px solid var(--rule);border-left:4px solid var(--cedar);
  border-radius:4px;padding:22px 26px;margin:26px 0;
}
.callout h3{margin:0 0 8px;color:var(--bark);font-size:20px;}
.callout p{margin:0;}
.callout ul{margin:10px 0 0;padding-left:20px;}
.callout li{margin-bottom:6px;}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.big-link{
  font-size:clamp(26px,4vw,38px);text-decoration:none;color:var(--bark);
  display:block;margin-bottom:6px;letter-spacing:.5px;
}
.big-link:hover{color:var(--cedar);}
address{font-style:normal;line-height:1.8;}

/* ---------- footer ---------- */
footer{
  background:var(--bark);color:var(--sap);padding:44px 0 36px;
  border-top:3px solid var(--cedar);margin-top:0;
}
footer .wrap{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
footer img{width:150px;margin-bottom:12px;}
footer a{color:var(--sap);}
footer a:hover{color:#fff;}
footer h4{
  margin:0 0 10px;font-size:12.5px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--cream);font-weight:normal;
}
footer p,footer li{font-size:15.5px;margin:0 0 5px;max-width:none;}
footer ul{list-style:none;margin:0;padding:0;}
.legal{
  border-top:1px solid #3c332d;margin-top:30px;padding-top:18px;
  font-size:13.5px;color:#9a8e84;
}
.legal .wrap{display:block;}

/* ---------- finished work gallery ---------- */
.work-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin-top:30px;}
.work{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden;}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.work .body{padding:20px 22px 24px;}
.work h3{margin:0 0 4px;font-size:22px;color:var(--bark);}
.work .species{
  font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--cedar);margin:0 0 10px;
}
.work p{font-size:16.5px;margin:0;color:#574d46;}
.work.wide{grid-column:1/-1;}
.work.wide img{aspect-ratio:21/9;}

/* ---------- landing pages ---------- */
.lander-top{background:var(--bark);padding:18px 0;border-bottom:3px solid var(--cedar);}
.lander-top .wrap{display:flex;justify-content:center;}
.lander-top img{width:150px;}

.lander{padding:54px 0 64px;}
.lander .wrap{max-width:780px;}
.lander h1{
  font-size:clamp(28px,4.6vw,46px);line-height:1.15;
  margin:0 0 16px;color:var(--bark);letter-spacing:.5px;
}
.lander .sub{font-size:clamp(18px,2.2vw,22px);color:#574d46;margin:0 0 34px;}

.offer{
  background:#fff;border:1px solid var(--rule);border-top:4px solid var(--cedar);
  border-radius:6px;padding:30px 32px;margin:0 0 34px;
}
.offer h2{font-size:23px;margin:0 0 16px;}
.offer ul{margin:0;padding-left:0;list-style:none;}
.offer li{
  position:relative;padding-left:30px;margin-bottom:13px;font-size:17px;line-height:1.55;
}
.offer li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:3px;background:var(--cedar);border-radius:2px;
}
.offer li b{color:var(--bark);}

.signup{
  background:var(--bark);border-radius:6px;padding:32px 34px 36px;color:var(--sap);
}
.signup h2{color:var(--cream);font-size:24px;margin:0 0 6px;}
.signup p.note{font-size:15.5px;color:#b9ac9f;margin:0 0 20px;max-width:none;}
.signup form{display:flex;flex-wrap:wrap;gap:12px;}
.signup input[type=email],.signup input[type=text]{
  flex:1 1 220px;min-width:0;
  font-family:var(--serif);font-size:17px;
  padding:13px 15px;border:2px solid #4a4038;border-radius:3px;
  background:#fff;color:var(--ink);
}
.signup input:focus{outline:none;border-color:var(--cedar);}
.signup button{
  font-family:var(--serif);font-size:14px;letter-spacing:2px;text-transform:uppercase;
  padding:13px 28px;border:2px solid var(--cedar);background:var(--cedar);color:#fff;
  border-radius:3px;cursor:pointer;flex:0 0 auto;
}
.signup button:hover{background:var(--heart);border-color:var(--heart);}
.signup .fineprint{font-size:13.5px;color:#9a8e84;margin:18px 0 0;max-width:none;}

.lander-proof{border-top:1px solid var(--rule);margin-top:44px;padding-top:34px;}
.lander-proof h3{font-size:19px;margin:0 0 10px;color:var(--bark);}
.lander-proof p{font-size:16.5px;color:#574d46;}
.backlink{
  display:inline-block;margin-top:26px;font-size:15px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--moss);
}

@media (max-width:600px){
  body{font-size:17px;}
  section{padding:46px 0;}
  .top .wrap{justify-content:center;}
  nav ul{gap:18px;justify-content:center;}
}