:root{
  --bg:#8d8d78;
  --paper:#d7cfaa;
  --ink:#171912;
  --green:#8ede32;
  --blue:#0e62c9;
  --rust:#a75a37;
  --panel:rgba(242,238,211,.86);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.13),transparent 25%),
    linear-gradient(135deg,#7d806a,#a29f83);
  color:var(--ink);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.13;
  background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.08) 4px);
}
.wrap{width:min(1180px,92%);margin:auto}
nav{
  position:sticky;top:0;z-index:20;
  background:rgba(20,21,16,.88);
  backdrop-filter:blur(12px);
  border-bottom:2px solid rgba(255,255,255,.08);
}
.navin{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px}
.logo{
  color:#fff;text-decoration:none;font-weight:900;letter-spacing:-1px;font-size:24px;
}
.logo span{color:var(--green)}
.links{display:flex;gap:9px;flex-wrap:wrap}
.links a,.btn{
  text-decoration:none;border:2px solid var(--ink);color:var(--ink);
  background:var(--paper);padding:10px 15px;border-radius:12px;font-weight:800;
  box-shadow:3px 3px 0 var(--ink);transition:.15s;
}
.links a{background:#f0ead1}
.links a:hover,.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;padding:70px 0 42px}
.kicker{font-weight:900;text-transform:uppercase;letter-spacing:2px}
h1{font-size:clamp(64px,10vw,150px);line-height:.78;margin:16px 0 30px;letter-spacing:-7px;text-transform:lowercase}
.hero p{font-size:19px;max-width:620px;line-height:1.55}
.heroimg,.cardimg{
  border:3px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink);overflow:hidden;background:#aaa78f
}
.heroimg img,.cardimg img{display:block;width:100%;height:100%;object-fit:cover}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn.green{background:var(--green)}
.btn.blue{background:#6ea6ea}
.btn.dark{background:#20231b;color:#fff}
.band{
  margin:18px 0 55px;border-block:3px solid var(--ink);background:var(--green);overflow:hidden;
  transform:rotate(-1deg)
}
.marquee{white-space:nowrap;font-weight:1000;font-size:26px;padding:13px 0;animation:scroll 17s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:30px 0 70px}
.info{
  background:var(--panel);border:3px solid var(--ink);padding:24px;border-radius:20px;
  box-shadow:7px 7px 0 var(--ink)
}
.info h3{margin-top:0;font-size:24px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:55px 0}
.pagehead{padding:70px 0 30px}
.pagehead h1{font-size:clamp(58px,9vw,120px)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:20px 0 80px}
.gallery .cardimg{aspect-ratio:1/1}
.note{background:#171912;color:#f2edd8;border-radius:18px;padding:24px;border:3px solid #000}
footer{background:#171912;color:#eee;padding:28px 0;margin-top:60px}
footer .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.small{opacity:.7;font-size:13px}
@media(max-width:800px){
  .hero,.split,.gallery,.grid3{grid-template-columns:1fr}
  h1{letter-spacing:-4px}
  .navin{align-items:flex-start;flex-direction:column}
}