:root{
  --yellow:#facc15;
  --black:#000000;
  --gray:#e5e7eb; /* light gray background */
  --content-max:1100px;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--gray);
  color:#111;
  line-height:1.6;
  padding-bottom:84px; /* space for fixed footer */
}

img{max-width:100%;height:auto;border:6px solid var(--yellow);border-radius:12px}

.container{max-width:var(--content-max);margin:0 auto;padding:0 1rem}

.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--black);color:var(--yellow);
  border-bottom:2px solid var(--yellow);
}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;gap:.75rem}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--yellow)}
.brand svg{width:40px;height:40px;display:block}
.brand .title{font-weight:800;letter-spacing:.3px}

nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
nav a{color:var(--yellow);text-decoration:none;font-weight:600}
nav a:hover, nav a:focus{opacity:.85;text-decoration:underline}

.cta{
  display:inline-block;padding:.8rem 1.1rem;border-radius:999px;
  background:var(--yellow);color:#111;text-decoration:none;font-weight:800;
  border:2px solid #111; box-shadow:0 2px 0 #111;
}
.cta:active{transform:translateY(1px);box-shadow:0 1px 0 #111}

.hero{padding:3rem 0 2rem}
.hero h1{font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem);margin:.2rem 0}
.hero p{font-size:clamp(1rem, .5vw + .9rem, 1.1rem);max-width:60ch}

.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px,1fr));gap:1rem;margin:1.25rem 0}
.card{background:white;border-radius:var(--radius);padding:1rem;border:2px solid #111;box-shadow:0 6px 0 #111}
.card h3{margin-top:0}

.section{padding:2.5rem 0}
.section h2{margin:0 0 .5rem;font-size:1.6rem}

.parallax{
  min-height:48vh;
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  display:grid;place-items:center;
  text-align:center;color:#111;
  border-top:6px solid var(--yellow);border-bottom:6px solid var(--yellow)
}
.parallax .overlay{
  background:rgba(250, 204, 21, 0.2);
  backdrop-filter:saturate(1.3) contrast(1.05);
  padding:1rem 1.25rem;border-radius:var(--radius);
  border:2px solid #111
}

blockquote{
  margin:0;padding:1rem;border-left:6px solid var(--yellow);background:white;border-radius:0 12px 12px 0
}

.site-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:var(--black);color:var(--yellow);
  border-top:2px solid var(--yellow);
}
.site-footer .inner{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;flex-wrap:wrap}
.small{opacity:.8;font-size:.925rem}

/* Hamburger (CSS-only) */
#nav-toggle{display:none}
.hamburger{display:none;gap:6px;flex-direction:column;cursor:pointer}
.hamburger span{display:block;width:28px;height:3px;background:var(--yellow);border-radius:2px}

/* Mobile nav panel */
@media (max-width: 860px){
  nav ul{display:none;flex-direction:column;background:var(--black);padding:1rem;border:2px solid var(--yellow);border-radius:12px;position:absolute;right:1rem;top:60px}
  #nav-toggle:checked ~ nav ul{display:flex}
  .hamburger{display:flex}
}

/* Utility */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px,1fr));gap:1rem}
.muted{opacity:.85}
figure{margin:0}
figcaption{font-size:.9rem}

/* Forms (Blog) */
form{display:grid;gap:.75rem}
input[type="text"], textarea{
  width:100%;padding:.8rem;border:2px solid #111;border-radius:12px;background:white
}
button, .btn{
  padding:.75rem 1rem;border-radius:12px;border:2px solid #111;background:var(--yellow);font-weight:800;cursor:pointer
}
.blog-placeholder{background:white;border:2px dashed #111;border-radius:12px;padding:1rem}
.blog-item{background:white;border:2px solid #111;border-radius:12px;padding:1rem;margin:.75rem 0}