/* Brat Generator - brat-generatorr.fun */
:root{
  --brat:#8ACE00;
  --brat-dark:#6fa700;
  --ink:#000;
  --bg:#8ACE00;
  --paper:#f4f4f0;
  --muted:#222;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Arial Narrow","Arial","Helvetica Neue",Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:18px;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:#000;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:#000;background:#000;color:var(--brat);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 22px}

/* HEADER */
.site-header{
  background:#000;color:var(--brat);
  position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--brat);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{font-size:26px;font-weight:900;letter-spacing:-1px;text-transform:lowercase;text-decoration:none;color:var(--brat)}
.brand:hover{background:none;color:#fff}
.nav-toggle{display:none;background:none;border:2px solid var(--brat);color:var(--brat);padding:6px 10px;font-size:18px;cursor:pointer;font-weight:700}
.main-nav ul{display:flex;gap:22px;list-style:none}
.main-nav a{color:var(--brat);text-decoration:none;font-weight:700;text-transform:lowercase;font-size:17px}
.main-nav a:hover{background:var(--brat);color:#000;padding:2px 6px}

/* HERO */
.hero{padding:70px 0 60px;text-align:center}
.hero h1{
  font-size:clamp(44px,8vw,96px);
  line-height:.95;letter-spacing:-3px;
  text-transform:lowercase;font-weight:900;
  filter:blur(.6px);margin-bottom:18px;
}
.hero p.lead{font-size:clamp(18px,2.2vw,22px);max-width:760px;margin:0 auto 28px;font-weight:600}
.hero-img{max-width:520px;margin:30px auto 0;border:3px solid #000}
.cta{display:inline-block;background:#000;color:var(--brat);padding:14px 28px;font-weight:900;text-transform:lowercase;text-decoration:none;border:3px solid #000;font-size:18px}
.cta:hover{background:var(--brat);color:#000}

/* SECTIONS */
section{padding:60px 0;border-top:3px solid #000}
section.alt{background:#000;color:var(--brat)}
section.alt a{color:var(--brat)}
section.alt h2{color:var(--brat)}
section.paper{background:var(--paper);color:#000}
h2{font-size:clamp(30px,5vw,54px);text-transform:lowercase;font-weight:900;letter-spacing:-1.5px;margin-bottom:22px;filter:blur(.3px)}
h3{font-size:clamp(20px,3vw,28px);text-transform:lowercase;font-weight:900;margin:24px 0 10px}
p{margin-bottom:16px;max-width:78ch}
section ul, section ol{margin:10px 0 18px 24px}
section li{margin-bottom:8px}

/* GRIDS */
.grid{display:grid;gap:22px;margin-top:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#000;color:var(--brat);padding:24px;border:3px solid #000}
.paper .card{background:#fff;color:#000;border:3px solid #000}
.card h3{margin-top:0;color:inherit}
.step-num{display:inline-block;background:var(--brat);color:#000;font-weight:900;font-size:28px;width:48px;height:48px;line-height:48px;text-align:center;border-radius:50%;margin-bottom:10px}

/* TABLE */
table{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;color:#000;border:3px solid #000}
th,td{padding:12px 14px;border:1px solid #000;text-align:left;font-size:16px}
th{background:#000;color:var(--brat);text-transform:lowercase}

/* FAQ */
details{background:#000;color:var(--brat);padding:16px 20px;margin-bottom:10px;border:2px solid #000;cursor:pointer}
details summary{font-weight:900;font-size:19px;text-transform:lowercase;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:10px}

/* BLOG */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.post-card{background:#000;color:var(--brat);border:3px solid #000;display:flex;flex-direction:column}
.post-card img{border-bottom:3px solid var(--brat)}
.post-card .body{padding:18px}
.post-card h3{margin:0 0 8px;color:var(--brat)}
.post-card a{color:var(--brat);text-decoration:none}
.post-card a:hover{background:var(--brat);color:#000}
.post-meta{font-size:14px;opacity:.8;margin-bottom:6px;text-transform:lowercase}

/* ARTICLE */
.article-hero{padding:50px 0 30px}
.article-hero h1{font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-2px;text-transform:lowercase;font-weight:900;filter:blur(.4px)}
.crumbs{font-size:14px;margin-bottom:18px;text-transform:lowercase}
.article-body{padding-bottom:60px}
.article-body img{margin:24px 0;border:3px solid #000;width:100%}
.article-body h2{font-size:clamp(26px,4vw,38px);margin-top:36px}
.article-body p{font-size:18px;max-width:72ch}

/* FORM */
form{max-width:560px;margin-top:24px}
label{display:block;font-weight:700;margin:14px 0 6px;text-transform:lowercase}
input,textarea{width:100%;padding:12px;border:3px solid #000;font-family:inherit;font-size:16px;background:#fff;color:#000}
textarea{min-height:140px;resize:vertical}
button[type=submit]{margin-top:16px;background:#000;color:var(--brat);border:3px solid #000;padding:12px 26px;font-weight:900;font-size:17px;text-transform:lowercase;cursor:pointer}
button[type=submit]:hover{background:var(--brat);color:#000}

/* FOOTER */
.site-footer{background:#000;color:var(--brat);padding:50px 0 30px;border-top:3px solid var(--brat);margin-top:40px}
.site-footer a{color:var(--brat);text-decoration:none}
.site-footer a:hover{background:var(--brat);color:#000;padding:0 4px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:30px}
.foot-grid h4{text-transform:lowercase;margin-bottom:10px;font-size:18px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:6px}
.foot-bot{border-top:1px solid var(--brat);padding-top:18px;font-size:14px;text-align:center;text-transform:lowercase}

/* RESPONSIVE */
@media(max-width:880px){
  .grid-3,.grid-4,.post-grid,.foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#000;border-top:3px solid var(--brat)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding:14px 22px;gap:14px}
  .grid-2,.grid-3,.grid-4,.post-grid,.foot-grid{grid-template-columns:1fr}
  .hero{padding:40px 0}
  section{padding:44px 0}
  body{font-size:17px}
}