:root{
  --ink:#161615;
  --paper:#f2dfbd;
  --paper2:#d9b77d;
  --red:#b74831;
  --blue:#24485c;
  --green:#66722b;
  --gold:#d3a24f;
  --black:#101010;
  --cream:#f7ebcf;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Work Sans",system-ui,sans-serif;
  line-height:1.5;
}

.noise{
  pointer-events:none;
  position:fixed;
  inset:0;
  opacity:.12;
  background-image:
    radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1px);
  background-size:28px 28px, 41px 41px;
  mix-blend-mode:overlay;
  z-index:10;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem clamp(1rem,4vw,3rem);
  background:rgba(16,16,16,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(247,235,207,.15);
}

.brand{
  display:grid;
  color:var(--cream);
  text-decoration:none;
  line-height:.9;
}
.brand-kicker{
  font-family:"Special Elite",monospace;
  color:var(--gold);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.brand-main{
  font-family:"Rye",serif;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--red);
  text-shadow:2px 2px 0 #000;
}

nav{display:flex;gap:1rem;flex-wrap:wrap}
nav a{
  color:var(--cream);
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.08em;
}
nav a:hover{color:var(--gold)}

.hero{
  min-height:86vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  padding:clamp(2rem,6vw,6rem) clamp(1rem,5vw,5rem);
  background:
    radial-gradient(circle at top right, rgba(180,72,49,.3), transparent 35%),
    linear-gradient(145deg, #141f22, #111);
}

.hero h1{
  margin:.4rem 0 1rem;
  max-width:14ch;
  font-family:"Rye",serif;
  font-size:clamp(2.2rem,5.5vw,4.6rem);
  line-height:.96;
  color:var(--cream);
  text-shadow:4px 4px 0 #000;
}

.eyebrow{
  margin:0 0 .7rem;
  font-family:"Special Elite",monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold);
  font-weight:700;
}

.lead{
  max-width:46rem;
  font-size:clamp(1.05rem,2vw,1.35rem);
  color:#ead9ba;
}

.hero-buttons{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.button, button{
  border:2px solid var(--cream);
  padding:.9rem 1.15rem;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
}
.button{text-decoration:none}
.primary, button{
  background:var(--red);
  color:#fff;
  box-shadow:4px 4px 0 #000;
}
.ghost{color:var(--cream);background:transparent}

.hero-card{
  transform:rotate(1.5deg);
  border:10px solid var(--paper);
  background:var(--paper);
  box-shadow:0 25px 70px rgba(0,0,0,.55);
}
.hero-card img{display:block;width:100%;height:auto}

.ticker{
  display:flex;
  gap:2rem;
  overflow:hidden;
  padding:.85rem 1rem;
  border-block:3px solid var(--black);
  background:var(--gold);
  color:var(--black);
  font-family:"Special Elite",monospace;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.section{
  padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,5rem);
  background:var(--paper);
  color:var(--ink);
}
section[id],#mint-products{scroll-margin-top:84px}
.section.dark{
  background:#121a1c;
  color:var(--cream);
}
.section-heading{
  max-width:820px;
  margin:0 auto 2rem;
  text-align:center;
}
.section h2,.manifesto h2,.signup h2{
  margin:.25rem 0;
  font-family:"Rye",serif;
  font-size:clamp(2rem,5vw,4.4rem);
  line-height:1;
}

.product-grid{
  display:grid;
  gap:1.4rem;
}
.product-grid.two{grid-template-columns:repeat(2,1fr)}
.product-grid.three{grid-template-columns:repeat(3,1fr)}

.product-card{
  background:rgba(255,255,255,.35);
  border:2px solid rgba(22,22,21,.25);
  box-shadow:8px 8px 0 rgba(0,0,0,.18);
  padding:1rem;
}
.dark .product-card{background:rgba(255,255,255,.06);border-color:rgba(247,235,207,.2)}
.product-card img{
  width:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:contain;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.35);
}
.product-card h3{
  margin:1rem 0 .35rem;
  font-size:1.3rem;
}
.product-card a{color:var(--red);font-weight:900}

.feature-split{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:2rem;
  align-items:center;
}
.feature-split img{
  width:100%;
  border:8px solid var(--paper2);
  box-shadow:12px 12px 0 rgba(0,0,0,.45);
}
.fair-copy{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(247,235,207,.2);
  padding:1.4rem;
}
.fair-copy h3{
  margin-top:0;
  font-family:"Rye",serif;
  color:var(--gold);
  font-size:2rem;
}
li{margin:.55rem 0}

