* { box-sizing: border-box; }

:root{
  --paper:#f3eee3;
  --ink:#2f2a24;
  --earth:#8a5c3d;
  --clay:#b8794f;
  --olive:#66705a;
  --line:#cfc3b1;
}

html { scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.55;
}

.site-header{
  max-width:1180px;
  margin:0 auto;
  padding:24px 28px 14px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
}

.brand{
  color:var(--ink);
  text-decoration:none;
  font-size:clamp(1.4rem, 2.3vw, 2rem);
  font-weight:700;
  letter-spacing:-.02em;
}

.roof{
  display:inline-block;
  margin-right:8px;
  color:var(--earth);
  transform:translateY(-1px);
}

.small-note{
  font-family: Arial, Helvetica, sans-serif;
  font-size:.83rem;
  letter-spacing:.04em;
  color:#655c52;
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 60px;
}

.hero{
  min-height:620px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:58px;
  align-items:center;
  padding:70px 0 60px;
}

.eyebrow{
  margin:0 0 14px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.76rem;
  color:var(--earth);
}

h1,h2,p{ margin-top:0; }

h1{
  font-size:clamp(3rem, 6.3vw, 6.2rem);
  line-height:.96;
  letter-spacing:-.045em;
  margin-bottom:30px;
  font-weight:700;
}

h2{
  font-size:clamp(1.8rem, 3vw, 3rem);
  line-height:1.05;
  letter-spacing:-.025em;
}

.hero-copy p{
  max-width:700px;
  font-size:1.08rem;
}

.lead{
  font-size:clamp(1.2rem, 1.6vw, 1.45rem) !important;
  line-height:1.45;
}

.coming-soon{
  margin-top:28px;
  padding:18px 20px;
  border-left:5px solid var(--earth);
  background:rgba(255,255,255,.28);
  font-family:Arial, Helvetica, sans-serif;
}

.coming-soon strong{
  display:block;
  margin-bottom:3px;
}

.hero-art{
  min-height:500px;
  position:relative;
  overflow:hidden;
  background:#ded4bf;
  border:1px solid #bfb19c;
  transform:rotate(.5deg);
  box-shadow:7px 8px 0 rgba(70,55,40,.08);
}

.ground{
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:0;
  height:28%;
  background:#b69470;
  clip-path:polygon(0 22%,16% 13%,28% 23%,43% 14%,59% 19%,75% 8%,100% 18%,100% 100%,0 100%);
}

.sun{
  width:84px;
  height:84px;
  border:3px solid #b06f3e;
  border-radius:50%;
  position:absolute;
  right:13%;
  top:10%;
  opacity:.7;
}

.doghouse{
  position:absolute;
  width:64%;
  left:17%;
  bottom:13%;
}

.roof-shape{
  height:145px;
  background:var(--earth);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

.house-body{
  position:relative;
  height:235px;
  margin:0 10%;
  background:#a76543;
  border:7px solid #7c5038;
  border-top:none;
}

.door{
  position:absolute;
  width:42%;
  height:64%;
  left:29%;
  bottom:-1px;
  background:#3b2d24;
  border-radius:50% 50% 0 0;
}

.paw{
  position:absolute;
  right:8%;
  top:12%;
  color:#d6b08b;
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:.7;
  letter-spacing:2px;
  transform:rotate(8deg);
}

.paw span{
  display:block;
  font-size:23px;
  text-align:center;
  margin-top:4px;
}

.scribble{
  position:absolute;
  border:2px solid rgba(71,86,57,.55);
  border-radius:50%;
}

.scribble.one{
  width:180px;
  height:70px;
  left:-45px;
  top:80px;
  transform:rotate(-20deg);
}

.scribble.two{
  width:210px;
  height:90px;
  right:-75px;
  bottom:95px;
  transform:rotate(13deg);
}

.why,
.materials,
.note{
  border-top:1px solid var(--line);
  padding:58px 0;
}

.why{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
}

.why p,
.materials p,
.note p{
  font-size:1.15rem;
}

.materials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}

.material-list{
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.85;
}

.mission{
  margin:15px 0 55px;
  padding:52px;
  background:#5d6754;
  color:#f5f0e6;
  transform:rotate(-.2deg);
}

.big-line{
  margin:.1em 0;
  font-size:clamp(2rem, 4.8vw, 4.7rem);
  line-height:1.05;
  letter-spacing:-.03em;
}

.note{
  text-align:center;
}

.note p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.domain-note{
  font-family:Arial, Helvetica, sans-serif;
  font-size:.9rem !important;
  letter-spacing:.07em;
  text-transform:uppercase;
}

footer{
  border-top:1px solid var(--line);
  padding:24px 28px 34px;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.82rem;
  color:#6c6257;
}

@media (max-width: 820px){
  .site-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:25px;
    padding-top:45px;
  }

  .hero-art{
    min-height:390px;
  }

  .why,
  .materials{
    grid-template-columns:1fr;
    gap:12px;
  }

  .mission{
    padding:34px 25px;
  }

  footer{
    flex-direction:column;
  }
}

@media (max-width: 520px){
  main,
  .site-header{
    padding-left:20px;
    padding-right:20px;
  }

  h1{
    font-size:3.15rem;
  }

  .hero-art{
    min-height:330px;
  }
}


/* Documentary hero image */
.hero-photo{
  margin:0;
  align-self:center;
  transform:rotate(.35deg);
}

.hero-photo img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  object-position:center;
  border:1px solid #b9aa95;
  box-shadow:8px 9px 0 rgba(70,55,40,.09);
}

.hero-photo figcaption{
  margin-top:10px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.78rem;
  letter-spacing:.04em;
  color:#71675c;
}

@media (max-width:820px){
  .hero-photo img{
    aspect-ratio: 16 / 10;
  }
}


/* =========================================================
   AdobeDoghouse V4 — Full-photo hero correction
   Goal: show doghouse + dog + BOTH kids with no crop.
   ========================================================= */

.hero{
  display:grid !important;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  gap:46px !important;
  align-items:center !important;
  padding:58px 0 54px !important;
}

.hero-copy-v4 h1{
  font-size:clamp(3.2rem, 5.35vw, 5.7rem) !important;
  line-height:.98 !important;
  max-width:7.5ch;
  margin-bottom:26px !important;
}

.hero-copy-v4 .lead{
  max-width:620px;
}

.hero-photo{
  margin:0 !important;
  align-self:center !important;
  transform:none !important;
  width:100% !important;
}

.hero-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  border:1px solid #b9aa95 !important;
  box-shadow:8px 9px 0 rgba(70,55,40,.09) !important;
}

.hero-photo figcaption{
  margin-top:10px !important;
}

@media (min-width: 1100px){
  main{
    max-width:1280px !important;
  }
  .site-header{
    max-width:1280px !important;
  }
}

@media (max-width: 980px){
  .hero{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .hero-copy-v4 h1{
    max-width:none;
    font-size:clamp(3rem, 8vw, 5rem) !important;
  }

  .hero-photo img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

@media (max-width: 560px){
  .hero{
    padding-top:38px !important;
  }

  .hero-copy-v4 h1{
    font-size:clamp(2.8rem, 13vw, 4rem) !important;
  }
}