/* GRUNGEzhou Universe — xerox/brutalist ink system. Fast by design: no webfonts, no frameworks. */
:root{
  --paper:#f2ede1; --ink:#141414; --red:#b3202c; --mut:#6b6455;
  --rule:3px solid var(--ink);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0 auto; max-width:760px; padding:0 20px 60px;
  background:var(--paper); color:var(--ink);
  font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.65;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* masthead */
.masthead{border-bottom:var(--rule); padding:22px 0 14px; margin-bottom:8px}
.brand{
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif; font-weight:900;
  font-size:30px; letter-spacing:1px; text-decoration:none; color:var(--ink);
  display:inline-block; margin-bottom:10px;
}
.brand span{color:var(--red)}
.brand em{font-style:normal; font-size:13px; letter-spacing:4px; vertical-align:super; margin-left:6px; color:var(--mut)}
.masthead nav{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.masthead nav a{
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:15px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:2px solid transparent;
}
.masthead nav a:hover{border-bottom-color:var(--red)}
.pill{border:2px solid var(--ink); padding:3px 10px; border-radius:20px}
.pill:hover{background:var(--ink); color:var(--paper)}
.pill.ghost{border-style:dashed}
/* type */
h1,h2,h3{
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-weight:900; letter-spacing:.5px; line-height:1.15; text-transform:uppercase;
}
h1{font-size:40px; margin:28px 0 6px}
h2{font-size:26px; margin:34px 0 8px; border-top:var(--rule); padding-top:14px}
h3{font-size:20px; margin:26px 0 6px}
main > p:first-of-type{font-size:20px}
a{color:var(--red)}
a:hover{color:var(--ink)}
.kicker{
  font-family:"Arial Narrow",Arial,sans-serif; font-weight:700; font-size:14px;
  letter-spacing:4px; color:var(--red); margin:26px 0 -14px;
}
.dek{color:var(--mut); font-style:italic; margin-top:0}
hr{border:none; border-top:var(--rule); margin:30px 0}
blockquote{
  border-left:6px solid var(--red); margin:24px 0; padding:6px 0 6px 18px;
  font-style:italic; font-size:19px;
}
ul,ol{padding-left:24px}
li{margin-bottom:8px}
/* cards for indexes */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0}
.card{
  border:var(--rule); padding:16px; text-decoration:none; color:var(--ink);
  box-shadow:5px 5px 0 var(--ink); background:#fffdf6; display:block;
}
.card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--red)}
.card h3{margin:0 0 6px; font-size:19px}
.card p{margin:0; font-size:15px; color:var(--mut); line-height:1.5}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
/* capture block */
.capture{
  border:var(--rule); background:#141414; color:var(--paper);
  padding:26px 24px; margin:40px 0; box-shadow:8px 8px 0 var(--red);
}
.capture h2{border:none; margin:0 0 8px; padding:0; color:var(--paper)}
.capture p{color:#d8d2c2}
.capture-form{display:flex; gap:10px; margin:16px 0 8px; flex-wrap:wrap}
.capture-form input{
  flex:1; min-width:200px; padding:12px; font-size:16px;
  border:2px solid var(--paper); background:transparent; color:var(--paper);
}
.capture-form button{
  padding:12px 22px; font-family:"Arial Narrow",Arial,sans-serif; font-weight:900;
  letter-spacing:2px; text-transform:uppercase; font-size:15px;
  background:var(--red); color:#fff; border:2px solid var(--red); cursor:pointer;
}
.capture-form button:hover{background:#fff; color:var(--red)}
.fine{font-size:13px; color:var(--mut)}
.capture .fine{color:#a49c86}
/* buy box */
.buybox{border:var(--rule); padding:18px; margin:26px 0; background:#fffdf6; box-shadow:5px 5px 0 var(--ink)}
.buybox .price{font-family:"Arial Narrow",Arial,sans-serif; font-weight:900; font-size:24px}
.buybox a.btn{
  display:inline-block; margin-top:10px; padding:12px 24px; background:var(--ink); color:var(--paper);
  font-family:"Arial Narrow",Arial,sans-serif; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; font-size:16px;
}
.buybox a.btn:hover{background:var(--red)}
/* footer */
footer{border-top:var(--rule); margin-top:50px; padding-top:18px}
.slogan{font-size:20px; font-style:italic}
.slogan span{font-style:normal; font-size:15px; color:var(--mut)}
.links{font-size:15px; line-height:2}