.manifesto{
  padding:clamp(3rem,7vw,6rem) clamp(1rem,8vw,8rem);
  background:
    linear-gradient(rgba(18,26,28,.85), rgba(18,26,28,.88)),
    url("assets/swamp_poster_a.png") center/cover;
  text-align:center;
}
.manifesto p{
  max-width:850px;
  margin-inline:auto;
  font-size:1.15rem;
}
.stamp{
  display:inline-block;
  margin-top:1rem!important;
  padding:.75rem 1rem;
  border:4px solid var(--red);
  color:var(--red);
  background:rgba(0,0,0,.45);
  transform:rotate(-2deg);
  font-family:"Special Elite",monospace;
  text-transform:uppercase;
  font-weight:900;
}

.signup{
  padding:clamp(3rem,7vw,5rem) clamp(1rem,5vw,5rem);
  background:var(--red);
  color:#fff;
  text-align:center;
}
form{max-width:620px;margin:1rem auto 0}
label{
  display:block;
  text-align:left;
  font-weight:800;
  margin-bottom:.4rem;
}
.form-row{display:flex;gap:.5rem}
input{
  flex:1;
  min-width:0;
  border:0;
  border-radius:999px;
  padding:1rem 1.2rem;
  font:inherit;
}
small{display:block;margin-top:.65rem;color:#ffe8dd}

footer{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.3rem clamp(1rem,5vw,5rem);
  background:#090909;
  color:#c8bda8;
  font-size:.9rem;
}

@media (max-width:900px){
  .hero,.feature-split,.product-grid.two,.product-grid.three{grid-template-columns:1fr}
  .hero h1{max-width:100%}
  nav{display:none}
  .form-row{flex-direction:column}
}


.mint{
  background:
    radial-gradient(circle at top left, rgba(183,72,49,.18), transparent 30%),
    linear-gradient(180deg, #efe0bf, #d4b174);
}
.mint-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  max-width:1180px;
  margin:0 auto 2rem;
}
.mint-note{
  background:#efe0bf;
  padding:.85rem;
  border:3px solid rgba(22,22,21,.35);
  box-shadow:12px 12px 0 rgba(0,0,0,.22);
  transform:rotate(-1deg);
}
.mint-note img{
  display:block;
  width:100%;
  height:auto;
}
.mint-copy{
  background:rgba(22,22,21,.9);
  color:var(--cream);
  padding:clamp(1.2rem,3vw,2rem);
  border:2px solid var(--gold);
  box-shadow:8px 8px 0 rgba(0,0,0,.26);
}
.mint-copy h3{
  margin:.3rem 0 .6rem;
  font-family:"Rye",serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1;
  color:var(--gold);
}
.rating{
  color:var(--gold);
  font-family:"Special Elite",monospace;
  text-transform:uppercase;
}
.currency-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  max-width:1180px;
  margin:2rem auto;
}
.currency-grid article{
  background:rgba(255,255,255,.45);
  color:var(--ink);
  border:2px dashed rgba(22,22,21,.45);
  padding:1rem;
  min-height:230px;
  box-shadow:6px 6px 0 rgba(0,0,0,.14);
}
.currency-grid span{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  padding:.25rem .5rem;
  font-size:.75rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.currency-grid h3{
  margin:.8rem 0 .4rem;
  font-family:"Special Elite",monospace;
  font-size:1.45rem;
}
.currency-grid strong{
  display:block;
  margin-top:1rem;
  font-size:1.25rem;
  color:var(--red);
}
.reviews-faq{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  max-width:1180px;
  margin:2rem auto;
}
.reviews-faq > div{
  background:rgba(22,22,21,.88);
  color:var(--cream);
  padding:1.2rem;
  border:2px solid rgba(211,162,79,.7);
}
.reviews-faq h3{
  margin-top:0;
  font-family:"Rye",serif;
  color:var(--gold);
}
blockquote{
  margin:1rem 0;
  padding-left:1rem;
  border-left:4px solid var(--red);
  font-family:"Special Elite",monospace;
}
details{
  border-top:1px solid rgba(247,235,207,.25);
  padding:.75rem 0;
}
summary{
  cursor:pointer;
  font-weight:900;
}
.legal-bog{
  max-width:950px;
  margin:2rem auto 0;
  padding:1rem;
  background:rgba(183,72,49,.14);
  border:2px solid rgba(183,72,49,.45);
  font-family:"Special Elite",monospace;
}
@media (max-width:900px){
  .mint-hero,.currency-grid,.reviews-faq{grid-template-columns:1fr}
}


.mint-collection-banner{
  max-width:1180px;
  margin:2rem auto;
  background:#efe0bf;
  padding:.8rem;
  border:3px solid rgba(22,22,21,.35);
  box-shadow:10px 10px 0 rgba(0,0,0,.18);
}
.mint-collection-banner img{
  width:100%;
  display:block;
  height:auto;
}